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

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

885
public/htmls/海事反制.html
View File

@@ -1,538 +1,437 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>海事反制概念深度分析 - 金融视角与投资策略</title>
<title>深度研报：海事反制概念</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/dist/full.min.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
font-family: 'Noto Sans SC', sans-serif;
background-color: #000212;
background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 119, 198, 0.3), rgba(255, 255, 255, 0));
color: #E2E8F0; /* slate-200 */
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
.glass-card {
background: rgba(17, 24, 39, 0.3); /* gray-900 with alpha */
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem; /* rounded-3xl */
box-shadow: 0 0 80px rgba(59, 130, 246, 0.1); /* blue-500 glow */
}
.timeline-item {
position: relative;
padding-left: 40px;
padding-bottom: 30px;
.title-glow {
text-shadow: 0 0 8px rgba(96, 165, 250, 0.7); /* blue-400 */
}
.timeline-item::before {
content: '';
position: absolute;
left: 9px;
top: 24px;
bottom: -14px;
width: 2px;
background: linear-gradient(to bottom, #3b82f6, transparent);
.bento-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: auto;
}
.timeline-item:last-child::before {
display: none;
.grid-item {
transition: all 0.3s ease-in-out;
}
.timeline-dot {
position: absolute;
left: 0;
top: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
/* Responsive grid adjustments */
@media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(4, 1fr);
}
.col-span-4 { grid-column: span 4; }
.col-span-2 { grid-column: span 4; }
.col-span-3 { grid-column: span 4; }
.col-span-6 { grid-column: span 4; }
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
.industry-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transition: all 0.3s ease;
}
.industry-card:hover {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.risk-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: repeat(1, 1fr);
}
.col-span-4, .col-span-2, .col-span-3, .col-span-6 {
grid-column: span 1;
}
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<div class="glass-effect sticky top-0 z-50 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-4">
<i class="fas fa-ship text-3xl text-indigo-600"></i>
<div>
<h1 class="text-2xl font-bold gradient-text">海事反制概念</h1>
<p class="text-sm text-gray-600">深度金融分析与投资策略</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="badge badge-info">更新时间: 2025.10.14</span>
<span class="badge badge-warning">政策落地期</span>
</div>
</div>
</div>
</div>
<body class="min-h-screen p-4 sm:p-8">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl sm:text-6xl font-bold title-glow text-blue-300">海事反制</h1>
<p class="text-lg text-slate-400 mt-4">地缘政治博弈下的产业链重构与战略威慑</p>
</header>
<!-- 主内容区 -->
<div class="container mx-auto px-4 py-8">
<!-- 核心观点卡片 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center float-animation">
<i class="fas fa-chart-line text-white"></i>
</div>
<h3 class="ml-4 text-lg font-semibold">投资评级</h3>
</div>
<p class="text-3xl font-bold text-indigo-600 mb-2">强烈推荐</p>
<p class="text-sm text-gray-600">政策驱动+基本面支撑，短期弹性大，长期逻辑坚实</p>
<!-- Bento Grid Layout -->
<main class="bento-grid">
<!-- Core Insight -->
<div class="glass-card p-6 col-span-6 lg:col-span-4 grid-item">
<h2 class="text-2xl font-bold mb-4 text-blue-300 title-glow">概念核心观点</h2>
<p class="text-slate-300 leading-relaxed">
“海事反制”是一个由地缘政治博弈驱动的、具有明确国家战略意图的政策性概念。其当前处于**“工具亮剑、暂入鞘中”**的事件驱动阶段，核心驱动力是中美贸易摩擦下，中国通过精准的非关税壁垒（特别港务费）进行“正当防卫”，并意图重塑国际航运和商品定价权格局。其未来潜力不仅在于应对单一贸易争端，更在于标志着中国已建立起一个制度化、可量化的海事领域“反制工具箱”，具备长期战略威慑和影响全球海运格局的能力。
</p>
</div>
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center float-animation" style="animation-delay: 0.5s;">
<i class="fas fa-rocket text-white"></i>
</div>
<h3 class="ml-4 text-lg font-semibold">核心驱动力</h3>
<!-- Key Data & Catalysts -->
<div class="glass-card p-6 col-span-6 lg:col-span-2 grid-item" x-data="{ tab: 'catalyst' }">
<div class="tabs tabs-boxed bg-slate-800/50 mb-4">
<a class="tab" :class="{'tab-active': tab === 'catalyst'}" @click="tab = 'catalyst'">关键催化剂</a>
<a class="tab" :class="{'tab-active': tab === 'logic'}" @click="tab = 'logic'">核心逻辑</a>
</div>
<div x-show="tab === 'catalyst'">
<ul class="space-y-3 text-slate-300">
<li><strong>暂停期结束 (2026年10月):</strong> 中美双方是否重启措施，是最大、最确定的催化剂。</li>
<li><strong>地缘政治事件:</strong> 南海、台海等区域紧张局势可能触发反制工具。</li>
<li><strong>法规细化:</strong> 《国际海运条例》配套补偿或反制细则出台。</li>
</ul>
</div>
<div x-show="tab === 'logic'">
<ul class="space-y-3 text-slate-300">
<li><strong>驱动力:</strong> 政策驱动下的精准供给侧冲击。</li>
<li><strong>核心条款:</strong> “美资≥25%股权”穿透条款，精准打击全球资本结构。</li>
<li><strong>战略意图:</strong> 削弱美元结算优势，推动大宗商品CIF定价权向中国转移。</li>
</ul>
</div>
</div>
<!-- Event Timeline -->
<div class="glass-card p-6 col-span-6 grid-item">
<h2 class="text-2xl font-bold mb-4 text-blue-300 title-glow">概念事件时间轴</h2>
<div id="timeline-chart" style="width: 100%; height: 400px;"></div>
</div>
<!-- Supporting Data Tabs -->
<div class="glass-card col-span-6 grid-item" x-data="{ activeTab: 'news' }">
<div class="tabs tabs-bordered p-4">
<a class="tab text-lg" :class="{ 'tab-active text-blue-400': activeTab === 'news' }" @click="activeTab = 'news'">新闻数据</a>
<a class="tab text-lg" :class="{ 'tab-active text-blue-400': activeTab === 'roadshow' }" @click="activeTab = 'roadshow'">路演纪要</a>
<a class="tab text-lg" :class="{ 'tab-active text-blue-400': activeTab === 'report' }" @click="activeTab = 'report'">研报精粹</a>
</div>
<div class="p-6">
<!-- News Content -->
<div x-show="activeTab === 'news'">
<div class="collapse collapse-plus bg-slate-900/50 mb-2">
<input type="radio" name="news-accordion" checked="checked" />
<div class="collapse-title text-xl font-medium text-slate-200">中美贸易摩擦与反制措施</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong class="text-amber-300">[2025-01-17]</strong> 美方发布对华海事、物流和造船业301调查报告，中方称其充斥不实指责。</li>
<li><strong class="text-green-300">[2025-10-10]</strong> 针对美方将征收港口费，中国商务部、交通运输部宣布反制，依据《国际海运条例》对美元素船舶收取特别港务费。</li>
<li><strong class="text-green-300">[2025-10-14]</strong> 中方反制措施正式生效，同日宣布对韩华海洋株式会社5家美国子公司采取反制。</li>
<li><strong class="text-yellow-300">[2025-10-30]</strong> 商务部宣布，美方将暂停301措施一年，中方也相应暂停反制措施一年。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-900/50">
<input type="radio" name="news-accordion" />
<div class="collapse-title text-xl font-medium text-slate-200">南海问题及国家海事能力建设</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong class="text-red-400">[2024-09-14]</strong> 国防部就南海问题表态：“无论谁在南海兴风作浪，中方都将采取有力有效措施坚决反制。”</li>
<li><strong class="text-blue-300">[2025-10-26]</strong> 报告显示，我国已成为世界上海事审判体系最完善、案件数量最多的国家。</li>
<li><strong class="text-blue-300">[2025-07-01]</strong> 我国海事最大溢油回收船“海巡041”轮正式列编，提升应急处置能力。</li>
</ul>
</div>
</div>
</div>
<!-- Roadshow Content -->
<div x-show="activeTab === 'roadshow'">
<div class="collapse collapse-plus bg-slate-900/50 mb-2">
<input type="radio" name="roadshow-accordion" checked="checked" />
<div class="collapse-title text-xl font-medium text-slate-200">核心反制措施：特别港务费详解</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>生效时间：</strong> 2025年10月14日，与美方同步生效。</li>
<li><strong>征收标准：</strong> <span class="font-bold text-amber-300">400元人民币/净吨·次</span> (≈56美元)，三年后阶梯式升至1100元/净吨。</li>
<li><strong>征收对象（关键）：</strong> 美籍、美旗、美造、美资持股<strong class="text-red-400">≥25%</strong>的公司所有或运营的船舶。执行口径严于美方，无豁免。</li>
<li><strong>中方豁免：</strong> 特别豁免<strong class="text-green-400">“中国建造船舶”</strong>，旨在对冲美方措施对中国造船业的冲击。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-900/50">
<input type="radio" name="roadshow-accordion" />
<div class="collapse-title text-xl font-medium text-slate-200">市场影响深度分析 (预期差)</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>影响范围超预期：</strong> “美资≥25%”条款将全球约 <strong class="text-red-400">15%的原油轮(VLCC)</strong> 和 <strong class="text-red-400">4%-14%的干散货船(Capesize)</strong> 纳入范围，是对全球资本结构的精准打击。</li>
<li><strong>成本冲击“核弹级”：</strong> 以VLCC为例，单次靠华港费激增约<strong class="text-red-400">4,200万美元</strong>，折合TCE（等价期租租金）增加超<strong class="text-red-400">13万美元/天</strong>，相当于当时运价翻倍。</li>
<li><strong>行业影响分化：</strong> 对集装箱运输影响有限，但对<strong class="text-amber-300">原油 & 干散货运输</strong>是巨大冲击，将导致货主优先选用非美系船舶，造成有效运力急剧缩减。</li>
<li><strong>受益方精准定位：</strong> <strong class="text-green-400">美资控股比例低的中资及北欧船东</strong>相对收益最大。</li>
</ul>
</div>
</div>
</div>
<!-- Report Content -->
<div x-show="activeTab === 'report'">
<div class="alert bg-slate-800/50 border-slate-700 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>研报数据主要提供宏观背景，验证地缘冲突对海运市场的传导机制。</span>
</div>
<div class="collapse collapse-arrow bg-slate-900/50">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium text-slate-200">地缘冲突对海运市场的影响 (中远海能研报, 2024-03-13)</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>红海冲突：</strong> 导致油轮绕行好望角，显著增加航程，直接利好Suezmax和Aframax市场，VLCC间接受益。</li>
<li><strong>俄乌冲突：</strong> 欧洲禁运俄油导致贸易格局重构，运距拉长，激发大西洋成品油运价上行。</li>
<li><strong>“影子船队”风险：</strong> 为规避制裁而生的“影子船队”（约1000艘）因安全问题被港口扣留增多，加速不合规运力出清。</li>
<li><strong>宏观约束：</strong> 环保法规限制老船船速，而船坞产能饱和限制新船供给。在此背景下，任何由反制措施（如绕行）引发的运力紧张都将被放大。</li>
</ul>
</div>
</div>
</div>
</div>
<ul class="text-sm space-y-1">
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>地缘政治博弈</li>
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>贸易话语权争夺</li>
<li><i class="fas fa-check-circle text-green-500 mr-2"></i>产业竞争优势</li>
</ul>
</div>
<div class="glass-effect rounded-2xl p-6 hover-scale">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center float-animation" style="animation-delay: 1s;">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
<h3 class="ml-4 text-lg font-semibold">风险等级</h3>
</div>
<div class="flex items-center justify-between">
<p class="text-2xl font-bold text-orange-600">中高</p>
<div class="flex space-x-1">
<div class="w-8 h-2 bg-orange-500 rounded"></div>
<div class="w-8 h-2 bg-orange-500 rounded"></div>
<div class="w-8 h-2 bg-orange-500 rounded"></div>
<div class="w-8 h-2 bg-gray-300 rounded"></div>
</div>
</div>
<p class="text-sm text-gray-600 mt-2">需警惕政策反复与贸易下滑风险</p>
</div>
</div>
<!-- 时间线 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-clock-rotate-left mr-3 text-indigo-600"></i>
关键事件演进
</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="glass-effect rounded-lg p-4">
<h4 class="font-semibold text-indigo-600">2023年起 - 长期背景</h4>
<p class="text-sm text-gray-600 mt-1">IMO与欧盟绿色减排法规构成"绿色壁垒"，对中国构成长期挑战</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="glass-effect rounded-lg p-4">
<h4 class="font-semibold text-indigo-600">2024年4月 - 冲突发酵</h4>
<p class="text-sm text-gray-600 mt-1">美国正式启动针对中国造船、海事物流的301调查</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="glass-effect rounded-lg p-4">
<h4 class="font-semibold text-indigo-600">2025年4月 - 反制酝酿</h4>
<p class="text-sm text-gray-600 mt-1">中国决定对韩华海洋采取反制措施</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot bg-red-500"></div>
<div class="glass-effect rounded-lg p-4 border-2 border-red-200">
<h4 class="font-semibold text-red-600">2025年10月14日 - 巅峰对峙</h4>
<p class="text-sm text-gray-600 mt-1">中美双方海事反制措施同步正式生效，进入实质性执行阶段</p>
</div>
<!-- Industry Chain Analysis -->
<div class="glass-card p-6 col-span-6 lg:col-span-3 grid-item">
<h2 class="text-2xl font-bold mb-4 text-blue-300 title-glow">产业链深度剖析</h2>
<div class="overflow-x-auto">
<table class="table table-zebra table-sm">
<thead class="text-slate-300">
<tr>
<th>产业链环节</th>
<th>逻辑分析</th>
<th>核心公司</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-semibold text-cyan-300">油运/散货</td>
<td><strong class="text-green-400">逻辑最纯粹受益者。</strong>“替代效应”导致有效供给收缩，运价弹性巨大。</td>
<td>中远海能, 招商轮船</td>
</tr>
<tr>
<td class="font-semibold text-cyan-300">船舶制造</td>
<td><strong class="text-green-400">间接受益者。</strong>“中国造”豁免条款强化性价比和避险属性，吸引新订单。</td>
<td>中国船舶, 中船防务</td>
</tr>
<tr>
<td class="font-semibold text-cyan-300">港口运营</td>
<td><strong class="text-yellow-400">角色复杂的参与者。</strong>可收取特别港务费增厚利润，但面临货量流失风险。</td>
<td>南京港, 上港集团</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 产业链图谱 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-sitemap mr-3 text-indigo-600"></i>
产业链结构图谱
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="industry-card rounded-xl p-6 text-white">
<div class="text-center mb-4">
<i class="fas fa-industry text-4xl mb-2"></i>
<h3 class="text-xl font-bold">上游：装备制造</h3>
</div>
<div class="space-y-2">
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">造船</p>
<p class="text-sm">中国船舶、中船防务</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">核心部件</p>
<p class="text-sm">亚星锚链、巨力索具</p>
</div>
</div>
</div>
<div class="industry-card rounded-xl p-6 text-white">
<div class="text-center mb-4">
<i class="fas fa-ship text-4xl mb-2"></i>
<h3 class="text-xl font-bold">中游：运输服务</h3>
</div>
<div class="space-y-2">
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">油轮运输</p>
<p class="text-sm">中远海能、招商轮船</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">散货运输</p>
<p class="text-sm">宁波海运、海通发展</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">集装箱运输</p>
<p class="text-sm">中远海控、中谷物流</p>
</div>
</div>
</div>
<div class="industry-card rounded-xl p-6 text-white">
<div class="text-center mb-4">
<i class="fas fa-anchor text-4xl mb-2"></i>
<h3 class="text-xl font-bold">下游：港口物流</h3>
</div>
<div class="space-y-2">
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">港口运营</p>
<p class="text-sm">上港集团、宁波港</p>
</div>
<div class="bg-white/20 rounded-lg p-3">
<p class="font-semibold">综合物流</p>
<p class="text-sm">中国外运</p>
</div>
</div>
</div>
<!-- Risks and Challenges -->
<div class="glass-card p-6 col-span-6 lg:col-span-3 grid-item">
<h2 class="text-2xl font-bold mb-4 text-red-400 title-glow">潜在风险与挑战</h2>
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong class="text-red-400">核心政策风险：</strong> 措施目前处于一年暂停期，若被永久搁置，概念基础将不复存在。</li>
<li><strong>商业化风险：</strong> 长期执行可能推高中国进口成本，带来输入性通胀压力。</li>
<li><strong>国际竞争风险：</strong> 可能促使国际航运联盟调整航线，分流中国港口业务至周边国家。</li>
<li><strong>信息时效性风险：</strong> 必须结合最新新闻动态，区分“潜在机制”与“当前暂停的现实”。</li>
</ul>
</div>
</div>
<!-- 核心公司对比 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-trophy mr-3 text-yellow-500"></i>
核心标的投资价值对比
</h2>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
<th class="rounded-tl-lg">公司名称</th>
<th>所属分类</th>
<th>核心逻辑</th>
<th>投资优势</th>
<th>潜在风险</th>
<th class="rounded-tr-lg">推荐评级</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">招商轮船</td>
<td><span class="badge badge-info">航运</span></td>
<td class="text-sm">油/散/车综合运输龙头</td>
<td class="text-sm">逻辑最纯粹、弹性最大</td>
<td class="text-sm">业务多元化，受全球贸易影响</td>
<td><span class="badge badge-success">★★★★★</span></td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">中远海能</td>
<td><span class="badge badge-info">航运</span></td>
<td class="text-sm">油运绝对龙头</td>
<td class="text-sm">业绩与运价高度相关</td>
<td class="text-sm">对原油贸易政策敏感</td>
<td><span class="badge badge-success">★★★★★</span></td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">中国船舶</td>
<td><span class="badge badge-warning">造船</span></td>
<td class="text-sm">国内造船绝对龙头</td>
<td class="text-sm">长期逻辑最坚实</td>
<td class="text-sm">业绩释放周期长</td>
<td><span class="badge badge-warning">★★★★</span></td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors">
<td class="font-semibold text-indigo-600">宁波港</td>
<td><span class="badge">港口</span></td>
<td class="text-sm">重要港口运营商</td>
<td class="text-sm">受益于进出口活跃</td>
<td class="text-sm">受益逻辑间接</td>
<td><span class="badge">★★★</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 风险提示 -->
<div class="glass-effect rounded-2xl p-8 mb-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-shield-halved mr-3 text-red-500"></i>
风险提示
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i>
<!-- Investment Conclusion -->
<div class="glass-card p-6 col-span-6 grid-item">
<h2 class="text-2xl font-bold mb-4 text-blue-300 title-glow">综合结论与投资启示</h2>
<div class="grid md:grid-cols-2 gap-6 text-slate-300">
<div>
<h4 class="font-semibold">政策博弈风险</h4>
<p class="text-sm">中美达成妥协或美方采取更激烈报复</p>
<h3 class="font-semibold text-lg text-slate-100 mb-2">综合看法</h3>
<p>概念处于由明确政策事件驱动，但因后续变化而进入**“潜力验证期”**。其基本面驱动尚未兑现，市场博弈的主要是其**未来被重新激活的预期**。</p>
</div>
</div>
<div class="alert alert-error">
<i class="fas fa-chart-line-down"></i>
<div>
<h4 class="font-semibold">商业化风险</h4>
<p class="text-sm">航运强周期，运价上涨持续性存疑</p>
<h3 class="font-semibold text-lg text-slate-100 mb-2">最具投资价值环节</h3>
<p><strong class="text-green-300">非美资背景的远洋油品和干散货运输环节</strong>是逻辑最顺、潜在弹性最大的方向。其投资价值类似于一个深度价外的“地缘政治看涨期权”。</p>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-gavel"></i>
<div>
<h4 class="font-semibold">执行风险</h4>
<p class="text-sm">股权认定复杂，政策效果可能打折扣</p>
<div class="md:col-span-2">
<h3 class="font-semibold text-lg text-slate-100 mb-2">需重点跟踪的关键指标</h3>
<ul class="list-disc list-inside space-y-1">
<li><strong>政策面(最关键):</strong> 2026年10月暂停期结束后中美的官方声明。</li>
<li><strong>地缘政治:</strong> 南海、台海等区域的紧张局势变化。</li>
<li><strong>行业基本面:</strong> BDI/BDTI等运价指数，全球关键船型在手订单、交付及拆解数据。</li>
</ul>
</div>
</div>
</div>
<!-- Rise Analysis Supplement -->
<div class="glass-card p-6 col-span-6 grid-item">
<h2 class="text-2xl font-bold mb-4 text-blue-300 title-glow">相关个股涨幅异动解析</h2>
<div class="space-y-4">
<div class="collapse collapse-arrow bg-slate-900/50">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium text-slate-200">
中水渔业 / 国联水产 等 (对日水产品反制)
</div>
<div class="collapse-content">
<p class="text-slate-300">
由地缘政治言论引发，市场预期中国将扩大对日本水产品的进口限制。核心逻辑是**“国产替代”**，远洋捕捞及水产养殖企业被视为直接受益者。
<br/><br/>
<strong class="text-amber-400">驱动模式：</strong> 纯粹的事件与情绪驱动，与公司当期业绩无关。如中水渔业，因其“央企+小市值”属性成为资金博弈弹性的首选标的。行情高度依赖于中日关系的后续发展，风险与不确定性极高。
</p>
</div>
</div>
<div class="collapse collapse-arrow bg-slate-900/50">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium text-slate-200">
南京港 (对美反制收费)
</div>
<div class="collapse-content">
<p class="text-slate-300">
核心逻辑是作为反制措施的执行方，对美籍/美资船舶征收特别港务费将**直接增厚利润**。
<br/><br/>
<strong class="text-amber-400">驱动模式：</strong> 明确的政策利好，可进行静态财务测算。市场将其视为零成本的收入增量，直接利好业绩。这是海事反制概念中，逻辑最直接、最容易量化的受益方向之一。
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 完整股票列表 -->
<div class="glass-effect rounded-2xl p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-list mr-3 text-green-500"></i>
概念成分股完整列表
</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr class="bg-gradient-to-r from-green-500 to-teal-600 text-white">
<th class="rounded-tl-lg">股票名称</th>
<th>分类</th>
<th>细分领域</th>
<th>投资逻辑</th>
<th class="rounded-tr-lg">热度评级</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 动态生成股票数据 -->
</tbody>
</table>
<!-- Stock List Table -->
<div class="glass-card p-6 col-span-6 grid-item">
<h2 class="text-2xl font-bold mb-6 text-blue-300 title-glow">相关股票列表</h2>
<div class="overflow-x-auto">
<table class="table w-full">
<thead class="text-sm text-slate-300">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>细分领域</th>
</tr>
</thead>
<tbody>
<!-- Data will be populated here by a script or template engine -->
<tr><td>南京港</td><td>-</td><td>港口</td><td>港口</td></tr>
<tr><td>宁波港</td><td><a href="https://valuefrontier.cn/company?scode=601018" target="_blank" class="link link-hover text-blue-400">601018</a></td><td>港口</td><td>港口</td></tr>
<tr><td>上港集团</td><td><a href="https://valuefrontier.cn/company?scode=600018" target="_blank" class="link link-hover text-blue-400">600018</a></td><td>港口</td><td>港口</td></tr>
<tr><td>招商港口</td><td><a href="https://valuefrontier.cn/company?scode=001872" target="_blank" class="link link-hover text-blue-400">001872</a></td><td>港口</td><td>港口</td></tr>
<tr><td>中国船舶</td><td><a href="https://valuefrontier.cn/company?scode=600150" target="_blank" class="link link-hover text-blue-400">600150</a></td><td>造船</td><td>造船</td></tr>
<tr><td>中船防务</td><td><a href="https://valuefrontier.cn/company?scode=600685" target="_blank" class="link link-hover text-blue-400">600685</a></td><td>造船</td><td>造船</td></tr>
<tr><td>亚星锚链</td><td><a href="https://valuefrontier.cn/company?scode=601890" target="_blank" class="link link-hover text-blue-400">601890</a></td><td>索具/锚链</td><td>船舶配套</td></tr>
<tr><td>巨力索具</td><td><a href="https://valuefrontier.cn/company?scode=002342" target="_blank" class="link link-hover text-blue-400">002342</a></td><td>索具/锚链</td><td>船舶配套</td></tr>
<tr><td>中远海能</td><td><a href="https://valuefrontier.cn/company?scode=600026" target="_blank" class="link link-hover text-blue-400">600026</a></td><td>油品/化学品/船舶租赁</td><td>航运</td></tr>
<tr><td>招商轮船</td><td><a href="https://valuefrontier.cn/company?scode=601872" target="_blank" class="link link-hover text-blue-400">601872</a></td><td>油品/汽车</td><td>航运</td></tr>
<tr><td>招商南油</td><td><a href="https://valuefrontier.cn/company?scode=601975" target="_blank" class="link link-hover text-blue-400">601975</a></td><td>油品/化学品</td><td>航运</td></tr>
<tr><td>中远海控</td><td><a href="https://valuefrontier.cn/company?scode=601919" target="_blank" class="link link-hover text-blue-400">601919</a></td><td>集装箱</td><td>航运</td></tr>
<tr><td>中谷物流</td><td><a href="https://valuefrontier.cn/company?scode=603565" target="_blank" class="link link-hover text-blue-400">603565</a></td><td>集装箱</td><td>航运</td></tr>
<tr><td>中国外运</td><td><a href="https://valuefrontier.cn/company?scode=601598" target="_blank" class="link link-hover text-blue-400">601598</a></td><td>集装箱</td><td>航运</td></tr>
<tr><td>海通发展</td><td><a href="https://valuefrontier.cn/company?scode=603162" target="_blank" class="link link-hover text-blue-400">603162</a></td><td>船舶租赁</td><td>航运</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="text-center text-slate-500 text-xs mt-12">
<p>北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据，投资需谨慎。</p>
</footer>
</div>
<!-- 底部信息 -->
<footer class="glass-effect mt-12 py-6">
<div class="container mx-auto px-4 text-center">
<p class="text-sm text-gray-600">
<i class="fas fa-info-circle mr-2"></i>
本分析基于公开信息整理，仅供参考，不构成投资建议
</p>
<p class="text-xs text-gray-500 mt-2">
数据更新：2025年10月14日 | 关键催化剂：中美海事反制措施同步生效
</p>
</div>
</footer>
<script>
// 股票数据
const stockData = [
{ name: '南京港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '宁波港', category: '港口', subcategory: '', logic: '港口运营', hotness: 4 },
{ name: '广州港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '盐田港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '珠海港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '连云港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '重庆港', category: '港口', subcategory: '', logic: '港口运营', hotness: 2 },
{ name: '唐山港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '青岛港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '日照港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '天津港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '锦州港', category: '港口', subcategory: '', logic: '港口运营', hotness: 2 },
{ name: '招商港口', category: '港口', subcategory: '', logic: '港口运营', hotness: 4 },
{ name: '秦港股份', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '北部湾港', category: '港口', subcategory: '', logic: '港口运营', hotness: 3 },
{ name: '上港集团', category: '港口', subcategory: '', logic: '港口运营', hotness: 4 },
{ name: '中船防务', category: '造船', subcategory: '', logic: '船舶制造', hotness: 4 },
{ name: '中国船舶', category: '造船', subcategory: '', logic: '船舶制造', hotness: 5 },
{ name: '亚光科技', category: '造船', subcategory: '', logic: '船舶制造', hotness: 3 },
{ name: '江龙船艇', category: '造船', subcategory: '', logic: '船舶制造', hotness: 3 },
{ name: '天海防务', category: '造船', subcategory: '', logic: '船舶制造', hotness: 3 },
{ name: '巨力索具', category: '索具/锚链', subcategory: '', logic: '生产索具和锚链产品', hotness: 3 },
{ name: '亚星锚链', category: '索具/锚链', subcategory: '', logic: '生产索具和锚链产品', hotness: 4 },
{ name: '招商南油', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 4 },
{ name: '中远海能', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 5 },
{ name: '招商轮船', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 5 },
{ name: '兴通股份', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 3 },
{ name: '盛航股份', category: '航运', subcategory: '油品', logic: '油品运输业务', hotness: 3 },
{ name: '盛航股份', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 3 },
{ name: '兴通股份', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 3 },
{ name: '招商南油', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 4 },
{ name: '中远海能', category: '航运', subcategory: '化学品', logic: '化学品运输业务', hotness: 4 },
{ name: '宁波海运', category: '航运', subcategory: '煤炭', logic: '煤炭运输业务', hotness: 3 },
{ name: '招商轮船', category: '航运', subcategory: '汽车', logic: '汽车运输业务', hotness: 4 },
{ name: '中远海特', category: '航运', subcategory: '汽车', logic: '汽车运输业务', hotness: 3 },
{ name: '中谷物流', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '安通控股', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '中国外运', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '宁波远洋', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '中远海控', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '海航科技', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '中集集团', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 4 },
{ name: '中远海发', category: '航运', subcategory: '集装箱', logic: '集装箱运输业务', hotness: 3 },
{ name: '海通发展', category: '航运', subcategory: '船舶租赁', logic: '船舶租赁业务', hotness: 3 },
{ name: '中远海能', category: '航运', subcategory: '船舶租赁', logic: '船舶租赁业务', hotness: 4 },
{ name: '国航远洋', category: '北交所', subcategory: '', logic: '北交所上市', hotness: 2 },
{ name: '华光源海', category: '北交所', subcategory: '', logic: '北交所上市', hotness: 2 }
];
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('timeline-chart');
var myChart = echarts.init(chartDom, 'dark'); // Initialize with dark theme
var option;
// 生成股票表格
function generateStockTable() {
const tbody = document.getElementById('stockTableBody');
stockData.forEach((stock, index) => {
const row = document.createElement('tr');
row.className = 'stock-row transition-all duration-200';
// 生成热度星级
let hotnessStars = '';
for(let i = 0; i < 5; i++) {
if(i < stock.hotness) {
hotnessStars += '<i class="fas fa-star text-yellow-400"></i>';
} else {
hotnessStars += '<i class="far fa-star text-gray-300"></i>';
option = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: false,
playInterval: 3000,
data: ['2024-09', '2025-01', '2025-10-10', '2025-10-14', '2025-10-30'],
label: {
formatter: function (s) {
return new Date(s).getFullYear() + '-' + (new Date(s).getMonth() + 1);
},
color: '#94A3B8' // slate-400
},
lineStyle: { color: '#3B82F6' },
itemStyle: { color: '#60A5FA', borderColor: '#3B82F6' },
checkpointStyle: { color: '#A78BFA', borderColor: 'rgba(167, 139, 250, 0.6)' },
controlStyle: { color: '#94A3B8', borderColor: '#94A3B8' },
emphasis: {
label: { color: '#fff' },
itemStyle: { color: '#A78BFA' }
},
},
backgroundColor: 'transparent',
title: {
subtext: '关键事件驱动',
left: 'center',
textStyle: {
color: '#E2E8F0'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
type: 'graph',
layout: 'force',
force: {
repulsion: 200,
edgeLength: 120
},
roam: true,
label: {
show: true,
position: 'right',
formatter: '{b}',
color: '#E2E8F0',
fontSize: 14
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
}
}
]
},
options: [
{
title: { text: '2024-09: 地缘政治背景' },
series: [{ data: [{name: '地缘政治背景', symbolSize: 80, itemStyle: {color: '#F87171'}}, {name: '南海反制表态', symbolSize: 50, itemStyle: {color: '#F87171'}}], links: [{source: 0, target: 1}] }]
},
{
title: { text: '2025-01: 贸易摩擦升级' },
series: [{ data: [{name: '贸易摩擦升级', symbolSize: 80, itemStyle: {color: '#FBBF24'}}, {name: '美发布301调查报告', symbolSize: 50, itemStyle: {color: '#FBBF24'}}, {name: '中方称将捍卫权益', symbolSize: 50, itemStyle: {color: '#FBBF24'}}], links: [{source: 0, target: 1}, {source: 0, target: 2}] }]
},
{
title: { text: '2025-10-10: 反制措施宣布' },
series: [{ data: [{name: '反制措施宣布', symbolSize: 80, itemStyle: {color: '#34D399'}}, {name: '依据《国际海运条例》', symbolSize: 50, itemStyle: {color: '#34D399'}}, {name: '征收特别港务费', symbolSize: 50, itemStyle: {color: '#34D399'}}], links: [{source: 0, target: 1}, {source: 0, target: 2}] }]
},
{
title: { text: '2025-10-14: 措施正式生效' },
series: [{ data: [{name: '措施正式生效', symbolSize: 80, itemStyle: {color: '#60A5FA'}}, {name: '中美措施同步', symbolSize: 50, itemStyle: {color: '#60A5FA'}}, {name: '制裁韩华海洋美国子公司', symbolSize: 50, itemStyle: {color: '#60A5FA'}}], links: [{source: 0, target: 1}, {source: 0, target: 2}] }]
},
{
title: { text: '2025-10-30: 事件暂缓' },
series: [{ data: [{name: '事件暂缓', symbolSize: 80, itemStyle: {color: '#A78BFA'}}, {name: '双方暂停措施一年', symbolSize: 50, itemStyle: {color: '#A78BFA'}}, {name: '进入观察期', symbolSize: 50, itemStyle: {color: '#A78BFA'}}], links: [{source: 0, target: 1}, {source: 0, target: 2}] }]
}
}
// 生成分类徽章
let categoryBadge = '';
if(stock.category === '港口') {
categoryBadge = '<span class="badge badge-info">港口</span>';
} else if(stock.category === '造船') {
categoryBadge = '<span class="badge badge-warning">造船</span>';
} else if(stock.category === '航运') {
categoryBadge = '<span class="badge badge-success">航运</span>';
} else if(stock.category === '索具/锚链') {
categoryBadge = '<span class="badge badge-secondary">索具/锚链</span>';
} else {
categoryBadge = '<span class="badge">北交所</span>';
}
row.innerHTML = `
<td class="font-semibold">${stock.name}</td>
<td>${categoryBadge}</td>
<td class="text-sm">${stock.subcategory || '-'}</td>
<td class="text-sm">${stock.logic}</td>
<td>${hotnessStars}</td>
`;
tbody.appendChild(row);
});
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
generateStockTable();
// 添加平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if(target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
// 添加滚动时的动画效果
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
]
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.hover-scale, .glass-effect').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>
</html>