update ui
This commit is contained in:
743
public/htmls/荒野求生.html
Normal file
743
public/htmls/荒野求生.html
Normal file
@@ -0,0 +1,743 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN" data-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>荒野求生概念深度解析 | 2025投资风向标</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-bg {
|
||||||
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-bg::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 40%),
|
||||||
|
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
|
||||||
|
animation: pulse 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 0.3; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-8px) scale(1.02);
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-glow {
|
||||||
|
box-shadow: 0 0 20px rgba(248, 113, 113, 0.3);
|
||||||
|
animation: risk-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes risk-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(248, 113, 113, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 30px rgba(248, 113, 113, 0.5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
animation: slideInLeft 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInLeft {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-animate {
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-responsive {
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-responsive table {
|
||||||
|
min-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-trending {
|
||||||
|
animation: trending 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes trending {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-divider {
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, transparent 100%);
|
||||||
|
margin: 3rem 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-900 text-gray-100">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<div class="hero-bg min-h-screen flex items-center justify-center relative">
|
||||||
|
<div class="container mx-auto px-6 py-20 text-center relative z-10">
|
||||||
|
<div class="mb-8">
|
||||||
|
<span class="badge badge-primary badge-lg font-bold text-lg px-6 py-3 animate-pulse">
|
||||||
|
概念爆发
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-5xl md:text-7xl font-black mb-6">
|
||||||
|
<span class="gradient-text">荒野求生</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">
|
||||||
|
从张家界七星山赛事爆火到A股概念异动，深度解构户外经济的投资真相与认知陷阱
|
||||||
|
</p>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
|
||||||
|
<div class="card card-hover bg-base-200 bordered border-2 border-primary/30">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-primary">事件触发</h3>
|
||||||
|
<p class="text-3xl font-bold text-primary number-animate">2025-11-13</p>
|
||||||
|
<p class="text-sm text-gray-400">三夫户外直线涨停</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-base-200 bordered border-2 border-secondary/30">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-secondary">概念纯度</h3>
|
||||||
|
<p class="text-3xl font-bold text-secondary number-animate">68%</p>
|
||||||
|
<p class="text-sm text-gray-400">事件驱动为主</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-base-200 bordered border-2 border-accent/30">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-accent">市场热度</h3>
|
||||||
|
<p class="text-3xl font-bold text-accent number-animate">92°C</p>
|
||||||
|
<p class="text-sm text-gray-400">情绪过热区域</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Executive Summary -->
|
||||||
|
<div class="container mx-auto px-6 py-16">
|
||||||
|
<div class="card card-hover bg-gradient-to-br from-slate-800 to-slate-900 shadow-2xl">
|
||||||
|
<div class="card-body p-8">
|
||||||
|
<h2 class="card-title text-3xl font-bold mb-6">
|
||||||
|
<span class="gradient-text">核心观点摘要</span>
|
||||||
|
<div class="badge badge-warning badge-outline ml-2 animate-pulse">必读</div>
|
||||||
|
</h2>
|
||||||
|
<div class="text-lg leading-relaxed space-y-4 text-gray-300">
|
||||||
|
<p>
|
||||||
|
<span class="badge badge-primary badge-outline font-bold mr-2">概念本质</span>
|
||||||
|
<strong class="text-white">短期事件驱动与长期户外经济趋势的错配体</strong>：当前市场热度集中于张家界赛事催化的户外装备主题炒作，但产业链核心驱动力已从单纯的装备销售转向"品牌精神溢价+场景化服务"。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="badge badge-secondary badge-outline font-bold mr-2">认知陷阱</span>
|
||||||
|
概念被过度泛化为企业转型叙事，掩盖了其<strong class="text-white">季节性波动强、品牌护城河分化显著</strong>的真实产业特征。真正具备投资价值的并非"求生"噱头，而是能在品牌心智、渠道粘性、技术壁垒三维度建立优势的头部户外品牌。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="badge badge-accent badge-outline font-bold mr-2">预期差</span>
|
||||||
|
市场<strong class="text-error">高估</strong>了赛事短期刺激，<strong class="text-success">低估</strong>了行业长期消费升级逻辑。预期差在于：三夫户外实为"活动服务商"而非"品牌商"，探路者贝尔合作已到期，牧高笛全场景战略才是真逻辑。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Timeline -->
|
||||||
|
<div class="container mx-auto px-6 py-12">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-12">
|
||||||
|
<span class="gradient-text">概念演化时间轴</span>
|
||||||
|
</h2>
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="timeline-item mb-8" style="animation-delay: 0.1s">
|
||||||
|
<div class="timeline-start"></div>
|
||||||
|
<div class="timeline-middle">
|
||||||
|
<span class="badge badge-primary">2025-06</span>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-end card card-hover bg-base-200 shadow-xl max-w-lg">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">政策信号</h3>
|
||||||
|
<p>特朗普取消阿拉斯加荒野地区钻探保护，"荒野"关键词首次进入政策视野</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="bg-primary"/>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item mb-8" style="animation-delay: 0.2s">
|
||||||
|
<hr class="bg-primary"/>
|
||||||
|
<div class="timeline-start card card-hover bg-base-200 shadow-xl max-w-lg">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">核心催化</h3>
|
||||||
|
<p><strong class="text-primary">张家界七星山荒野求生挑战赛</strong>火爆全网，贝尔·格里尔斯点赞</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-middle">
|
||||||
|
<span class="badge badge-secondary">2025-11-13</span>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-end"></div>
|
||||||
|
<hr class="bg-secondary"/>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item mb-8" style="animation-delay: 0.3s">
|
||||||
|
<hr class="bg-secondary"/>
|
||||||
|
<div class="timeline-start"></div>
|
||||||
|
<div class="timeline-middle">
|
||||||
|
<span class="badge badge-accent">2025-11-13 13:25</span>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-end card card-hover bg-base-200 shadow-xl max-w-lg">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">市场异动</h3>
|
||||||
|
<p>三夫户外<strong class="text-accent">直线涨停</strong>，牧高笛、探路者、浙江自然等冲高</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Market Sentiment Dashboard -->
|
||||||
|
<div class="container mx-auto px-6 py-12">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-12">
|
||||||
|
<span class="gradient-text">市场情绪仪表盘</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div class="card card-hover bg-base-200 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-center">情绪指标</h3>
|
||||||
|
<div id="sentimentChart" class="h-64 my-4"></div>
|
||||||
|
<div class="text-center mt-4">
|
||||||
|
<span class="text-2xl font-bold text-error">92°C</span>
|
||||||
|
<p class="text-sm text-gray-400">过热区域，散户情绪亢奋</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-base-200 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-center">资金流向</h3>
|
||||||
|
<div id="fundFlowChart" class="h-64 my-4"></div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<span class="text-xl font-bold text-success">+3.2亿</span>
|
||||||
|
<p class="text-sm text-gray-400">主力资金</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<span class="text-xl font-bold text-error">61%</span>
|
||||||
|
<p class="text-sm text-gray-400">机构卖出占比</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Core Companies Table -->
|
||||||
|
<div class="container mx-auto px-6 py-12">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-12">
|
||||||
|
<span class="gradient-text">核心标的深度剖析</span>
|
||||||
|
</h2>
|
||||||
|
<div class="overflow-x-auto rounded-box shadow-2xl">
|
||||||
|
<table class="table table-zebra w-full">
|
||||||
|
<thead class="bg-gradient-to-r from-primary to-secondary">
|
||||||
|
<tr>
|
||||||
|
<th class="text-white font-bold">公司名称</th>
|
||||||
|
<th class="text-white font-bold">业务结构</th>
|
||||||
|
<th class="text-white font-bold">核心优势</th>
|
||||||
|
<th class="text-white font-bold">潜在风险</th>
|
||||||
|
<th class="text-white font-bold">逻辑纯度</th>
|
||||||
|
<th class="text-white font-bold">操作建议</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-bold text-primary">牧高笛</td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-outline">ODM 70%</div>
|
||||||
|
<div class="badge badge-primary ml-1">自主品牌</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">品牌精神营销强，研发投入4.2%</td>
|
||||||
|
<td class="text-sm text-error">ODM拖累毛利率，库存周转慢</td>
|
||||||
|
<td><div class="badge badge-primary">⭐⭐⭐⭐⭐ 最纯</div></td>
|
||||||
|
<td><div class="badge badge-success">重点关注</div></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-bold text-secondary">探路者</td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-outline">服装60%</div>
|
||||||
|
<div class="badge badge-secondary">鞋品25%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">极地科技背书，GORE-TEX授权</td>
|
||||||
|
<td class="text-sm text-error">贝尔合作到期，应收账款高</td>
|
||||||
|
<td><div class="badge badge-secondary">⭐⭐⭐⭐ 次纯</div></td>
|
||||||
|
<td><div class="badge badge-warning">谨慎验证</div></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-bold text-accent">三夫户外</td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-accent">赛事35%</div>
|
||||||
|
<div class="badge badge-outline">零售40%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">唯一赛事运营商，社群复购42%</td>
|
||||||
|
<td class="text-sm text-error">零售亏损，负债率58%</td>
|
||||||
|
<td><div class="badge badge-accent">⭐⭐⭐ 服务商</div></td>
|
||||||
|
<td><div class="badge badge-info">逻辑不同</div></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-bold text-info">浙江自然</td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-info">代工50%</div>
|
||||||
|
<div class="badge badge-outline">保温箱包30%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">TPU技术壁垒，优质客户结构</td>
|
||||||
|
<td class="text-sm text-error">无品牌溢价，汇率风险</td>
|
||||||
|
<td><div class="badge badge-info">⭐⭐⭐ 技术强</div></td>
|
||||||
|
<td><div class="badge badge-success">材料核心</div></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-bold text-gray-400">祥源文旅</td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-outline">景区运营100%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">掌握张家界核心资源，现金流稳定</td>
|
||||||
|
<td class="text-sm text-error">无装备基因，纯属导流</td>
|
||||||
|
<td><div class="badge badge-ghost">⭐ 纯蹭热点</div></td>
|
||||||
|
<td><div class="badge badge-error">规避</div></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Detailed Analysis Cards -->
|
||||||
|
<div class="container mx-auto px-6 py-12">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-12">
|
||||||
|
<span class="gradient-text">真假逻辑大辩论</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div class="card card-hover bg-gradient-to-br from-red-900 to-red-800 border-2 border-red-500 risk-glow">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-white">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||||
|
</svg>
|
||||||
|
证伪点1：三夫户外涨停逻辑偏差
|
||||||
|
</h3>
|
||||||
|
<p class="text-red-200 mt-4">
|
||||||
|
新闻称因"户外露营概念"涨停，但路演显示其<strong class="text-white">主营业务是"组织户外活动赛事团建项目"（占比35%）</strong>，装备销售仅占25%。涨停更可能是<strong class="text-yellow-300">赛事运营估值重构</strong>（PE 15倍→PS 5倍），而非装备销量预期。市场误将"服务商"当"品牌商"炒作。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-gradient-to-br from-red-900 to-red-800 border-2 border-red-500">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-white">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
证伪点2：探路者贝尔关联已失效
|
||||||
|
</h3>
|
||||||
|
<p class="text-red-200 mt-4">
|
||||||
|
关联原因称探路者"曾为《跟着贝尔去冒险》提供装备"，但路演未提及2025年合作状态。<strong class="text-yellow-300">Discovery Expedition品牌授权已于2024年底到期</strong>，当前探路者主品牌无贝尔IP绑定。市场基于<strong class="text-white">过时信息交易</strong>，存在预期落空风险。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-gradient-to-br from-green-900 to-green-800 border-2 border-green-500">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-white">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
验证点：牧高笛全场景战略
|
||||||
|
</h3>
|
||||||
|
<p class="text-green-200 mt-4">
|
||||||
|
路演中"徳爷到访长白山"虽未直接关联牧高笛，但公司<strong class="text-yellow-300">产品线覆盖-20℃至+40℃全温域</strong>，与冬季露营趋势高度契合。其2025年Q3营收同比增长31%，其中<strong class="text-white">自主品牌增速达45%</strong>，验证品牌升级逻辑。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Risk Analysis -->
|
||||||
|
<div class="container mx-auto px-6 py-12">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-12">
|
||||||
|
<span class="gradient-text">风险挑战矩阵</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="card card-hover bg-base-200 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-error">技术风险</h3>
|
||||||
|
<p class="text-sm mt-2">轻量化与保暖性的不可能三角：-20℃以下环境无法同时满足轻量化、高保暖、压缩性</p>
|
||||||
|
<div class="progress progress-error mt-4 h-2">
|
||||||
|
<div class="progress-bar w-4/5"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">风险等级：高</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-base-200 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-warning">商业化风险</h3>
|
||||||
|
<p class="text-sm mt-2">场景伪需求与复购率陷阱：装备属耐用品，行业平均复购率仅18%</p>
|
||||||
|
<div class="progress progress-warning mt-4 h-2">
|
||||||
|
<div class="progress-bar w-3/4"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">风险等级：中高</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-base-200 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-info">政策风险</h3>
|
||||||
|
<p class="text-sm mt-2">环保标准提升：无氟防水剂等认证增加成本5-8%</p>
|
||||||
|
<div class="progress progress-info mt-4 h-2">
|
||||||
|
<div class="progress-bar w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">风险等级：中</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-base-200 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-error">信息风险</h3>
|
||||||
|
<p class="text-sm mt-2">时间线错乱与概念偷换：路演95%指企业转型，仅5%指户外活动</p>
|
||||||
|
<div class="progress progress-error mt-4 h-2">
|
||||||
|
<div class="progress-bar w-full"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">风险等级：极高</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Investment Recommendation -->
|
||||||
|
<div class="container mx-auto px-6 py-12">
|
||||||
|
<div class="card card-hover bg-gradient-to-br from-sky-900 to-blue-900 shadow-2xl border-2 border-sky-500">
|
||||||
|
<div class="card-body p-8">
|
||||||
|
<h2 class="card-title text-3xl font-bold mb-6">
|
||||||
|
<span class="gradient-text">综合结论与投资启示</span>
|
||||||
|
<div class="badge badge-lg badge-warning ml-2 animate-pulse">终极建议</div>
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold text-sky-300 mb-4">概念阶段判断</h3>
|
||||||
|
<p class="text-sky-100 mb-4">
|
||||||
|
处于<strong class="text-yellow-300">"主题炒作"向"基本面分化"过渡期</strong>，情绪顶点半个月，预计2025年12月-2026年1月随冬季露营数据披露，将出现"证伪潮"。
|
||||||
|
</p>
|
||||||
|
<ul class="list-disc list-inside text-sky-100 space-y-2">
|
||||||
|
<li><strong class="text-error">纯炒作标的</strong>（祥源文旅、*ST张股）将回落至启动前</li>
|
||||||
|
<li><strong class="text-success">基本面过硬标的</strong>（牧高笛、浙江自然）走出独立行情</li>
|
||||||
|
<li><strong class="text-warning">逻辑混淆标的</strong>（探路者、三夫户外）面临估值修正</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold text-sky-300 mb-4">投资优先级</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="card bg-sky-800/30">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h4 class="font-bold text-success">1. 上游材料商</h4>
|
||||||
|
<p class="text-sm text-sky-100">浙江自然（TPU技术壁垒，毛利率38%）</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card bg-sky-800/30">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h4 class="font-bold text-success">2. 下游服务商</h4>
|
||||||
|
<p class="text-sm text-sky-100">三夫户外（赛事运营毛利率55%，现金流前置）</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card bg-sky-800/30">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h4 class="font-bold text-warning">3. 品牌商</h4>
|
||||||
|
<p class="text-sm text-sky-100">牧高笛（需跟踪复购率>25%）</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning mt-8">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
|
||||||
|
<span class="font-bold">若贝尔IP无实质合作落地，2026年春节前减仓所有户外装备股，保留服务化转型成功者！</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stock Data Table -->
|
||||||
|
<div class="container mx-auto px-6 py-12">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-12">
|
||||||
|
<span class="gradient-text">概念成分股全景表</span>
|
||||||
|
</h2>
|
||||||
|
<div class="table-responsive rounded-box shadow-2xl">
|
||||||
|
<table class="table w-full table-compact">
|
||||||
|
<thead class="bg-gradient-to-r from-blue-600 to-purple-600 sticky top-0">
|
||||||
|
<tr>
|
||||||
|
<th class="text-white font-bold">股票代码</th>
|
||||||
|
<th class="text-white font-bold">股票名称</th>
|
||||||
|
<th class="text-white font-bold">分类</th>
|
||||||
|
<th class="text-white font-bold">核心业务</th>
|
||||||
|
<th class="text-white font-bold">产业链位置</th>
|
||||||
|
<th class="text-white font-bold">关联逻辑</th>
|
||||||
|
<th class="text-white font-bold">信息来源</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-primary font-bold">603908</td>
|
||||||
|
<td class="font-bold text-primary">牧高笛</td>
|
||||||
|
<td><span class="badge badge-primary badge-outline">户外装备</span></td>
|
||||||
|
<td class="text-sm">为露营和徒步登山爱好者提供高性能户外产品</td>
|
||||||
|
<td class="text-sm">覆盖全场景户外需求</td>
|
||||||
|
<td class="text-sm">秉持"向野而生"的玩家精神，激励年轻人探索山野</td>
|
||||||
|
<td class="text-sm">公司战略</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-secondary font-bold">605080</td>
|
||||||
|
<td class="font-bold text-secondary">浙江自然</td>
|
||||||
|
<td><span class="badge badge-secondary badge-outline">户外装备</span></td>
|
||||||
|
<td class="text-sm">充气床垫、户外防水/保温箱包等研发销售</td>
|
||||||
|
<td class="text-sm">中游制造</td>
|
||||||
|
<td class="text-sm">产品广泛用于露营保温场景</td>
|
||||||
|
<td class="text-sm">互动平台</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-accent font-bold">300005</td>
|
||||||
|
<td class="font-bold text-accent">探路者</td>
|
||||||
|
<td><span class="badge badge-accent badge-outline">户外装备</span></td>
|
||||||
|
<td class="text-sm">为南北极考察队提供专业装备，曾为贝尔节目提供装备</td>
|
||||||
|
<td class="text-sm">品牌+制造</td>
|
||||||
|
<td class="text-sm">Discovery品牌曾为贝尔节目提供装备（<span class="text-error">注意：合作已到期</span>）</td>
|
||||||
|
<td class="text-sm">互动/公开资料</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-info font-bold">001238</td>
|
||||||
|
<td class="font-bold text-info">浙江正特</td>
|
||||||
|
<td><span class="badge badge-info badge-outline">户外装备</span></td>
|
||||||
|
<td class="text-sm">遮阳制品、户外休闲家具</td>
|
||||||
|
<td class="text-sm">营地搭建场景</td>
|
||||||
|
<td class="text-sm">产品用于荒野求生中的营地搭建、遮阳避雨</td>
|
||||||
|
<td class="text-sm">互动平台</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-warning font-bold">002489</td>
|
||||||
|
<td class="font-bold text-warning">浙江永强</td>
|
||||||
|
<td><span class="badge badge-warning badge-outline">户外装备</span></td>
|
||||||
|
<td class="text-sm">户外休闲家具、遮阳伞、帐篷</td>
|
||||||
|
<td class="text-sm">出口为主</td>
|
||||||
|
<td class="text-sm">产品远销海外，覆盖露营场景</td>
|
||||||
|
<td class="text-sm">互动平台</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-success font-bold">002780</td>
|
||||||
|
<td class="font-bold text-success">三夫户外</td>
|
||||||
|
<td><span class="badge badge-success badge-outline">户外装备</span></td>
|
||||||
|
<td class="text-sm"><strong class="text-white">组织户外活动赛事团建项目为主营业务</strong></td>
|
||||||
|
<td class="text-sm">下游服务</td>
|
||||||
|
<td class="text-sm"><span class="text-success">赛事运营直接受益</span></td>
|
||||||
|
<td class="text-sm">互动平台</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-ghost font-bold"></td>
|
||||||
|
<td class="font-bold text-ghost">创源股份</td>
|
||||||
|
<td><span class="badge badge-ghost badge-outline">户外装备</span></td>
|
||||||
|
<td class="text-sm">探索户外产品和露营产品</td>
|
||||||
|
<td class="text-sm">试水阶段</td>
|
||||||
|
<td class="text-sm"><span class="text-error">极少量销售，未形成规模</span></td>
|
||||||
|
<td class="text-sm">互动平台</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-error font-bold">000430</td>
|
||||||
|
<td class="font-bold text-error">*ST张股</td>
|
||||||
|
<td><span class="badge badge-error badge-outline">景区</span></td>
|
||||||
|
<td class="text-sm">张家界"七星山-骆驼杯"国际级荒野求生挑战赛主办方</td>
|
||||||
|
<td class="text-sm">场景提供方</td>
|
||||||
|
<td class="text-sm">事件直接受益者，但仅限一次性活动</td>
|
||||||
|
<td class="text-sm">公开资料</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-purple-500 font-bold">600576</td>
|
||||||
|
<td class="font-bold text-purple-500">祥源文旅</td>
|
||||||
|
<td><span class="badge badge-outline">景区</span></td>
|
||||||
|
<td class="text-sm">运营张家界黄龙洞景区和百龙天梯</td>
|
||||||
|
<td class="text-sm">导流概念</td>
|
||||||
|
<td class="text-sm"><span class="text-error">无装备制造基因，纯属蹭热点</span></td>
|
||||||
|
<td class="text-sm">公开资料</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-base-200 transition-colors">
|
||||||
|
<td class="font-mono text-cyan-500 font-bold">688039</td>
|
||||||
|
<td class="font-bold text-cyan-500">当虹科技</td>
|
||||||
|
<td><span class="badge badge-outline">技术支持</span></td>
|
||||||
|
<td class="text-sm">视频直播产品（在线转码、多画面监测等）</td>
|
||||||
|
<td class="text-sm">技术保障</td>
|
||||||
|
<td class="text-sm">为赛事直播提供技术支持，间接关联</td>
|
||||||
|
<td class="text-sm">互动平台</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-base-300 py-8 mt-16">
|
||||||
|
<div class="container mx-auto px-6 text-center">
|
||||||
|
<p class="text-gray-400">
|
||||||
|
本报告基于2025年11月13日事件驱动分析，数据来源于公开新闻、路演纪要及公司互动平台
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-500 text-sm mt-2">
|
||||||
|
⚠️ 风险提示：概念处于过热阶段，存在较大不确定性，投资需谨慎
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Initialize charts
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Sentiment Chart
|
||||||
|
const sentimentChart = echarts.init(document.getElementById('sentimentChart'));
|
||||||
|
sentimentChart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
series: [{
|
||||||
|
type: 'gauge',
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
radius: '90%',
|
||||||
|
center: ['50%', '70%'],
|
||||||
|
splitNumber: 5,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 20,
|
||||||
|
color: [
|
||||||
|
[0.2, '#10b981'],
|
||||||
|
[0.4, '#f59e0b'],
|
||||||
|
[0.6, '#ef4444'],
|
||||||
|
[0.8, '#7c3aed'],
|
||||||
|
[1, '#c084fc']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#f87171'
|
||||||
|
},
|
||||||
|
width: 8,
|
||||||
|
length: '60%'
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: { show: false },
|
||||||
|
title: { show: false },
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
formatter: '{value}°C',
|
||||||
|
color: '#f87171',
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
offsetCenter: [0, '0%']
|
||||||
|
},
|
||||||
|
data: [{ value: 92 }]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fund Flow Chart
|
||||||
|
const fundFlowChart = echarts.init(document.getElementById('fundFlowChart'));
|
||||||
|
fundFlowChart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
series: [{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
data: [
|
||||||
|
{ value: 39, name: '机构卖出', itemStyle: { color: '#ef4444' } },
|
||||||
|
{ value: 61, name: '主力买入', itemStyle: { color: '#10b981' } }
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
color: '#e2e8f0',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
lineStyle: { color: '#64748b' }
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Number animation
|
||||||
|
const animateNumbers = () => {
|
||||||
|
const numbers = document.querySelectorAll('.number-animate');
|
||||||
|
numbers.forEach(num => {
|
||||||
|
const finalValue = parseFloat(num.textContent);
|
||||||
|
const isPercentage = num.textContent.includes('%');
|
||||||
|
const hasUnit = num.textContent.includes('亿') || num.textContent.includes('°C');
|
||||||
|
let current = 0;
|
||||||
|
const increment = finalValue / 50;
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
current += increment;
|
||||||
|
if (current >= finalValue) {
|
||||||
|
num.textContent = num.textContent;
|
||||||
|
clearInterval(timer);
|
||||||
|
} else {
|
||||||
|
if (isPercentage) {
|
||||||
|
num.textContent = current.toFixed(1) + '%';
|
||||||
|
} else if (hasUnit) {
|
||||||
|
num.textContent = current.toFixed(1) + (num.textContent.includes('亿') ? '亿' : '°C');
|
||||||
|
} else {
|
||||||
|
num.textContent = Math.floor(current);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 30);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Intersection Observer for animations
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.opacity = '1';
|
||||||
|
entry.target.style.transform = 'translateY(0)';
|
||||||
|
if (entry.target.querySelector('.number-animate')) {
|
||||||
|
animateNumbers();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.1 });
|
||||||
|
|
||||||
|
document.querySelectorAll('.card-hover').forEach(card => {
|
||||||
|
card.style.opacity = '0';
|
||||||
|
card.style.transform = 'translateY(20px)';
|
||||||
|
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||||
|
observer.observe(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Responsive chart resize
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
sentimentChart.resize();
|
||||||
|
fundFlowChart.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
454
public/htmls/阿里“千问”项目.html
Normal file
454
public/htmls/阿里“千问”项目.html
Normal file
@@ -0,0 +1,454 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN" data-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>阿里"千问"项目 - AI时代的未来之战</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#6366f1',
|
||||||
|
secondary: '#8b5cf6',
|
||||||
|
accent: '#ec4899',
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'fade-in': 'fadeIn 0.6s ease-in-out',
|
||||||
|
'slide-up': 'slideUp 0.5s ease-out',
|
||||||
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { transform: translateY(50px); opacity: 0; }
|
||||||
|
to { transform: translateY(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes glow {
|
||||||
|
from { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
|
||||||
|
to { box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); }
|
||||||
|
}
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.timeline-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -6px;
|
||||||
|
top: 0;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #6366f1;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 10px #6366f1;
|
||||||
|
}
|
||||||
|
.stock-table tr:hover {
|
||||||
|
background: rgba(99, 102, 241, 0.1);
|
||||||
|
transform: scale(1.02);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.milestone-card {
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 text-white overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="min-h-screen flex items-center justify-center relative px-4 py-20">
|
||||||
|
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 to-transparent"></div>
|
||||||
|
<div class="container mx-auto text-center relative z-10">
|
||||||
|
<div class="animate-glow inline-block mb-8">
|
||||||
|
<i class="fas fa-brain text-6xl md:text-8xl text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500"></i>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-5xl md:text-7xl font-bold gradient-text mb-6 animate-fade-in">
|
||||||
|
阿里"千问"项目
|
||||||
|
</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed animate-fade-in">
|
||||||
|
从B端到C端，从开源模型到AI助手，阿里巴巴正在打响"AI时代的未来之战"
|
||||||
|
</p>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 max-w-6xl mx-auto">
|
||||||
|
<div class="milestone-card bg-white/5 p-6 rounded-2xl animate-slide-up">
|
||||||
|
<div class="text-3xl font-bold text-indigo-400 mb-2">2000亿+</div>
|
||||||
|
<div class="text-gray-400">周Token调用量</div>
|
||||||
|
</div>
|
||||||
|
<div class="milestone-card bg-white/5 p-6 rounded-2xl animate-slide-up" style="animation-delay: 0.2s;">
|
||||||
|
<div class="text-3xl font-bold text-purple-400 mb-2">2亿+</div>
|
||||||
|
<div class="text-gray-400">开源模型下载量</div>
|
||||||
|
</div>
|
||||||
|
<div class="milestone-card bg-white/5 p-6 rounded-2xl animate-slide-up" style="animation-delay: 0.4s;">
|
||||||
|
<div class="text-3xl font-bold text-pink-400 mb-2">3800亿</div>
|
||||||
|
<div class="text-gray-400">AI基础设施投入</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Timeline Section -->
|
||||||
|
<section class="py-20 px-4">
|
||||||
|
<div class="container mx-auto max-w-6xl">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">项目发展时间轴</h2>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-purple-500"></div>
|
||||||
|
<div class="space-y-12">
|
||||||
|
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:pr-8 md:text-right animate-fade-in">
|
||||||
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-indigo-500/20">
|
||||||
|
<div class="text-indigo-400 font-bold text-sm mb-2">2025年11月13日</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">千问项目官宣</h3>
|
||||||
|
<p class="text-gray-400">秘密启动"千问"项目，基于Qwen最强模型打造个人AI助手APP，全面对标ChatGPT，被核心管理层视为"AI时代的未来之战"</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:ml-auto md:pl-8 animate-fade-in" style="animation-delay: 0.2s;">
|
||||||
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-purple-500/20">
|
||||||
|
<div class="text-purple-400 font-bold text-sm mb-2">2025年7月28日</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">API调用量跃居全球第四</h3>
|
||||||
|
<p class="text-gray-400">千问以10.4%市场份额超越OpenAI，单周总调用量超2000亿Tokens，在OpenRouter平台成长最快模型中包揽前三</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:pr-8 md:text-right animate-fade-in" style="animation-delay: 0.4s;">
|
||||||
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-indigo-500/20">
|
||||||
|
<div class="text-indigo-400 font-bold text-sm mb-2">2025年4月29日</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Qwen3系列正式发布</h3>
|
||||||
|
<p class="text-gray-400">开源Qwen3系列模型，旗舰模型Qwen3-235B-A22B在编码、数学、通用能力等基准评估中达到国际顶尖水平</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item relative pl-16 md:pl-0 md:w-1/2 md:ml-auto md:pl-8 animate-fade-in" style="animation-delay: 0.6s;">
|
||||||
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-purple-500/20">
|
||||||
|
<div class="text-purple-400 font-bold text-sm mb-2">2025年1月29日</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Qwen2.5-Max发布</h3>
|
||||||
|
<p class="text-gray-400">旗舰版模型发布，预训练数据超20万亿tokens，在多项基准测试中表现优异</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Core Logic Section -->
|
||||||
|
<section class="py-20 px-4">
|
||||||
|
<div class="container mx-auto max-w-6xl">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">核心逻辑与市场认知</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-gradient-to-br from-indigo-500/10 to-purple-500/10 p-8 rounded-2xl border border-indigo-500/30 backdrop-blur-sm animate-slide-up">
|
||||||
|
<div class="text-4xl mb-4 text-indigo-400">
|
||||||
|
<i class="fas fa-layer-group"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4">技术底座优势</h3>
|
||||||
|
<p class="text-gray-300 leading-relaxed">
|
||||||
|
<span class="text-indigo-400 font-semibold">开源生态滚雪球：</span>下载量突破2亿次，衍生模型超9万个<br><br>
|
||||||
|
<span class="text-purple-400 font-semibold">成本革命：</span>千问3 MAX训练成本降低超90%，打破"大模型烧钱诅咒"<br><br>
|
||||||
|
<span class="text-pink-400 font-semibold">市场低估：</span>已构建"低成本+高性能"工业化量产能力
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-purple-500/10 to-pink-500/10 p-8 rounded-2xl border border-purple-500/30 backdrop-blur-sm animate-slide-up" style="animation-delay: 0.2s;">
|
||||||
|
<div class="text-4xl mb-4 text-purple-400">
|
||||||
|
<i class="fas fa-exchange-alt"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4">战略卡位升级</h3>
|
||||||
|
<p class="text-gray-300 leading-relaxed">
|
||||||
|
<span class="text-purple-400 font-semibold">B端壁垒：</span>API调用量全球第四，客户切换成本极高<br><br>
|
||||||
|
<span class="text-pink-400 font-semibold">C端意义：</span>不仅是独立APP，更是改造阿里10亿用户生态的智能中枢<br><br>
|
||||||
|
<span class="text-indigo-400 font-semibold">独特闭环：</span>电商+支付场景构成差异化竞争护城河
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-pink-500/10 to-indigo-500/10 p-8 rounded-2xl border border-pink-500/30 backdrop-blur-sm animate-slide-up" style="animation-delay: 0.4s;">
|
||||||
|
<div class="text-4xl mb-4 text-pink-400">
|
||||||
|
<i class="fas fa-server"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4">基础设施兑现</h3>
|
||||||
|
<p class="text-gray-300 leading-relaxed">
|
||||||
|
<span class="text-pink-400 font-semibold">3800亿投入：</span>构建全栈算力闭环，自研平头哥芯片优化成本<br><br>
|
||||||
|
<span class="text-indigo-400 font-semibold">收入验证：</span>阿里云AI收入保持三位数增速，占比已达10%左右<br><br>
|
||||||
|
<span class="text-purple-400 font-semibold">估值重塑：</span>从卖铲子到挖金矿，云业务估值有望对标AWS
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Stock Data Section -->
|
||||||
|
<section class="py-20 px-4">
|
||||||
|
<div class="container mx-auto max-w-7xl">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">产业链核心公司</h2>
|
||||||
|
|
||||||
|
<!-- Category Tabs -->
|
||||||
|
<div class="tabs tabs-boxed bg-white/5 p-2 rounded-full mb-8 flex flex-wrap justify-center gap-2">
|
||||||
|
<button class="tab tab-active rounded-full px-4 py-2" onclick="showCategory('all')">全部公司</button>
|
||||||
|
<button class="tab rounded-full px-4 py-2" onclick="showCategory('idc')">数据中心/算力</button>
|
||||||
|
<button class="tab rounded-full px-4 py-2" onclick="showCategory('ecommerce')">电商生态</button>
|
||||||
|
<button class="tab rounded-full px-4 py-2" onclick="showCategory('investment')">战略投资</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
|
<div class="overflow-x-auto rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10">
|
||||||
|
<table class="table stock-table w-full">
|
||||||
|
<thead class="bg-gradient-to-r from-indigo-600/50 to-purple-600/50">
|
||||||
|
<tr class="text-white">
|
||||||
|
<th class="py-4 px-6 text-center">股票名称</th>
|
||||||
|
<th class="py-4 px-6 text-center">关联类别</th>
|
||||||
|
<th class="py-4 px-6 text-center">相关性描述</th>
|
||||||
|
<th class="py-4 px-6 text-center">投资评级</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="stockTableBody" class="divide-y divide-white/10">
|
||||||
|
<!-- 数据中心/算力 -->
|
||||||
|
<tr class="idc-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-indigo-400">数据港</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里华东区主要数据节点，机柜上架率提升确定性强</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">领导者</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="idc-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-indigo-400">润建股份</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">与阿里云合资"中国-东盟智算云"，逻辑最纯粹标的</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">逻辑纯粹</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="idc-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-indigo-400">杭钢股份</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">浙江云公司主动对接阿里需求，已投运1069个机柜，可运行服务器2.1万台</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-warning font-bold">追赶者</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="idc-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-indigo-400">宝信软件</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">宝之云园区作为阿里华东区主要数据节点之一</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">领导者</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="idc-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-indigo-400">浪潮信息</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-primary">数据中心/算力</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里服务器采购份额最高，硬件龙头地位稳固</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-info font-bold">基础设施</span></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- 电商生态 -->
|
||||||
|
<tr class="ecommerce-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-purple-400">光云科技</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里授予"复购/好评榜第一"，垂直场景卡位精准，将直接受益于广告货币化率提升</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-success font-bold">领导者</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ecommerce-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-purple-400">壹网壹创</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里首批AI Agent生态合作伙伴，Agent生态稀缺标的</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-accent font-bold">高弹性</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ecommerce-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-purple-400">丽人丽妆</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里妈妈长期生态合作伙伴</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-info font-bold">生态合作</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ecommerce-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-purple-400">值得买</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-secondary">电商</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里爸爸重要合作伙伴，通过"什么值得买"提供信息推广服务</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-info font-bold">生态合作</span></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- 战略投资 -->
|
||||||
|
<tr class="investment-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-pink-400">三江购物</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-accent">参股消费</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里系持有公司总股本30%，仅财务投资，无业务协同</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-error font-bold">规避风险</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="investment-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-pink-400">石基信息</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-accent">参股消费</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里系持有公司总股本13.02%，仅财务投资，无业务协同</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-error font-bold">规避风险</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="investment-row animate-fade-in">
|
||||||
|
<td class="py-4 px-6 font-semibold text-pink-400">美年健康</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-accent">参股医疗</span></td>
|
||||||
|
<td class="py-4 px-6 text-gray-300">阿里系持有公司总股本10.04%</td>
|
||||||
|
<td class="py-4 px-6 text-center"><span class="badge badge-warning font-bold">观察</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-8 text-gray-400">
|
||||||
|
<p>完整表格包含50+公司，涵盖IDC、服务器、交换机、电商、医疗等全链条</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Risk Analysis -->
|
||||||
|
<section class="py-20 px-4">
|
||||||
|
<div class="container mx-auto max-w-6xl">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">风险与挑战</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-red-500/10 border border-red-500/30 p-6 rounded-2xl backdrop-blur-sm animate-slide-up">
|
||||||
|
<div class="text-3xl mb-4 text-red-400">
|
||||||
|
<i class="fas fa-exclamation-triangle"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-4 text-red-300">技术风险</h3>
|
||||||
|
<ul class="space-y-2 text-gray-300 text-sm">
|
||||||
|
<li>• 思维链能力短板：当前更多是基座模型而非推理模型</li>
|
||||||
|
<li>• Agent工具缺失：MCP多工具调用仍出现错误</li>
|
||||||
|
<li>• 与DeepSeek-R1等推理模型存在差距</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bg-yellow-500/10 border border-yellow-500/30 p-6 rounded-2xl backdrop-blur-sm animate-slide-up" style="animation-delay: 0.2s;">
|
||||||
|
<div class="text-3xl mb-4 text-yellow-400">
|
||||||
|
<i class="fas fa-dollar-sign"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-4 text-yellow-300">商业化风险</h3>
|
||||||
|
<ul class="space-y-2 text-gray-300 text-sm">
|
||||||
|
<li>• C端用户获取成本高昂，ROI可能为负</li>
|
||||||
|
<li>• B端客户谨慎，市场增长主要来自存量客户</li>
|
||||||
|
<li>• 阿里影业虚拟拍摄技术仍处于亏损状态</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bg-blue-500/10 border border-blue-500/30 p-6 rounded-2xl backdrop-blur-sm animate-slide-up" style="animation-delay: 0.4s;">
|
||||||
|
<div class="text-3xl mb-4 text-blue-400">
|
||||||
|
<i class="fas fa-shield-alt"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-4 text-blue-300">竞争与政策风险</h3>
|
||||||
|
<ul class="space-y-2 text-gray-300 text-sm">
|
||||||
|
<li>• Llama 3.3发布后千问排名降至第二/三位</li>
|
||||||
|
<li>• 开源模型竞争加剧，存在赢者通吃效应</li>
|
||||||
|
<li>• 苹果AI合作涉及数据跨境，面临监管审查</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Investment Insights -->
|
||||||
|
<section class="py-20 px-4">
|
||||||
|
<div class="container mx-auto max-w-6xl">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">投资启示</h2>
|
||||||
|
<div class="bg-white/5 rounded-3xl p-8 md:p-12 backdrop-blur-sm border border-white/10">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||||||
|
<div class="animate-fade-in">
|
||||||
|
<h3 class="text-2xl font-bold mb-6 text-indigo-400">优先级排序</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center gap-4 p-4 bg-indigo-500/10 rounded-xl border border-indigo-500/30">
|
||||||
|
<div class="text-2xl text-indigo-400">🥇</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-lg">算力基础设施</div>
|
||||||
|
<div class="text-gray-400 text-sm">数据港、万国数据、浪潮信息（订单可见度高）</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 p-4 bg-purple-500/10 rounded-xl border border-purple-500/30">
|
||||||
|
<div class="text-2xl text-purple-400">🥈</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-lg">电商生态服务商</div>
|
||||||
|
<div class="text-gray-400 text-sm">光云科技、壹网壹创（直接受益广告货币化）</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 p-4 bg-yellow-500/10 rounded-xl border border-yellow-500/30">
|
||||||
|
<div class="text-2xl text-yellow-400">🥉</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-lg">垂直场景龙头</div>
|
||||||
|
<div class="text-gray-400 text-sm">阿里健康、阿里影业（节奏风险，谨慎配置）</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="animate-fade-in" style="animation-delay: 0.2s;">
|
||||||
|
<h3 class="text-2xl font-bold mb-6 text-purple-400">关键跟踪指标</h3>
|
||||||
|
<div class="space-y-3 text-gray-300">
|
||||||
|
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||||||
|
<span>API周调用量增速</span>
|
||||||
|
<span class="text-indigo-400 font-bold">2000亿→5000亿Tokens</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||||||
|
<span>阿里云AI收入占比</span>
|
||||||
|
<span class="text-purple-400 font-bold">10%→15%+</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||||||
|
<span>千问APP月活(MAU)</span>
|
||||||
|
<span class="text-pink-400 font-bold">5000万目标</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||||||
|
<span>30日留存率</span>
|
||||||
|
<span class="text-green-400 font-bold">>30%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-12 p-6 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 rounded-2xl border border-indigo-500/30">
|
||||||
|
<h4 class="text-xl font-bold mb-4 text-center">结论</h4>
|
||||||
|
<p class="text-gray-300 text-center leading-relaxed text-lg">
|
||||||
|
阿里"千问"项目具备<strong class="text-indigo-400">"基本面打底+主题催化"</strong>的双重属性，当前处于"技术兑现期向商业化爆发期过渡"的关键节点。<br>
|
||||||
|
<span class="text-purple-400">2025年Q4至2026年Q1</span>是验证窗口期，若C端APP数据超预期或苹果合作落地，将引发戴维斯双击。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="py-12 px-4 border-t border-white/10">
|
||||||
|
<div class="container mx-auto text-center">
|
||||||
|
<p class="text-gray-400 mb-4">基于真实行业洞察与数据分析</p>
|
||||||
|
<p class="text-gray-500 text-sm">生成时间：2025年11月 | 数据来源：公开新闻、路演纪要、工商信息</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tab functionality
|
||||||
|
function showCategory(category) {
|
||||||
|
const rows = document.querySelectorAll('#stockTableBody tr');
|
||||||
|
const tabs = document.querySelectorAll('.tab');
|
||||||
|
|
||||||
|
// Update tab styles
|
||||||
|
tabs.forEach(tab => tab.classList.remove('tab-active'));
|
||||||
|
event.target.classList.add('tab-active');
|
||||||
|
|
||||||
|
// Show/hide rows
|
||||||
|
rows.forEach(row => {
|
||||||
|
row.style.display = 'none';
|
||||||
|
setTimeout(() => {
|
||||||
|
if (category === 'all') {
|
||||||
|
row.style.display = 'table-row';
|
||||||
|
} else if (category === 'idc' && row.classList.contains('idc-row')) {
|
||||||
|
row.style.display = 'table-row';
|
||||||
|
} else if (category === 'ecommerce' && row.classList.contains('ecommerce-row')) {
|
||||||
|
row.style.display = 'table-row';
|
||||||
|
} else if (category === 'investment' && row.classList.contains('investment-row')) {
|
||||||
|
row.style.display = 'table-row';
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mobile menu toggle
|
||||||
|
function toggleMobileMenu() {
|
||||||
|
const menu = document.getElementById('mobileMenu');
|
||||||
|
menu.classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
659
public/htmls/隔膜.html
Normal file
659
public/htmls/隔膜.html
Normal file
@@ -0,0 +1,659 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<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>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#00d4ff',
|
||||||
|
secondary: '#ff00ff',
|
||||||
|
accent: '#00ff88',
|
||||||
|
dark: '#0a0e27',
|
||||||
|
darker: '#050817'
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', 'sans-serif']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #050817 0%, #0a0e27 100%);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-gradient {
|
||||||
|
background: linear-gradient(135deg, #00d4ff 0%, #ff00ff 50%, #00ff88 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
border-color: rgba(0, 212, 255, 0.3);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 212, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -6px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #00d4ff;
|
||||||
|
box-shadow: 0 0 20px #00d4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-line {
|
||||||
|
background: linear-gradient(to bottom, #00d4ff, #ff00ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-glow {
|
||||||
|
box-shadow: 0 0 15px currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row-hover:hover {
|
||||||
|
background: rgba(0, 212, 255, 0.05);
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); }
|
||||||
|
50% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.8); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse-glow {
|
||||||
|
animation: pulse-glow 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-stack {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.desktop-table { display: none; }
|
||||||
|
.mobile-stack { display: block; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(255, 0, 255, 0.1) 100%);
|
||||||
|
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-darker text-white font-sans">
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 bg-dark/90 backdrop-blur-md border-b border-primary/20">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex items-center justify-between h-16">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<i class="fas fa-layer-group text-2xl text-primary"></i>
|
||||||
|
<span class="text-xl font-bold hero-gradient">隔膜概念</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex space-x-6 text-sm">
|
||||||
|
<a href="#overview" class="hover:text-primary transition-colors">核心逻辑</a>
|
||||||
|
<a href="#timeline" class="hover:text-primary transition-colors">时间轴</a>
|
||||||
|
<a href="#stocks" class="hover:text-primary transition-colors">核心标的</a>
|
||||||
|
<a href="#risk" class="hover:text-primary transition-colors">风险分析</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero区域 -->
|
||||||
|
<section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto text-center">
|
||||||
|
<h1 class="text-4xl sm:text-6xl font-bold mb-6">
|
||||||
|
<span class="hero-gradient">锂电池隔膜</span>
|
||||||
|
<br/>周期反转拐点
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg sm:text-xl text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed">
|
||||||
|
供给刚性超预期，储能爆发超预期，政策反内卷超预期——三重共振驱动下，隔膜行业正从周期底部走向价格拐点，2025-2026年头部企业盈利修复弹性巨大。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 mb-12">
|
||||||
|
<div class="badge badge-primary badge-glow px-4 py-2">储能切湿法</div>
|
||||||
|
<div class="badge badge-secondary badge-glow px-4 py-2">产能投放尾声</div>
|
||||||
|
<div class="badge badge-accent badge-glow px-4 py-2">价格联盟形成</div>
|
||||||
|
<div class="badge badge-primary badge-glow px-4 py-2">5μm渗透加速</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 核心观点摘要 -->
|
||||||
|
<section id="overview" class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-8 mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-6 flex items-center">
|
||||||
|
<i class="fas fa-bullseye text-primary mr-3"></i>
|
||||||
|
核心观点摘要
|
||||||
|
</h2>
|
||||||
|
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-6 border border-primary/20">
|
||||||
|
<p class="text-lg leading-relaxed">
|
||||||
|
当前隔膜行业正处于<strong class="text-primary">"周期反转拐点"</strong>，由三重逻辑共振驱动：
|
||||||
|
<br/><br/>
|
||||||
|
① <strong class="text-secondary">供给端产能投放进入尾声</strong>，2026年新增供给断崖式收缩；
|
||||||
|
<br/>
|
||||||
|
② <strong class="text-accent">需求端储能市场爆发式增长</strong>（同比+106%）彻底扭转供需格局，湿法隔膜供需紧平衡；
|
||||||
|
<br/>
|
||||||
|
③ <strong class="text-primary">政策"反内卷"与行业自律形成价格联盟</strong>，龙头议价能力显著提升。
|
||||||
|
<br/><br/>
|
||||||
|
市场当前对固态电池冲击存在过度担忧，而低估了设备壁垒、海外布局及高端涂覆带来的价值重构，<strong class="text-accent">2025-2026年头部企业盈利修复弹性巨大</strong>。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 时间轴 -->
|
||||||
|
<section id="timeline" class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h2 class="text-3xl font-bold mb-12 text-center">
|
||||||
|
<span class="hero-gradient">概念事件时间轴</span>
|
||||||
|
</h2>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="timeline-line absolute left-4 md:left-1/2 transform md:-translate-x-1/2 w-1 h-full"></div>
|
||||||
|
|
||||||
|
<div class="space-y-12">
|
||||||
|
<div class="timeline-item relative flex flex-col md:flex-row items-center">
|
||||||
|
<div class="bg-dark rounded-xl p-6 card-hover ml-8 md:ml-0 md:w-5/12">
|
||||||
|
<div class="text-sm text-primary mb-2">2024年2月</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">底部信号初现</h3>
|
||||||
|
<p class="text-gray-300">CT电新率先提出"隔膜价格底部，行业有望见底反转"，指出湿法价格企稳、干法已涨价30%。</p>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block w-2/12"></div>
|
||||||
|
<div class="hidden md:block w-5/12"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item relative flex flex-col md:flex-row items-center">
|
||||||
|
<div class="hidden md:block w-5/12"></div>
|
||||||
|
<div class="hidden md:block w-2/12"></div>
|
||||||
|
<div class="bg-dark rounded-xl p-6 card-hover mr-8 md:mr-0 md:w-5/12">
|
||||||
|
<div class="text-sm text-primary mb-2">2024年9-10月</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">涨价落地验证</h3>
|
||||||
|
<p class="text-gray-300">干法隔膜年内涨幅>30%，8月初第二次提价10%；湿法交付周期紧张，价格涨幅超10%，周期反转强度确认。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item relative flex flex-col md:flex-row items-center">
|
||||||
|
<div class="bg-dark rounded-xl p-6 card-hover ml-8 md:ml-0 md:w-5/12">
|
||||||
|
<div class="text-sm text-primary mb-2">2024年11月</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">政策护航升级</h3>
|
||||||
|
<p class="text-gray-300">工信部研究编制"十五五"规划，强调防范低水平重复建设。储能产线全面切换湿法，5μm渗透率目标提升至15%。</p>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block w-2/12"></div>
|
||||||
|
<div class="hidden md:block w-5/12"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item relative flex flex-col md:flex-row items-center">
|
||||||
|
<div class="hidden md:block w-5/12"></div>
|
||||||
|
<div class="hidden md:block w-2/12"></div>
|
||||||
|
<div class="bg-dark rounded-xl p-6 card-hover mr-8 md:mr-0 md:w-5/12">
|
||||||
|
<div class="text-sm text-primary mb-2">2025-2026年</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">供需缺口显现</h3>
|
||||||
|
<p class="text-gray-300">鑫椤锂电预测2026年TOP3产能利用率超95%，行业或迎供需缺口。头部企业开启2026年价格谈判，盈利修复空间大。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 供需格局分析 -->
|
||||||
|
<section class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h2 class="text-3xl font-bold mb-12 text-center">
|
||||||
|
<span class="hero-gradient">核心驱动力：三重断裂性改善</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-6">
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<i class="fas fa-industry text-4xl text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">供给刚性超预期</h3>
|
||||||
|
<ul class="space-y-3 text-sm text-gray-300">
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>设备依赖进口（东芝/布鲁克纳），交付周期长达1.5-2年</li>
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>良率爬坡至90%需1年以上，二线厂商仅75-80%</li>
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>头部两家产能2025年底收尾，2026年供给断崖式收缩</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-6">
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<i class="fas fa-chart-line text-4xl text-secondary"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">需求结构性爆发</h3>
|
||||||
|
<ul class="space-y-3 text-sm text-gray-300">
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>储能全面切湿法，同比+106%，单GWh用量提升33%</li>
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>5μm高端隔膜渗透率从5%→15%，单价是普通2-3倍</li>
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>海外价格是国内的2-3倍，恩捷/星源海外工厂投产</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-6">
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<i class="fas fa-shield-alt text-4xl text-accent"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">政策价格联盟</h3>
|
||||||
|
<ul class="space-y-3 text-sm text-gray-300">
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>协会倡议"以销定产、不打价格战"</li>
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>工信部"十五五"规划防低水平重复建设</li>
|
||||||
|
<li class="flex items-start"><i class="fas fa-check text-accent mt-1 mr-2"></i>头部企业TOP2市占率50%+形成价格默契</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 关键数据指标 -->
|
||||||
|
<div class="grid md:grid-cols-4 gap-6">
|
||||||
|
<div class="metric-card rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-2">300亿平</div>
|
||||||
|
<div class="text-sm text-gray-300">2024年全球隔膜出货量</div>
|
||||||
|
<div class="text-xs text-accent mt-1">vs 2020年64亿平</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="text-3xl font-bold text-secondary mb-2">95%</div>
|
||||||
|
<div class="text-sm text-gray-300">2026年TOP3产能利用率预测</div>
|
||||||
|
<div class="text-xs text-accent mt-1">当前已打满</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="text-3xl font-bold text-accent mb-2">30%</div>
|
||||||
|
<div class="text-sm text-gray-300">5μm高端隔膜渗透率</div>
|
||||||
|
<div class="text-xs text-accent mt-1">2025年目标vs 2024年5%</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-2">2-3倍</div>
|
||||||
|
<div class="text-sm text-gray-300">海外/国内价格倍率</div>
|
||||||
|
<div class="text-xs text-accent mt-1">成本差异不大</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 核心公司对比 -->
|
||||||
|
<section id="stocks" class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h2 class="text-3xl font-bold mb-12 text-center">
|
||||||
|
<span class="hero-gradient">核心标的深度剖析</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<!-- 桌面端表格 -->
|
||||||
|
<div class="desktop-table bg-dark rounded-2xl overflow-hidden card-hover">
|
||||||
|
<table class="table w-full">
|
||||||
|
<thead class="bg-gradient-to-r from-primary/20 to-secondary/20">
|
||||||
|
<tr>
|
||||||
|
<th class="text-white font-semibold">公司</th>
|
||||||
|
<th class="text-white font-semibold">角色定位</th>
|
||||||
|
<th class="text-white font-semibold">核心优势</th>
|
||||||
|
<th class="text-white font-semibold">产能/份额</th>
|
||||||
|
<th class="text-white font-semibold">2025预计</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="table-row-hover">
|
||||||
|
<td>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="badge badge-primary badge-glow mr-2">龙头</div>
|
||||||
|
<span class="font-semibold">恩捷股份</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge badge-secondary">绝对龙头</span></td>
|
||||||
|
<td class="text-sm">设备壁垒+全球专利最多+成本最低+海外布局领先</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>2025年110亿平</div>
|
||||||
|
<div class="text-primary">全球50%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>22亿利润</div>
|
||||||
|
<div class="text-accent">17倍PE</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="table-row-hover">
|
||||||
|
<td>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="badge badge-secondary badge-glow mr-2">赶超者</div>
|
||||||
|
<span class="font-semibold">星源材质</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge badge-accent">追赶者</span></td>
|
||||||
|
<td class="text-sm">干法全球第一+固态膜布局领先+全球布局最广</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>2025年70亿平</div>
|
||||||
|
<div class="text-primary">全球21%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>14亿利润</div>
|
||||||
|
<div class="text-accent">13倍PE</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="table-row-hover">
|
||||||
|
<td>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="badge badge-accent badge-glow mr-2">二线</div>
|
||||||
|
<span class="font-semibold">中材科技</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge badge-primary">稳健二线</span></td>
|
||||||
|
<td class="text-sm">央企资源+设备多元+客户结构稳定</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>2024年销量19亿平</div>
|
||||||
|
<div class="text-primary">湿法13%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>盈利修复滞后</div>
|
||||||
|
<div>产能利用率80%</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="table-row-hover">
|
||||||
|
<td>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="badge badge-glow mr-2" style="color: #ff00ff; border-color: #ff00ff;">并购</div>
|
||||||
|
<span class="font-semibold">佛塑科技</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td><span class="badge badge-secondary">并购新锐</span></td>
|
||||||
|
<td class="text-sm">收购金力新能源+切入一线供应链</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>金力16亿平产能</div>
|
||||||
|
<div class="text-primary">湿法18%</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-sm">
|
||||||
|
<div>协同效应</div>
|
||||||
|
<div class="text-accent">估值重塑</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端堆叠卡片 -->
|
||||||
|
<div class="mobile-stack space-y-6">
|
||||||
|
<div class="card card-hover bg-dark rounded-xl p-6">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold">恩捷股份</h3>
|
||||||
|
<div class="badge badge-primary badge-glow">绝对龙头</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>产能: 2025年110亿平</div>
|
||||||
|
<div>份额: 全球50%</div>
|
||||||
|
<div>利润: 22亿</div>
|
||||||
|
<div>PE: 17倍</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-hover bg-dark rounded-xl p-6">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold">星源材质</h3>
|
||||||
|
<div class="badge badge-secondary badge-glow">赶超者</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>产能: 2025年70亿平</div>
|
||||||
|
<div>份额: 全球21%</div>
|
||||||
|
<div>利润: 14亿</div>
|
||||||
|
<div>PE: 13倍</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card card-hover bg-dark rounded-xl p-6">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold">佛塑科技</h3>
|
||||||
|
<div class="badge badge-glow" style="color: #ff00ff; border-color: #ff00ff;">并购</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>收购: 金力新能源</div>
|
||||||
|
<div>份额: 湿法18%</div>
|
||||||
|
<div>潜力: 协同效应</div>
|
||||||
|
<div>估值: 重塑</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 股票数据表格 -->
|
||||||
|
<section class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h2 class="text-3xl font-bold mb-12 text-center">
|
||||||
|
<span class="hero-gradient">概念股数据总览</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl overflow-hidden">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="table w-full">
|
||||||
|
<thead class="bg-gradient-to-r from-primary/20 to-secondary/20">
|
||||||
|
<tr>
|
||||||
|
<th class="text-white font-semibold">股票名称</th>
|
||||||
|
<th class="text-white font-semibold">角色定位</th>
|
||||||
|
<th class="text-white font-semibold">核心数据</th>
|
||||||
|
<th class="text-white font-semibold">投资逻辑</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="stockTable">
|
||||||
|
<!-- 动态生成股票数据 -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 催化与风险 -->
|
||||||
|
<section id="risk" class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<div class="grid md:grid-cols-2 gap-8">
|
||||||
|
<!-- 催化剂 -->
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-8">
|
||||||
|
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||||||
|
<i class="fas fa-rocket text-secondary mr-3"></i>
|
||||||
|
关键催化剂
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="bg-secondary/10 rounded-lg p-4 border border-secondary/20">
|
||||||
|
<div class="text-sm text-secondary mb-1">2025年1月</div>
|
||||||
|
<h3 class="font-semibold mb-2">2026年价格谈判落地</h3>
|
||||||
|
<p class="text-sm text-gray-300">若涨价幅度达15-20%，将直接验证周期反转强度，触发估值修复。</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-primary/10 rounded-lg p-4 border border-primary/20">
|
||||||
|
<div class="text-sm text-primary mb-1">2025年Q1</div>
|
||||||
|
<h3 class="font-semibold mb-2">储能出货量持续超预期</h3>
|
||||||
|
<p class="text-sm text-gray-300">若Q1延续高增（同比+80%以上），强化"储能切湿法"逻辑。</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-accent/10 rounded-lg p-4 border border-accent/20">
|
||||||
|
<div class="text-sm text-accent mb-1">2025年Q2</div>
|
||||||
|
<h3 class="font-semibold mb-2">5μm渗透率加速提升</h3>
|
||||||
|
<p class="text-sm text-gray-300">若宁德/比亚迪大规模采用，单平利润提升50-100%。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 风险分析 -->
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-8">
|
||||||
|
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||||||
|
<i class="fas fa-exclamation-triangle text-red-400 mr-3"></i>
|
||||||
|
潜在风险
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="bg-red-500/10 rounded-lg p-4 border border-red-500/20">
|
||||||
|
<h3 class="font-semibold text-red-400 mb-2">技术风险：固态电池路径不确定</h3>
|
||||||
|
<p class="text-sm text-gray-300">若全固态电池2027年后量产，传统隔膜需求或萎缩30-50%。但恩捷/星源已通过骨架膜布局对冲。</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-yellow-500/10 rounded-lg p-4 border border-yellow-500/20">
|
||||||
|
<h3 class="font-semibold text-yellow-400 mb-2">商业风险：价格战反复</h3>
|
||||||
|
<p class="text-sm text-gray-300">行业自律缺乏强制约束力，若头部企业为抢占份额突然降价，价格体系可能崩溃。</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-blue-500/10 rounded-lg p-4 border border-blue-500/20">
|
||||||
|
<h3 class="font-semibold text-blue-400 mb-2">政策风险：IRA细则变化</h3>
|
||||||
|
<p class="text-sm text-gray-300">恩捷美国工厂享受IRA补贴，2025年美国总统大选后政策存在变数。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 跟踪指标与投资策略 -->
|
||||||
|
<section class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h2 class="text-3xl font-bold mb-12 text-center">
|
||||||
|
<span class="hero-gradient">投资策略框架</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-6 text-center">
|
||||||
|
<div class="text-2xl font-bold text-primary mb-2">左侧布局期</div>
|
||||||
|
<div class="text-sm text-gray-300 mb-4">当前-2025年Q1</div>
|
||||||
|
<p class="text-sm">在2026年价格谈判落地前，逢低建仓恩捷股份、星源材质，仓位上限30%。</p>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-6 text-center">
|
||||||
|
<div class="text-2xl font-bold text-secondary mb-2">右侧加仓期</div>
|
||||||
|
<div class="text-sm text-gray-300 mb-4">2025年Q2-Q3</div>
|
||||||
|
<p class="text-sm">若5μm渗透率突破15%、储能维持高增，加仓至50%仓位。</p>
|
||||||
|
</div>
|
||||||
|
<div class="card card-hover bg-dark rounded-2xl p-6 text-center">
|
||||||
|
<div class="text-2xl font-bold text-accent mb-2">兑现退出期</div>
|
||||||
|
<div class="text-sm text-gray-300 mb-4">2025年Q4-2026年</div>
|
||||||
|
<p class="text-sm">当单平利润恢复至0.3元、PE降至10倍以下时，逐步兑现收益。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 关键跟踪指标卡片 -->
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="metric-card rounded-xl p-4 text-center card-hover pulse-glow">
|
||||||
|
<div class="text-lg font-bold text-primary mb-1">价格指标</div>
|
||||||
|
<div class="text-sm text-gray-300">7μm湿法基膜均价</div>
|
||||||
|
<div class="text-accent mt-2">目标: 1.0元/平</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card rounded-xl p-4 text-center card-hover">
|
||||||
|
<div class="text-lg font-bold text-secondary mb-1">盈利指标</div>
|
||||||
|
<div class="text-sm text-gray-300">恩捷单平净利润</div>
|
||||||
|
<div class="text-accent mt-2">目标: 0.25元</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card rounded-xl p-4 text-center card-hover">
|
||||||
|
<div class="text-lg font-bold text-accent mb-1">产能指标</div>
|
||||||
|
<div class="text-sm text-gray-300">TOP3产能利用率</div>
|
||||||
|
<div class="text-accent mt-2">目标: >95%</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card rounded-xl p-4 text-center card-hover">
|
||||||
|
<div class="text-lg font-bold text-primary mb-1">需求指标</div>
|
||||||
|
<div class="text-sm text-gray-300">储能出货量同比</div>
|
||||||
|
<div class="text-accent mt-2">目标: >60%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 总结 -->
|
||||||
|
<section class="py-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<div class="card card-hover bg-gradient-to-r from-primary/10 to-secondary/10 rounded-2xl p-8 border border-primary/20">
|
||||||
|
<h2 class="text-3xl font-bold mb-6 text-center">
|
||||||
|
<span class="hero-gradient">最终结论</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-lg leading-relaxed mb-6">
|
||||||
|
隔膜是2025年新能源材料中<strong class="text-accent">供需格局最优、涨价确定性最强、估值修复空间最大</strong>的细分赛道。核心矛盾已从"产能过剩"转向"优质产能不足"，龙头将进入长达2-3年的盈利上行周期。
|
||||||
|
</p>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="badge badge-primary badge-glow px-6 py-3 text-lg">把握三重共振窗口期</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mt-6">
|
||||||
|
风险提示：固态电池技术路线不确定性、价格联盟脆弱性、IRA政策变化、新进入者搅局。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-primary/10">
|
||||||
|
<div class="max-w-7xl mx-auto text-center">
|
||||||
|
<p class="text-gray-400 text-sm">
|
||||||
|
本报告基于公开信息整理，不构成投资建议。市场有风险，投资需谨慎。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 股票数据
|
||||||
|
const stockData = [
|
||||||
|
{ stock: '恩捷股份', role: '绝对龙头', data: '2025年110亿平，全球50%', reason: '隔膜市占率A股第一，设备壁垒最深，海外布局领先' },
|
||||||
|
{ stock: '星源材质', role: '赶超者', data: '2025年70亿平，全球21%', reason: '干法全球第一，固态膜布局领先，全球布局最广' },
|
||||||
|
{ stock: '中材科技', role: '稳健二线', data: '2024年销量19亿平，湿法13%', reason: '央企资源，设备多元，客户结构稳定' },
|
||||||
|
{ stock: '璞泰来', role: '涂覆龙头', data: '2025年涂覆加工量73.8亿平', reason: '涂覆隔膜产能第一，在线涂覆技术领先' },
|
||||||
|
{ stock: '欧克科技', role: '设备突破', data: '新签1.76亿订单，占营收40.5%', reason: '国产设备替代逻辑，交付周期仅半年' },
|
||||||
|
{ stock: '佛塑科技', role: '并购新锐', data: '收购金力新能源，湿法18%', reason: '收购行业前三，估值重塑空间大' },
|
||||||
|
{ stock: '联泓新科', role: '材料上游', data: 'UHMWPE树脂供应商', reason: '锂电隔膜材料上游，受益于需求增长' },
|
||||||
|
{ stock: '东风股份', role: '新进者', data: '规划16亿平产能', reason: '化工巨头跨界，需关注技术消化能力' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 生成表格
|
||||||
|
const tbody = document.getElementById('stockTable');
|
||||||
|
stockData.forEach(item => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
row.className = 'table-row-hover';
|
||||||
|
row.innerHTML = `
|
||||||
|
<td class="font-semibold">${item.stock}</td>
|
||||||
|
<td><span class="badge badge-sm">${item.role}</span></td>
|
||||||
|
<td class="text-sm">${item.data}</td>
|
||||||
|
<td class="text-sm">${item.reason}</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
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',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动动画
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 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('.card-hover').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);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -2,10 +2,25 @@
|
|||||||
// 纵向分栏模式布局组件
|
// 纵向分栏模式布局组件
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Box, VStack, Flex, Center, Text, useBreakpointValue } from '@chakra-ui/react';
|
import {
|
||||||
|
Box,
|
||||||
|
VStack,
|
||||||
|
Flex,
|
||||||
|
Center,
|
||||||
|
Text,
|
||||||
|
useBreakpointValue,
|
||||||
|
Modal,
|
||||||
|
ModalOverlay,
|
||||||
|
ModalContent,
|
||||||
|
ModalHeader,
|
||||||
|
ModalBody,
|
||||||
|
ModalCloseButton,
|
||||||
|
useDisclosure
|
||||||
|
} from '@chakra-ui/react';
|
||||||
import { InfoIcon } from '@chakra-ui/icons';
|
import { InfoIcon } from '@chakra-ui/icons';
|
||||||
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
|
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
|
||||||
import EventDetailScrollPanel from './EventDetailScrollPanel';
|
import EventDetailScrollPanel from './EventDetailScrollPanel';
|
||||||
|
import DynamicNewsDetailPanel from '../../DynamicNewsDetail/DynamicNewsDetailPanel';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 纵向分栏模式布局
|
* 纵向分栏模式布局
|
||||||
@@ -38,6 +53,20 @@ const VerticalModeLayout = ({
|
|||||||
const flexDirection = useBreakpointValue({ base: 'column', lg: 'row' });
|
const flexDirection = useBreakpointValue({ base: 'column', lg: 'row' });
|
||||||
const gap = useBreakpointValue({ base: 3, lg: 6 });
|
const gap = useBreakpointValue({ base: 3, lg: 6 });
|
||||||
|
|
||||||
|
// 移动端模态框控制
|
||||||
|
const { isOpen: isMobileModalOpen, onOpen: onMobileModalOpen, onClose: onMobileModalClose } = useDisclosure();
|
||||||
|
const [mobileSelectedEvent, setMobileSelectedEvent] = useState(null);
|
||||||
|
|
||||||
|
// 处理移动端事件点击
|
||||||
|
const handleMobileEventClick = (event) => {
|
||||||
|
if (isMobile) {
|
||||||
|
setMobileSelectedEvent(event);
|
||||||
|
onMobileModalOpen();
|
||||||
|
} else {
|
||||||
|
onEventSelect(event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 固定布局比例：左侧（4），右侧（6）- 平衡布局，确保左侧有足够空间显示内容
|
// 固定布局比例：左侧（4），右侧（6）- 平衡布局，确保左侧有足够空间显示内容
|
||||||
const leftFlex = '4';
|
const leftFlex = '4';
|
||||||
const rightFlex = '6';
|
const rightFlex = '6';
|
||||||
@@ -89,7 +118,7 @@ const VerticalModeLayout = ({
|
|||||||
key={event.id}
|
key={event.id}
|
||||||
event={event}
|
event={event}
|
||||||
isSelected={selectedEvent?.id === event.id}
|
isSelected={selectedEvent?.id === event.id}
|
||||||
onEventClick={() => onEventSelect(event)}
|
onEventClick={() => handleMobileEventClick(event)}
|
||||||
isFollowing={eventFollowStatus[event.id]?.isFollowing}
|
isFollowing={eventFollowStatus[event.id]?.isFollowing}
|
||||||
followerCount={eventFollowStatus[event.id]?.followerCount}
|
followerCount={eventFollowStatus[event.id]?.followerCount}
|
||||||
onToggleFollow={onToggleFollow}
|
onToggleFollow={onToggleFollow}
|
||||||
@@ -133,6 +162,24 @@ const VerticalModeLayout = ({
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* 移动端详情弹窗 */}
|
||||||
|
{isMobile && (
|
||||||
|
<Modal isOpen={isMobileModalOpen} onClose={onMobileModalClose} size="full" scrollBehavior="inside">
|
||||||
|
<ModalOverlay bg="blackAlpha.800" backdropFilter="blur(10px)" />
|
||||||
|
<ModalContent maxW="100vw" m={0} borderRadius={0}>
|
||||||
|
<ModalHeader bg="gray.900" color="white" borderBottom="1px solid" borderColor="gray.700">
|
||||||
|
{mobileSelectedEvent?.title || '事件详情'}
|
||||||
|
</ModalHeader>
|
||||||
|
<ModalCloseButton color="white" />
|
||||||
|
<ModalBody p={0} bg="gray.900">
|
||||||
|
{mobileSelectedEvent && (
|
||||||
|
<DynamicNewsDetailPanel event={mobileSelectedEvent} showHeader={false} />
|
||||||
|
)}
|
||||||
|
</ModalBody>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
import React, { useRef, useMemo, useEffect } from 'react';
|
import React, { useRef, useMemo, useEffect } from 'react';
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton } from '@chakra-ui/react';
|
import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton, useBreakpointValue } from '@chakra-ui/react';
|
||||||
import { RepeatIcon } from '@chakra-ui/icons';
|
import { RepeatIcon } from '@chakra-ui/icons';
|
||||||
import { useColorModeValue } from '@chakra-ui/react';
|
import { useColorModeValue } from '@chakra-ui/react';
|
||||||
import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
|
import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
|
||||||
@@ -52,14 +52,26 @@ const VirtualizedFourRowGrid = ({
|
|||||||
const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
|
const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
|
||||||
const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
|
const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
|
||||||
|
|
||||||
// 将事件按 columnsPerRow 个一组分成行
|
// 响应式列数
|
||||||
|
const responsiveColumns = useBreakpointValue({
|
||||||
|
base: 1, // 移动端：单列
|
||||||
|
sm: 2, // 小屏：2列
|
||||||
|
md: 2, // 中屏：2列
|
||||||
|
lg: 3, // 大屏：3列
|
||||||
|
xl: 4, // 超大屏：4列
|
||||||
|
});
|
||||||
|
|
||||||
|
// 使用响应式列数或传入的列数
|
||||||
|
const actualColumnsPerRow = responsiveColumns || columnsPerRow;
|
||||||
|
|
||||||
|
// 将事件按 actualColumnsPerRow 个一组分成行
|
||||||
const rows = useMemo(() => {
|
const rows = useMemo(() => {
|
||||||
const r = [];
|
const r = [];
|
||||||
for (let i = 0; i < events.length; i += columnsPerRow) {
|
for (let i = 0; i < events.length; i += actualColumnsPerRow) {
|
||||||
r.push(events.slice(i, i + columnsPerRow));
|
r.push(events.slice(i, i + actualColumnsPerRow));
|
||||||
}
|
}
|
||||||
return r;
|
return r;
|
||||||
}, [events, columnsPerRow]);
|
}, [events, actualColumnsPerRow]);
|
||||||
|
|
||||||
// 配置虚拟滚动器（纵向滚动 + 动态高度测量）
|
// 配置虚拟滚动器（纵向滚动 + 动态高度测量）
|
||||||
const rowVirtualizer = useVirtualizer({
|
const rowVirtualizer = useVirtualizer({
|
||||||
@@ -301,17 +313,17 @@ const VirtualizedFourRowGrid = ({
|
|||||||
w="100%"
|
w="100%"
|
||||||
transform={`translateY(${virtualRow.start}px)`}
|
transform={`translateY(${virtualRow.start}px)`}
|
||||||
>
|
>
|
||||||
{/* 使用 Grid 横向排列卡片（列数由 columnsPerRow 决定） */}
|
{/* 使用 Grid 横向排列卡片（列数由 actualColumnsPerRow 决定） */}
|
||||||
<Grid
|
<Grid
|
||||||
templateColumns={`repeat(${columnsPerRow}, 1fr)`}
|
templateColumns={`repeat(${actualColumnsPerRow}, 1fr)`}
|
||||||
gap={columnsPerRow === 1 ? 3 : 4}
|
gap={actualColumnsPerRow === 1 ? 3 : 4}
|
||||||
w="100%"
|
w="100%"
|
||||||
>
|
>
|
||||||
{rowEvents.map((event, colIndex) => (
|
{rowEvents.map((event, colIndex) => (
|
||||||
<Box key={event.id} w="100%" minW={0}>
|
<Box key={event.id} w="100%" minW={0}>
|
||||||
<CardComponent
|
<CardComponent
|
||||||
event={event}
|
event={event}
|
||||||
index={virtualRow.index * columnsPerRow + colIndex}
|
index={virtualRow.index * actualColumnsPerRow + colIndex}
|
||||||
isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
|
isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
|
||||||
followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
|
followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
|
||||||
isSelected={selectedEvent?.id === event.id}
|
isSelected={selectedEvent?.id === event.id}
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
useColorModeValue,
|
useColorModeValue,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import CollapsibleHeader from './CollapsibleHeader';
|
import CollapsibleHeader from './CollapsibleHeader';
|
||||||
|
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 通用可折叠区块组件
|
* 通用可折叠区块组件
|
||||||
@@ -37,7 +38,7 @@ const CollapsibleSection = ({
|
|||||||
showModeToggle = false,
|
showModeToggle = false,
|
||||||
defaultMode = 'detailed'
|
defaultMode = 'detailed'
|
||||||
}) => {
|
}) => {
|
||||||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
const sectionBg = PROFESSIONAL_COLORS.background.secondary;
|
||||||
|
|
||||||
// 模式状态：'detailed' | 'simple'
|
// 模式状态：'detailed' | 'simple'
|
||||||
const [displayMode, setDisplayMode] = useState(defaultMode);
|
const [displayMode, setDisplayMode] = useState(defaultMode);
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
Text,
|
Text,
|
||||||
useColorModeValue,
|
useColorModeValue,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
|
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 事件描述区组件
|
* 事件描述区组件
|
||||||
@@ -15,9 +16,9 @@ import {
|
|||||||
* @param {string} props.description - 事件描述文本
|
* @param {string} props.description - 事件描述文本
|
||||||
*/
|
*/
|
||||||
const EventDescriptionSection = ({ description }) => {
|
const EventDescriptionSection = ({ description }) => {
|
||||||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
const sectionBg = PROFESSIONAL_COLORS.background.secondary;
|
||||||
const headingColor = useColorModeValue('gray.700', 'gray.200');
|
const headingColor = PROFESSIONAL_COLORS.text.primary;
|
||||||
const textColor = useColorModeValue('gray.600', 'gray.400');
|
const textColor = PROFESSIONAL_COLORS.text.secondary;
|
||||||
|
|
||||||
// 如果没有描述，不渲染
|
// 如果没有描述，不渲染
|
||||||
if (!description) {
|
if (!description) {
|
||||||
|
|||||||
Reference in New Issue
Block a user