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

init

Browse Source
This commit is contained in:
zzlgreat
2025-11-05 10:56:56 +08:00
parent 467dad8449
commit fc37df4385
3499 changed files with 1063743 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

697
public/htmls/特斯拉储能.html Normal file
View File

@@ -0,0 +1,697 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<!-- Nucleo Icons -->
<link href="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/css/nucleo-svg.css" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- CSS Files -->
<link href="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/css/soft-design-system-pro.css?v=1.2.0" rel="stylesheet" />
<!-- Tailwind CSS and DaisyUI -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
.energy-gradient {
background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #3182ce 100%);
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #3182ce;
left: -8px;
top: 6px;
}
.timeline-line {
position: absolute;
width: 2px;
background-color: #cbd5e0;
left: 0;
top: 0;
bottom: 0;
margin-left: -1px;
}
.mermaid-placeholder {
background-color: #f7fafc;
border: 1px dashed #cbd5e0;
border-radius: 8px;
padding: 20px;
text-align: center;
color: #4a5568;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.content-wrapper {
position: relative;
z-index: 1;
}
</style>
</head>
<body class="bg-gray-50">
<div id="particles-js"></div>
<div class="content-wrapper min-h-screen py-8 px-4">
<div class="max-w-6xl mx-auto">
<!-- 标题区域 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">特斯拉储能概念分析</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">从产能验证到订单兑现，特斯拉储能成为第二增长曲线的核心引擎</p>
</div>
<!-- 概念事件时间轴 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-clock text-blue-500 mr-3"></i>概念事件时间轴
</h2>
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="timeline-dot">
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex flex-col md:flex-row md:items-center">
<span class="font-bold text-blue-700 min-w-[120px]">2024-05</span>
<div class="flex-1">
<h3 class="font-semibold text-gray-800">上海储能超级工厂开工</h3>
<p class="text-gray-600 text-sm mt-1">规划年产 <span class="font-bold text-blue-600">40GWh Megapack</span>，2025-Q1量产（新闻）</p>
</div>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex flex-col md:flex-row md:items-center">
<span class="font-bold text-blue-700 min-w-[120px]">2024-07</span>
<div class="flex-1">
<h3 class="font-semibold text-gray-800">特斯拉与Intersect Power签大单</h3>
<p class="text-gray-600 text-sm mt-1">金额 <span class="font-bold text-blue-600">>30亿美元</span>，<span class="font-bold text-blue-600">15.3GWh</span> 订单（路演）</p>
</div>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex flex-col md:flex-row md:items-center">
<span class="font-bold text-blue-700 min-w-[120px]">2024-Q4</span>
<div class="flex-1">
<h3 class="font-semibold text-gray-800">储能装机大幅增长</h3>
<p class="text-gray-600 text-sm mt-1">装机 <span class="font-bold text-blue-600">11GWh</span>（同比+244%），全年累计 <span class="font-bold text-blue-600">31.4GWh</span>（同比+114%）（业绩会）</p>
</div>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex flex-col md:flex-row md:items-center">
<span class="font-bold text-blue-700 min-w-[120px]">2025-02-11</span>
<div class="flex-1">
<h3 class="font-semibold text-gray-800">上海工厂正式投产</h3>
<p class="text-gray-600 text-sm mt-1">首台Megapack下线，产能爬坡启动（新闻）</p>
</div>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex flex-col md:flex-row md:items-center">
<span class="font-bold text-blue-700 min-w-[120px]">2025-07-29</span>
<div class="flex-1">
<h3 class="font-semibold text-gray-800">第1000台Megapack下线</h3>
<p class="text-gray-600 text-sm mt-1">产品将 <span class="font-bold text-blue-600">出口欧洲</span>（新闻）</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg p-6 mb-8 text-white">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-lightbulb mr-3"></i>核心观点摘要
</h2>
<div class="space-y-4">
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h3 class="font-bold text-lg mb-2">阶段判断</h3>
<p>特斯拉储能已从"产能验证"进入 <span class="font-bold text-yellow-300">"订单兑现+盈利释放"</span> 阶段，2025年将成为其 <span class="font-bold text-yellow-300">第二增长曲线</span> 的核心引擎。</p>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h3 class="font-bold text-lg mb-2">核心驱动力</h3>
<ul class="list-disc pl-5 space-y-2">
<li><span class="font-bold">上海工厂40GWh产能落地</span> 解决全球交付瓶颈</li>
<li><span class="font-bold">Megapack毛利率41%</span>（上海工厂）远超汽车业务（18%），盈利弹性显著</li>
<li><span class="font-bold">全球储能需求爆发</span>（中东/欧洲/美国合计2025年新增>100GWh）</li>
</ul>
</div>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-chart-line text-green-500 mr-3"></i>核心逻辑与市场认知分析
</h2>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-700 mb-4">核心驱动力拆解</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200 rounded-lg">
<thead class="bg-gray-50">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">维度</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">数据验证</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">逻辑推导</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">技术壁垒</td>
<td class="py-3 px-4 border-b">Megapack循环效率 <span class="font-bold text-blue-600">>90%</span>（行业最高），弱电网VSG技术领先（路演）</td>
<td class="py-3 px-4 border-b">技术溢价支撑 <span class="font-bold text-blue-600">1.8元/Wh</span> 售价（vs 国产0.7元/Wh）</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">成本曲线</td>
<td class="py-3 px-4 border-b">2023-2024年Megapack售价下降 <span class="font-bold text-blue-600">51%</span>（3.71→1.8元/Wh），毛利率反升至 <span class="font-bold text-blue-600">26%</span>（业绩会）</td>
<td class="py-3 px-4 border-b">规模效应+4680电池降本，成本优势固化</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">需求爆发</td>
<td class="py-3 px-4 border-b">沙特2025-2030年规划 <span class="font-bold text-blue-600">60-80GWh</span>，欧洲2025年需求 <span class="font-bold text-blue-600">15GWh</span>（路演）</td>
<td class="py-3 px-4 border-b">光储PPA模式强制配储（美国50%配储比例）</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-gray-50 rounded-lg p-5">
<h3 class="text-lg font-semibold text-gray-700 mb-3">市场热度与情绪</h3>
<div class="space-y-3">
<div>
<h4 class="font-medium text-gray-600">新闻热度</h4>
<p class="text-gray-800">2024年7月-2025年2月，特斯拉储能相关报道 <span class="font-bold text-blue-600">月均>50篇</span>（财联社/36氪），聚焦"上海工厂投产""欧洲出口"。</p>
</div>
<div>
<h4 class="font-medium text-gray-600">情绪分化</h4>
<ul class="list-disc pl-5 text-gray-800 space-y-1">
<li><span class="font-medium">乐观派</span>：认为储能业务2025年贡献 <span class="font-bold text-green-600">1800亿美元估值</span>（30倍PE，路演模型）</li>
<li><span class="font-medium">谨慎派</span>：担忧 <span class="font-bold text-red-600">中国厂商低价冲击</span>（远景8美分/Wh vs 特斯拉9美分/Wh，中东项目）</li>
</ul>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-5">
<h3 class="text-lg font-semibold text-gray-700 mb-3">预期差分析</h3>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="text-left text-sm text-gray-600">
<th class="pb-2">市场预期</th>
<th class="pb-2">实际进展</th>
<th class="pb-2">预期差</th>
</tr>
</thead>
<tbody class="text-sm">
<tr class="border-t border-gray-200">
<td class="py-2 pr-2">上海工厂2025-Q2投产</td>
<td class="py-2 px-2"><span class="font-bold text-green-600">2025-Q1已量产</span>（新闻）</td>
<td class="py-2 pl-2"><span class="font-bold text-green-600">提前1个季度</span>释放产能</td>
</tr>
<tr class="border-t border-gray-200">
<td class="py-2 pr-2">Megapack毛利率20%</td>
<td class="py-2 px-2"><span class="font-bold text-green-600">上海工厂41%</span>（路演）</td>
<td class="py-2 pl-2"><span class="font-bold text-green-600">超预期21pct</span></td>
</tr>
<tr class="border-t border-gray-200">
<td class="py-2 pr-2">欧洲市场依赖美国</td>
<td class="py-2 px-2"><span class="font-bold text-green-600">首批1000台出口欧洲</span>（新闻）</td>
<td class="py-2 pl-2"><span class="font-bold text-green-600">全球化加速</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- 催化剂与发展路径 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-rocket text-purple-500 mr-3"></i>催化剂与发展路径
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-purple-50 rounded-lg p-5">
<h3 class="text-lg font-semibold text-purple-700 mb-4">近期催化剂（3-6个月）</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-calendar-check text-purple-500 mt-1 mr-3"></i>
<div>
<span class="font-medium text-purple-700">2025-Q2</span>
<p class="text-gray-700">上海工厂产能利用率 <span class="font-bold text-purple-600">>80%</span>（当前爬坡中，验证交付能力）</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-calendar-check text-purple-500 mt-1 mr-3"></i>
<div>
<span class="font-medium text-purple-700">2025-06</span>
<p class="text-gray-700">沙特 <span class="font-bold text-purple-600">10GWh</span> 项目中标结果落地（特斯拉份额或达 <span class="font-bold text-purple-600">40%</span>，路演）</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-calendar-check text-purple-500 mt-1 mr-3"></i>
<div>
<span class="font-medium text-purple-700">2025-08</span>
<p class="text-gray-700">欧洲电网侧储能 <span class="font-bold text-purple-600">15GWh</span> 招标启动（特斯拉技术标优势）</p>
</div>
</li>
</ul>
</div>
<div class="bg-indigo-50 rounded-lg p-5">
<h3 class="text-lg font-semibold text-indigo-700 mb-4">长期路径（2025-2030）</h3>
<div class="mermaid-placeholder">
<div class="flex flex-col items-center justify-center h-full">
<i class="fas fa-project-diagram text-4xl text-indigo-400 mb-3"></i>
<p class="text-indigo-600 font-medium">发展路径图</p>
<p class="text-gray-600 text-sm mt-2">2025:产能80GWh → 2026:市占率25%→35% → 2027:储能收入>汽车业务 → 2030:全球储能龙头,市占率50%+</p>
</div>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-network-wired text-teal-500 mr-3"></i>产业链与核心公司
</h2>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-700 mb-4">产业链图谱</h3>
<div class="mermaid-placeholder">
<div class="flex flex-col items-center justify-center h-full">
<i class="fas fa-sitemap text-4xl text-teal-400 mb-3"></i>
<p class="text-teal-600 font-medium">产业链关系图</p>
<p class="text-gray-600 text-sm mt-2">上游(电池/材料) → 中游(系统集成) → 下游(项目运营)</p>
<p class="text-gray-600 text-sm">宁德时代(电芯) → 特斯拉(Megapack) → 沙特ACWA(项目)</p>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-700 mb-4">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200 rounded-lg">
<thead class="bg-gray-50">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">公司</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">角色</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">优势</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">风险</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">特斯拉</td>
<td class="py-3 px-4 border-b">系统集成+品牌</td>
<td class="py-3 px-4 border-b">技术溢价+全球订单</td>
<td class="py-3 px-4 border-b">中国产能依赖</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">宁德时代</td>
<td class="py-3 px-4 border-b">电芯供应商</td>
<td class="py-3 px-4 border-b">特斯拉上海工厂 <span class="font-bold text-blue-600">独家电芯</span>（路演）</td>
<td class="py-3 px-4 border-b">价格战压缩利润</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">阳光电源</td>
<td class="py-3 px-4 border-b">逆变器+集成</td>
<td class="py-3 px-4 border-b">中东项目 <span class="font-bold text-blue-600">8.5美分/Wh</span> 中标（路演）</td>
<td class="py-3 px-4 border-b">技术壁垒低于特斯拉</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">西典新能</td>
<td class="py-3 px-4 border-b">CCS组件</td>
<td class="py-3 px-4 border-b"><span class="font-bold text-blue-600">领先1-2代技术</span>（新闻）</td>
<td class="py-3 px-4 border-b">单一客户依赖</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-700 mb-4">验证与证伪</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-green-50 rounded-lg p-4 border border-green-200">
<h4 class="font-semibold text-green-700 mb-2 flex items-center">
<i class="fas fa-check-circle mr-2"></i>证真
</h4>
<p class="text-gray-700">上海工厂第1000台Megapack下线（新闻）→ 产能爬坡顺利</p>
</div>
<div class="bg-red-50 rounded-lg p-4 border border-red-200">
<h4 class="font-semibold text-red-700 mb-2 flex items-center">
<i class="fas fa-times-circle mr-2"></i>证伪
</h4>
<p class="text-gray-700">若2025-Q2沙特项目份额 <span class="font-bold text-red-600"><20%</span>，则"中东需求爆发"逻辑受损</p>
</div>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-exclamation-triangle text-yellow-500 mr-3"></i>潜在风险与挑战
</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200 rounded-lg">
<thead class="bg-gray-50">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">风险类型</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">具体表现</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">影响程度</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">技术风险</td>
<td class="py-3 px-4 border-b">4680电池良率 <span class="font-bold text-yellow-600"><90%</span>（业绩会提及报废率5.5%）</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">中</span>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">商业化风险</td>
<td class="py-3 px-4 border-b">中国厂商 <span class="font-bold text-yellow-600">远景8美分/Wh</span> 低价冲击（路演）</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">高</span>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">政策风险</td>
<td class="py-3 px-4 border-b">美国 <span class="font-bold text-yellow-600">25%关税</span> 或影响中国供应链（路演）</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">中</span>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">信息矛盾</td>
<td class="py-3 px-4 border-b">路演称"上海工厂毛利率41%"，但业绩会未披露具体数据 → <span class="font-bold text-yellow-600">需验证成本拆分</span></td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">高</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="bg-gradient-to-r from-teal-600 to-cyan-700 rounded-xl shadow-lg p-6 mb-8 text-white">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-flag-checkered mr-3"></i>综合结论与投资启示
</h2>
<div class="space-y-6">
<div class="bg-white bg-opacity-20 rounded-lg p-5">
<h3 class="font-bold text-lg mb-3">阶段判断</h3>
<p>特斯拉储能处于 <span class="font-bold text-yellow-300">"盈利兑现+全球化扩张"</span> 的 <span class="font-bold text-yellow-300">基本面驱动阶段</span>，非主题炒作。</p>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-5">
<h3 class="font-bold text-lg mb-3">投资方向</h3>
<ol class="list-decimal pl-5 space-y-2">
<li><span class="font-medium">特斯拉产业链</span>：<span class="font-bold text-yellow-300">宁德时代</span>（电芯）、<span class="font-bold text-yellow-300">西典新能</span>（CCS）、<span class="font-bold text-yellow-300">银轮股份</span>（温控）</li>
<li><span class="font-medium">替代逻辑</span>：若特斯拉份额超预期，<span class="font-bold text-yellow-300">阳光电源</span>（中东项目）可能受益配套需求</li>
</ol>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-5">
<h3 class="font-bold text-lg mb-3">跟踪指标</h3>
<ul class="list-disc pl-5 space-y-2">
<li><span class="font-medium">上海工厂产能利用率</span>（2025-Q2需 <span class="font-bold text-yellow-300">>80%</span>）</li>
<li><span class="font-medium">Megapack在手订单</span>（当前 <span class="font-bold text-yellow-300">>30GWh</span>，需持续更新）</li>
<li><span class="font-medium">中国供应链毛利率</span>（宁德时代储能业务 <span class="font-bold text-yellow-300">Q2毛利率25%</span> 能否维持）</li>
</ul>
</div>
<div class="bg-white bg-opacity-30 rounded-lg p-5 border border-white border-opacity-30">
<h3 class="font-bold text-lg mb-2 text-center">结论</h3>
<p class="text-center text-lg">特斯拉储能是2025年新能源赛道 <span class="font-bold text-yellow-300">"高壁垒+高盈利"</span> 的稀缺资产，短期看订单落地，长期看技术迭代与全球化复制。</p>
</div>
</div>
</div>
<!-- 关联股票表格 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-chart-pie text-indigo-500 mr-3"></i>关联股票
</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200 rounded-lg">
<thead class="bg-gray-50">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">股票名称</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">分类</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-700 border-b">关联原因</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">宁德时代</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">电池及材料</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">亿纬锂能</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">电池及材料</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">欣旺达</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">电池及材料</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">当升科技</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">电池及材料</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">华友钴业</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">电池及材料</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">先导智能</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">设备</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">银轮股份</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">温控</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">英维克</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">温控</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">新朋股份</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">其他部件</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">世运电路</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">其他部件</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">西典新能</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">其他部件</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">亚玛顿</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">其他部件</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 border-b font-medium">唯科科技</td>
<td class="py-3 px-4 border-b">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">其他部件</span>
</td>
<td class="py-3 px-4 border-b">特斯拉储能概念分类</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script>
tsParticles.load("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#3182ce"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#3182ce",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
</script>
</body>
</html>
```