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

501
public/htmls/航运.html Normal file
View File

@@ -0,0 +1,501 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="night">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>航运 (Shipping) - AI 深度投研报告</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;700&family=Space+Grotesk:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #010008;
background-image:
radial-gradient(ellipse 20% 40% at 20% 40%, rgba(100, 10, 200, 0.3), transparent),
radial-gradient(ellipse 20% 40% at 80% 60%, rgba(20, 150, 250, 0.3), transparent);
background-repeat: no-repeat;
background-attachment: fixed;
color: #E0E0E0;
}
.font-oxanium {
font-family: 'Oxanium', cursive;
}
.glass-card {
background: rgba(10, 10, 25, 0.4);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2rem; /* 极致圆角 */
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(90, 200, 255, 0.2);
border-color: rgba(255, 255, 255, 0.2);
}
.glow-text {
text-shadow: 0 0 8px rgba(173, 216, 230, 0.7), 0 0 10px rgba(173, 216, 230, 0.5);
}
.section-header {
font-family: 'Oxanium', cursive;
font-size: 2.25rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #FFFFFF;
padding-bottom: 0.5rem;
border-bottom: 2px solid;
border-image: linear-gradient(90deg, rgba(60, 200, 255, 0.8), rgba(60, 200, 255, 0)) 1;
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
}
.bento-item {
grid-column: span 12;
}
@media (min-width: 768px) {
.bento-item-span-4 { grid-column: span 4; }
.bento-item-span-6 { grid-column: span 6; }
.bento-item-span-8 { grid-column: span 8; }
.bento-item-span-12 { grid-column: span 12; }
}
.tag {
background-color: rgba(60, 200, 255, 0.1);
border: 1px solid rgba(60, 200, 255, 0.3);
color: #90dfff;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 500;
}
.disclaimer {
font-size: 0.75rem;
color: #a0aec0;
text-align: center;
}
.table thead th {
background-color: rgba(60, 200, 255, 0.1);
color: #fff;
font-family: 'Oxanium', cursive;
font-size: 1rem;
letter-spacing: .05em;
}
.table tbody tr:hover {
background-color: rgba(60, 200, 255, 0.08);
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto p-4 md:p-8">
<!-- Header -->
<header class="text-center mb-12 md:mb-16">
<h1 class="text-5xl md:text-7xl font-oxanium font-bold glow-text mb-4 tracking-widest">
航运 SHIPPING
</h1>
<p class="text-lg text-info">AI 深度投研报告</p>
<p class="text-sm text-gray-400 mt-2">北京价值前沿科技有限公司 AI投研agent：“价小前投研”</p>
</header>
<!-- Core Insight -->
<section class="mb-12 md:mb-16">
<div class="glass-card p-6 md:p-8">
<h2 class="section-header mb-6">核心观点摘要</h2>
<p class="text-xl md:text-2xl leading-relaxed text-gray-200">
航运业正处于一轮由<strong class="text-cyan-300">有效供给收缩</strong>而非需求强劲复苏驱动的强周期行情中。地缘政治冲突（红海、中东）、贸易格局重塑（中美关税、产业链转移）和长期供给侧限制（低订单、环保法规）是其核心驱动力，导致各细分赛道（集运、油运、干散）逻辑分化且波动加剧，投资机会与风险并存。
</p>
</div>
</section>
<!-- Key Events Timeline (Bento Grid) -->
<section class="mb-12 md:mb-16">
<h2 class="section-header mb-8">概念事件与催化剂时间轴</h2>
<div class="bento-grid">
<div class="bento-item bento-item-span-12 md:bento-item-span-6 glass-card p-6 flex flex-col justify-between min-h-[250px]">
<div>
<p class="font-oxanium text-info text-sm">2024年初 - 至今</p>
<h3 class="text-2xl font-bold mt-2 mb-3">双运河危机 & 供应链扰动</h3>
<p class="text-gray-300">红海危机与巴拿马运河干旱，迫使航运绕行，航程增加导致有效运力大幅收缩。研报(2024-01-04)指出，双重危机严重扰乱全球网络，<strong class="text-cyan-400">集运是最大受益者</strong>。</p>
</div>
<div class="mt-4"><span class="tag">地缘政治</span><span class="tag ml-2">供应链</span></div>
</div>
<div class="bento-item bento-item-span-12 md:bento-item-span-6 glass-card p-6 flex flex-col justify-between min-h-[250px]">
<div>
<p class="font-oxanium text-info text-sm">2025年4月 - 5月</p>
<h3 class="text-2xl font-bold mt-2 mb-3">中美关税博弈 & “抢运潮”</h3>
<p class="text-gray-300">关税不确定性引发恐慌性“抢运”。路演(2025-05-14)数据显示，美西航线运价在 <strong class="text-red-400">48小时内从2400飙升至3500美元/TEU</strong>。同时东南亚转口贸易激增，港口爆仓。</p>
</div>
<div class="mt-4"><span class="tag">贸易政策</span><span class="tag ml-2">运价飙升</span></div>
</div>
<div class="bento-item bento-item-span-12 md:bento-item-span-8 glass-card p-6 flex flex-col justify-between min-h-[250px]">
<div>
<p class="font-oxanium text-info text-sm">2025年6月 - 至今</p>
<h3 class="text-2xl font-bold mt-2 mb-3">中东地缘政治风险升级</h3>
<p class="text-gray-300">以色列空袭伊朗，后者威胁封锁霍尔木兹海峡（占全球石油出口30%）。路演(2025-06-23)显示，VLCC中东至中国运价从 <strong class="text-red-400">2.2万美元/天暴涨至5.8万美元/天</strong>，涨幅154%。</p>
</div>
<div class="mt-4"><span class="tag">油运</span><span class="tag ml-2">风险溢价</span></div>
</div>
<div class="bento-item bento-item-span-12 md:bento-item-span-4 glass-card p-6 flex flex-col justify-between min-h-[250px]">
<div>
<p class="font-oxanium text-info text-sm">2025年9月</p>
<h3 class="text-2xl font-bold mt-2 mb-3">北极航线通航</h3>
<p class="text-gray-300">全球首条中欧北极集装箱快航通航，时效缩短至18天。短期运力影响有限，但代表对传统航线的潜在突破。</p>
</div>
<div class="mt-4"><span class="tag">技术突破</span><span class="tag ml-2">新航线</span></div>
</div>
</div>
</section>
<!-- Market Data Tracking -->
<section class="mb-12 md:mb-16">
<h2 class="section-header mb-8">关键运价指数跟踪</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="glass-card p-6">
<h3 class="font-oxanium text-xl font-bold mb-4 text-white">集装箱运价指数 (SCFI)</h3>
<div id="scfiChart" class="w-full h-80"></div>
</div>
<div class="glass-card p-6">
<h3 class="font-oxanium text-xl font-bold mb-4 text-white">干散货运价指数 (BDI)</h3>
<div id="bdiChart" class="w-full h-80"></div>
</div>
<div class="glass-card p-6">
<h3 class="font-oxanium text-xl font-bold mb-4 text-white">原油油运指数 (BDTI)</h3>
<div id="bdtiChart" class="w-full h-80"></div>
</div>
<div class="glass-card p-6">
<h3 class="font-oxanium text-xl font-bold mb-4 text-white">成品油运指数 (BCTI)</h3>
<div id="bctiChart" class="w-full h-80"></div>
</div>
</div>
</section>
<!-- Deep Dive Analysis -->
<section class="mb-12 md:mb-16">
<h2 class="section-header mb-8">核心逻辑与市场认知深度剖析</h2>
<div class="space-y-8">
<div class="glass-card p-6 md:p-8">
<h3 class="font-oxanium text-2xl font-bold mb-4 text-white">核心驱动力：从需求周期到供给冲击的范式转移</h3>
<div class="space-y-4 text-gray-300">
<p><strong class="text-cyan-400">1. 结构性供给不足：</strong>这是本轮周期的基石。国君交运研报(2024-09-10)指出，历经十年萧条，全球造船产能已大幅出清。干散货、油轮在手订单占现有运力比例均处历史低位（干散货5.9%~8.7%，油轮约15%）。同时，IMO环保新规（EEXI, CII）迫使老旧船舶降速或提前拆解，进一步压缩存量运力。</p>
<p><strong class="text-cyan-400">2. 地缘政治驱动的“有效运力”黑天鹅：</strong>红海绕行、中东冲突等事件，并非减少物理船舶数量，而是通过拉长航行距离和增加风险溢价，急剧减少单位时间内的“有效运力”，造成事实上的供给短缺。这是驱动集运和油运运价暴涨的最直接原因。</p>
<p><strong class="text-cyan-400">3. 贸易格局重塑带来的结构性需求：</strong>路演(2025-04-13)揭示了中美关税驱动下的“转口贸易”模式：货物从中国运往东南亚，再转运至美国。这极大地增加了亚洲区域内航线需求，并使北部湾港、青岛港等相关港口受益。</p>
</div>
</div>
<div class="glass-card p-6 md:p-8">
<h3 class="font-oxanium text-2xl font-bold mb-4 text-white">预期差分析：宏观叙事与微观现实</h3>
<div class="space-y-4 text-gray-300">
<p><strong class="text-purple-400">1. 短期爆点 vs. 长期价值：</strong>市场过度关注“抢运潮”和地缘风险溢价，可能忽略了环保法规对老旧船舶的长期出清效应。路演(2024-03-03)提到，15年以上老旧船占比超20%-33%，CII评级将加速淘汰，这是一个持续且影响深远的供给侧变量。</p>
<p><strong class="text-purple-400">2. 业绩预期 vs. 经营风险：</strong>研报(2024-08-12)揭示，在运价上涨周期中，太平洋航运因提前锁定较低租约，导致业绩跑输市场指数。这表明，即使行业景气，公司的经营策略（合约锁定比例）也会导致其业绩与市场预期产生巨大偏差。</p>
<p><strong class="text-purple-400">3. 新兴概念 vs. 基本面：</strong>中远海科股价上涨逻辑是“航运RWA+稳定币”，但公司公告却显示2025年H1净利润预计同比下降90%以上。这构成了巨大的预期差，市场可能在交易一个与其基本面严重脱节的“故事”。</p>
</div>
</div>
</div>
</section>
<!-- Industry Chain & Key Players -->
<section class="mb-12 md:mb-16" x-data="{ tab: 'container' }">
<h2 class="section-header mb-8">产业链与核心公司深度剖析</h2>
<div class="glass-card p-6 md:p-8 mb-8">
<h3 class="font-oxanium text-2xl font-bold mb-4 text-white">产业链图谱</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h4 class="text-lg font-bold text-cyan-300 border-b border-cyan-300/50 pb-2 mb-3">上游：资产与服务</h4>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>船舶制造/维修:</strong> 中国船舶, 中国重工</li>
<li><strong>金融服务(租赁/保险):</strong> 渤海租赁, 中航产融</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold text-green-300 border-b border-green-300/50 pb-2 mb-3">中游：航运运营</h4>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>干散货:</strong> 凤凰航运, 宁波海运</li>
<li><strong>集装箱:</strong> 中远海控, 锦江航运</li>
<li><strong>油品/化工:</strong> 招商轮船, 中远海能</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold text-yellow-300 border-b border-yellow-300/50 pb-2 mb-3">下游：港口与物流</h4>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>港口运营:</strong> 上港集团, 青岛港, 北部湾港</li>
<li><strong>货运代理:</strong> 华贸物流, 中国外运</li>
</ul>
</div>
</div>
</div>
<div class="glass-card p-6 md:p-8">
<h3 class="font-oxanium text-2xl font-bold mb-4 text-white">核心玩家对比</h3>
<div class="tabs tabs-boxed bg-black/20 mb-6">
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'container' }" @click="tab = 'container'">集运双雄</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'drybulk' }" @click="tab = 'drybulk'">干散货代表</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'tanker' }" @click="tab = 'tanker'">油运巨头</a>
</div>
<div x-show="tab === 'container'" x-transition>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-xl font-bold text-white mb-2">中远海控</h4>
<p class="text-info font-semibold mb-3">逻辑：“全球混乱的受益者”</p>
<p class="text-gray-300">全球集运巨头，红海绕行等事件直接拉长其主干航线，运价弹性巨大。路演测算美线运价每涨50%，边际利润或增70亿美元。风险在于全球供应链恢复正常后超额收益将迅速消失。</p>
</div>
<div>
<h4 class="text-xl font-bold text-white mb-2">锦江航运</h4>
<p class="text-info font-semibold mb-3">逻辑：“区域贸易结构性增长的受益者”</p>
<p class="text-gray-300">亚洲区域龙头，深度受益于产业链向东南亚转移和中美转口贸易。其逻辑纯粹性更高，受全球干线波动影响相对较小，但面临区域竞争和贸易政策风险。</p>
<p class="mt-2 text-green-400 font-bold">验证：其2025年Q1净利同比+180%-193%强力印证了“转口贸易”逻辑。</p>
</div>
</div>
</div>
<div x-show="tab === 'drybulk'" x-transition>
<div>
<h4 class="text-xl font-bold text-white mb-2">太平洋航运</h4>
<p class="text-info font-semibold mb-3">逻辑：“全球经济温和复苏 + 供给侧长期刚性”</p>
<p class="text-gray-300">逻辑最纯粹的干散货标的。需求与全球GDP和小宗商品（粮食、铝土矿）相关，供给端深度受益于低订单和环保法规。相比油运，其逻辑更偏向于经典的基本面周期，而非事件驱动。</p>
</div>
</div>
<div x-show="tab === 'tanker'" x-transition>
<div>
<h4 class="text-xl font-bold text-white mb-2">招商轮船 / 中远海能</h4>
<p class="text-info font-semibold mb-3">逻辑：“供给刚性 + 地缘政治风险溢价”</p>
<p class="text-gray-300">供给端面临低订单和船队老化。但最大的超额收益来自地缘冲突，运价波动性极大。是典型的高风险高回报板块，投资决策更接近于对地缘政治的博弈。</p>
</div>
</div>
</div>
</section>
<!-- Market Movers -->
<section class="mb-12 md:mb-16">
<h2 class="section-header mb-8">市场异动个股解析</h2>
<div class="space-y-4">
<div class="collapse collapse-plus glass-card">
<input type="radio" name="my-accordion-2" checked="checked" />
<div class="collapse-title text-xl font-medium font-oxanium">
连云港 (601008) - 港口航运板块联动
</div>
<div class="collapse-content">
<p><strong>核心结论:</strong> 涨停主要受港口航运板块集体大涨及主力资金大幅流入推动，叠加国际局势影响下的航运贸易预期改善。<br><strong>驱动概念:</strong> 港口航运 + 中俄贸易 + 物联网<br><strong>解析:</strong> 1. 伊朗考虑关闭霍尔木兹海峡引发航运紧张，作为重要港口企业直接受益。 2. 公司地处"一带一路"交汇点，是新亚欧大陆桥东方桥头堡，受益于中俄贸易预期增加。 3. 智慧港口建设持续推进，物联网技术提升运营效率。</p>
</div>
</div>
<div class="collapse collapse-plus glass-card">
<input type="radio" name="my-accordion-2" />
<div class="collapse-title text-xl font-medium font-oxanium">
中远海科 (002401) - RWA概念催化
</div>
<div class="collapse-content">
<p><strong>核心结论:</strong> 上海国资委专题学习“稳定币+RWA”并点名航运场景，公司被资金视为“上海航运RWA”唯一试点标的而涨停。<br><strong>驱动概念:</strong> 航运RWA + 上海稳定币 + 数据资产<br><strong>解析:</strong> 1. 消息面催化：上海官方首次明确研究“航运RWA+稳定币”，公司示范案例地位凸显。 2. 业务闭环：船视宝数据资产已挂牌交易，运费应收款上链融资已落地。 3. 风险点：公司预计2025H1净利同比下降90%以上，基本面与概念严重脱节。</p>
</div>
</div>
</div>
</section>
<!-- Conclusion & Stock List -->
<section class="mb-12 md:mb-16">
<h2 class="section-header mb-8">综合结论与投资启示</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2 glass-card p-6 md:p-8">
<h3 class="font-oxanium text-2xl font-bold mb-4 text-white">综合看法</h3>
<p class="text-gray-300 mb-6">航运概念目前处于<strong class="text-cyan-300">“基本面驱动”与“主题炒作”共振</strong>的复杂阶段。供给侧的长期紧张格局提供了坚实的基本面底部支撑，而地缘政治和贸易政策的突发事件则不断提供向上弹性的主题炒作机会。这决定了其高波动、高赔率的特性。</p>
<h3 class="font-oxanium text-2xl font-bold mb-4 text-white">最具投资价值的细分环节</h3>
<ul class="space-y-3 text-gray-300">
<li><strong class="text-green-400">1. 亚洲区域集运:</strong> 同时受益于长期结构性趋势（产业链转移）和短期事件催化（主干航线混乱溢出），增长逻辑最为坚实和多元。代表公司：锦江航运。</li>
<li><strong class="text-green-400">2. 干散货航运:</strong> 逻辑最贴近传统的供需周期，受地缘政治“噪音”影响相对较小，适合偏好基本面分析的投资者。代表公司：太平洋航运。</li>
<li><strong class="text-green-400">3. 与贸易新格局绑定的港口:</strong> 作为贸易流向变化的“收费站”，受益于中国-东盟贸易增长，逻辑稳健，适合风险偏好较低的投资者。代表公司：北部湾港、青岛港。</li>
</ul>
</div>
<div class="lg:col-span-1 glass-card p-6 md:p-8">
<h3 class="font-oxanium text-2xl font-bold mb-4 text-white">需重点跟踪的关键指标</h3>
<ul class="list-disc list-inside space-y-3 text-gray-300">
<li><strong>供给端:</strong> 新船订单/手持订单占比、船舶拆解量。</li>
<li><strong>运价:</strong> SCFI、BDI、BDTI/BCTI指数及期货。</li>
<li><strong>宏观贸易:</strong> 中国-东盟双边贸易额, PMI及库存。</li>
<li><strong>公司层面:</strong> 合同锁定比例与即期市场敞口, 燃油成本。</li>
</ul>
</div>
</div>
</section>
<!-- Stock Table -->
<section>
<h2 class="section-header mb-8">航运概念相关标的</h2>
<div class="overflow-x-auto glass-card p-4">
<table class="table w-full">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心业务/逻辑</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<tr><td>凤凰航运</td><td><a href="https://valuefrontier.cn/company?scode=000520" target="_blank" class="link link-info">000520</a></td><td>干散运输</td><td><div class="badge badge-primary badge-outline">海运-干散运输</div></td></tr>
<tr><td>海航科技</td><td><a href="https://valuefrontier.cn/company?scode=600751" target="_blank" class="link link-info">600751</a></td><td>干散运输</td><td><div class="badge badge-primary badge-outline">海运-干散运输</div></td></tr>
<tr><td>宁波海运</td><td><a href="https://valuefrontier.cn/company?scode=600798" target="_blank" class="link link-info">600798</a></td><td>干散运输</td><td><div class="badge badge-primary badge-outline">海运-干散运输</div></td></tr>
<tr><td>宁波远洋</td><td><a href="https://valuefrontier.cn/company?scode=601022" target="_blank" class="link link-info">601022</a></td><td>干散运输</td><td><div class="badge badge-primary badge-outline">海运-干散运输</div></td></tr>
<tr><td>海通发展</td><td><a href="https://valuefrontier.cn/company?scode=603162" target="_blank" class="link link-info">603162</a></td><td>干散运输</td><td><div class="badge badge-primary badge-outline">海运-干散运输</div></td></tr>
<tr><td>锦江航运</td><td><a href="https://valuefrontier.cn/company?scode=601083" target="_blank" class="link link-info">601083</a></td><td>集装箱运输(亚洲区域龙头)</td><td><div class="badge badge-secondary badge-outline">海运-集装箱</div></td></tr>
<tr><td>中远海控</td><td><a href="https://valuefrontier.cn/company?scode=601919" target="_blank" class="link link-info">601919</a></td><td>集装箱运输(全球干线)</td><td><div class="badge badge-secondary badge-outline">海运-集装箱</div></td></tr>
<tr><td>招商南油</td><td><a href="https://valuefrontier.cn/company?scode=601975" target="_blank" class="link link-info">601975</a></td><td>油运</td><td><div class="badge badge-accent badge-outline">海运-油运</div></td></tr>
<tr><td>招商轮船</td><td><a href="https://valuefrontier.cn/company?scode=601872" target="_blank" class="link link-info">601872</a></td><td>油运</td><td><div class="badge badge-accent badge-outline">海运-油运</div></td></tr>
<tr><td>渤海租赁</td><td><a href="https://valuefrontier.cn/company?scode=000415" target="_blank" class="link link-info">000415</a></td><td>租赁</td><td><div class="badge badge-info badge-outline">海运-租赁</div></td></tr>
<tr><td>华贸物流</td><td><a href="https://valuefrontier.cn/company?scode=603128" target="_blank" class="link link-info">603128</a></td><td>货代</td><td><div class="badge badge-warning badge-outline">服务-货代</div></td></tr>
<tr><td>中国船舶</td><td><a href="https://valuefrontier.cn/company?scode=600150" target="_blank" class="link link-info">600150</a></td><td>船舶制造/维修</td><td><div class="badge badge-error badge-outline">服务-维修</div></td></tr>
<tr><td>上港集团</td><td><a href="https://valuefrontier.cn/company?scode=600018" target="_blank" class="link link-info">600018</a></td><td>港口运营</td><td><div class="badge badge-success badge-outline">港口</div></td></tr>
<tr><td>青岛港</td><td><a href="https://valuefrontier.cn/company?scode=601298" target="_blank" class="link link-info">601298</a></td><td>港口运营</td><td><div class="badge badge-success badge-outline">港口</div></td></tr>
<tr><td>招商港口</td><td><a href="https://valuefrontier.cn/company?scode=001872" target="_blank" class="link link-info">001872</a></td><td>港口运营</td><td><div class="badge badge-success badge-outline">港口</div></td></tr>
<tr><td>国航远洋</td><td><a href="https://valuefrontier.cn/company?scode=920571" target="_blank" class="link link-info">920571</a></td><td>北交所上市航运公司</td><td><div class="badge badge-neutral">北交所</div></td></tr>
</tbody>
</table>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 pt-8 border-t border-gray-700/50">
<p class="disclaimer">
呈现方：北京价值前沿科技有限公司 AI投研agent：“价小前投研”。<br>
本报告基于公开数据由AI合成，不构成任何投资建议，投资需谨慎。
</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const chartTheme = {
backgroundColor: 'transparent',
textStyle: {
color: '#E0E0E0',
fontFamily: 'Space Grotesk'
},
title: {
textStyle: {
color: '#FFFFFF',
fontFamily: 'Oxanium'
}
},
legend: {
textStyle: {
color: '#E0E0E0'
}
},
tooltip: {
backgroundColor: 'rgba(10, 10, 25, 0.8)',
borderColor: 'rgba(255, 255, 255, 0.2)',
textStyle: {
color: '#E0E0E0'
}
},
xAxis: {
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
axisLabel: { color: '#B0B0B0' },
splitLine: { show: false }
},
yAxis: {
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
axisLabel: { color: '#B0B0B0' },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
},
series: [{
lineStyle: { width: 3 },
symbolSize: 8,
symbol: 'circle'
}]
};
// SCFI Chart
const scfiChart = echarts.init(document.getElementById('scfiChart'));
const scfiOptions = {
...chartTheme,
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['24-08-04', '24-08-11', '24-12-22'] },
yAxis: { type: 'value', name: '点' },
series: [{
name: 'SCFI',
type: 'line',
data: [3333, 3254, 2390],
color: '#38BDF8'
}]
};
scfiChart.setOption(scfiOptions);
// BDI Chart
const bdiChart = echarts.init(document.getElementById('bdiChart'));
const bdiOptions = {
...chartTheme,
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['24-08-04', '24-08-11', '24-12-22'] },
yAxis: { type: 'value', name: '点' },
series: [{
name: 'BDI',
type: 'line',
data: [1734, 1686, 1032],
color: '#A78BFA'
}]
};
bdiChart.setOption(bdiOptions);
// BDTI Chart
const bdtiChart = echarts.init(document.getElementById('bdtiChart'));
const bdtiOptions = {
...chartTheme,
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['24-08-04', '24-08-11', '24-12-22'] },
yAxis: { type: 'value', name: '点' },
series: [{
name: 'BDTI',
type: 'line',
data: [988, 933, 921],
color: '#F472B6'
}]
};
bdtiChart.setOption(bdtiOptions);
// BCTI Chart
const bctiChart = echarts.init(document.getElementById('bctiChart'));
const bctiOptions = {
...chartTheme,
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['24-08-04', '24-08-11', '24-12-22'] },
yAxis: { type: 'value', name: '点' },
series: [{
name: 'BCTI',
type: 'line',
data: [785, 682, 637],
color: '#4ADE80'
}]
};
bctiChart.setOption(bctiOptions);
window.addEventListener('resize', () => {
scfiChart.resize();
bdiChart.resize();
bdtiChart.resize();
bctiChart.resize();
});
});
</script>
</body>
</html>