Files
vf_react/public/htmls/缅甸地震.html
2025-12-05 13:29:18 +08:00

470 lines
35 KiB
HTML
Raw Permalink 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" data-theme="night">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深度研报:缅甸地震概念</title>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></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=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
background-color: #020617; /* slate-950 */
color: #e2e8f0; /* slate-200 */
}
.glass-card {
background-color: rgba(15, 23, 42, 0.5); /* slate-900 with opacity */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem; /* rounded-3xl */
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(56, 189, 248, 0.4); /* sky-400 with opacity */
box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
}
.bento-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(6, 1fr);
}
.bento-item {
grid-column: span 6; /* Default for mobile */
}
@media (min-width: 1024px) {
.bento-item-main { grid-column: span 4; grid-row: span 2; }
.bento-item-side-top { grid-column: span 2; }
.bento-item-side-bottom { grid-column: span 2; }
.bento-item-full { grid-column: span 6; }
.bento-item-half-1 { grid-column: span 3; }
.bento-item-half-2 { grid-column: span 3; }
}
.turrell-light {
position: absolute;
border-radius: 9999px;
filter: blur(128px);
opacity: 0.15;
pointer-events: none;
}
.highlight-text {
color: #7dd3fc; /* sky-300 */
}
.table th, .table td {
border-color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="min-h-screen overflow-x-hidden">
<div class="fixed top-0 left-0 w-full h-full -z-10">
<div class="turrell-light bg-sky-500 w-96 h-96 top-[-10%] left-[-5%]"></div>
<div class="turrell-light bg-indigo-500 w-[500px] h-[500px] bottom-[-20%] right-[-10%]"></div>
<div class="turrell-light bg-emerald-500 w-80 h-80 top-[20%] right-[5%]"></div>
</div>
<div class="container mx-auto p-4 md:p-8 max-w-7xl">
<header class="text-center py-12">
<h1 class="text-4xl md:text-6xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-white to-slate-400">
深度研报:缅甸地震
</h1>
<p class="mt-4 text-slate-400 max-w-3xl mx-auto">
事件驱动的供应链冲击主题:从灾难本身到全球矿产格局、产业链重构与未来投资路径的全面解构。
</p>
</header>
<main class="space-y-12">
<!-- Section 1: Core Insight -->
<section id="insight">
<h2 class="text-3xl font-bold mb-6 tracking-tight flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
概念核心洞察 (Concept Insight)
</h2>
<div class="bento-grid">
<div class="bento-item bento-item-main glass-card p-6 flex flex-col justify-between">
<div>
<h3 class="font-bold text-xl mb-3 text-sky-300">核心观点摘要</h3>
<p class="text-slate-300">
“缅甸地震”概念本质上是一个<strong class="text-white">事件驱动的供应链冲击主题</strong>,目前已从初期的恐慌性炒作过渡到对实际供应中断程度和持续时间的<strong class="text-white">验证阶段</strong>。其核心驱动力在于地震放大了缅甸本已存在的地缘政治和运营风险,导致对锡、稀土等关键矿产的供应中断预期急剧升温。
</p>
<p class="mt-4 text-slate-300">
未来的潜力取决于实际的物流恢复速度和灾后重建需求能否转化为上市公司的实质性订单,其中<strong class="highlight-text">资源价格的博弈</strong>是短期核心,<strong class="highlight-text">重建需求</strong>则是中长期看点。
</p>
</div>
<div class="mt-6 p-4 bg-slate-900/50 rounded-xl border border-slate-700">
<h4 class="font-semibold text-slate-200">投资价值细分</h4>
<ul class="mt-2 text-slate-400 space-y-1 text-sm">
<li><span class="font-bold text-sky-400">1. 上游矿产资源 (锡、中重稀土):</span> 逻辑链条最短,确定性相对最高。</li>
<li><span class="font-bold text-sky-400">2. 建筑减隔震:</span> 受益于事件驱动下的长期社会认知提升,市场空间更广阔。</li>
</ul>
</div>
</div>
<div class="bento-item bento-item-side-top glass-card p-6">
<h3 class="font-bold text-xl mb-3 text-sky-300">核心催化事件</h3>
<p class="text-sm text-slate-300">
<strong class="text-white">2025年3月28日14时20分</strong>,缅甸实皆省发生<strong class="highlight-text">7.9级</strong>强烈地震震源深度30千米。被定性为“今年全球最大地震”及“近十年最大陆域地震”。
</p>
<p class="mt-2 text-sm text-slate-300">
截至4月5日死亡人数超<strong class="text-red-400">3455人</strong>,基础设施严重损毁,直接冲击缅甸中部工业区。
</p>
</div>
<div class="bento-item bento-item-side-bottom glass-card p-6">
<h3 class="font-bold text-xl mb-3 text-sky-300">核心驱动力:供给侧扰动</h3>
<ul class="text-slate-300 text-sm space-y-2">
<li><strong class="text-white">预期中:</strong>加剧原有停产问题原定4月1日锡矿复产会议推迟预期复产延迟1-2个月以上。</li>
<li><strong class="text-white">预期外:</strong>基础设施损毁,政府重心转向救灾,形成新的<strong class="highlight-text">物流瓶颈</strong>和行政障碍。</li>
</ul>
</div>
<div class="bento-item bento-item-full glass-card p-6">
<h3 class="font-bold text-xl mb-3 text-sky-300">预期差分析:市场认知修正</h3>
<div class="grid md:grid-cols-3 gap-4 text-sm">
<div class="p-3 bg-slate-900/50 rounded-lg">
<h4 class="font-semibold text-slate-200">直接破坏 vs. 间接影响</h4>
<p class="text-slate-400 mt-1">初步认知倾向矿区被毁,但实际震中距核心矿区<strong class="text-white">400-500公里</strong>。核心矛盾是<strong class="highlight-text">运输能力</strong>而非生产能力。</p>
</div>
<div class="p-3 bg-slate-900/50 rounded-lg">
<h4 class="font-semibold text-slate-200">被忽略的国内冲击</h4>
<p class="text-slate-400 mt-1">市场焦点集中于缅甸矿产,但忽略了地震波及云南、四川,导致<strong class="text-white">国内部分硅片产能受损断线</strong></p>
</div>
<div class="p-3 bg-slate-900/50 rounded-lg">
<h4 class="font-semibold text-slate-200">信息污染与澄清</h4>
<p class="text-slate-400 mt-1">网传“阿瓦桥倒塌”为误导信息。锡矿运输主要走孟连口岸,不受影响。专业验证信息构成<strong class="highlight-text">关键预期差修正</strong></p>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Event Timeline & Data -->
<section id="timeline">
<h2 class="text-3xl font-bold mb-6 tracking-tight flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
事件追踪与灾情数据
</h2>
<div class="grid lg:grid-cols-5 gap-6">
<div class="lg:col-span-3 glass-card p-6">
<h3 class="font-bold text-xl mb-4 text-sky-300">灾情升级时间线 (死亡人数)</h3>
<div id="casualty-chart" class="w-full h-80"></div>
</div>
<div class="lg:col-span-2 glass-card p-6 space-y-4">
<h3 class="font-bold text-xl text-sky-300">关键信息速览</h3>
<div>
<h4 class="font-semibold text-slate-200">地震参数</h4>
<p class="text-sm text-slate-400">时间: 2025-03-28 14:20 (北京时间)<br>位置: 缅甸 (北纬21.85, 东经95.95)<br>震级: <strong class="text-red-400 text-base">7.9级</strong>, 震源深度30千米<br>强余震: 12分钟后发生<strong class="text-orange-400">6.4级</strong>余震</p>
</div>
<div>
<h4 class="font-semibold text-slate-200">对中国云南影响</h4>
<p class="text-sm text-slate-400">德宏、昆明等多地<strong class="text-white">震感强烈</strong><br>瑞丽市2人轻伤, 847户房屋受损。<br>云南启动<strong class="text-white">地震应急四级响应</strong></p>
</div>
<div>
<h4 class="font-semibold text-slate-200">国际反应</h4>
<p class="text-sm text-slate-400">中国派遣82人救援队, 并提供大量人道援助物资。<br>联合国启动人道主义计划呼吁募集2.75亿美元。</p>
</div>
</div>
</div>
</section>
<!-- Section 3: Market Impact Analysis -->
<section id="analysis" x-data="{ openTab: 1 }">
<h2 class="text-3xl font-bold mb-6 tracking-tight flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
市场影响深度解析
</h2>
<div role="tablist" class="tabs tabs-boxed bg-slate-900/50 mb-6">
<a role="tab" class="tab" :class="{'tab-active': openTab === 1}" @click="openTab = 1">矿产供应链冲击</a>
<a role="tab" class="tab" :class="{'tab-active': openTab === 2}" @click="openTab = 2">其他产业链影响</a>
<a role="tab" class="tab" :class="{'tab-active': openTab === 3}" @click="openTab = 3">风险与矛盾点</a>
</div>
<div x-show="openTab === 1" class="space-y-4">
<div class="collapse collapse-plus glass-card">
<input type="radio" name="my-accordion" checked="checked" />
<div class="collapse-title text-xl font-medium text-amber-300">
锡矿 (Sn) - 核心冲击对象
</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>复产延期:</strong>原计划4月1日的曼相矿区复产会议因地震推迟市场普遍预期复产进度将<strong class="text-white">推迟1-2个月</strong></li>
<li><strong>运输中断:</strong>研报指出地震导致矿区运输通道中断、设备损毁尽管震中距主产区佤邦约400-450公里<strong class="text-white">基础设施破坏</strong>仍构成主要障碍。</li>
<li><strong>路演观点:</strong>天风有色路演指出佤邦锡矿复产时滞因地震及政策需至少2个月。海通证券则认为地震将延长国际锡协预估的2个月以上的复产时间。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus glass-card">
<input type="radio" name="my-accordion" />
<div class="collapse-title text-xl font-medium text-violet-300">
稀土 (REE) - 影响存在分歧
</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>观点一 (影响显著)</strong>多数研报和路演认为,虽未直接冲击克钦邦矿区,但<strong class="text-white">运输通道受损、安全检查趋严、政府救灾分心</strong>等因素将阻碍短期进口恢复。</li>
<li><strong>观点二 (影响有限)</strong>研报中引用SMM观点指出震源距离稀土矿区较远<strong class="text-white">暂未影响路面正常运输</strong>,预计不会对缅甸矿供应产生新的影响。</li>
<li><strong>核心矛盾:</strong>市场对稀土的博弈焦点在于,<strong class="highlight-text">物流瓶颈的实际影响程度</strong>。北矿科技的涨幅分析明确将“缅甸地震影响运输”作为稀土永磁价格上涨的驱动因素之一,验证了市场在交易“影响显著”的逻辑。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus glass-card">
<input type="radio" name="my-accordion" />
<div class="collapse-title text-xl font-medium text-gray-300">
锑矿 (Sb) & 其他
</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>锑矿:</strong>研报普遍认为地震对临近的掸邦地区锑矿开采和运输造成<strong class="text-white">较大影响</strong>,可能导致小矿区坍塌及运输通道中断,增加供给扰动。</li>
<li><strong>中缅肉牛交易:</strong>新闻提及地震影响中缅肉牛交易,造成短期供给减少,可能<strong class="text-white">加速国内肉牛价格上行</strong></li>
</ul>
</div>
</div>
</div>
<div x-show="openTab === 2" class="space-y-4">
<div class="collapse collapse-plus glass-card">
<input type="radio" name="my-accordion-2" />
<div class="collapse-title text-xl font-medium text-cyan-300">
国内光伏产业链
</div>
<div class="collapse-content">
<p class="text-slate-300">海通电新路演揭示了一个被市场忽略的关键点:云南、四川硅片产能受地震波及,<strong class="text-white">部分断线短期难恢复</strong>,加速了光伏产业链的涨价趋势。这是一个由同一事件引发的、但逻辑链条完全不同的国内供应链冲击。</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 text-lime-300">
灾后重建 & 基建需求
</div>
<div class="collapse-content">
<p class="text-slate-300">路演信息提示,缅甸地震催生了国际工程、光伏储能等基建需求。这是概念的中长期看点,随着救灾完成,焦点将转移至基础设施重建。届时,在“一带一路”框架下有海外工程经验的基建公司和建材公司可能迎来<strong class="text-white">订单催化</strong></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 text-pink-300">
在缅A股上市公司
</div>
<div class="collapse-content">
<p class="text-slate-300">新闻报道,<strong class="text-white">江苏国泰、嘉欣丝绸、尚荣医疗</strong>等公司回应称,其在缅甸的工厂、生产基地距离震中较远,未受影响,生产经营正常。这表明短期股价可能与公司基本面脱钩,需警惕主题性炒作风险。</p>
</div>
</div>
</div>
<div x-show="openTab === 3" class="space-y-4">
<div class="glass-card p-6 border-l-4 border-red-500">
<h3 class="font-bold text-xl mb-3 text-red-400">潜在风险与挑战</h3>
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>信息交叉验证风险:</strong>关于<strong class="text-white">稀土运输是否实际受阻</strong>存在直接矛盾的信息源SMM vs. 其他券商),这是最大的信息风险,需警惕单一信源误导。</li>
<li><strong>重建需求落地风险:</strong>灾后重建的规模、资金来源以及项目是否授予中资企业均存在<strong class="text-white">巨大不确定性</strong>,相关基建公司的逻辑兑现周期长、变数多。</li>
<li><strong>资源价格波动风险:</strong>若缅甸政府为稳定经济而<strong class="text-white">超预期地快速恢复矿产运输</strong>,或全球其他地区供应增加,可能导致锡、稀土价格快速回落。</li>
<li><strong>新闻时效性风险:</strong>早期关于“阿瓦桥倒塌”的传闻后被证实为误导信息。在重大灾难事件中,信息混乱是常态,基于未经核实的信息交易风险极高。</li>
</ul>
</div>
</div>
</section>
<!-- Section 4: Stocks -->
<section id="stocks">
<h2 class="text-3xl font-bold mb-6 tracking-tight flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
相关概念股票池
</h2>
<div x-data="{
activeTable: 'resources',
stocks: {
resources: [
{ name: '锡业股份', code: '000960', reason: '国内锡业龙头,直接受益于锡价上涨预期。', category: '锡', class: 'text-amber-300' },
{ name: '中国稀土', code: '000831', reason: '缅甸是中重稀土重要来源,供应受阻利好国内拥有配额的稀土巨头。', category: '稀土', class: 'text-violet-300' },
{ name: '北方稀土', code: '600111', reason: '缅甸稀土进口受阻,利好国内稀土龙头企业。', category: '稀土', class: 'text-violet-300' },
{ name: '广晟有色', code: '600259', reason: '中重稀土概念,受益于缅甸供应不确定性。', category: '稀土', class: 'text-violet-300' },
{ name: '厦门钨业', code: '600549', reason: '业务涉稀土和钨,缅甸是重要产地,地震影响供应。', category: '稀土/钨', class: 'text-gray-300' },
{ name: '兴业银锡', code: '000426', reason: '业务涉及锡和锑,缅甸是重要产地。', category: '锡/锑', class: 'text-amber-300' },
{ name: '华锡有色', code: '600301', reason: '业务涉及锡和锑,缅甸是重要产地。', category: '锡/锑', class: 'text-amber-300' },
{ name: '华钰矿业', code: '601020', reason: '锑矿概念,缅甸是重要锑矿产地,地震影响供应。', category: '锑', class: 'text-gray-400' },
{ name: '湖南黄金', code: '002155', reason: '锑矿概念,受益于缅甸供应扰动。', category: '锑', class: 'text-gray-400' },
{ name: '莱绅通灵', code: '603900', reason: '缅甸是重要翡翠产地,地震可能影响供应。', category: '翡翠', class: 'text-emerald-300' }
],
reconstruction: [
{ name: '震安科技', code: '300767', reason: '建筑隔震龙头,与地震主题高度契合,提升全社会对建筑抗震关注度。', category: '建筑减隔震', class: 'text-cyan-300' },
{ name: '中油工程', code: '600339', reason: '中缅天然气管道工程(缅甸段)获鲁班奖,具备在缅基建经验。', category: '海外基建', class: 'text-blue-300' },
{ name: '云南城投', code: '600239', reason: '地理位置接近,气源来自中缅管道,被市场推测受益于灾后重建。', category: '云南本地/基建', class: 'text-blue-300' },
{ name: '中国交建', code: '601800', reason: '大型基建央企,具备海外工程能力,为潜在的基建需求股。', category: '海外基建', class: 'text-blue-300' },
{ name: '海螺水泥', code: '600585', reason: '在缅甸设有子公司,长期看可能深度参与灾后重建,是风险与机遇并存的标的。', category: '建材', class: 'text-lime-300' },
{ name: '金洲管道', code: '002443', reason: '产品曾参与中缅油气管道工程。', category: '管道建材', class: 'text-lime-300' }
],
relief: [
{ name: '奥美医疗', code: '002950', reason: '生产绷带等医疗耗材,为救灾刚需物资。', category: '医疗物资', class: 'text-rose-300' },
{ name: '牧高笛', code: '603908', reason: '生产帐篷等户外装备,可用于灾民安置。中国红会援助清单验证此类需求。', category: '户外装备', class: 'text-orange-300' },
{ name: '科伦药业', code: '002422', reason: '生产青霉素等基础药品,为地震救灾所需。', category: '药品', class: 'text-rose-300' },
{ name: '浙江永强', code: '002489', reason: '生产户外露营装备,可用于灾民安置。', category: '户外装备', class: 'text-orange-300' },
{ name: '稳健医疗', code: '300888', reason: '生产绷带等医疗用品,为救灾物资。', category: '医疗物资', class: 'text-rose-300' }
],
in_myanmar: [
{ name: '江苏国泰', code: '002091', reason: '在缅甸设服装生产基地,公司回应未受影响,生产正常。', category: '在缅生产', class: 'text-teal-300' },
{ name: '嘉欣丝绸', code: '002404', reason: '缅甸子公司位于仰光,公司表示生产基地未受影响。', category: '在缅生产', class: 'text-teal-300' },
{ name: '尚荣医疗', code: '002551', reason: '旗下普尔德(缅甸)生产基地已投产,公司确认工厂未受波及。', category: '在缅生产', class: 'text-teal-300' },
{ name: '华能水电', code: '600025', reason: '在缅甸开展瑞丽江一级水电站改造项目,目前未反馈异常。', category: '在缅能源项目', class: 'text-fuchsia-300' }
]
}
}" class="glass-card p-6">
<div class="sm:flex justify-center mb-4">
<div role="tablist" class="tabs tabs-boxed bg-slate-900/50">
<a role="tab" class="tab" @click="activeTable = 'resources'" :class="{'tab-active': activeTable === 'resources'}">矿产资源</a>
<a role="tab" class="tab" @click="activeTable = 'reconstruction'" :class="{'tab-active': activeTable === 'reconstruction'}">灾后重建</a>
<a role="tab" class="tab" @click="activeTable = 'relief'" :class="{'tab-active': activeTable === 'relief'}">救灾物资</a>
<a role="tab" class="tab" @click="activeTable = 'in_myanmar'" :class="{'tab-active': activeTable === 'in_myanmar'}">在缅业务</a>
</div>
</div>
<div class="overflow-x-auto">
<template x-if="activeTable === 'resources'">
<table class="table table-zebra w-full">
<thead>
<tr><th>股票名称</th><th>代码</th><th>核心逻辑</th><th class="text-center">分类</th></tr>
</thead>
<tbody>
<template x-for="stock in stocks.resources" :key="stock.code">
<tr>
<td class="font-bold" x-text="stock.name"></td>
<td><a :href="'https://valuefrontier.cn/company?scode=' + stock.code" target="_blank" class="link link-hover text-sky-400" x-text="stock.code"></a></td>
<td x-text="stock.reason"></td>
<td class="text-center"><span class="badge badge-outline" :class="stock.class" x-text="stock.category"></span></td>
</tr>
</template>
</tbody>
</table>
</template>
<template x-if="activeTable === 'reconstruction'">
<table class="table table-zebra w-full">
<thead>
<tr><th>股票名称</th><th>代码</th><th>核心逻辑</th><th class="text-center">分类</th></tr>
</thead>
<tbody>
<template x-for="stock in stocks.reconstruction" :key="stock.code">
<tr>
<td class="font-bold" x-text="stock.name"></td>
<td><a :href="'https://valuefrontier.cn/company?scode=' + stock.code" target="_blank" class="link link-hover text-sky-400" x-text="stock.code"></a></td>
<td x-text="stock.reason"></td>
<td class="text-center"><span class="badge badge-outline" :class="stock.class" x-text="stock.category"></span></td>
</tr>
</template>
</tbody>
</table>
</template>
<template x-if="activeTable === 'relief'">
<table class="table table-zebra w-full">
<thead>
<tr><th>股票名称</th><th>代码</th><th>核心逻辑</th><th class="text-center">分类</th></tr>
</thead>
<tbody>
<template x-for="stock in stocks.relief" :key="stock.code">
<tr>
<td class="font-bold" x-text="stock.name"></td>
<td><a :href="'https://valuefrontier.cn/company?scode=' + stock.code" target="_blank" class="link link-hover text-sky-400" x-text="stock.code"></a></td>
<td x-text="stock.reason"></td>
<td class="text-center"><span class="badge badge-outline" :class="stock.class" x-text="stock.category"></span></td>
</tr>
</template>
</tbody>
</table>
</template>
<template x-if="activeTable === 'in_myanmar'">
<table class="table table-zebra w-full">
<thead>
<tr><th>股票名称</th><th>代码</th><th>核心逻辑</th><th class="text-center">分类</th></tr>
</thead>
<tbody>
<template x-for="stock in stocks.in_myanmar" :key="stock.code">
<tr>
<td class="font-bold" x-text="stock.name"></td>
<td><a :href="'https://valuefrontier.cn/company?scode=' + stock.code" target="_blank" class="link link-hover text-sky-400" x-text="stock.code"></a></td>
<td x-text="stock.reason"></td>
<td class="text-center"><span class="badge badge-outline" :class="stock.class" x-text="stock.category"></span></td>
</tr>
</template>
</tbody>
</table>
</template>
</div>
</div>
</section>
</main>
<footer class="text-center py-8 mt-12 text-slate-500 text-xs">
<p>北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('casualty-chart');
var myChart = echarts.init(chartDom);
var option;
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}人死亡',
backgroundColor: 'rgba(15, 23, 42, 0.8)',
borderColor: '#38bdf8',
textStyle: {
color: '#e2e8f0'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['03-28', '03-28', '03-29', '03-29', '03-29', '04-02', '04-03', '04-05'],
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } },
axisLabel: { color: '#94a3b8' }
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisLabel: { color: '#94a3b8' },
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
},
series: [
{
name: '死亡人数',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
data: [50, 144, 694, 1002, 1644, 3000, 3145, 3455],
itemStyle: {
color: '#ef4444' // red-500
},
lineStyle: {
color: '#f87171', // red-400
width: 3
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(239, 68, 68, 0.5)'
}, {
offset: 1,
color: 'rgba(239, 68, 68, 0)'
}])
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>