vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 17:38:54 +08:00
parent 0e32076e71
commit cb4c51a958
65 changed files with 39193 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

601
public/htmls/磷化工六氟磷酸锂.html Normal file
View File

@@ -0,0 +1,601 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>磷化工六氟磷酸锂 - 深度投资分析</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.price-chart {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
.glow {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass-effect text-white">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-bolt text-2xl text-yellow-400"></i>
<span class="text-xl font-bold">LiPF₆ 深度分析</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#overview" class="hover:text-yellow-400 transition">概念概览</a>
<a href="#timeline" class="hover:text-yellow-400 transition">时间轴</a>
<a href="#companies" class="hover:text-yellow-400 transition">核心公司</a>
<a href="#risks" class="hover:text-yellow-400 transition">风险分析</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg min-h-screen flex items-center justify-center text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-20">
<div class="absolute top-10 left-10 w-72 h-72 bg-yellow-400 rounded-full filter blur-3xl float-animation"></div>
<div class="absolute bottom-10 right-10 w-96 h-96 bg-purple-400 rounded-full filter blur-3xl float-animation" style="animation-delay: 3s;"></div>
</div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-bold mb-6">
磷化工六氟磷酸锂
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">
供需逆转引爆价格暴涨 | 周期底部迎来强劲反转
</p>
<div class="flex justify-center space-x-8 mb-12">
<div class="text-center">
<div class="text-4xl font-bold text-yellow-400">76.23%</div>
<div class="text-sm opacity-80">价格涨幅</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-green-400">10.75万</div>
<div class="text-sm opacity-80">当前价格(元/吨)</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-blue-400">70%+</div>
<div class="text-sm opacity-80">龙头市场份额</div>
</div>
</div>
<div class="flex justify-center space-x-4">
<button onclick="document.getElementById('overview').scrollIntoView()" class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition">
深入了解
</button>
<button onclick="document.getElementById('companies').scrollIntoView()" class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition">
查看标的
</button>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<i class="fas fa-chevron-down text-3xl"></i>
</div>
</section>
<!-- Overview Section -->
<section id="overview" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">核心逻辑分析</h2>
<p class="text-xl text-gray-600">供需双击下的超级周期</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-arrow-trend-up text-green-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800">需求端超预期</h3>
</div>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>国内"以旧换新"政策刺激年末抢装</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>海外储能需求持续旺盛，成为新增量</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>2024年10月电池产量创历史新高113.1GWh</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span>2025年预计需求21-23万吨，增速20%+</span>
</li>
</ul>
</div>
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-warehouse text-red-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800">供给端刚性约束</h3>
</div>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>高成本产能已实质性关停，行业深度洗牌</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>头部企业扩产谨慎，需长期订单支撑</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>呆滞产能5万吨重启门槛高（需10万+价格）</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
<span>CR3超70%，龙头产能利用率80%+</span>
</li>
</ul>
</div>
</div>
<!-- Price Chart -->
<div class="bg-white rounded-2xl p-8 shadow-lg">
<h3 class="text-2xl font-bold text-gray-800 mb-6">价格走势图</h3>
<div class="price-chart rounded-lg p-4">
<canvas id="priceChart" height="100"></canvas>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section id="timeline" class="py-20 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">关键时间轴</h2>
<p class="text-xl text-gray-600">从低谷到狂热的演变历程</p>
</div>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-purple-500 to-yellow-500"></div>
<!-- Timeline Events -->
<div class="space-y-12">
<div class="flex items-center justify-end md:w-1/2 pr-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-purple-600 font-semibold mb-2">2024年11月</div>
<div class="text-lg font-bold text-gray-800 mb-2">价格触底反弹</div>
<div class="text-gray-600">价格从底部上涨3.7%至5.65万元/吨，行业毛利润由亏转盈</div>
</div>
<div class="absolute right-0 w-4 h-4 bg-purple-500 rounded-full timeline-dot transform translate-x-1/2"></div>
</div>
<div class="flex items-center justify-start md:w-1/2 md:ml-auto pl-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-blue-600 font-semibold mb-2">2025年9月</div>
<div class="text-lg font-bold text-gray-800 mb-2">预期发酵</div>
<div class="text-gray-600">中金报告指出最先触底涨价，价格从5.0涨至5.7万元/吨</div>
</div>
<div class="absolute left-0 w-4 h-4 bg-blue-500 rounded-full timeline-dot transform -translate-x-1/2"></div>
</div>
<div class="flex items-center justify-end md:w-1/2 pr-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-green-600 font-semibold mb-2">2025年10月</div>
<div class="text-lg font-bold text-gray-800 mb-2">价格暴涨</div>
<div class="text-gray-600">单月上涨44%，十天跳涨33%，市场情绪被点燃</div>
</div>
<div class="absolute right-0 w-4 h-4 bg-green-500 rounded-full timeline-dot transform translate-x-1/2"></div>
</div>
<div class="flex items-center justify-start md:w-1/2 md:ml-auto pl-8 relative">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="text-sm text-yellow-600 font-semibold mb-2">2025年11月</div>
<div class="text-lg font-bold text-gray-800 mb-2">价格登顶</div>
<div class="text-gray-600">突破10.75万元/吨，较9月底暴涨76.23%，"要签长协得先给钱"</div>
</div>
<div class="absolute left-0 w-4 h-4 bg-yellow-500 rounded-full timeline-dot transform -translate-x-1/2"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Companies Section -->
<section id="companies" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">核心公司对比</h2>
<p class="text-xl text-gray-600">行业龙头价值深度剖析</p>
</div>
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="gradient-bg text-white">
<tr>
<th class="px-6 py-4 text-left">公司</th>
<th class="px-6 py-4 text-left">核心优势</th>
<th class="px-6 py-4 text-center">产能(万吨)</th>
<th class="px-6 py-4 text-center">25年出货预期</th>
<th class="px-6 py-4 text-center">产能利用率</th>
<th class="px-6 py-4 text-center">投资评级</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-purple-600">天赐</span>
</div>
<div>
<div class="font-semibold">天赐材料</div>
<div class="text-sm text-gray-500">002709.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
绝对领导者
</span>
<div class="text-sm text-gray-600 mt-1">规模最大、深度绑定宁德</div>
</td>
<td class="px-6 py-4 text-center font-semibold">11</td>
<td class="px-6 py-4 text-center">9万吨</td>
<td class="px-6 py-4 text-center">
<span class="text-green-600 font-semibold">80%+</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★★★★</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-blue-600">多氟</span>
</div>
<div>
<div class="font-semibold">多氟多</div>
<div class="text-sm text-gray-500">002407.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
成本领先
</span>
<div class="text-sm text-gray-600 mt-1">氟化工背景深厚</div>
</td>
<td class="px-6 py-4 text-center font-semibold">5.5</td>
<td class="px-6 py-4 text-center">5万吨</td>
<td class="px-6 py-4 text-center">
<span class="text-green-600 font-semibold">80%+</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★★★☆</span>
</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-green-600">天际</span>
</div>
<div>
<div class="font-semibold">天际股份</div>
<div class="text-sm text-gray-500">002759.SZ</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
高弹性
</span>
<div class="text-sm text-gray-600 mt-1">经营杠杆高</div>
</td>
<td class="px-6 py-4 text-center font-semibold">3.7</td>
<td class="px-6 py-4 text-center">3.6万吨</td>
<td class="px-6 py-4 text-center">
<span class="text-green-600 font-semibold">100%</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★★☆☆</span>
</td>
</tr>
<tr class="hover:bg-gray-50 transition">
<td class="px-6 py-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
<span class="font-bold text-yellow-600">云天</span>
</div>
<div>
<div class="font-semibold">云天化</div>
<div class="text-sm text-gray-500">600096.SH</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
一体化
</span>
<div class="text-sm text-gray-600 mt-1">磷化工整合逻辑</div>
</td>
<td class="px-6 py-4 text-center font-semibold">0.5</td>
<td class="px-6 py-4 text-center">-</td>
<td class="px-6 py-4 text-center">
<span class="text-gray-600">-</span>
</td>
<td class="px-6 py-4 text-center">
<span class="text-yellow-500">★★☆☆☆</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Risks Section -->
<section id="risks" class="py-20 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">风险提示</h2>
<p class="text-xl text-gray-600">投资需警惕的潜在风险</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-microchip text-red-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">技术风险</h3>
<p class="text-gray-600 text-sm">固态电池长期可能颠覆液态电解液格局，但2030年前威胁有限</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-chart-line text-orange-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">价格风险</h3>
<p class="text-gray-600 text-sm">10万+高价可持续性存疑，或刺激替代品研发</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-industry text-yellow-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">产能风险</h3>
<p class="text-gray-600 text-sm">5万吨呆滞产能若重启将打破供需平衡</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-gavel text-blue-600 text-xl"></i>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">政策风险</h3>
<p class="text-gray-600 text-sm">新能源汽车补贴退坡可能影响下游需求</p>
</div>
</div>
</div>
</section>
<!-- Future Outlook -->
<section class="py-20">
<div class="container mx-auto px-4">
<div class="gradient-bg rounded-3xl p-12 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-white opacity-5 rounded-full -mr-48 -mt-48"></div>
<div class="relative z-10">
<h2 class="text-4xl font-bold mb-6">未来展望</h2>
<div class="grid md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-yellow-400">短期（3-6个月）</h3>
<ul class="space-y-2 text-white/90">
<li>• Q1财报验证利润兑现</li>
<li>• 长协价格落地执行</li>
<li>• 呆滞产能动态监控</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-green-400">中期（1-2年）</h3>
<ul class="space-y-2 text-white/90">
<li>• 维持紧平衡格局</li>
<li>• 龙头份额持续提升</li>
<li>• 磷化工一体化深化</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-400">长期（3-5年）</h3>
<ul class="space-y-2 text-white/90">
<li>• 固态电池技术迭代</li>
<li>• 海外产能全球化布局</li>
<li>• 产业链护城河构建</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4">
<div class="text-center">
<p class="text-gray-400">© 2025 深度投资分析 | 基于公开数据整理 | 投资有风险，入市需谨慎</p>
</div>
</div>
</footer>
<script>
// Scroll Reveal
ScrollReveal().reveal('.card-hover', {
interval: 100,
distance: '50px',
duration: 1000,
origin: 'bottom'
});
// Price Chart
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2024年11月', '2025年1月', '2025年3月', '2025年5月', '2025年7月', '2025年9月', '2025年11月'],
datasets: [{
label: '六氟磷酸锂价格(万元/吨)',
data: [5.65, 5.8, 6.2, 6.5, 7.8, 9.5, 10.75],
borderColor: 'rgb(99, 102, 241)',
backgroundColor: 'rgba(99, 102, 241, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4,
pointRadius: 6,
pointBackgroundColor: 'rgb(99, 102, 241)',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointHoverRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 12,
titleFont: {
size: 14
},
bodyFont: {
size: 16,
weight: 'bold'
},
callbacks: {
label: function(context) {
return '价格: ¥' + context.parsed.y + '万/吨';
}
}
}
},
scales: {
y: {
beginAtZero: false,
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
callback: function(value) {
return '¥' + value + '万';
}
}
},
x: {
grid: {
display: false
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add parallax effect to hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.gradient-bg');
if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
</script>
</body>
</html>