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

feat: 10.10线上最新代码提交

Browse Source
This commit is contained in:
zdl
2025-10-11 16:16:02 +08:00
parent 4d0dc109bc
commit 495ad758ea
3338 changed files with 460147 additions and 152745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

520
public/htmls/算力订单潮.html Normal file
View File

@@ -0,0 +1,520 @@
<!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">
<title>算力订单潮 - 行业洞察报告</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<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" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-item::before {
content: '';
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #60a5fa 0%, #a78bfa 100%);
}
.timeline-dot {
position: absolute;
left: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.table-row-hover:hover {
background-color: rgba(255, 255, 255, 0.05);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
</style>
</head>
<body class="text-gray-100">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 标题部分 -->
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">算力订单潮</h1>
<p class="text-xl text-gray-300">从主题炒作到基本面驱动的产业变革</p>
<div class="mt-6 flex justify-center space-x-4">
<span class="px-4 py-2 rounded-full glass-effect text-sm">
<i class="fas fa-calendar-alt mr-2"></i>2024-2027年产业周期
</span>
<span class="px-4 py-2 rounded-full glass-effect text-sm">
<i class="fas fa-chart-line mr-2"></i>AI服务器市场CAGR 20%
</span>
</div>
</header>
<!-- 概念事件时间轴 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-timeline mr-3 text-blue-400"></i>
概念事件时间轴
</h2>
<div class="relative pl-8">
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="ml-6">
<h3 class="text-lg font-semibold text-blue-300">2024Q4-2025Q1</h3>
<p class="text-gray-300 mt-2">国内大厂（阿里、字节、腾讯）宣布3年资本开支超历史总和，直接触发算力订单潮</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-3 py-1 bg-blue-900/30 rounded-full text-xs">阿里3年3800亿</span>
<span class="px-3 py-1 bg-blue-900/30 rounded-full text-xs">字节上调Capex</span>
</div>
</div>
</div>
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="ml-6">
<h3 class="text-lg font-semibold text-purple-300">2025年3月</h3>
<p class="text-gray-300 mt-2">多家公司公告大额算力订单，形成"订单密集落地"现象</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-3 py-1 bg-purple-900/30 rounded-full text-xs">宏景科技7.2亿</span>
<span class="px-3 py-1 bg-purple-900/30 rounded-full text-xs">海南华铁36.9亿</span>
<span class="px-3 py-1 bg-purple-900/30 rounded-full text-xs">蓝耘科技37亿</span>
</div>
</div>
</div>
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="ml-6">
<h3 class="text-lg font-semibold text-green-300">2025年5月</h3>
<p class="text-gray-300 mt-2">上海算力交易平台启动，多地出台算力补贴政策</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-3 py-1 bg-green-900/30 rounded-full text-xs">深圳算力补贴</span>
<span class="px-3 py-1 bg-green-900/30 rounded-full text-xs">四川绿电优惠</span>
</div>
</div>
</div>
<div class="timeline-item relative">
<div class="timeline-dot"></div>
<div class="ml-6">
<h3 class="text-lg font-semibold text-yellow-300">2025年6月</h3>
<p class="text-gray-300 mt-2">甘肃庆阳枢纽万P算力上线，运营商招标1.7万台AI服务器</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="px-3 py-1 bg-yellow-900/30 rounded-full text-xs">国产万卡集群</span>
<span class="px-3 py-1 bg-yellow-900/30 rounded-full text-xs">规模300亿</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心观点摘要 -->
<section class="mb-12">
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-effect rounded-2xl p-6 hover-lift">
<div class="text-blue-400 mb-4">
<i class="fas fa-lightbulb text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">阶段判断</h3>
<p class="text-gray-300">算力订单潮已从主题炒作（2023年）进入基本面驱动（2025年），由大厂Capex落地+政府智算中心建设双轮驱动</p>
</div>
<div class="glass-effect rounded-2xl p-6 hover-lift">
<div class="text-purple-400 mb-4">
<i class="fas fa-rocket text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">核心驱动力</h3>
<p class="text-gray-300">供需错配（美国禁运导致NV芯片短缺）+需求爆发（AI模型参数量每3.5个月翻倍）</p>
</div>
<div class="glass-effect rounded-2xl p-6 hover-lift">
<div class="text-green-400 mb-4">
<i class="fas fa-chart-bar text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">未来潜力</h3>
<p class="text-gray-300">2025-2027年全球AI服务器市场CAGR 20%，中国占比25%（约2750亿人民币）</p>
</div>
</div>
</section>
<!-- 核心逻辑与市场认知 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-brain mr-3 text-purple-400"></i>
核心逻辑与市场认知分析
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-4 text-blue-300">技术-需求闭环</h3>
<div class="bg-blue-900/20 rounded-xl p-4 mb-4">
<p class="text-sm text-gray-300 mb-2">Scaling Law公式</p>
<p class="text-lg font-mono text-blue-300">计算量 = 6 × 参数量 × 数据量</p>
</div>
<p class="text-gray-300">Sora视频模型需5万张H100训练1个月，推理成本随用户量指数级上升</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-purple-300">政策强制替代</h3>
<div class="flex items-center justify-between bg-purple-900/20 rounded-xl p-4 mb-4">
<div>
<p class="text-sm text-gray-300">美国禁令（2023年10月）</p>
<p class="text-lg font-bold text-purple-300">FP16算力≥300TFLOPS禁售</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-300">华为昇腾910B</p>
<p class="text-lg font-bold text-purple-300">312TFLOPS</p>
</div>
</div>
<p class="text-gray-300">国产芯片份额从15%（2023）→30%（2024）</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold mb-4 text-green-300">预期差</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-green-900/20 rounded-xl p-4">
<h4 class="font-semibold mb-2">租赁模式利润率更高</h4>
<p class="text-sm text-gray-300">市场仍按硬件估值（PE 15-20倍），未充分定价租赁现金流（类似IDC REITs）</p>
</div>
<div class="bg-green-900/20 rounded-xl p-4">
<h4 class="font-semibold mb-2">政府订单占比</h4>
<p class="text-sm text-gray-300">国资云承接60%以上政府智算中心订单，估值低于民营IDC</p>
</div>
</div>
</div>
</div>
</section>
<!-- 关键催化剂 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-fire mr-3 text-orange-400"></i>
关键催化剂与未来发展路径
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4 text-orange-300">近期催化剂（3-6个月）</h3>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-check-circle text-orange-400 mt-1 mr-3"></i>
<div>
<p class="font-medium">2025年Q2</p>
<p class="text-sm text-gray-300">英伟达GB300机柜批量出货（预期1万台）</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-orange-400 mt-1 mr-3"></i>
<div>
<p class="font-medium">2025年Q3</p>
<p class="text-sm text-gray-300">运营商300亿AI服务器招标落地</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-orange-400 mt-1 mr-3"></i>
<div>
<p class="font-medium">政策催化</p>
<p class="text-sm text-gray-300">工信部《算力基础设施高质量发展行动计划》细则出台</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-cyan-300">长期路径</h3>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-arrow-right text-cyan-400 mt-1 mr-3"></i>
<div>
<p class="font-medium">2025-2026</p>
<p class="text-sm text-gray-300">国产芯片性能追平NV，租赁模式渗透率提升至30%</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-arrow-right text-cyan-400 mt-1 mr-3"></i>
<div>
<p class="font-medium">2027-2028</p>
<p class="text-sm text-gray-300">全国公共算力标准化互联，形成"算力电网"生态</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 关联股票数据 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-table mr-3 text-green-400"></i>
关联股票数据
</h2>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left py-3 px-4 font-semibold text-gray-300">股票名称</th>
<th class="text-left py-3 px-4 font-semibold text-gray-300">行业</th>
<th class="text-left py-3 px-4 font-semibold text-gray-300">项目</th>
<th class="text-left py-3 px-4 font-semibold text-gray-300">分类</th>
<th class="text-left py-3 px-4 font-semibold text-gray-300">关联原因</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 动态生成的股票数据 -->
</tbody>
</table>
</div>
</div>
</section>
<!-- 风险与挑战 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-exclamation-triangle mr-3 text-red-400"></i>
潜在风险与挑战
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-red-900/20 rounded-xl p-5">
<h3 class="text-lg font-semibold mb-3 text-red-300">
<i class="fas fa-microchip mr-2"></i>技术风险
</h3>
<p class="text-gray-300">国产芯片7nm以下制程良率不足（中芯国际产能瓶颈）</p>
</div>
<div class="bg-red-900/20 rounded-xl p-5">
<h3 class="text-lg font-semibold mb-3 text-red-300">
<i class="fas fa-coins mr-2"></i>商业化风险
</h3>
<p class="text-gray-300">算力租赁价格战（如重庆租赁商恶性竞争至报警）</p>
</div>
<div class="bg-red-900/20 rounded-xl p-5">
<h3 class="text-lg font-semibold mb-3 text-red-300">
<i class="fas fa-ban mr-2"></i>政策风险
</h3>
<p class="text-gray-300">美国可能进一步限制H20对华出口（2025年Q1已订购160亿美元）</p>
</div>
<div class="bg-red-900/20 rounded-xl p-5">
<h3 class="text-lg font-semibold mb-3 text-red-300">
<i class="fas fa-question-circle mr-2"></i>信息矛盾
</h3>
<p class="text-gray-300">部分公司订单金额未在财报中体现，需验证真实性</p>
</div>
</div>
</div>
</section>
<!-- 投资启示 -->
<section class="mb-12">
<div class="glass-effect rounded-2xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-lightbulb mr-3 text-yellow-400"></i>
综合结论与投资启示
</h2>
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-xl p-6 mb-6">
<h3 class="text-xl font-bold mb-3 text-center">阶段判断</h3>
<p class="text-center text-lg text-gray-200">算力订单潮处于基本面加速期，但需警惕交付能力与政策风险</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-4 text-green-300">最具价值方向</h3>
<div class="space-y-3">
<div class="bg-green-900/20 rounded-lg p-4">
<h4 class="font-semibold mb-2">国产芯片替代</h4>
<p class="text-sm text-gray-300">寒武纪（推理芯片）、海光信息（CPU+GPU双轮驱动）</p>
</div>
<div class="bg-green-900/20 rounded-lg p-4">
<h4 class="font-semibold mb-2">租赁模式龙头</h4>
<p class="text-sm text-gray-300">海南华铁（政府订单占比高）、润泽科技（IDC+液冷）</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-blue-300">关键跟踪指标</h3>
<div class="space-y-3">
<div class="bg-blue-900/20 rounded-lg p-4">
<h4 class="font-semibold mb-2">交付验证</h4>
<p class="text-sm text-gray-300">浪潮信息Q2存货周转天数（当前180天，需降至120天以下）</p>
</div>
<div class="bg-blue-900/20 rounded-lg p-4">
<h4 class="font-semibold mb-2">国产芯片渗透率</h4>
<p class="text-sm text-gray-300">2025年政府智算中心国产芯片占比目标50%（当前30%）</p>
</div>
<div class="bg-blue-900/20 rounded-lg p-4">
<h4 class="font-semibold mb-2">租赁价格</h4>
<p class="text-sm text-gray-300">H800租金是否突破15万/月（当前12万）</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script>
// 股票数据
const stockData = [
{'大厂算力订单(250305)': [
{'stock': '蓝耘科技（新三板）', '行业': '算力', '项目': '2025年37亿算力订单', '分类': '新三板', 'reason': '2025年算力订单金额第一'},
{'stock': '浙文互联', '行业': '算力、云计算', '项目': '浙文蓝耘智算（浙江）科技有限公司', '产业链': '合资企业', 'reason': '与蓝耘科技共同设立合资公司，持股50%'},
{'stock': '杭钢股份', '行业': '算力、云计算', '项目': '数耘智算（浙江）科技有限公司', '产业链': '合资企业', '分类': 'A股', 'reason': '与蓝耘科技共同设立合资公司，持股40%，杭钢数字为大股东'},
{'stock': '曙光数创（北交所）', '行业': '算力、云计算', '项目': '持股关系', '产业链': '供应链', '分类': '北交所', 'reason': '持有蓝耘科技2.16%股份'},
{'stock': '中科曙光', '行业': '算力、云计算', '项目': '持股关系', '产业链': '供应链', 'reason': '持有曙光数创62%股份'},
{'stock': '京源环保', '行业': '算力、云计算', '项目': '战略合作协议', '产业链': '合作项目', 'reason': '全资子公司京源云计算与蓝耘科技签署算力服务及基础设施建设协议'},
{'stock': '海南华铁', '行业': '算力', '项目': '2025年36.9亿算力订单', '分类': 'A股', 'reason': '2025年算力订单金额第二，累计订单61亿'},
{'stock': '超讯通信', '行业': '算力', '项目': '2025年6.38亿算力订单', '分类': 'A股', 'reason': '2025年算力订单，累计14.88亿'},
{'stock': '莲花控股', '行业': '算力', '项目': '2025年4.96亿算力订单', '分类': 'A股', 'reason': '2025年算力订单，累计超15亿'},
{'stock': '城地香江', '行业': '算力', '项目': '2025年3.91亿算力订单', '分类': 'A股', 'reason': '2025年算力订单'},
{'stock': '宏景科技', '行业': '算力', '项目': '2025年1.61亿算力订单', '分类': 'A股', 'reason': '2025年算力订单，累计超15亿'},
{'stock': '平治信息', '行业': '算力', '项目': '2025年1.1亿算力订单', '分类': 'A股', 'reason': '2025年算力订单'},
{'stock': '元道通信', '行业': '算力、云计算', '项目': '阿里服务器招标项目', '分类': 'A股', 'reason': '网传中标阿里服务器招标项目'},
{'stock': '协创数据', '行业': '算力', '分类': 'A股', 'reason': '算力相关公司'},
{'stock': '润建股份', '行业': '算力', '分类': 'A股', 'reason': '算力相关公司'},
{'stock': '弘信电子', '行业': '算力', '分类': 'A股', 'reason': '算力相关公司'},
{'stock': '润泽科技', '行业': '算力', '分类': 'A股', 'reason': '算力相关公司'},
{'stock': '云天励飞', '行业': '算力', '分类': 'A股', 'reason': '算力相关公司'},
{'stock': '天音控股', '行业': '算力', '分类': 'A股', 'reason': '算力相关公司'}
]},
{'大厂算力订单(250309)': [
{'stock': '蓝耘科技（新三板）', '项目': '2025年37亿算力订单', '行业': '算力服务', '分类': '算力订单金额第一', '产业链': '算力基础设施', 'reason': '2025年算力订单金额排名第一，涉及算力云服务市场拓展'},
{'stock': '浙文互联', '项目': '浙文蓝耘智算（浙江）科技有限公司', '行业': '算力合资', '分类': '持股50%', '产业链': '算力服务合作', 'reason': '与蓝耘科技共同设立合资公司，各持股50%'},
{'stock': '杭钢股份', '项目': '数耘智算（浙江）科技有限公司', '行业': '算力合资', '分类': '持股60%', '产业链': '算力服务合作', 'reason': '通过杭钢数字持股60%，杭钢集团为控股股东'},
{'stock': '曙光数创（北交所）', '持股关系': '持有蓝耘科技2.16%股份', '行业': '算力硬件', '分类': '参股企业', '产业链': '算力设备供应', 'reason': '持有蓝耘科技股份，中科曙光为其控股股东'},
{'stock': '中科曙光', '持股关系': '持有曙光数创62%股份', '行业': '算力硬件', '分类': '控股企业', '产业链': '算力设备上游', 'reason': '控股曙光数创，间接参与算力服务市场'},
{'stock': '京源环保', '项目': '战略合作协议', '行业': '环保+算力', '分类': '全资子公司合作', '产业链': '算力基础设施建设', 'reason': '子公司京源云计算与蓝耘科技签署战略合作协议'},
{'stock': '海南华铁', '项目': '2025年36.9亿算力订单', '行业': '算力服务', '分类': '累计订单61亿', '产业链': '算力服务', 'reason': '2025年算力订单金额排名第二'},
{'stock': '超讯通信', '项目': '2025年6.38亿算力订单', '行业': '通信+算力', '分类': '累计订单14.88亿', '产业链': '算力服务', 'reason': '获得算力订单并累计超15亿'},
{'stock': '莲花控股', '项目': '2025年4.96亿算力订单', '行业': '食品+算力', '分类': '累计订单超15亿', '产业链': '算力服务', 'reason': '跨界参与算力服务市场'},
{'stock': '城地香江', '项目': '44.52亿算力联合体项目', '行业': '环保+算力', '分类': '子公司中标', '产业链': '算力服务', 'reason': '子公司中标大额算力项目（具体收益占比不详）'},
{'stock': '宏景科技', '项目': '2025年1.61亿算力订单', '行业': '智慧城市+算力', '分类': '累计订单超15亿', '产业链': '算力服务', 'reason': '获得算力订单并累计超15亿'},
{'stock': '平治信息', '项目': '2025年1.1亿算力订单', '行业': '通信+算力', '分类': '算力服务', '产业链': '算力服务', 'reason': '获得算力订单'},
{'stock': '元道通信', '项目': '阿里服务器招标项目', '行业': '通信服务', '分类': '硬件中标', '产业链': '算力硬件供应', 'reason': '网传中标阿里服务器招标项目'},
{'stock': '协创数据', '行业': '算力硬件', '分类': '其他相关企业', '产业链': '算力设备', 'reason': '表格中列为其他算力相关企业'},
{'stock': '润建股份', '行业': '通信服务', '分类': '其他相关企业', '产业链': '算力服务', 'reason': '表格中列为其他算力相关企业'},
{'stock': '弘信电子', '行业': '电子制造', '分类': '其他相关企业', '产业链': '算力硬件', 'reason': '表格中列为其他算力相关企业'},
{'stock': '润泽科技', '行业': '数据中心', '分类': '其他相关企业', '产业链': '算力基础设施', 'reason': '表格中列为其他算力相关企业'},
{'stock': '云天励飞', '行业': 'AI芯片', '分类': '其他相关企业', '产业链': '算力硬件', 'reason': '表格中列为其他算力相关企业'},
{'stock': '天音控股', '行业': '通信分销', '分类': '其他相关企业', '产业链': '算力服务', 'reason': '表格中列为其他算力相关企业'}
]}
];
// 生成表格数据
function generateTable() {
const tableBody = document.getElementById('stockTableBody');
let allStocks = [];
// 合并所有股票数据
stockData.forEach(data => {
const key = Object.keys(data)[0];
allStocks = allStocks.concat(data[key]);
});
// 去重
const uniqueStocks = [];
const stockNames = new Set();
allStocks.forEach(stock => {
if (!stockNames.has(stock.stock)) {
stockNames.add(stock.stock);
uniqueStocks.push(stock);
}
});
// 生成表格行
uniqueStocks.forEach((stock, index) => {
const row = document.createElement('tr');
row.className = 'border-b border-gray-800 table-row-hover';
// 根据分类设置行样式
let rowClass = '';
if (stock.分类 === '新三板') {
rowClass = 'text-purple-300';
} else if (stock.分类 === 'A股') {
rowClass = 'text-blue-300';
} else if (stock.分类 === '北交所') {
rowClass = 'text-green-300';
}
row.innerHTML = `
<td class="py-3 px-4 font-medium ${rowClass}">${stock.stock}</td>
<td class="py-3 px-4 text-gray-300">${stock.行业 || '-'}</td>
<td class="py-3 px-4 text-gray-300">${stock.项目 || stock.持股关系 || '-'}</td>
<td class="py-3 px-4">
<span class="px-2 py-1 rounded-full text-xs ${
stock.分类 === '新三板' ? 'bg-purple-900/30 text-purple-300' :
stock.分类 === 'A股' ? 'bg-blue-900/30 text-blue-300' :
stock.分类 === '北交所' ? 'bg-green-900/30 text-green-300' :
'bg-gray-700/50 text-gray-300'
}">
${stock.分类 || '-'}
</span>
</td>
<td class="py-3 px-4 text-gray-300 text-sm">${stock.reason}</td>
`;
tableBody.appendChild(row);
});
}
// 页面加载时生成表格
document.addEventListener('DOMContentLoaded', generateTable);
</script>
</body>
</html>
```