Files
vf_react/public/htmls/东南亚电商.html
2025-10-11 16:16:02 +08:00

541 lines
30 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<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="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<!-- Nucleo Icons -->
<link href="https://cdn.jsdelivr.net/npm/nucleo-icons@2.0.0/css/nucleo-icons.min.css" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- CSS Files -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.min.css" rel="stylesheet" type="text/css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');
body {
font-family: 'Noto Sans SC', 'Inter', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
min-height: 100vh;
}
.gradient-bg {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #4f46e5;
position: absolute;
left: -8px;
top: 8px;
}
.timeline-line {
position: absolute;
left: 0;
top: 24px;
bottom: 0;
width: 2px;
background-color: #e5e7eb;
}
.timeline-item:last-child .timeline-line {
display: none;
}
.highlight {
background: linear-gradient(transparent 60%, rgba(79, 70, 229, 0.2) 40%);
padding: 0 2px;
}
.table-responsive {
overflow-x: auto;
}
@media (max-width: 768px) {
.table-responsive {
overflow-x: scroll;
}
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
opacity: 0.3;
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- 标题部分 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">东南亚电商</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">从流量红利期转向盈利质量期AI技术重塑"人货场"效率</p>
</div>
<!-- 摘要部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-bulb-61 text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">核心观点摘要</h2>
</div>
<div class="text-gray-700">
<p class="mb-4">东南亚电商正从<span class="highlight font-semibold">流量红利期</span>转向<span class="highlight font-semibold">盈利质量期</span></p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-indigo-50 p-4 rounded-lg">
<h3 class="font-semibold text-indigo-700 mb-2">短期2024-2025</h3>
<p>平台盈利拐点+AI工具渗透GMV增速维持<span class="font-bold text-indigo-700">15-20%</span></p>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<h3 class="font-semibold text-purple-700 mb-2">长期2025-2030</h3>
<p>AI驱动的个性化运营和跨境供应链优化渗透率有望从<span class="font-bold text-purple-700">20%→26%</span></p>
</div>
</div>
</div>
</div>
<!-- 时间轴部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-time-alarm text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">概念事件</h2>
</div>
<div class="relative pl-8">
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">2020-2022</span>
</div>
<p class="text-gray-700">疫情催化东南亚电商渗透率从<span class="font-bold">5%→20%</span>Shopee、Lazada、Tokopedia形成"一超多强"格局</p>
</div>
</div>
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">2023Q4</span>
</div>
<p class="text-gray-700">TikTok Shop因印尼政策封禁12月以<span class="font-bold">8.4亿美元收购Tokopedia 75%股权</span>重返市场</p>
</div>
</div>
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">2024H2</span>
</div>
<p class="text-gray-700">Lazada宣布<span class="font-bold">7月EBITDA转正</span>成为东南亚首家盈利平台Shopee母公司Sea首次全年盈利</p>
</div>
</div>
<div class="timeline-item relative">
<div class="timeline-dot"></div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">2025展望</span>
</div>
<p class="text-gray-700">墨腾报告预测<span class="font-bold">AI将带来1310亿美元增量市场</span>2030年Lazada推出AI购物助手Lazzie转化率<span class="font-bold">高68%</span></p>
</div>
</div>
</div>
</div>
<!-- 核心逻辑分析部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-chart-bar-32 text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">核心逻辑与市场认知分析</h2>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">维度</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">市场共识</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预期差</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据验证</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">驱动力</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">人口红利6亿年轻用户+移动互联网普及</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="font-semibold text-indigo-600">AI技术降本增效</span>未被充分定价</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lazada AI助手转化率<span class="font-bold">+68%</span></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">竞争格局</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Shopee/Lazada/TikTok三足鼎立</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="font-semibold text-indigo-600">Tokopedia+TikTok合并后份额达28%</span></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024年合并后GMV<span class="font-bold">超Lazada</span></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">盈利拐点</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">平台持续亏损</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="font-semibold text-indigo-600">Lazada/Shopee已实现季度盈利</span></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sea 2023年首次盈利Lazada 7月EBITDA转正</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 p-4 bg-yellow-50 rounded-lg">
<h3 class="font-semibold text-yellow-800 mb-2">关键分歧</h3>
<ul class="list-disc pl-5 text-sm text-gray-700 space-y-1">
<li><span class="font-medium">物流成本</span>研报称COD占比<span class="font-bold">90%</span>越南但路演显示Shopee SLS物流成本<span class="font-bold">低30%</span>(规模化优势)</li>
<li><span class="font-medium">政策风险</span>印尼曾封禁TikTok Shop但合并后<span class="font-bold">15亿美元投资承诺</span>显示政策博弈已落地</li>
</ul>
</div>
</div>
<!-- 催化剂与发展路径部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-rocket text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">催化剂与发展路径</h2>
</div>
<div class="overflow-x-auto mb-6">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间窗口</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">催化剂</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">影响标的</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2024Q4</td>
<td class="px-6 py-4 text-sm text-gray-500">TikTok Shop印尼斋月大促GMV占比33.6%</td>
<td class="px-6 py-4 text-sm text-gray-500">吉宏股份Shopee头部卖家</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2025H1</td>
<td class="px-6 py-4 text-sm text-gray-500">Lazada AI工具全量上线佣金率提升</td>
<td class="px-6 py-4 text-sm text-gray-500">南极电商AI供应链合作</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2025全年</td>
<td class="px-6 py-4 text-sm text-gray-500">RCEP关税减免深化零关税覆盖率90%</td>
<td class="px-6 py-4 text-sm text-gray-500">华凯易佰(跨境物流受益)</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-indigo-50 p-4 rounded-lg">
<h3 class="font-semibold text-indigo-800 mb-3">长期路径</h3>
<ol class="list-decimal pl-5 text-sm text-gray-700 space-y-2">
<li><span class="font-medium">2025-2027</span>AI工具普及→平台佣金率从<span class="font-bold">3%→5%</span>(对标中国)</li>
<li><span class="font-medium">2027-2030</span>:跨境供应链本土化(越南/泰国海外仓)→物流时效<span class="font-bold">7天→3天</span></li>
</ol>
</div>
</div>
<!-- 产业链与核心公司部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-network text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">产业链与核心公司</h2>
</div>
<div class="mb-6">
<h3 class="font-semibold text-gray-800 mb-3">产业链图谱</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-blue-50 p-4 rounded-lg">
<h4 class="font-semibold text-blue-700 mb-2">上游</h4>
<p class="text-sm text-gray-700">中国供应链(<span class="font-bold">吉宏股份</span>-东南亚营收A股第一<span class="font-bold">齐心集团</span>-多平台卖家)</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<h4 class="font-semibold text-purple-700 mb-2">中游</h4>
<p class="text-sm text-gray-700">平台Shopee/Lazada/TikTok+服务商(<span class="font-bold">南极电商</span>-品牌授权+AI选品</p>
</div>
<div class="bg-indigo-50 p-4 rounded-lg">
<h4 class="font-semibold text-indigo-700 mb-2">下游</h4>
<p class="text-sm text-gray-700">物流(<span class="font-bold">华贸物流</span>-1.6亿Lazada合同+支付(<span class="font-bold">南天信息</span>-跨境支付系统)</p>
</div>
</div>
</div>
<div>
<h3 class="font-semibold text-gray-800 mb-3">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优势</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">吉宏股份</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Shopee头部卖家</td>
<td class="px-6 py-4 text-sm text-gray-500">东南亚营收占比<span class="font-bold">超50%</span></td>
<td class="px-6 py-4 text-sm text-gray-500">依赖单一平台流量</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">南极电商</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">品牌服务商</td>
<td class="px-6 py-4 text-sm text-gray-500">轻奢系列日销<span class="font-bold">1800万GMV</span></td>
<td class="px-6 py-4 text-sm text-gray-500">转型期利润率<span class="font-bold">仅10-15%</span></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">华凯易佰</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">跨境物流</td>
<td class="px-6 py-4 text-sm text-gray-500">小包占比<span class="font-bold">20-30%</span>(关税豁免受益)</td>
<td class="px-6 py-4 text-sm text-gray-500">美国政策变动影响</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 p-4 bg-red-50 rounded-lg">
<p class="text-sm text-red-700"><span class="font-semibold">验证点</span>南极电商2024年Q4亏损因<span class="font-bold">时间互联商誉减值1.2亿</span>,与研报"轻装上阵"预期矛盾需跟踪2025年利润兑现。</p>
</div>
</div>
</div>
<!-- 关联股票表格部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-chart-pie-35 text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">关联股票</h2>
</div>
<div class="table-responsive">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr id="table-header">
<!-- 动态生成表头 -->
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="table-body">
<!-- 动态生成表格内容 -->
</tbody>
</table>
</div>
</div>
<!-- 潜在风险部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-alert text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">潜在风险</h2>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">具体表现</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据支撑</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">政策风险</td>
<td class="px-6 py-4 text-sm text-gray-500">印尼可能再次收紧社交电商监管</td>
<td class="px-6 py-4 text-sm text-gray-500">2023年封禁TikTok Shop先例</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">物流瓶颈</td>
<td class="px-6 py-4 text-sm text-gray-500">COD占比过高导致退货率<span class="font-bold">15-20%</span></td>
<td class="px-6 py-4 text-sm text-gray-500">越南COD占比<span class="font-bold">90%</span>(研报)</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">汇率波动</td>
<td class="px-6 py-4 text-sm text-gray-500">越南盾/泰铢2024年贬值<span class="font-bold">5-8%</span></td>
<td class="px-6 py-4 text-sm text-gray-500">IMF东南亚GDP增速预测下调</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">信息矛盾</td>
<td class="px-6 py-4 text-sm text-gray-500">研报称渗透率<span class="font-bold">26%</span>,路演数据<span class="font-bold">20%</span></td>
<td class="px-6 py-4 text-sm text-gray-500">需以欧睿<span class="font-bold">2028年26%</span>为准</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 投资启示部分 -->
<div class="card bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="ni ni-light-3 text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800">综合结论与投资启示</h2>
</div>
<div class="mb-6 p-4 bg-indigo-50 rounded-lg">
<p class="text-gray-700"><span class="font-semibold text-indigo-700">阶段判断</span><span class="font-bold text-indigo-700">基本面驱动初期</span>——平台盈利拐点+AI技术落地主题炒作风险低。</p>
</div>
<div class="mb-6">
<h3 class="font-semibold text-gray-800 mb-3">投资方向</h3>
<ol class="list-decimal pl-5 text-gray-700 space-y-3">
<li>
<span class="font-semibold">高弹性标的</span><span class="font-bold text-indigo-600">吉宏股份</span>直接受益Shopee流量红利PE 15x vs 行业25x
</li>
<li>
<span class="font-semibold">AI赋能</span><span class="font-bold text-indigo-600">南极电商</span>轻奢系列验证AI选品2025年利润<span class="font-bold">3.43亿</span>对应当前PE 30x
</li>
<li>
<span class="font-semibold">基础设施</span><span class="font-bold text-indigo-600">华贸物流</span>RCEP关税减免+海外仓布局)
</li>
</ol>
</div>
<div>
<h3 class="font-semibold text-gray-800 mb-3">跟踪指标</h3>
<ul class="list-disc pl-5 text-gray-700 space-y-2">
<li><span class="font-medium">平台佣金率</span>Shopee/Lazada是否从<span class="font-bold">3%→5%</span>AI工具商业化验证</li>
<li><span class="font-medium">物流时效</span>:越南/泰国海外仓发货占比<span class="font-bold">是否超50%</span>(成本下降信号)</li>
</ul>
</div>
<div class="mt-6 p-4 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg text-white">
<p class="text-center font-semibold">东南亚电商正在复制中国2015-2018年的路径——<span class="font-bold">盈利拐点+技术红利+政策东风</span>,但需警惕<span class="font-bold">本土化政策</span><span class="font-bold">汇率波动</span>的灰犀牛。</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script>
// 初始化粒子背景
tsParticles.load("particles-js", {
particles: {
number: {
value: 30,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#4f46e5"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: true
},
size: {
value: 3,
random: true
},
move: {
enable: true,
speed: 2,
direction: "none",
random: true,
straight: false,
out_mode: "out"
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse"
}
}
},
retina_detect: true
});
// 动态生成关联股票表格
const stockData = [{'东南亚电商(250414)': [{'stock': '吉宏股份', '分类': 'shopee东南亚第一', '项目': '东南亚电商营收A股排名第一', '产业链角色': 'Lazada/Shopee平台头部卖家', '资料来源': '市场公开资料', 'reason': '公司为东南亚电商营收A股排名第一且是Lazada/Shopee等平台头部卖家资料来源于市场公开资料'}, {'stock': '齐心集团', '分类': 'shopee东南亚第一', '合作平台': '亚马逊、沃尔玛、Shopee、Lazada', '业务模式': '线上跨境电商业务', '资料来源': '搜互动', 'reason': '公司通过亚马逊、沃尔玛、Shopee、Lazada等平台开展跨境电商业务资料来源于搜互动'}, {'stock': '新华都', '分类': 'shopee东南亚第一', '合作平台': 'TikTok、Lazada、Shopee', '业务模式': '全链路电商服务', '资料来源': '搜互动', 'reason': '公司在TikTok、Lazada、Shopee等平台提供电商零售、短视频运营和直播电商服务资料来源于搜互动'}, {'stock': '三态股份', '分类': 'shopee东南亚第一', '合作平台': 'Shopee等30多个海外第三方电商平台', '业务模式': '出口跨境电商零售B2C', '资料来源': '搜互动', 'reason': '公司通过Shopee等30多个海外电商平台以B2C模式销售资料来源于搜互动'}, {'stock': '冠捷科技', '分类': 'shopee东南亚第一', '合作平台': 'Amazon、BestBuy、Shopee', '产品类型': 'AOC产品', '资料来源': '搜互动', 'reason': '公司在Amazon、BestBuy、Shopee等平台销售AOC产品资料来源于搜互动'}, {'stock': '龙头股份', '分类': 'shopee东南亚第一', '合作平台': 'Lazada、Shopee', '业务战略': '品牌出海', '资料来源': '市场公开资料', 'reason': '公司通过Lazada、Shopee等平台加快品牌出海步伐资料来源于市场公开资料'}, {'stock': '森马服饰', '分类': 'shopee东南亚第一', '区域布局': '越南、巴拉巴拉', '业务进展': '开设七家门店并在Shopee等平台增长显著', '资料来源': '市场公开资料', 'reason': '公司在越南开设七家门店并在Shopee等平台取得显著增长资料来源于市场公开资料'}, {'stock': '芭薇股份', '分类': 'shopee东南亚第一', '区域布局': '印尼、马来西亚、越南', '业务模式': '独立店铺运营', '资料来源': '市场公开资料', 'reason': '大客户广州暨美在Shopee开设印尼、马来西亚、越南等地区独立店铺资料来源于市场公开资料'}, {'stock': '居然之家', '分类': 'Lazada第二电商', '业务模式': '入驻Lazada平台', '业务角色': '开设线上品牌旗舰店', '资料来源': '市场公开资料', 'reason': '公司入驻东南亚电商平台Lazada开设线上品牌旗舰店资料来源于市场公开资料'}, {'stock': '华凯易佰', '分类': 'Lazada第二电商', '合作平台': 'Lazada', '业务战略': '中国商品出口东南亚', '资料来源': '市场公开资料', 'reason': '旗下易佰网络通过Lazada渠道推动中国商品出口东南亚资料来源于市场公开资料'}, {'stock': '漫步者', '分类': 'Lazada第二电商', '合作平台': '亚马逊、LAZADA、SHOPEE', '业务表现': '国际电商业务快速增长', '资料来源': '搜公告', 'reason': '公司在亚马逊、LAZADA、SHOPEE等渠道电商业务快速增长资料来源于搜公告'}, {'stock': '南天信息', '分类': 'Lazada第二电商', '业务角色': '中国-东盟跨境支付系统承建方', '业务功能': '为Lazada提供支付支持', '资料来源': '市场公开资料', 'reason': '公司承建中国-东盟跨境支付系统为Lazada提供支付支持资料来源于市场公开资料'}, {'stock': '华贸物流', '分类': 'Lazada第二电商', '业务角色': 'Lazada全链路服务关键环节', '业务规模': '签订1.6亿元跨境电商合同', '资料来源': '搜公告', 'reason': '公司为Lazada提供全链路服务并签订1.6亿元合同,资料来源于搜公告'}]}];
// 获取所有可能的列名
const stocks = stockData[0]['东南亚电商(250414)'];
const allColumns = new Set();
stocks.forEach(stock => {
Object.keys(stock).forEach(key => {
allColumns.add(key);
});
});
// 移除reason列因为内容太长
allColumns.delete('reason');
// 排序列名确保stock和分类在前
const orderedColumns = ['stock', '分类'];
allColumns.forEach(col => {
if (col !== 'stock' && col !== '分类') {
orderedColumns.push(col);
}
});
// 生成表头
const tableHeader = document.getElementById('table-header');
orderedColumns.forEach(col => {
const th = document.createElement('th');
th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
th.textContent = col;
tableHeader.appendChild(th);
});
// 生成表格内容
const tableBody = document.getElementById('table-body');
stocks.forEach(stock => {
const tr = document.createElement('tr');
orderedColumns.forEach(col => {
const td = document.createElement('td');
td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
// 特殊处理某些列
if (col === 'stock') {
td.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
} else if (col === '分类') {
if (stock[col].includes('shopee')) {
td.innerHTML = `<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">${stock[col]}</span>`;
} else if (stock[col].includes('Lazada')) {
td.innerHTML = `<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">${stock[col]}</span>`;
}
} else {
td.textContent = stock[col] || '-';
}
if (col !== '分类') {
td.textContent = stock[col] || '-';
}
tr.appendChild(td);
});
tableBody.appendChild(tr);
});
</script>
</body>
</html>
```