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

update pay ui

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

981
public/htmls/蜜雪冰城.html
View File

@@ -1,557 +1,446 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN" data-theme="night">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍹</text></svg>">
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800|Noto+Sans+SC:300,400,500,700&display=swap" rel="stylesheet" />
<!-- Nucleo Icons -->
<link href="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.css" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- DaisyUI -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.min.css" rel="stylesheet" type="text/css" />
<style>
body {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-shadow {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.timeline-item::before {
content: '';
position: absolute;
left: -8px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #667eea;
border: 3px solid white;
}
.timeline-line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #e2e8f0;
}
#vanta-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.content-wrapper {
position: relative;
z-index: 1;
}
.highlight-text {
background: linear-gradient(120deg, #a78bfa 0%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.table-responsive {
overflow-x: auto;
}
@media (max-width: 768px) {
.card-body {
padding: 1rem;
}
.timeline-item {
padding-left: 1.5rem;
}
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜜雪冰城 (MIXUE) - 概念深度研究</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #020010;
background-image:
radial-gradient(circle at 10% 10%, rgba(58, 10, 194, 0.2) 0%, transparent 30%),
radial-gradient(circle at 90% 80%, rgba(10, 194, 185, 0.2) 0%, transparent 30%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230b052e' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.glass-card {
background: rgba(15, 12, 41, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 2rem;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.2);
border-color: rgba(255, 255, 255, 0.15);
}
.fui-title {
font-family: 'Space Grotesk', sans-serif;
text-shadow: 0 0 10px rgba(100, 255, 218, 0.7), 0 0 20px rgba(100, 255, 218, 0.5);
}
.fui-header {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.05em;
}
.glow-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.5), transparent);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
}
.bento-item {
grid-column: span 3;
min-height: 300px;
}
.bento-item-2 { grid-column: span 2; }
.bento-item-4 { grid-column: span 4; }
.bento-item-6 { grid-column: span 6; }
@media (max-width: 1024px) {
.bento-item, .bento-item-2, .bento-item-4, .bento-item-6 {
grid-column: span 6;
}
}
.timeline::before {
content: '';
position: absolute;
left: 5px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, rgba(79, 70, 229, 0) 0%, rgba(79, 70, 229, 0.8) 20%, rgba(79, 70, 229, 0.8) 80%, rgba(79, 70, 229, 0) 100%);
}
.timeline-dot {
position: absolute;
left: 0;
top: 0.5rem;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #64ffda;
box-shadow: 0 0 8px #64ffda;
}
</style>
</head>
<body class="bg-gray-50">
<div id="vanta-bg"></div>
<div class="content-wrapper min-h-screen py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-6xl mx-auto">
<!-- 标题部分 -->
<div class="text-center mb-10">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
<span class="highlight-text">蜜雪冰城</span> 行业洞察报告
</h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
从"低价茶饮"到"全球化平价饮品基础设施"的蜕变之路
</p>
</div>
<body class="text-gray-300 min-h-screen p-4 sm:p-8">
<!-- 概念事件时间轴 -->
<div class="card bg-white rounded-xl card-shadow mb-8">
<div class="card-body p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="ti ti-calendar-event mr-3 text-purple-600"></i>
概念事件时间轴
</h2>
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="timeline-item relative">
<div class="bg-purple-50 rounded-lg p-4 border-l-4 border-purple-500">
<h3 class="font-semibold text-purple-800">2024年12月</h3>
<p class="text-gray-700">申请注册"雪王AI智慧"商标，成立雪王爱智慧科技（郑州）有限公司，布局AI与供应链数字化。</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-blue-50 rounded-lg p-4 border-l-4 border-blue-500">
<h3 class="font-semibold text-blue-800">2025年1月</h3>
<p class="text-gray-700">更新招股书，披露全球门店超4.6万家，2024年饮品出杯量90亿杯，终端零售额583亿元。</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-500">
<h3 class="font-semibold text-green-800">2025年2月</h3>
<p class="text-gray-700">通过港交所聆讯，发行价202.5港元，暗盘大涨30%，认购倍数<strong class="text-green-600">3449.8倍</strong>（创港股纪录）。</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-yellow-50 rounded-lg p-4 border-l-4 border-yellow-500">
<h3 class="font-semibold text-yellow-800">2025年3月3日</h3>
<p class="text-gray-700">正式挂牌上市，开盘涨40%，市值破千亿港元；高瓴、美团龙珠等基石投资者加持。</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-pink-50 rounded-lg p-4 border-l-4 border-pink-500">
<h3 class="font-semibold text-pink-800">2025年3月后</h3>
<p class="text-gray-700">多家券商（中信证券、东吴、天风）发布深度报告，一致看好下沉市场与东南亚扩张，目标价426-565港元。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto space-y-8">
<!-- 核心观点摘要 -->
<div class="card bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl card-shadow mb-8 text-white">
<div class="card-body p-6">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i class="ti ti-bulb mr-3"></i>
核心观点摘要
</h2>
<blockquote class="border-l-4 border-white pl-4 italic">
蜜雪冰城已<strong class="text-yellow-300">从"低价茶饮"升级为"全球化平价饮品基础设施"</strong>，凭借<strong class="text-yellow-300">极致供应链+雪王IP+加盟飞轮</strong>，在下沉市场与东南亚形成<strong class="text-yellow-300">垄断性优势</strong>。当前处于<strong class="text-yellow-300">基本面加速兑现期</strong>，未来3年门店扩张（国内乡镇+海外）和幸运咖放量是核心驱动力，但需警惕<strong class="text-yellow-300">海外本地化不及预期</strong>和<strong class="text-yellow-300">食品安全舆情</strong>风险。
</blockquote>
</div>
</div>
<!-- 核心驱动力 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="card bg-white rounded-xl card-shadow">
<div class="card-body p-6">
<div class="text-purple-600 mb-4">
<i class="ti ti-building-factory text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">供应链降维打击</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>自建5大基地（年产能165万吨）</span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>27个国内仓+7个海外仓</span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>核心原料100%自产</span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>采购成本较行业低<strong>10-20%</strong></span>
</li>
</ul>
</div>
</div>
<div class="card bg-white rounded-xl card-shadow">
<div class="card-body p-6">
<div class="text-blue-600 mb-4">
<i class="ti ti-tag text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">价格带真空</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>2-8元区间无直接竞品</span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>2023年市占率<strong>57%</strong></span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>平价茶饮市场领先</span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>形成"低价-规模-成本"正循环</span>
</li>
</ul>
</div>
</div>
<div class="card bg-white rounded-xl card-shadow">
<div class="card-body p-6">
<div class="text-green-600 mb-4">
<i class="ti ti-store text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">加盟模型极致</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>单店投资21-25万（行业最低）</span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>回本周期11-13个月</span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>老加盟商带店率<strong>2.5家</strong></span>
</li>
<li class="flex items-start">
<i class="ti ti-check text-green-500 mr-2 mt-1"></i>
<span>点位申请单日暴增<strong>8000个</strong></span>
</li>
</ul>
</div>
</div>
</div>
<!-- 关键催化剂 -->
<div class="card bg-white rounded-xl card-shadow mb-8">
<div class="card-body p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="ti ti-rocket mr-3 text-orange-600"></i>
关键催化剂与未来发展路径
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-4 bg-orange-50 p-3 rounded-lg">近期催化剂（3-6个月）</h3>
<ol class="space-y-3">
<li class="flex">
<span class="bg-orange-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
<div>
<h4 class="font-medium text-gray-800">2025Q2财报</h4>
<p class="text-gray-600 text-sm">验证乡镇店均增长（1-2月已转正+4%）及幸运咖爬坡（目标新增1000家）</p>
</div>
</li>
<li class="flex">
<span class="bg-orange-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
<div>
<h4 class="font-medium text-gray-800">东南亚供应链中心落地</h4>
<p class="text-gray-600 text-sm">海南基地投产，降低印尼物流成本30%（当前冷链依赖中国）</p>
</div>
</li>
<li class="flex">
<span class="bg-orange-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
<div>
<h4 class="font-medium text-gray-800">雪王IP衍生品</h4>
<p class="text-gray-600 text-sm">动漫公司成立，预计2025年推出联名周边（如与《蛋仔派对》合作）</p>
</div>
</li>
</ol>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-4 bg-blue-50 p-3 rounded-lg">长期路径（2025-2028）</h3>
<ol class="space-y-3">
<li class="flex">
<span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
<div>
<h4 class="font-medium text-gray-800">国内扩张</h4>
<p class="text-gray-600 text-sm">从4.2万家→<strong>5.5万家</strong>（乡镇+景区加密），单店GMV年增2-3%</p>
</div>
</li>
<li class="flex">
<span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
<div>
<h4 class="font-medium text-gray-800">海外布局</h4>
<p class="text-gray-600 text-sm">从5000家→<strong>1.5万家</strong>（东南亚为主），本地化采购比例提升至50%</p>
</div>
</li>
<li class="flex">
<span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
<div>
<h4 class="font-medium text-gray-800">第二曲线</h4>
<p class="text-gray-600 text-sm">幸运咖门店4000家→<strong>1万家</strong>，复用加盟商网络，抢占下沉咖啡市场</p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司对比 -->
<div class="card bg-white rounded-xl card-shadow mb-8">
<div class="card-body p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="ti ti-network mr-3 text-teal-600"></i>
产业链与核心公司深度剖析
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 mb-3">产业链图谱</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-teal-50 p-4 rounded-lg">
<h4 class="font-medium text-teal-800 mb-2">上游</h4>
<p class="text-gray-600">柠檬（四川安岳）、奶粉（新西兰恒天然）、设备（东贝集团制冰机）</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<h4 class="font-medium text-purple-800 mb-2">中游</h4>
<p class="text-gray-600">蜜雪自建基地（河南/海南）→27个仓→加盟商</p>
</div>
<div class="bg-pink-50 p-4 rounded-lg">
<h4 class="font-medium text-pink-800 mb-2">下游</h4>
<p class="text-gray-600">乡镇门店（70%覆盖率）、海外加盟商（印尼华人为主）</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200">
<thead>
<tr class="bg-gray-50">
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">门店数</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">价格带</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">核心优势</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险点</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-4 px-4 font-medium text-gray-900">蜜雪冰城</td>
<td class="py-4 px-4 text-gray-700">4.6万</td>
<td class="py-4 px-4 text-gray-700">2-8元</td>
<td class="py-4 px-4 text-gray-700">供应链垄断+IP流量</td>
<td class="py-4 px-4 text-gray-700">海外盈利模型待验证</td>
</tr>
<tr class="bg-gray-50">
<td class="py-4 px-4 font-medium text-gray-900">古茗</td>
<td class="py-4 px-4 text-gray-700">1万</td>
<td class="py-4 px-4 text-gray-700">10-18元</td>
<td class="py-4 px-4 text-gray-700">鲜果茶差异化+冷链</td>
<td class="py-4 px-4 text-gray-700">北方扩张供应链短板</td>
</tr>
<tr>
<td class="py-4 px-4 font-medium text-gray-900">茶百道</td>
<td class="py-4 px-4 text-gray-700">8000</td>
<td class="py-4 px-4 text-gray-700">10-15元</td>
<td class="py-4 px-4 text-gray-700">外卖占比高（50%+）</td>
<td class="py-4 px-4 text-gray-700">价格战下毛利承压</td>
</tr>
<tr class="bg-gray-50">
<td class="py-4 px-4 font-medium text-gray-900">瑞幸</td>
<td class="py-4 px-4 text-gray-700">2万</td>
<td class="py-4 px-4 text-gray-700">15-20元</td>
<td class="py-4 px-4 text-gray-700">数字化+高线城市密度</td>
<td class="py-4 px-4 text-gray-700">下沉市场供应链劣势</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="card bg-white rounded-xl card-shadow mb-8">
<div class="card-body p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="ti ti-alert-triangle mr-3 text-red-600"></i>
潜在风险与挑战
</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200">
<thead>
<tr class="bg-gray-50">
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">具体表现</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-4 px-4 font-medium text-gray-900 bg-red-50">技术风险</td>
<td class="py-4 px-4 text-gray-700">AI订货系统误判需求（如2024年印尼缺货4个月），需优化算法。</td>
</tr>
<tr>
<td class="py-4 px-4 font-medium text-gray-900 bg-yellow-50">商业化风险</td>
<td class="py-4 px-4 text-gray-700">海外定价过高（新加坡2倍国内），本土化SKU不足（如泰国减糖产品延迟）。</td>
</tr>
<tr>
<td class="py-4 px-4 font-medium text-gray-900 bg-blue-50">政策风险</td>
<td class="py-4 px-4 text-gray-700">东南亚食品安全法规趋严（印尼2025年新规要求本地原料占比≥40%）。</td>
</tr>
<tr>
<td class="py-4 px-4 font-medium text-gray-900 bg-purple-50">信息矛盾</td>
<td class="py-4 px-4 text-gray-700">路演预测2025年新增7000家，但专家交流称乡镇实际可开仅<strong>5000-6000家</strong>。</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="card bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl card-shadow mb-8 text-white">
<div class="card-body p-6">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="ti ti-chart-line mr-3"></i>
综合结论与投资启示
</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-3 text-yellow-300">阶段判断</h3>
<p class="text-lg">蜜雪已从<strong class="text-yellow-300">"主题炒作"</strong>（IPO高认购）进入<strong class="text-yellow-300">"基本面驱动"</strong>（2025年利润增速24%），但估值未充分反映海外风险。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<h3 class="text-xl font-semibold mb-3 text-yellow-300">投资方向</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="ti ti-star text-yellow-300 mr-2 mt-1"></i>
<span><strong class="text-yellow-300">最确定</strong>：国内乡镇加密（1万家空间）+幸运咖下沉（5000家增量）</span>
</li>
<li class="flex items-start">
<i class="ti ti-rocket text-yellow-300 mr-2 mt-1"></i>
<span><strong class="text-yellow-300">高弹性</strong>：东南亚供应链中心落地后，单店盈利修复带来的估值重估</span>
</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-yellow-300">跟踪指标</h3>
<ol class="space-y-2">
<li class="flex">
<span class="bg-yellow-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
<span><strong>乡镇店均日销</strong>：需维持5000元以上</span>
</li>
<li class="flex">
<span class="bg-yellow-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
<span><strong>海外本地化率</strong>：2025年东南亚本地采购占比能否达50%</span>
</li>
<li class="flex">
<span class="bg-yellow-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
<span><strong>幸运咖关店率</strong>：需低于3%</span>
</li>
</ol>
</div>
</div>
<div class="bg-black bg-opacity-20 p-4 rounded-lg">
<p class="text-xl font-semibold text-center italic">
"蜜雪冰城是<strong class="text-yellow-300">用供应链赚全世界的奶茶钱</strong>的稀缺标的，短期看乡镇，长期看出海，但需紧盯<strong class="text-yellow-300">海外单店模型</strong>这一阿喀琉斯之踵。"
<!-- Header -->
<header class="text-center py-8">
<h1 class="text-4xl md:text-6xl font-bold text-white fui-title">蜜雪冰城 (MIXUE)</h1>
<h2 class="text-2xl md:text-3xl font-light text-cyan-300 mt-2 fui-header">概念深度研究报告</h2>
<p class="mt-6 max-w-3xl mx-auto text-sm text-gray-400">
由 北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现。本报告为AI合成数据，不构成任何投资建议，投资需谨慎。
</p>
</div>
</div>
</div>
</header>
<!-- 关联股票数据 -->
<div class="card bg-white rounded-xl card-shadow mb-8">
<div class="card-body p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="ti ti-chart-bar mr-3 text-green-600"></i>
关联股票数据
</h2>
<div class="table-responsive">
<table class="min-w-full bg-white border border-gray-200">
<thead>
<tr class="bg-gray-50">
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票代码</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关联公司</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关系类型</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关系描述</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资料来源</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-4 px-4 font-medium text-gray-900">蜜雪冰城(250225)</td>
<td class="py-4 px-4 text-gray-700">好想你</td>
<td class="py-4 px-4 text-gray-700">产业链-投资关系</td>
<td class="py-4 px-4 text-gray-700">公司通过深圳龙珠股权投资基金间接投资蜜雪冰城</td>
<td class="py-4 px-4 text-gray-700">互动</td>
</tr>
<tr class="bg-gray-50">
<td class="py-4 px-4 font-medium text-gray-900">蜜雪冰城(250225)</td>
<td class="py-4 px-4 text-gray-700">东贝集团</td>
<td class="py-4 px-4 text-gray-700">产业链-供应商</td>
<td class="py-4 px-4 text-gray-700">子公司东贝制冷是蜜雪冰城的主要供应商，主要供货产品有冰淇淋机、制冰机等</td>
<td class="py-4 px-4 text-gray-700">互动</td>
</tr>
<tr>
<td class="py-4 px-4 font-medium text-gray-900">蜜雪冰城(250225)</td>
<td class="py-4 px-4 text-gray-700">一致魔芋</td>
<td class="py-4 px-4 text-gray-700">产业链-供应链地位</td>
<td class="py-4 px-4 text-gray-700">在蜜雪冰城的供应链中占据重要地位</td>
<td class="py-4 px-4 text-gray-700">公告</td>
</tr>
<tr class="bg-gray-50">
<td class="py-4 px-4 font-medium text-gray-900">蜜雪冰城(250225)</td>
<td class="py-4 px-4 text-gray-700">冰山冷热</td>
<td class="py-4 px-4 text-gray-700">产业链-客户关系</td>
<td class="py-4 px-4 text-gray-700">联营公司生产的超市陈列柜主要客户包括蜜雪冰城</td>
<td class="py-4 px-4 text-gray-700">互动</td>
</tr>
<tr>
<td class="py-4 px-4 font-medium text-gray-900">蜜雪冰城(250225)</td>
<td class="py-4 px-4 text-gray-700">佳禾食品</td>
<td class="py-4 px-4 text-gray-700">产业链-客户关系</td>
<td class="py-4 px-4 text-gray-700">粉末油脂下游客户包括蜜雪冰城</td>
<td class="py-4 px-4 text-gray-700">公告</td>
</tr>
<tr class="bg-gray-50">
<td class="py-4 px-4 font-medium text-gray-900">蜜雪冰城(250225)</td>
<td class="py-4 px-4 text-gray-700">恒达新材、天娱数科、丝路视觉、超图软件、双汇发展、天地在线、汇通能源、用友网络、恰恰食品、紫江企业、道恩股份、家联科技、熊猫乳品、五芳斋、供销大集、南王科技、音飞储存</td>
<td class="py-4 px-4 text-gray-700">品牌合作</td>
<td class="py-4 px-4 text-gray-700">多品牌战略合作关系</td>
<td class="py-4 px-4 text-gray-700">公告/互动</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Bento Grid for Key Metrics -->
<section class="bento-grid">
<div class="glass-card p-6 bento-item bento-item-2">
<h3 class="fui-header text-xl text-white mb-4">全球门店网络</h3>
<div id="store-growth-chart" style="width: 100%; height: 260px;"></div>
</div>
<div class="glass-card p-6 bento-item bento-item-2">
<h3 class="fui-header text-xl text-white mb-4">核心财务表现</h3>
<div id="financials-chart" style="width: 100%; height: 260px;"></div>
</div>
<div class="glass-card p-6 bento-item bento-item-2">
<h3 class="fui-header text-xl text-white mb-4">国内市场渗透</h3>
<div id="market-dist-chart" style="width: 100%; height: 260px;"></div>
</div>
</section>
<!-- Core Insight Section -->
<main class="space-y-8">
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">0. 概念事件：香港上市里程碑</h2>
<div class="glow-divider mb-6"></div>
<p class="mb-6 leading-relaxed">蜜雪冰城概念的核心催化事件是其于 <strong class="text-cyan-300 font-semibold">2025年3月3日</strong> 在香港联合交易所主板的成功上市（股票代码：<strong class="text-cyan-300 font-semibold">2097.HK</strong>）。这一事件不仅是公司发展的重要里程碑，也将其独特的商业模式和庞大的市场规模全面呈现在资本市场面前，引发了市场的高度关注和深度研究。</p>
<div class="relative timeline pl-8">
<div class="relative pb-6">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年1月1日: <span class="font-normal text-gray-300">公司更新港股招股书，上市进程加速。</span></p>
</div>
<div class="relative pb-6">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年2月14日: <span class="font-normal text-gray-300">通过香港联交所上市聆讯，披露核心经营数据与战略。</span></p>
</div>
<div class="relative pb-6">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年2月21日-26日: <span class="font-normal text-gray-300">正式公开招股，发行价定为 <strong class="text-cyan-300">202.5港元</strong>。市场反应热烈，公开发售超额认购逾 <strong class="text-cyan-300">3449倍</strong>，成为港股新“冻资王”。</span></p>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年3月3日: <span class="font-normal text-gray-300">正式挂牌上市。开盘价 <strong class="text-cyan-300">262.00港元</strong>，较发行价上涨 <strong class="text-cyan-300">29.38%</strong>，市值突破千亿港元。</span></p>
</div>
</div>
</div>
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">1. 核心观点摘要</h2>
<div class="glow-divider mb-6"></div>
<p class="text-lg leading-relaxed bg-black/20 p-6 rounded-2xl border border-white/10">
蜜雪冰城概念的核心是 <strong class="text-cyan-300">一个以极致供应链效率为基石、通过高性价比产品和加盟模式主导下沉市场的消费巨头</strong>。当前，公司正处于 <strong class="text-cyan-300">由国内高速扩张向“第二曲线”（幸运咖、海外市场）延伸的关键转型阶段</strong>。其未来的增长潜力不再仅仅依赖于国内门店数量的线性增加，而更多取决于其核心供应链能力能否成功赋能新品牌和新市场，从而实现平台的跨品类、跨地域复制。
</p>
</div>
<div x-data="{ tab: 'flywheel' }" class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">2. 核心逻辑与市场认知分析</h2>
<div class="glow-divider mb-6"></div>
<div class="tabs tabs-boxed bg-black/30 mb-6">
<a class="tab" :class="{'tab-active text-cyan-300': tab === 'flywheel'}" @click="tab = 'flywheel'">“性价比”飞轮</a>
<a class="tab" :class="{'tab-active text-cyan-300': tab === 'sentiment'}" @click="tab = 'sentiment'">市场热度与情绪</a>
<a class="tab" :class="{'tab-active text-cyan-300': tab === 'gap'}" @click="tab = 'gap'">预期差分析</a>
</div>
<div x-show="tab === 'flywheel'" class="space-y-4 leading-relaxed">
<h3 class="text-xl font-semibold text-white">核心驱动力：垂直整合供应链驱动的“极致性价比”飞轮</h3>
<p>蜜雪冰城并非一家简单的餐饮连锁公司，而是一家<strong class="text-indigo-300">以供应链为核心壁垒的零售基础设施公司</strong>。其商业模式的根基在于对成本的极致控制，这并非通过牺牲品质，而是通过全产业链的垂直整合实现的。</p>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong class="text-white">上游自产:</strong> 自建五大生产基地，核心原料自产率极高（研报称核心食材100%自产），采购成本较行业平均水平低10%-20%。</li>
<li><strong class="text-white">中游自建仓配:</strong> 拥有行业规模最大的自主运营仓储和物流体系，冷链覆盖率达97%，大幅降低物流成本。</li>
<li><strong class="text-white">飞轮效应:</strong> 成本优势支撑了<strong class="text-cyan-300">2-8元</strong>的极低价格带。低价吸引海量消费者（2024年出杯量约90亿杯），规模化效应再摊薄成本，形成“<strong class="text-indigo-300">成本领先 → 价格优势 → 规模扩张 → 成本再降低</strong>”的商业飞轮。加盟商因此获得可观利润（门店利润率约18%+）和短回本周期（11-15个月），驱动网络爆炸式增长。</li>
</ul>
</div>
<div x-show="tab === 'sentiment'" class="space-y-4 leading-relaxed">
<h3 class="text-xl font-semibold text-white">市场热度与情绪：高度乐观，但逐步回归理性</h3>
<p>上市初期的市场情绪是<strong class="text-indigo-300">极度乐观乃至狂热的</strong>。超过3000倍的认购倍数、千亿市值的首日表现，都反映了市场对其商业模式的高度认可。</p>
<p>随着时间的推移，市场情绪正逐步从对“IPO概念”的炒作，转向对其<strong class="text-cyan-300">基本面和增长持续性的理性审视</strong>。研报开始更深入地探讨海外风险、竞争加剧以及幸运咖的成长路径，显示出市场关注点正在深化。</p>
</div>
<div x-show="tab === 'gap'" class="space-y-4 leading-relaxed">
<h3 class="text-xl font-semibold text-white">预期差分析：海外扩张的“光环”与“现实”</h3>
<p>市场的普遍认知是将“海外扩张”视为巨大增长引擎。然而，潜在的预期差在于：</p>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong class="text-white">扩张节奏与质量的矛盾:</strong> 宏大的叙事是“开拓全球”，但<strong class="text-amber-300">2025年H1财报数据显示海外门店净关闭162家</strong>，与市场预期的高速扩张形成鲜明对比。这表明海外扩张并非一帆风顺，公司已转向注重经营质量。</li>
<li><strong class="text-white">加盟商盈利能力的压力:</strong> 国内门店回本周期已从<strong class="text-cyan-300">11个月</strong>延长至<strong class="text-amber-300">18-20个月</strong>。虽然仍优于行业，但盈利压力的增加是市场可能未充分定价的风险。</li>
<li><strong class="text-white">供应商关系的“误读”:</strong> 信息交叉验证显示，部分所谓的“关联股”逻辑并不坚实。例如，<strong class="text-amber-300">熊猫乳品</strong>明确表示没有直接供货，<strong class="text-amber-300">宏辉果蔬</strong>的柠檬供应占比不到1%。</li>
</ul>
</div>
</div>
<div class="bento-grid">
<div class="glass-card p-8 bento-item bento-item-6 md:bento-item-3">
<h2 class="text-2xl font-bold text-white fui-header mb-6">3. 关键催化剂与发展路径</h2>
<div class="glow-divider mb-6"></div>
<h3 class="text-lg font-semibold text-white mb-2">近期催化剂 (未来3-6个月)</h3>
<ul class="list-decimal list-inside space-y-2 mb-4">
<li><strong class="text-cyan-300">幸运咖盈利能力验证:</strong> 财报披露其单店模型改善将证明模式“可复制性”。</li>
<li><strong class="text-cyan-300">海外市场策略成效:</strong> 调整后海外业务利润率和GMV能否回升，及美洲等新市场开拓进展。</li>
<li><strong class="text-cyan-300">国内乡镇渗透率数据:</strong> 验证国内市场天花板是否依然高远。</li>
</ul>
<h3 class="text-lg font-semibold text-white mb-2">长期发展路径</h3>
<ul class="list-decimal list-inside space-y-2">
<li><strong class="text-white">国内深耕 (1-2年):</strong> 完成乡镇市场覆盖，冲击5.5万-7万家门店上限。</li>
<li><strong class="text-white">多品牌矩阵 (2-3年):</strong> 幸运咖成为龙头，孵化或收购其他平价餐饮品类。</li>
<li><strong class="text-white">全球化平台 (3-5年+):</strong> 完成东南亚供应链本地化，逐步演变为全球性的餐饮供应链平台。</li>
</ul>
</div>
<div class="glass-card p-8 bento-item bento-item-6 md:bento-item-3">
<h2 class="text-2xl font-bold text-white fui-header mb-6">5. 潜在风险与挑战</h2>
<div class="glow-divider mb-6"></div>
<ul class="space-y-3">
<li><strong class="text-amber-300">运营管理风险:</strong> 超5万家加盟店的服务标准、产品质量和食品安全是巨大考验。</li>
<li><strong class="text-amber-300">商业化风险:</strong> 国内市场天花板临近，门店加密可能稀释单店盈利；海外本地化失败；幸运咖培育不及预期。</li>
<li><strong class="text-amber-300">政策与竞争风险:</strong> 食品安全是行业“达摩克利斯之剑”；行业价格战可能加剧，侵蚀利润空间。</li>
<li><strong class="text-amber-300">信息交叉验证风险:</strong> 海外扩张数据、供应商关系、加盟商回报周期等存在矛盾点，需审慎甄别。</li>
</ul>
</div>
</div>
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">4. 产业链与核心公司深度剖析</h2>
<div class="glow-divider mb-6"></div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="bg-black/20 p-6 rounded-2xl border border-white/10">
<h3 class="text-xl font-semibold text-white mb-3">上游 (供应商)</h3>
<ul class="list-disc list-inside space-y-1 text-sm">
<li><strong class="text-cyan-300">核心设备:</strong> 东贝集团 (冰淇淋机), 冰山冷热 (陈列柜)</li>
<li><strong class="text-cyan-300">核心原料:</strong> 一致魔芋, 佳禾食品 (粉末油脂), 中粮科技 (糖浆)</li>
<li><strong class="text-cyan-300">包装材料:</strong> 紫江企业 (纸杯), 道恩股份 (塑料袋)</li>
</ul>
</div>
<div class="bg-black/20 p-6 rounded-2xl border border-white/10">
<h3 class="text-xl font-semibold text-white mb-3">中游 (蜜雪冰城主体)</h3>
<p class="text-sm">负责品牌运营、IP打造、产品研发、供应链管理 (自产+采购)、仓储物流、加盟商管理。</p>
</div>
<div class="bg-black/20 p-6 rounded-2xl border border-white/10">
<h3 class="text-xl font-semibold text-white mb-3">下游 (加盟商与终端)</h3>
<p class="text-sm">遍布全球的5万多家加盟门店，直接面向终端消费者。数字化合作方包括飞书、用友网络等。</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold text-white mb-3">核心玩家对比与逻辑纯粹度分析</h3>
<ul class="space-y-3">
<li><strong class="text-green-400">领导者/逻辑最纯粹: 东贝集团 (601956)</strong> - 核心生产设备主要供应商，蜜雪冰城每次开店都直接对应其设备需求，受益确定性最高。</li>
<li><strong class="text-blue-400">重要参与者: 一致魔芋 (920273), 佳禾食品 (605300)</strong> - 核心食品原料供应商，业务增长与蜜雪出杯量紧密相关，但需关注蜜雪自产率提升的替代风险。</li>
<li><strong class="text-yellow-400">追赶者/逻辑待验证: 紫江企业, 道恩股份</strong> - 包装材料供应商，但新闻指出“业务规模不大”，业绩弹性可能有限。</li>
<li><strong class="text-red-400">逻辑较弱/情绪驱动: 太湖雪, 雪浪环境</strong> - 涨幅分析报告明确指出上涨与基本面无关，纯粹是市场资金基于名称的联想炒作，属伪概念股，风险极高。</li>
</ul>
</div>
</div>
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">6. 综合结论与投资启示</h2>
<div class="glow-divider mb-6"></div>
<div class="space-y-6">
<div>
<h3 class="text-lg font-semibold text-white mb-2">综合结论</h3>
<p>蜜雪冰城概念已走过纯粹的“主题炒作”阶段，进入<strong class="text-indigo-300">由核心基本面驱动，并伴随对新增长曲线预期的价值发现阶段</strong>。其核心护城河——强大的供应链体系——坚不可摧。未来的超额收益将取决于其能否成功应对国内市场饱和度提升的挑战，以及在<strong class="text-cyan-300">幸运咖和海外市场</strong>这两个关键战场上证明其模式的可复制性。</p>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-2">最具投资价值的细分环节</h3>
<ol class="list-decimal list-inside space-y-2">
<li><strong class="text-white">蜜雪冰城本身:</strong> 作为平台型公司，其价值在于供应链的复用能力。</li>
<li><strong class="text-white">上游核心、排他性供应商:</strong> 尤其是<strong class="text-cyan-300">核心设备供应商（如东贝集团）</strong>，订单与开店计划直接挂钩，业绩确定性强，不易被“自产”替代。</li>
</ol>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-2">需重点跟踪和验证的关键指标</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div class="bg-black/20 p-3 rounded-xl text-center"><p>同店销售增长率 (SSSG)</p></div>
<div class="bg-black/20 p-3 rounded-xl text-center"><p>幸运咖单店盈利模型</p></div>
<div class="bg-black/20 p-3 rounded-xl text-center"><p>海外门店净增及利润率</p></div>
<div class="bg-black/20 p-3 rounded-xl text-center"><p>加盟商申请数与关店率</p></div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">核心关联股票池</h2>
<div class="glow-divider mb-6"></div>
<div class="overflow-x-auto">
<table class="table table-zebra-zebra bg-transparent">
<thead class="text-white text-base fui-header">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>关联原因</th>
<th>其他标签</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-white/10">
<td>东贝集团</td>
<td><a href="https://valuefrontier.cn/company?scode=601956" target="_blank" class="text-cyan-300 hover:underline">601956</a></td>
<td>子公司东贝制冷是蜜雪冰城的主要供应商，主要供货产品有冰淇淋机、制冰机等</td>
<td><span class="badge badge-accent badge-outline">核心供应商</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>一致魔芋</td>
<td><a href="https://valuefrontier.cn/company?scode=920273" target="_blank" class="text-cyan-300 hover:underline">920273</a></td>
<td>在蜜雪冰城的供应链中占据重要地位</td>
<td><span class="badge badge-accent badge-outline">核心原料</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>佳禾食品</td>
<td><a href="https://valuefrontier.cn/company?scode=605300" target="_blank" class="text-cyan-300 hover:underline">605300</a></td>
<td>粉末油脂下游客户包括蜜雪冰城</td>
<td><span class="badge badge-info badge-outline">原料供应商</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>冰山冷热</td>
<td><a href="https://valuefrontier.cn/company?scode=000530" target="_blank" class="text-cyan-300 hover:underline">000530</a></td>
<td>联营公司生产的超市陈列柜主要客户包括蜜雪冰城</td>
<td><span class="badge badge-info badge-outline">设备供应商</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>好想你</td>
<td><a href="https://valuefrontier.cn/company?scode=002582" target="_blank" class="text-cyan-300 hover:underline">002582</a></td>
<td>公司通过深圳龙珠股权投资基金间接投资蜜雪冰城</td>
<td><span class="badge badge-primary badge-outline">间接投资</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>紫江企业</td>
<td><a href="https://valuefrontier.cn/company?scode=600210" target="_blank" class="text-cyan-300 hover:underline">600210</a></td>
<td>为蜜雪冰城提供纸杯等产品，但业务规模不大</td>
<td><span class="badge badge-secondary badge-outline">包装材料</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>道恩股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002838" target="_blank" class="text-cyan-300 hover:underline">002838</a></td>
<td>子公司为其供应可降解塑料手提袋</td>
<td><span class="badge badge-secondary badge-outline">包装材料</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>用友网络</td>
<td><a href="https://valuefrontier.cn/company?scode=600588" target="_blank" class="text-cyan-300 hover:underline">600588</a></td>
<td>品牌合作，可能为ERP系统供应商</td>
<td><span class="badge badge-ghost badge-outline">数字化合作</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js"></script>
<script>
// Initialize Vanta.js waves background
VANTA.WAVES({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x667eea,
shininess: 30.00,
waveHeight: 10.00,
waveSpeed: 0.75,
zoom: 0.75
<script>
document.addEventListener('DOMContentLoaded', function () {
const chartTextColor = '#a6adbb';
const chartLineColor = '#2dd4bf';
const chartAxisLineColor = 'rgba(255, 255, 255, 0.2)';
// Store Growth Chart
var storeGrowthChart = echarts.init(document.getElementById('store-growth-chart'));
var storeGrowthOption = {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#374151', textStyle: { color: '#e5e7eb' } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2024-09', '2024-12', '2025-08', '2025-11'],
axisLine: { lineStyle: { color: chartAxisLineColor } },
axisLabel: { color: chartTextColor }
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value} 家', color: chartTextColor },
splitLine: { lineStyle: { color: chartAxisLineColor, type: 'dashed' } },
},
series: [{
name: '全球门店数',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
itemStyle: { color: chartLineColor },
lineStyle: { color: chartLineColor, width: 3, shadowColor: 'rgba(45, 212, 191, 0.5)', shadowBlur: 10 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'rgba(45, 212, 191, 0.3)'
}, {
offset: 1, color: 'rgba(45, 212, 191, 0)'
}])
},
data: [45302, 46479, 53014, 53014] // Assuming Nov data is same as Aug for trend
}]
};
storeGrowthChart.setOption(storeGrowthOption);
// Financials Chart
var financialsChart = echarts.init(document.getElementById('financials-chart'));
var financialsOption = {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#374151', textStyle: { color: '#e5e7eb' } },
legend: { data: ['营业收入', '净利润'], textStyle: { color: chartTextColor } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['2022', '2023', '2024 (9M)'],
axisLine: { lineStyle: { color: chartAxisLineColor } },
axisLabel: { color: chartTextColor }
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value} 亿', color: chartTextColor },
splitLine: { lineStyle: { color: chartAxisLineColor, type: 'dashed' } }
},
series: [
{ name: '营业收入', type: 'bar', barWidth: '30%', itemStyle: { color: '#60a5fa', borderRadius: [4, 4, 0, 0] }, data: [136, 203, 187] },
{ name: '净利润', type: 'bar', barWidth: '30%', itemStyle: { color: '#f87171', borderRadius: [4, 4, 0, 0] }, data: [20, 32, 35] }
]
};
financialsChart.setOption(financialsOption);
// Market Distribution Chart
var marketDistChart = echarts.init(document.getElementById('market-dist-chart'));
var marketDistOption = {
tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#374151', textStyle: { color: '#e5e7eb' } },
legend: { orient: 'vertical', left: 'left', textStyle: { color: chartTextColor } },
series: [{
name: '门店分布',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: { show: false, position: 'center' },
emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', color: '#fff' } },
labelLine: { show: false },
data: [
{ value: 57.6, name: '三线及以下', itemStyle: { color: '#34d399' } },
{ value: 19.1, name: '二线城市', itemStyle: { color: '#60a5fa' } },
{ value: 18.4, name: '新一线城市', itemStyle: { color: '#f472b6' } },
{ value: 4.9, name: '一线城市', itemStyle: { color: '#fbbf24' } }
]
}]
};
marketDistChart.setOption(marketDistOption);
window.addEventListener('resize', function() {
storeGrowthChart.resize();
financialsChart.resize();
marketDistChart.resize();
});
</script>
});
</script>
</body>
</html>
```
</html>