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

712
public/htmls/深海数智化.html Normal file
View File

@@ -0,0 +1,712 @@
<!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/tsparticles@3/tsparticles.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js"></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, #0c1445 0%, #1a237e 50%, #0d47a1 100%);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-dot {
width: 16px;
height: 16px;
background-color: #3b82f6;
border-radius: 50%;
position: absolute;
left: -8px;
top: 8px;
}
.timeline-line {
position: absolute;
left: 0;
top: 24px;
bottom: 0;
width: 2px;
background-color: rgba(59, 130, 246, 0.3);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.gradient-text {
background: linear-gradient(90deg, #60a5fa, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.table-container {
overflow-x: auto;
}
@media (max-width: 768px) {
.mobile-stack {
flex-direction: column;
}
.mobile-full {
width: 100%;
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container mx-auto px-4 py-8 relative z-10">
<!-- 标题区域 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">深海数智化概念分析</h1>
<p class="text-xl text-blue-200 max-w-3xl mx-auto">探索深海科技与数智化融合的产业机遇与投资价值</p>
</div>
<!-- 概念事件时间轴 -->
<div class="glass-effect p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">概念事件时间轴</h2>
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="relative mb-8">
<div class="timeline-dot"></div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-blue-300">2025年3月12日</h3>
<p class="text-white">政府工作报告首次将"深海科技"纳入国家战略，与商业航天、低空经济并列</p>
</div>
</div>
<div class="relative mb-8">
<div class="timeline-dot"></div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-blue-300">2025年4月6日</h3>
<p class="text-white">生态环境部发布《国家生态环境监测网络数智化转型方案》</p>
</div>
</div>
<div class="relative mb-8">
<div class="timeline-dot"></div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-blue-300">2025年6月10日</h3>
<p class="text-white">中国发布全球首个深海海山数字化智能系统</p>
</div>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-blue-300">2025年3月21日</h3>
<p class="text-white">工信部即将发布《医药工业数智化转型实施方案》</p>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="glass-effect p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">核心观点摘要</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card-hover bg-blue-900 bg-opacity-30 p-5 rounded-xl">
<div class="text-blue-400 text-3xl mb-3">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="text-lg font-semibold text-white mb-2">阶段判断</h3>
<p class="text-blue-100">深海数智化处于政策驱动向技术验证过渡期，2025-2027年为产业化加速拐点</p>
</div>
<div class="card-hover bg-blue-900 bg-opacity-30 p-5 rounded-xl">
<div class="text-blue-400 text-3xl mb-3">
<i class="fas fa-rocket"></i>
</div>
<h3 class="text-lg font-semibold text-white mb-2">核心驱动力</h3>
<p class="text-blue-100">国家战略安全 + 技术突破 + 成本下降（海底数据中心PUE<1.1）</p>
</div>
<div class="card-hover bg-blue-900 bg-opacity-30 p-5 rounded-xl">
<div class="text-blue-400 text-3xl mb-3">
<i class="fas fa-coins"></i>
</div>
<h3 class="text-lg font-semibold text-white mb-2">未来潜力</h3>
<p class="text-blue-100">2025年深海科技市场规模3.25万亿元，三大赛道年复合增速超30%</p>
</div>
</div>
</div>
<!-- 核心驱动力分析 -->
<div class="glass-effect p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">核心驱动力分析</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-blue-900 bg-opacity-20 rounded-xl overflow-hidden">
<thead>
<tr class="bg-blue-800 bg-opacity-50">
<th class="py-3 px-4 text-left text-blue-200 font-semibold">维度</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">逻辑</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">数据支撑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">政策</td>
<td class="py-3 px-4 text-white">政府工作报告+部委专项方案，形成"中央-地方-央企"三级推力</td>
<td class="py-3 px-4 text-blue-100">海南200亿海底智算中心、广东"1310"计划</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">技术</td>
<td class="py-3 px-4 text-white">深海进入、探测、开发全链条突破</td>
<td class="py-3 px-4 text-blue-100">2025年全球无人潜水器市场850亿元，中国占34.5万公里海缆订单</td>
</tr>
<tr>
<td class="py-3 px-4 text-blue-300 font-medium">需求</td>
<td class="py-3 px-4 text-white">资源安全 + 新基建（海底IDC替代"东数西算"）</td>
<td class="py-3 px-4 text-blue-100">海底数据中心电力成本占比50%，陵水项目2030年达50MW</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 市场热度与预期差 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div class="glass-effect p-6">
<h2 class="text-2xl font-bold text-white mb-6">市场热度与情绪</h2>
<div class="space-y-4">
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<h3 class="text-lg font-semibold text-blue-300 mb-2">研报密集度</h3>
<p class="text-white">2025年Q1以来，浙商/申万/东北等8家券商发布深海科技专题，提及标的超30家</p>
</div>
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<h3 class="text-lg font-semibold text-blue-300 mb-2">情绪指标</h3>
<p class="text-white">宝钛股份、中国海防年内涨幅20%+，但机构持仓占比仍低于5%，处于低配状态</p>
</div>
</div>
</div>
<div class="glass-effect p-6">
<h2 class="text-2xl font-bold text-white mb-6">预期差分析</h2>
<div class="space-y-4">
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<h3 class="text-lg font-semibold text-blue-300 mb-2">市场共识</h3>
<p class="text-white">聚焦"深海装备"（船舶/锚链），忽略数据层价值（海底观测网数据交易、AI训练场景）</p>
</div>
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<h3 class="text-lg font-semibold text-blue-300 mb-2">忽略点</h3>
<ul class="text-white list-disc pl-5 space-y-1">
<li>海南高速海底智算中心已签约10家企业，但市场仅将其视为"主题"</li>
<li>亚星锚链R6系泊链技术突破，但漂浮式风电订单尚未体现在2024年财报</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 关键催化剂 -->
<div class="glass-effect p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">关键催化剂</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-xl font-semibold text-blue-300 mb-4">近期催化剂（3-6个月）</h3>
<div class="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-1 flex-shrink-0">
<span class="text-white text-xs">1</span>
</div>
<p class="text-white">政策落地：2025年Q3《深海矿产资源开发条例》出台，采矿权招标启动</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-1 flex-shrink-0">
<span class="text-white text-xs">2</span>
</div>
<p class="text-white">技术验证：2025年Q4深海空间站（6人/1年）南海下水测试</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-1 flex-shrink-0">
<span class="text-white text-xs">3</span>
</div>
<p class="text-white">订单释放：中海油2025年深海油气资本开支同比+25%</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold text-blue-300 mb-4">长期路径（2025-2030）</h3>
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<div class="flex flex-col space-y-3">
<div class="bg-blue-700 bg-opacity-50 p-3 rounded-lg text-white text-center">
2025:政策+技术验证
</div>
<div class="flex justify-center">
<i class="fas fa-arrow-down text-blue-400"></i>
</div>
<div class="bg-blue-700 bg-opacity-50 p-3 rounded-lg text-white text-center">
2026-2027:商业化试点
</div>
<div class="flex justify-center">
<i class="fas fa-arrow-down text-blue-400"></i>
</div>
<div class="bg-blue-700 bg-opacity-50 p-3 rounded-lg text-white text-center">
2028-2030:规模化放量
</div>
<div class="flex justify-center">
<i class="fas fa-arrow-down text-blue-400"></i>
</div>
<div class="bg-blue-700 bg-opacity-50 p-3 rounded-lg text-white text-center">
2030+:深海经济生态
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司 -->
<div class="glass-effect p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">产业链与核心公司</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-blue-900 bg-opacity-30 p-5 rounded-xl">
<h3 class="text-lg font-semibold text-blue-300 mb-3">上游</h3>
<ul class="text-white space-y-2">
<li>钛合金（宝钛股份）</li>
<li>海缆（中天科技/东方电缆）</li>
<li>传感器（中国海防）</li>
</ul>
</div>
<div class="bg-blue-900 bg-opacity-30 p-5 rounded-xl">
<h3 class="text-lg font-semibold text-blue-300 mb-3">中游</h3>
<ul class="text-white space-y-2">
<li>深海装备（中国船舶、亚星锚链）</li>
<li>机器人（时代电气-SMD）</li>
<li>数据中心（海兰信）</li>
</ul>
</div>
<div class="bg-blue-900 bg-opacity-30 p-5 rounded-xl">
<h3 class="text-lg font-semibold text-blue-300 mb-3">下游</h3>
<ul class="text-white space-y-2">
<li>资源开发（中海油服）</li>
<li>数据服务（海南高速）</li>
<li>医药（太美医疗-AIaaS）</li>
</ul>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-4">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-blue-900 bg-opacity-20 rounded-xl overflow-hidden">
<thead>
<tr class="bg-blue-800 bg-opacity-50">
<th class="py-3 px-4 text-left text-blue-200 font-semibold">公司</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">业务纯度</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">竞争优势</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">风险点</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">海兰信</td>
<td class="py-3 px-4 text-white">100%</td>
<td class="py-3 px-4 text-white">海底IDC唯一运营商，海南项目已落地</td>
<td class="py-3 px-4 text-white">客户集中度（政府订单占比80%）</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">宝钛股份</td>
<td class="py-3 px-4 text-white">60%</td>
<td class="py-3 px-4 text-white">深海钛合金市占率70%，参与空间站</td>
<td class="py-3 px-4 text-white">军工订单周期性波动</td>
</tr>
<tr>
<td class="py-3 px-4 text-blue-300 font-medium">亚星锚链</td>
<td class="py-3 px-4 text-white">50%</td>
<td class="py-3 px-4 text-white">R6系泊链全球龙头，漂浮式风电弹性</td>
<td class="py-3 px-4 text-white">风电补贴政策退坡</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="glass-effect p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">潜在风险与挑战</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-blue-900 bg-opacity-20 rounded-xl overflow-hidden">
<thead>
<tr class="bg-blue-800 bg-opacity-50">
<th class="py-3 px-4 text-left text-blue-200 font-semibold">风险类型</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">具体表现</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">技术</td>
<td class="py-3 px-4 text-white">深海机器人续航不足（当前AUV仅72小时），高压传感器国产化率<30%</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">商业化</td>
<td class="py-3 px-4 text-white">可燃冰开采成本$150-200/桶油当量，高于陆地页岩气（$50-80）</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">政策</td>
<td class="py-3 px-4 text-white">美国未加入《海洋法公约》，国际采矿权博弈可能限制中国矿区开发</td>
</tr>
<tr>
<td class="py-3 px-4 text-blue-300 font-medium">信息矛盾</td>
<td class="py-3 px-4 text-white">浙商证券预测2025年深海经济3.25万亿，但路演显示2024年实际订单仅200亿，预期差达16倍</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="glass-effect p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">综合结论与投资启示</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold text-blue-300 mb-3">阶段判断</h3>
<p class="text-white">深海数智化处于"主题投资→基本面验证"过渡期，2025-2026年政策订单驱动，2027年后看技术降本。</p>
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold text-blue-300 mb-3">投资方向</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<h4 class="text-lg font-semibold text-white mb-2">数据层</h4>
<p class="text-blue-100">海兰信（海底IDC）、海南高速（智算中心）——估值未反映数据资产价值</p>
</div>
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<h4 class="text-lg font-semibold text-white mb-2">材料层</h4>
<p class="text-blue-100">宝钛股份（钛合金）、西部材料（UUV结构件）——军工+深海双轮驱动</p>
</div>
<div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg">
<h4 class="text-lg font-semibold text-white mb-2">设备层</h4>
<p class="text-blue-100">亚星锚链（系泊链）、中国船舶（FPSO）——订单弹性最大</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold text-blue-300 mb-3">跟踪指标</h3>
<ul class="text-white space-y-2">
<li>• 海南海底数据中心：2025年Q3客户签约率（当前10家→目标50家）</li>
<li>• 可燃冰开采成本：2025年Q4南海试采成本是否降至$100/桶以下</li>
<li>• 钛合金价格：宝钛股份2025年深海订单毛利率是否维持40%+（当前35%）</li>
</ul>
</div>
</div>
<!-- 关联股票表格 -->
<div class="glass-effect p-6">
<h2 class="text-2xl font-bold text-white mb-6">关联股票</h2>
<!-- 深海数智化(250701) -->
<div class="mb-8">
<h3 class="text-xl font-semibold text-blue-300 mb-4">深海数智化(250701)</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-blue-900 bg-opacity-20 rounded-xl overflow-hidden">
<thead>
<tr class="bg-blue-800 bg-opacity-50">
<th class="py-3 px-4 text-left text-blue-200 font-semibold">股票</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">行业</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">项目/产品</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">产业链</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">数据来源</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">中天科技</td>
<td class="py-3 px-4 text-white">海缆</td>
<td class="py-3 px-4 text-white">参与编制国际首个动态海底电缆标准</td>
<td class="py-3 px-4 text-white">国内头部海缆制造商</td>
<td class="py-3 px-4 text-white">互动/年报</td>
<td class="py-3 px-4 text-white">2024年海洋系列营收36.44亿元，占比7.58%</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">东方电缆</td>
<td class="py-3 px-4 text-white">海缆</td>
<td class="py-3 px-4 text-white">-</td>
<td class="py-3 px-4 text-white">海底电缆系统核心供应商</td>
<td class="py-3 px-4 text-white">年报</td>
<td class="py-3 px-4 text-white">2024年海缆系统营收27.78亿元，占比30.55%</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">亨通光电</td>
<td class="py-3 px-4 text-white">海缆</td>
<td class="py-3 px-4 text-white">海洋能源与通信</td>
<td class="py-3 px-4 text-white">-</td>
<td class="py-3 px-4 text-white">年报</td>
<td class="py-3 px-4 text-white">2024年海洋能源与通信营收57.38亿元，占比9.57%</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">海兰信</td>
<td class="py-3 px-4 text-white">算力</td>
<td class="py-3 px-4 text-white">海底数据中心（UDC）</td>
<td class="py-3 px-4 text-white">-</td>
<td class="py-3 px-4 text-white">调研</td>
<td class="py-3 px-4 text-white">2025年以海南算力集群为重点，聚焦上海中远海风项目</td>
</tr>
<tr>
<td class="py-3 px-4 text-blue-300 font-medium">海南高速</td>
<td class="py-3 px-4 text-white">算力</td>
<td class="py-3 px-4 text-white">海底智算中心</td>
<td class="py-3 px-4 text-white">-</td>
<td class="py-3 px-4 text-white">互动</td>
<td class="py-3 px-4 text-white">投资建设的海底智算中心于2025年2月18日启用</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 深海经济(250313) -->
<div class="mb-8">
<h3 class="text-xl font-semibold text-blue-300 mb-4">深海经济(250313)</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-blue-900 bg-opacity-20 rounded-xl overflow-hidden">
<thead>
<tr class="bg-blue-800 bg-opacity-50">
<th class="py-3 px-4 text-left text-blue-200 font-semibold">股票</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">分类</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">项目/产品</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">产业链</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">投资逻辑</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">资料来源</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">宝钛股份</td>
<td class="py-3 px-4 text-white">材料供应</td>
<td class="py-3 px-4 text-white">蛟龙号</td>
<td class="py-3 px-4 text-white">深海用高强度钛合金大型耐压结构件</td>
<td class="py-3 px-4 text-white">开发了深海用高强度钛合金大型耐压结构件等产品，配合完成"蛟龙号"潜水器钛合金框架维修工作</td>
<td class="py-3 px-4 text-white">网络公开资料</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">亚星锚链</td>
<td class="py-3 px-4 text-white">载人深潜</td>
<td class="py-3 px-4 text-white">-</td>
<td class="py-3 px-4 text-white">全球系泊链领导者，应用于FPSO、海风单桩等</td>
<td class="py-3 px-4 text-white">全球系泊链领导者，国内唯一量产R6系泊链企业，市占率超40%</td>
<td class="py-3 px-4 text-white">机构研报</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">中国船舶</td>
<td class="py-3 px-4 text-white">载人深潜</td>
<td class="py-3 px-4 text-white">蛟龙号</td>
<td class="py-3 px-4 text-white">子公司702所是蛟龙号核心设计单位</td>
<td class="py-3 px-4 text-white">子公司702所是蛟龙号核心设计单位</td>
<td class="py-3 px-4 text-white">网络公开资料</td>
</tr>
<tr>
<td class="py-3 px-4 text-blue-300 font-medium">时代电气</td>
<td class="py-3 px-4 text-white">深海机器人</td>
<td class="py-3 px-4 text-white">-</td>
<td class="py-3 px-4 text-white">2015年收购英国深海机器人知名供应商SMD，公司海工装备主要包括深海作业机器人、海底挖掘铺缆</td>
<td class="py-3 px-4 text-white">2015年收购英国深海机器人知名供应商SMD，公司海工装备主要包括深海作业机器人、海底挖掘铺缆</td>
<td class="py-3 px-4 text-white">搜互动</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 深海经济(250320更新) -->
<div>
<h3 class="text-xl font-semibold text-blue-300 mb-4">深海经济(250320更新)</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-blue-900 bg-opacity-20 rounded-xl overflow-hidden">
<thead>
<tr class="bg-blue-800 bg-opacity-50">
<th class="py-3 px-4 text-left text-blue-200 font-semibold">股票</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">分类</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">项目/产品</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">产业链</th>
<th class="py-3 px-4 text-left text-blue-200 font-semibold">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">宝色股份</td>
<td class="py-3 px-4 text-white">材料供应</td>
<td class="py-3 px-4 text-white">蛟龙号潜水器钛合金框架维修</td>
<td class="py-3 px-4 text-white">钛合金材料供应</td>
<td class="py-3 px-4 text-white">开发深海高强度钛合金大型耐压结构件，参与蛟龙号潜水器钛合金框架维修工作</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">亚星锚链</td>
<td class="py-3 px-4 text-white">材料供应</td>
<td class="py-3 px-4 text-white">-</td>
<td class="py-3 px-4 text-white">全球系泊链霸主，市占率超40%</td>
<td class="py-3 px-4 text-white">全球系泊链龙头企业，产品应用于FPSO、海风单桩等</td>
</tr>
<tr class="border-b border-blue-700 border-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">宝钛股份</td>
<td class="py-3 px-4 text-white">载人深潜</td>
<td class="py-3 px-4 text-white">奋斗者号载人钛合金材料</td>
<td class="py-3 px-4 text-white">钛合金材料供应</td>
<td class="py-3 px-4 text-white">为奋斗者号提供载人钛合金材料</td>
</tr>
<tr>
<td class="py-3 px-4 text-blue-300 font-medium">时代电气</td>
<td class="py-3 px-4 text-white">深海装备</td>
<td class="py-3 px-4 text-white">深海作业机器人</td>
<td class="py-3 px-4 text-white">电力设备</td>
<td class="py-3 px-4 text-white">2015年收购英国深海机器人知名供应商SMD，产品包括深海作业机器人</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
// 初始化粒子背景
tsParticles.load("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#3b82f6"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: false
},
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
});
// 添加滚动动画效果
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeIn');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.glass-effect').forEach(el => {
observer.observe(el);
});
</script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeIn {
animation: fadeIn 0.6s ease-out forwards;
}
</style>
</body>
</html>
```