Files
vf_react/public/htmls/超硬材料.html
2025-11-13 17:38:54 +08:00

568 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<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&display=swap');
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-line {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.stock-highlight {
background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
border-left: 4px solid #3b82f6;
}
.tech-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.risk-badge {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.opportunity-badge {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
@media (max-width: 768px) {
.table-responsive {
font-size: 14px;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航 -->
<nav class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<i class="fas fa-gem text-2xl"></i>
<h1 class="text-xl md:text-2xl font-bold">超硬材料概念深度解析</h1>
</div>
<div class="hidden md:flex items-center space-x-4">
<span class="text-sm opacity-90">战略资源 · 高端功能材料</span>
<span class="bg-white/20 px-3 py-1 rounded-full text-xs">2025.10</span>
</div>
</div>
</div>
</nav>
<!-- 核心观点摘要 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 card-hover">
<div class="flex items-center mb-6">
<i class="fas fa-lightbulb text-yellow-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心观点摘要</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-purple-50 to-blue-50 p-6 rounded-xl">
<h3 class="font-semibold text-lg mb-3 text-purple-800">
<i class="fas fa-chart-line mr-2"></i>价值跃迁
</h3>
<p class="text-gray-700 leading-relaxed">
从传统工业耗材向<span class="font-semibold text-purple-600">"战略资源+高端功能材料"</span>的双重价值跃迁,政策红利与基本面成长共同驱动。
</p>
</div>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl">
<h3 class="font-semibold text-lg mb-3 text-green-800">
<i class="fas fa-rocket mr-2"></i>核心驱动力
</h3>
<p class="text-gray-700 leading-relaxed">
<span class="font-semibold text-green-600">出口管制</span>重塑供给侧,<span class="font-semibold text-green-600">技术突破</span>引爆半导体、AI、机器人需求。
</p>
</div>
</div>
</div>
</section>
<!-- 核心事件时间线 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-timeline text-blue-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心催化事件</h2>
</div>
<div class="relative">
<div class="absolute left-4 md:left-8 top-0 bottom-0 w-0.5 timeline-line"></div>
<!-- 事件节点 -->
<div class="space-y-8">
<div class="relative flex items-start">
<div class="absolute left-4 md:left-8 w-4 h-4 bg-purple-600 rounded-full pulse-dot -translate-x-1/2"></div>
<div class="ml-12 md:ml-20 bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-lg flex-1">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-purple-800">2024年12月</span>
<span class="tech-badge">前兆铺垫</span>
</div>
<p class="text-gray-700 text-sm">沃尔德公告提及金刚石窗口材料列入出口管制清单,市场开始关注战略价值</p>
</div>
</div>
<div class="relative flex items-start">
<div class="absolute left-4 md:left-8 w-4 h-4 bg-blue-600 rounded-full pulse-dot -translate-x-1/2"></div>
<div class="ml-12 md:ml-20 bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-lg flex-1">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-blue-800">2025年10月9日</span>
<span class="tech-badge">核心催化</span>
</div>
<p class="text-gray-700 text-sm">商务部联合公告,对人造金刚石产品及核心设备实施正式出口管制</p>
</div>
</div>
<div class="relative flex items-start">
<div class="absolute left-4 md:left-8 w-4 h-4 bg-green-600 rounded-full pulse-dot -translate-x-1/2"></div>
<div class="ml-12 md:ml-20 bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg flex-1">
<div class="flex items-center justify-between mb-2">
<span class="font-semibold text-green-800">2025年10月10日</span>
<span class="opportunity-badge">市场反应</span>
</div>
<p class="text-gray-700 text-sm">概念股集体高开,四方达、黄河旋风竞价涨停,机构解读为"利好行业整合"</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链图谱 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-network-wired text-indigo-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">产业链图谱</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-yellow-50 to-orange-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-4 text-orange-800">
<i class="fas fa-hammer mr-2"></i>上游:设备与原材料
</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center"><i class="fas fa-chevron-right text-orange-500 mr-2 text-xs"></i>MPCVD/DCPCVD设备</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-orange-500 mr-2 text-xs"></i>石墨、金属触媒</li>
<li class="mt-3 font-semibold text-orange-700">代表:晶盛机电、四方达</li>
</ul>
</div>
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-4 text-indigo-800">
<i class="fas fa-cogs mr-2"></i>中游:制造与制品
</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center"><i class="fas fa-chevron-right text-indigo-500 mr-2 text-xs"></i>人造金刚石单晶、微粉</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-indigo-500 mr-2 text-xs"></i>CVD高附加值产品</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-indigo-500 mr-2 text-xs"></i>精密刀具、热沉片</li>
<li class="mt-3 font-semibold text-indigo-700">代表:沃尔德、黄河旋风</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl">
<h3 class="font-bold text-lg mb-4 text-green-800">
<i class="fas fa-microchip mr-2"></i>下游:应用领域
</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center"><i class="fas fa-chevron-right text-green-500 mr-2 text-xs"></i>传统:建材、机械</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-green-500 mr-2 text-xs"></i>新兴半导体、AI散热</li>
<li class="flex items-center"><i class="fas fa-chevron-right text-green-500 mr-2 text-xs"></i>前沿:人形机器人、量子计算</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 核心公司对比 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-balance-scale text-purple-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心玩家对比</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="border-2 border-blue-200 rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg text-blue-800">传统巨头</h3>
<span class="opportunity-badge">稳健</span>
</div>
<p class="text-gray-600 text-sm mb-4">政策红利+行业周期复苏</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-building text-blue-500 mr-2"></i>
<span>中兵红箭、黄河旋风</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-chart-bar text-blue-500 mr-2"></i>
<span>营收规模大,业务纯粹</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>最直接受益者</span>
</div>
</div>
</div>
<div class="border-2 border-purple-200 rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg text-purple-800">新应用故事王</h3>
<span class="risk-badge">高风险高收益</span>
</div>
<p class="text-gray-600 text-sm mb-4">技术驱动+第二曲线成长</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-rocket text-purple-500 mr-2"></i>
<span>沃尔德</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-chart-line text-purple-500 mr-2"></i>
<span>布局AI、机器人前沿</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i>
<span>预期差最大</span>
</div>
</div>
</div>
<div class="border-2 border-green-200 rounded-xl p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg text-green-800">国产替代攻坚手</h3>
<span class="tech-badge">成长</span>
</div>
<p class="text-gray-600 text-sm mb-4">国产替代+半导体景气度</p>
<div class="space-y-2">
<div class="flex items-center text-sm">
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
<span>三超新材、国机精工</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-microchip text-green-500 mr-2"></i>
<span>聚焦半导体赛道</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-arrow-up text-green-500 mr-2"></i>
<span>成长路径清晰</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 股票数据表格 -->
<section class="container mx-auto px-4 py-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-table text-emerald-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">核心公司财务数据</h2>
</div>
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="bg-gradient-to-r from-gray-50 to-gray-100">
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">股票名称</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">分类</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">项目</th>
<th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">2025H1营收</th>
<th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">占比</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">信源</th>
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">亮点</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-blue-700">中兵红箭</td>
<td class="px-4 py-4"><span class="tech-badge">超硬材料</span></td>
<td class="px-4 py-4 text-sm">超硬材料及制品</td>
<td class="px-4 py-4 text-right font-semibold">8.19亿</td>
<td class="px-4 py-4 text-right">37.35%</td>
<td class="px-4 py-4 text-sm">财报</td>
<td class="px-4 py-4 text-sm text-gray-600">营收规模领先</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-blue-700">黄河旋风</td>
<td class="px-4 py-4"><span class="tech-badge">超硬材料</span></td>
<td class="px-4 py-4 text-sm">超硬材料及复合材料</td>
<td class="px-4 py-4 text-right font-semibold">5.55亿</td>
<td class="px-4 py-4 text-right">79.34%</td>
<td class="px-4 py-4 text-sm">财报</td>
<td class="px-4 py-4 text-sm text-gray-600">业务集中度高</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-blue-700">力量钻石</td>
<td class="px-4 py-4"><span class="tech-badge">超硬材料</span></td>
<td class="px-4 py-4 text-sm">培育钻石、金刚石单晶、微粉</td>
<td class="px-4 py-4 text-right font-semibold">2.35亿</td>
<td class="px-4 py-4 text-right">97.28%</td>
<td class="px-4 py-4 text-sm">财报</td>
<td class="px-4 py-4 text-sm text-gray-600">业务纯粹度最高</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors stock-highlight">
<td class="px-4 py-4 font-semibold text-purple-700">沃尔德</td>
<td class="px-4 py-4"><span class="risk-badge">技术驱动</span></td>
<td class="px-4 py-4 text-sm">CVD金刚石生长技术</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">调研</td>
<td class="px-4 py-4 text-sm text-purple-600">少数掌握全部CVD技术</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-green-700">四方达</td>
<td class="px-4 py-4"><span class="tech-badge">MPCVD设备</span></td>
<td class="px-4 py-4 text-sm">MPCVD设备及CVD金刚石工艺</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">调研</td>
<td class="px-4 py-4 text-sm text-gray-600">多项专利技术</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-green-700">国机精工</td>
<td class="px-4 py-4"><span class="tech-badge">MPCVD设备</span></td>
<td class="px-4 py-4 text-sm">MPCVD法合成金刚石关键技术</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">调研</td>
<td class="px-4 py-4 text-sm text-gray-600">成功攻克关键技术</td>
</tr>
<tr class="border-b hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-green-700">晶盛机电</td>
<td class="px-4 py-4"><span class="tech-badge">MPCVD设备</span></td>
<td class="px-4 py-4 text-sm">MPCVD法金刚石晶体生长设备</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">互动</td>
<td class="px-4 py-4 text-sm text-gray-600">10克拉级钻石培育</td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-4 font-semibold text-gray-600">*ST亚振</td>
<td class="px-4 py-4"><span class="tech-badge">其他</span></td>
<td class="px-4 py-4 text-sm">参股亚振钻石30%</td>
<td class="px-4 py-4 text-right text-gray-500">-</td>
<td class="px-4 py-4 text-right">-</td>
<td class="px-4 py-4 text-sm">互动</td>
<td class="px-4 py-4 text-sm text-gray-600">参股布局</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="container mx-auto px-4 py-8 mb-8">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="flex items-center mb-6">
<i class="fas fa-compass text-red-500 text-2xl mr-3"></i>
<h2 class="text-2xl font-bold text-gray-800">投资启示与关键指标</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="space-y-4">
<h3 class="font-bold text-lg text-gray-800 mb-4">投资策略</h3>
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-shield-alt text-blue-600 mr-2"></i>
<span class="font-semibold text-blue-800">稳健之选</span>
</div>
<p class="text-sm text-gray-700">关注中兵红箭、黄河旋风等传统龙头,从行业整合和价格上涨中获益</p>
</div>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-seedling text-green-600 mr-2"></i>
<span class="font-semibold text-green-800">成长之选</span>
</div>
<p class="text-sm text-gray-700">重点跟踪三超新材、国机精工,半导体国产替代逻辑清晰</p>
</div>
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<i class="fas fa-dice text-purple-600 mr-2"></i>
<span class="font-semibold text-purple-800">博弈之选</span>
</div>
<p class="text-sm text-gray-700">沃尔德高风险高回报,密切跟踪订单和客户进展</p>
</div>
</div>
<div class="space-y-4">
<h3 class="font-bold text-lg text-gray-800 mb-4">关键跟踪指标</h3>
<div class="border-l-4 border-orange-500 pl-4 py-2">
<p class="font-semibold text-gray-800 text-sm mb-1">行业层面</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 人造金刚石产品现货价格</li>
<li>• 出口许可证发放情况</li>
</ul>
</div>
<div class="border-l-4 border-blue-500 pl-4 py-2">
<p class="font-semibold text-gray-800 text-sm mb-1">沃尔德</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>• PCB金刚石钻针订单公告</li>
<li>• 金刚石热沉片客户认证</li>
</ul>
</div>
<div class="border-l-4 border-green-500 pl-4 py-2">
<p class="font-semibold text-gray-800 text-sm mb-1">三超新材/国机精工</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 半导体耗材季度收入增速</li>
<li>• 新增头部封测厂客户</li>
</ul>
</div>
</div>
</div>
<!-- 风险提示 -->
<div class="mt-8 bg-gradient-to-r from-red-50 to-orange-50 p-6 rounded-xl border-l-4 border-red-500">
<div class="flex items-center mb-3">
<i class="fas fa-exclamation-triangle text-red-600 mr-2"></i>
<h3 class="font-bold text-lg text-red-800">风险提示</h3>
</div>
<div class="grid md:grid-cols-2 gap-4 text-sm text-gray-700">
<div>
<p class="font-semibold mb-2">技术风险</p>
<p>CVD金刚石大尺寸、低成本量产仍是全球性难题</p>
</div>
<div>
<p class="font-semibold mb-2">预期差风险</p>
<p>沃尔德新业务收入贡献极小,存在"画饼"无法兑现风险</p>
</div>
<div>
<p class="font-semibold mb-2">商业化风险</p>
<p>新应用成本高,替代传统方案过程可能缓慢</p>
</div>
<div>
<p class="font-semibold mb-2">政策风险</p>
<p>出口管制可能引发贸易伙伴反制措施</p>
</div>
</div>
</div>
</div>
</section>
<!-- 底部 -->
<footer class="gradient-bg text-white py-6 mt-12">
<div class="container mx-auto px-4 text-center">
<p class="text-sm opacity-90">
<i class="fas fa-info-circle mr-2"></i>
本页面仅供参考,不构成投资建议。投资有风险,入市需谨慎。
</p>
<p class="text-xs opacity-75 mt-2">
数据来源:公司财报、机构调研、公开市场信息
</p>
</div>
</footer>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 表格行高亮效果
const tableRows = document.querySelectorAll('tbody tr');
tableRows.forEach(row => {
row.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.01)';
this.style.transition = 'all 0.2s ease';
});
row.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
// 数字动画效果
function animateValue(element, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
element.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// 页面加载时触发动画
window.addEventListener('load', () => {
const revenueElements = document.querySelectorAll('.revenue-animate');
revenueElements.forEach(el => {
const value = parseFloat(el.innerText.replace('亿', ''));
if (!isNaN(value)) {
animateValue(el, 0, value, 1000);
setTimeout(() => {
el.innerHTML = value + '亿';
}, 1000);
}
});
});
</script>
</body>
</html>