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

feat: 10.10线上最新代码提交

Browse Source
This commit is contained in:
zdl
2025-10-11 16:16:02 +08:00
parent 4d0dc109bc
commit 864844a52b
3338 changed files with 460147 additions and 152745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

551
public/htmls/富锂锰基材料.html Normal file
View File

@@ -0,0 +1,551 @@
<!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">
<title>富锂锰基材料 - 下一代高能量密度锂电池正极技术</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<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" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', 'Inter', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
min-height: 100vh;
}
.gradient-bg {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.card-shadow {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.timeline-dot {
width: 20px;
height: 20px;
background-color: #3b82f6;
border-radius: 50%;
position: absolute;
left: -10px;
top: 5px;
}
.timeline-line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: #e5e7eb;
}
.tech-card {
transition: all 0.3s ease;
}
.tech-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.table-responsive {
overflow-x: auto;
}
@media (max-width: 768px) {
.timeline-line {
left: 15px;
}
.timeline-dot {
left: 5px;
}
.timeline-content {
padding-left: 40px;
}
}
.particle-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.4;
}
</style>
</head>
<body class="bg-gray-50">
<div id="particles-js" class="particle-container"></div>
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 头部标题 -->
<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="card bg-white rounded-xl card-shadow mb-8 overflow-hidden">
<div class="gradient-bg p-6">
<h2 class="text-2xl font-bold text-white mb-2">概念事件时间轴</h2>
<p class="text-blue-100">富锂锰基材料发展的重要里程碑</p>
</div>
<div class="p-6">
<div class="relative">
<div class="timeline-line"></div>
<div class="space-y-8">
<div class="relative">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="bg-blue-50 rounded-lg p-4">
<h3 class="font-bold text-blue-800">2024年9月</h3>
<p class="text-gray-700">速方新能源百吨级产线投产，青松基金参投天使轮</p>
</div>
</div>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="bg-blue-50 rounded-lg p-4">
<h3 class="font-bold text-blue-800">2025年2月</h3>
<p class="text-gray-700">当升科技与中伟股份战略合作，富锂锰基纳入长期供应协议</p>
</div>
</div>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="bg-blue-50 rounded-lg p-4">
<h3 class="font-bold text-blue-800">2025年4月</h3>
<p class="text-gray-700">中科院宁波材料所《Nature》发文，揭示"负热膨胀"修复技术，循环寿命达1000次</p>
</div>
</div>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="bg-blue-50 rounded-lg p-4">
<h3 class="font-bold text-blue-800">2025年6月</h3>
<p class="text-gray-700">民生电新研报引爆市场，容百科技、振华新材等标的涨停</p>
</div>
</div>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="bg-blue-50 rounded-lg p-4">
<h3 class="font-bold text-blue-800">2025年7月</h3>
<p class="text-gray-700">通用/LG宣布2027年富锂锰基方形电池量产，首装电动卡车</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="card bg-white rounded-xl card-shadow mb-8 overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4">核心观点摘要</h2>
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 mb-6">
<p class="text-lg text-gray-700 leading-relaxed">
富锂锰基材料正处于<strong class="text-blue-700">"技术验证→产业化前夜"</strong>的关键拐点：
</p>
<div class="mt-4 space-y-3">
<div class="flex items-start">
<div class="bg-blue-500 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5">
<i class="fas fa-arrow-right text-white text-xs"></i>
</div>
<p class="text-gray-700"><strong class="text-blue-700">短期（2025-2027）</strong>：半固态电池放量驱动需求，<strong class="text-blue-700">能量密度400Wh/kg+成本逼近铁锂</strong>的颠覆性组合将率先在高端车型落地。</p>
</div>
<div class="flex items-start">
<div class="bg-blue-500 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5">
<i class="fas fa-arrow-right text-white text-xs"></i>
</div>
<p class="text-gray-700"><strong class="text-blue-700">长期（2027-2030）</strong>：全固态电池成熟后，富锂锰基或替代三元成为主流，<strong class="text-blue-700">全球需求或超100万吨/年</strong>（当前仅千吨级）。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 技术突破数据卡片 -->
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">技术突破与核心优势</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="tech-card bg-white rounded-xl card-shadow p-6">
<div class="text-center mb-4">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-bolt text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">能量密度碾压</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">放电比容量</span>
<span class="font-bold text-blue-600">300mAh/g</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">三元材料对比</span>
<span class="text-gray-700">220mAh/g</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">电池包能量密度</span>
<span class="font-bold text-blue-600">400Wh/kg</span>
</div>
</div>
</div>
<div class="tech-card bg-white rounded-xl card-shadow p-6">
<div class="text-center mb-4">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-dollar-sign text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">成本优势</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">锰替代钴镍</span>
<span class="font-bold text-green-600">成本降低40%</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">每度电成本</span>
<span class="text-gray-700">600元→350元</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">当前材料价格</span>
<span class="font-bold text-green-600">7万元/吨</span>
</div>
</div>
</div>
<div class="tech-card bg-white rounded-xl card-shadow p-6">
<div class="text-center mb-4">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-sync-alt text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800">循环寿命</h3>
</div>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">中科院修复技术</span>
<span class="font-bold text-purple-600">负热膨胀</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">老化电池恢复</span>
<span class="text-gray-700">150℃加热30分钟</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">循环寿命</span>
<span class="font-bold text-purple-600">1000次</span>
</div>
</div>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="card bg-white rounded-xl card-shadow mb-8 overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4">产业链图谱</h2>
<div class="bg-gradient-to-r from-gray-50 to-blue-50 rounded-lg p-6">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="text-center">
<div class="bg-blue-500 text-white rounded-lg px-6 py-3 font-bold">上游</div>
<p class="mt-2 text-gray-700">锰矿（湘潭电化）<br>锂盐（天华新能）</p>
</div>
<div class="text-3xl text-blue-500">
<i class="fas fa-arrow-right"></i>
</div>
<div class="text-center">
<div class="bg-green-500 text-white rounded-lg px-6 py-3 font-bold">中游</div>
<p class="mt-2 text-gray-700">正极材料<br>（容百科技、当升科技、振华新材）</p>
</div>
<div class="text-3xl text-blue-500">
<i class="fas fa-arrow-right"></i>
</div>
<div class="text-center">
<div class="bg-purple-500 text-white rounded-lg px-6 py-3 font-bold">下游</div>
<p class="mt-2 text-gray-700">固态电池（宁德时代、清陶能源）<br>车企（上汽、通用）</p>
</div>
</div>
</div>
</div>
</div>
<!-- 核心玩家对比 -->
<div class="card bg-white rounded-xl card-shadow mb-8 overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4">核心玩家对比</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进展</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优势</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">容百科技</td>
<td class="px-6 py-4 whitespace-nowrap">公斤级送样国内头部客户</td>
<td class="px-6 py-4">高镍技术协同，客户绑定深</td>
<td class="px-6 py-4">产能落地慢于预期</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">振华新材</td>
<td class="px-6 py-4 whitespace-nowrap">百吨级出货固态电池客户</td>
<td class="px-6 py-4">工信部项目背书，纳米级包覆技术</td>
<td class="px-6 py-4">依赖单一客户（清陶）</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">当升科技</td>
<td class="px-6 py-4 whitespace-nowrap">与中伟签署3-10万吨/年协议</td>
<td class="px-6 py-4">前驱体一体化降本</td>
<td class="px-6 py-4">协议为框架性，实际订单待验证</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">湘潭电化</td>
<td class="px-6 py-4 whitespace-nowrap">电解二氧化锰12万吨产能</td>
<td class="px-6 py-4">锰矿资源自给率70%，成本优势</td>
<td class="px-6 py-4">传统业务占比高，估值弹性低</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 潜在风险 -->
<div class="card bg-white rounded-xl card-shadow mb-8 overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4">潜在风险与挑战</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-red-50 rounded-lg p-4">
<h3 class="font-bold text-red-700 mb-2">技术风险</h3>
<p class="text-gray-700">锰的Jahn-Teller效应导致循环衰减（中科院修复技术尚未规模化验证）</p>
</div>
<div class="bg-orange-50 rounded-lg p-4">
<h3 class="font-bold text-orange-700 mb-2">商业化风险</h3>
<p class="text-gray-700">当前材料成本7万元/吨，需降至5万元/吨才能与三元竞争</p>
</div>
<div class="bg-yellow-50 rounded-lg p-4">
<h3 class="font-bold text-yellow-700 mb-2">政策风险</h3>
<p class="text-gray-700">若2025年固态电池补贴转向硫化物路线，富锂锰基需求或低于预期</p>
</div>
<div class="bg-purple-50 rounded-lg p-4">
<h3 class="font-bold text-purple-700 mb-2">信息矛盾</h3>
<p class="text-gray-700">民生电新称"2025产业化元年"，但路演显示仅2家企业实现百吨级出货</p>
</div>
</div>
</div>
</div>
<!-- 投资启示 -->
<div class="card bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl card-shadow mb-8 overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-white mb-4">投资启示</h2>
<div class="text-white">
<p class="mb-4">富锂锰基材料处于<strong>"技术验证尾声+产业化前夜"</strong>，短期主题炒作与长期基本面驱动并存。</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h3 class="font-bold text-lg mb-2">最纯标的</h3>
<p class="font-bold text-blue-100">容百科技</p>
<p class="text-sm text-blue-100">技术领先+客户验证最快</p>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h3 class="font-bold text-lg mb-2">资源延伸</h3>
<p class="font-bold text-blue-100">湘潭电化</p>
<p class="text-sm text-blue-100">锰矿自给+电解二氧化锰需求爆发</p>
</div>
<div class="bg-white bg-opacity-20 rounded-lg p-4">
<h3 class="font-bold text-lg mb-2">设备配套</h3>
<p class="font-bold text-blue-100">先导智能</p>
<p class="text-sm text-blue-100">干法电极设备适配富锂锰基脆性材料</p>
</div>
</div>
</div>
</div>
</div>
<!-- 关联股票表格 -->
<div class="card bg-white rounded-xl card-shadow overflow-hidden">
<div class="gradient-bg p-6">
<h2 class="text-2xl font-bold text-white mb-2">关联股票</h2>
<p class="text-blue-100">富锂锰基材料相关上市公司</p>
</div>
<div class="table-responsive">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产业链/技术</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">消息来源</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关联原因</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">容百科技</td>
<td class="px-6 py-4">富锂锰基技术研究</td>
<td class="px-6 py-4">客户验证阶段</td>
<td class="px-6 py-4">公司互动</td>
<td class="px-6 py-4">已围绕富锂锰基等技术持续开展深入研究，配合客户验证</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">科恒股份</td>
<td class="px-6 py-4">全固态锂金属电池研发</td>
<td class="px-6 py-4">正极材料应用</td>
<td class="px-6 py-4">公司互动</td>
<td class="px-6 py-4">其全固态锂金属电池正极材料使用富锂锰基材料</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">当升科技</td>
<td class="px-6 py-4">高容量高密度富锂锰基材料</td>
<td class="px-6 py-4">客户导入及量产</td>
<td class="px-6 py-4">公司互动</td>
<td class="px-6 py-4">性能指标行业领先，已完成关键客户导入并逐步放量</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">科信技术</td>
<td class="px-6 py-4">网状多孔富锂锰基锂离子电池正极材料</td>
<td class="px-6 py-4">储能锂电池产品</td>
<td class="px-6 py-4">公司互动</td>
<td class="px-6 py-4">储能锂电池相关核心技术包含该材料但未量产</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">格林美</td>
<td class="px-6 py-4">适配固态电池富锂锰基正极及前驱体</td>
<td class="px-6 py-4">9系超高镍正极技术布局</td>
<td class="px-6 py-4">公司互动</td>
<td class="px-6 py-4">多技术路线布局并实现吨级以上产品出货</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">湘潭电化</td>
<td class="px-6 py-4">锰基新能源材料研发</td>
<td class="px-6 py-4">锰矿石供应</td>
<td class="px-6 py-4">公司互动</td>
<td class="px-6 py-4">关注锰基材料技术发展，锰矿石部分自给外购</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">江特电机</td>
<td class="px-6 py-4">年产1000吨动力锂离子电池富锂锰基正极材料产业化项目</td>
<td class="px-6 py-4">-</td>
<td class="px-6 py-4">公司公告</td>
<td class="px-6 py-4">拥有明确的产业化项目规划</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">昆工科技</td>
<td class="px-6 py-4">富锂锰基正极材料研发项目</td>
<td class="px-6 py-4">-</td>
<td class="px-6 py-4">公司公告</td>
<td class="px-6 py-4">研发项目正在有序推进中</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">金龙羽</td>
<td class="px-6 py-4">层状富锂锰基/石墨烯纳米带正极复合材料制备方法</td>
<td class="px-6 py-4">专利技术</td>
<td class="px-6 py-4">公司公告</td>
<td class="px-6 py-4">拥有相关专利技术</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap font-bold text-blue-600">超频三</td>
<td class="px-6 py-4">磷酸铁锰包覆高镍三元或富锂锰基正极材料</td>
<td class="px-6 py-4">-</td>
<td class="px-6 py-4">公司公告</td>
<td class="px-6 py-4">涉及富锂锰基正极材料制备方法项目</td>
</tr>
</tbody>
</table>
</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: 30,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#3b82f6"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: true
},
size: {
value: 3,
random: true
},
line_linked: {
enable: true,
distance: 150,
color: "#3b82f6",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false
}
},
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
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
</script>
</body>
</html>
```