Files
vf_react/public/htmls/MR.html
2025-10-11 16:16:02 +08:00

573 lines
29 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">
<title>MR混合现实概念分析报告</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" 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" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
min-height: 100vh;
}
.card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.gradient-text {
background: linear-gradient(90deg, #60a5fa, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, #60a5fa, #c084fc);
left: -8px;
top: 6px;
}
.timeline-line {
position: absolute;
width: 2px;
background: linear-gradient(to bottom, #60a5fa, #c084fc);
left: -1px;
top: 22px;
bottom: 0;
}
.table-container {
overflow-x: visible;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
th, td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
th {
background-color: rgba(30, 41, 59, 0.5);
font-weight: 600;
color: #cbd5e1;
position: sticky;
top: 0;
z-index: 10;
}
tr:hover {
background-color: rgba(100, 116, 139, 0.1);
}
.tag {
display: inline-block;
padding: 0.25rem 0.5rem;
margin: 0.125rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
background-color: rgba(96, 165, 250, 0.2);
color: #93c5fd;
}
.highlight-box {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(192, 132, 252, 0.1));
border-left: 4px solid #60a5fa;
padding: 1rem;
margin: 1rem 0;
border-radius: 0.375rem;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
@media (max-width: 768px) {
.card {
margin-bottom: 1rem;
}
.table-container {
font-size: 0.875rem;
}
th, td {
padding: 0.5rem;
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 标题部分 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">MR混合现实概念分析报告</h1>
<p class="text-lg text-slate-300 max-w-3xl mx-auto">探索混合现实技术发展历程、产业链布局与投资机会</p>
</div>
<!-- 概念事件时间轴 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">概念事件时间轴</h2>
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="mb-6 timeline-dot">
<h3 class="text-lg font-semibold text-slate-200">2023年6月</h3>
<p class="text-slate-300">苹果发布Vision Pro首次明确定义MR为"空间计算"终端搭载M2+R1双芯片、Micro OLED屏幕售价<strong class="text-blue-300">3499美元</strong></p>
</div>
<div class="mb-6 timeline-dot">
<h3 class="text-lg font-semibold text-slate-200">2023年9月</h3>
<p class="text-slate-300">Meta Quest 3发布主打消费级MR499美元但出货量从预期700万台下调至<strong class="text-blue-300">500万台</strong></p>
</div>
<div class="mb-6 timeline-dot">
<h3 class="text-lg font-semibold text-slate-200">2024年1月</h3>
<p class="text-slate-300">苹果Vision Pro预售<strong class="text-blue-300">18分钟售罄</strong>,国内黄牛价炒至<strong class="text-blue-300">10万元</strong>VIVO申请注册"VIVO MR Headset"商标计划2025年推出Vision原型机。</p>
</div>
<div class="mb-6 timeline-dot">
<h3 class="text-lg font-semibold text-slate-200">2024年2月</h3>
<p class="text-slate-300">Vision Pro正式发售首周销量<strong class="text-blue-300">20万台</strong>,全年目标<strong class="text-blue-300">50-60万台</strong>PICO 4 Ultra发布支持50+MR应用。</p>
</div>
<div class="mb-6 timeline-dot">
<h3 class="text-lg font-semibold text-slate-200">2024年8月</h3>
<p class="text-slate-300">MR概念股集体涨停博士眼镜、亿道信息等市场炒作"AI眼镜+MR"融合预期。</p>
</div>
<div class="mb-6 timeline-dot">
<h3 class="text-lg font-semibold text-slate-200">2024年11月</h3>
<p class="text-slate-300">Meta将MR部分设计外包给歌尔股份三星显示为微软MR设备供应OLEDoS面板<strong class="text-blue-300">2026年交付</strong>)。</p>
</div>
<div class="timeline-dot">
<h3 class="text-lg font-semibold text-slate-200">2025年展望</h3>
<p class="text-slate-300">第二代MR设备预计降价至<strong class="text-blue-300">1500-2000美元</strong>,出货量或达<strong class="text-blue-300">千万级</strong>Counterpoint预测</p>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">核心观点摘要</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="highlight-box">
<h3 class="text-lg font-semibold mb-3 text-purple-300">当前阶段</h3>
<p class="text-slate-300">MR处于"技术验证→消费级渗透"过渡期苹果Vision Pro定义高端标杆<strong class="text-blue-300">价格高企3499美元</strong>限制放量2025年平价机型或触发拐点。</p>
</div>
<div class="highlight-box">
<h3 class="text-lg font-semibold mb-3 text-purple-300">核心驱动力</h3>
<p class="text-slate-300"><strong class="text-blue-300">硬件迭代Micro OLED+Pancake光学+AI芯片</strong><strong class="text-blue-300">内容生态苹果VisionOS+Unity AI工具链</strong>共振政策中国2026年3500亿市场规模目标加码。</p>
</div>
<div class="highlight-box">
<h3 class="text-lg font-semibold mb-3 text-purple-300">未来潜力</h3>
<p class="text-slate-300">MR或复制iPhone路径<strong class="text-blue-300">娱乐设备→生产力工具→通用计算平台</strong>,撬动<strong class="text-blue-300">万亿级AI+元宇宙</strong>市场。</p>
</div>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">核心逻辑与市场认知分析</h2>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-purple-300">核心驱动力</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">技术突破</h4>
<p class="text-slate-300 text-sm">Vision Pro的<strong class="text-blue-300">2300万像素Micro OLED</strong>单眼4K+)和<strong class="text-blue-300">12ms延迟</strong>R1芯片解决眩晕痛点Pancake光学减重<strong class="text-blue-300">30%</strong></p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">成本下降路径</h4>
<p class="text-slate-300 text-sm">第二代MR BOM成本从<strong class="text-blue-300">1500美元降至510美元</strong>西南电子预测主因Micro OLED良率提升索尼→京东方和规模效应。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">政策催化</h4>
<p class="text-slate-300 text-sm">中国《虚拟现实行动计划》明确<strong class="text-blue-300">2026年2500万台终端销量</strong>直接补贴产业链如合肥政府领投Rokid 5亿融资</p>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-purple-300">市场热度与情绪</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">研报密度</h4>
<p class="text-slate-300 text-sm">2024年Q1-Q3<strong class="text-blue-300">15篇深度报告</strong>聚焦MR中泰、中信建投等主题热度仅次于AI。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">情绪分化</h4>
<p class="text-slate-300 text-sm">机构乐观(<strong class="text-blue-300">2025年1亿台销量</strong>),但消费者调研显示<strong class="text-blue-300">仅20%愿为MR支付溢价</strong>德勤2024报告</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">预期差</h3>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">被忽视的关键点</h4>
<ul class="list-disc pl-5 text-slate-300 text-sm space-y-2">
<li><strong class="text-blue-300">内容生产门槛</strong>Unity Muse AI工具将3D建模时间从<strong class="text-blue-300">数周缩短至分钟级</strong>,但市场未充分定价。</li>
<li><strong class="text-blue-300">B端渗透</strong>微软HoloLens 32026年主攻<strong class="text-blue-300">工业培训</strong>已获波音订单非C端逻辑。</li>
</ul>
</div>
</div>
</div>
<!-- 关键催化剂与未来发展路径 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">关键催化剂与未来发展路径</h2>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-purple-300">近期催化剂3-6个月</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">2024年12月</h4>
<p class="text-slate-300 text-sm">苹果Vision Pro国行版发售<strong class="text-blue-300">价格或降至2.5万人民币</strong>(渠道调研)。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">2025年Q1</h4>
<p class="text-slate-300 text-sm">Meta Quest 4发布<strong class="text-blue-300">售价999美元</strong>(直接对标苹果平价版)。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">2025年Q2</h4>
<p class="text-slate-300 text-sm">VIVO Vision原型机亮相博鳌论坛<strong class="text-blue-300">国产供应链京东方OLEDoS+兆威机电IPD模组</strong>验证。</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">长期路径</h3>
<div class="space-y-4">
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">2024-2025</h4>
<p class="text-slate-300 text-sm">高端市场(苹果)+平价市场Meta/PICO双轨并行<strong class="text-blue-300">年出货量从50万→1000万</strong></p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">2026-2027</h4>
<p class="text-slate-300 text-sm">MR+AI融合如GPT-5空间交互<strong class="text-blue-300">替代30%平板/笔电场景</strong>IDC预测</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">2028+</h4>
<p class="text-slate-300 text-sm">MR成为<strong class="text-blue-300">元宇宙入口</strong>,硬件年销量或达<strong class="text-blue-300">5000万台</strong>(类比智能手机爆发期)。</p>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司深度剖析 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">产业链与核心公司深度剖析</h2>
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-purple-300">产业链图谱</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">上游</h4>
<p class="text-slate-300 text-sm">Micro OLED<strong class="text-blue-300">京东方A</strong>)、光学模组(<strong class="text-blue-300">舜宇光学</strong>、IPD调节<strong class="text-blue-300">兆威机电</strong>)。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">中游</h4>
<p class="text-slate-300 text-sm">代工(<strong class="text-blue-300">立讯精密</strong>独供苹果)、检测设备(<strong class="text-blue-300">杰普特</strong>镜片检测)。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">下游</h4>
<p class="text-slate-300 text-sm">内容(<strong class="text-blue-300">恺英网络</strong>VR游戏、文旅<strong class="text-blue-300">风语筑</strong>MR展馆</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr>
<th class="text-left">公司</th>
<th class="text-left">角色</th>
<th class="text-left">验证逻辑</th>
<th class="text-left">风险点</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium text-blue-300">立讯精密</td>
<td>苹果代工龙头</td>
<td>Vision Pro独家代工<strong class="text-blue-300">70%份额</strong></td>
<td>苹果砍单风险(历史案例)</td>
</tr>
<tr>
<td class="font-medium text-blue-300">兆威机电</td>
<td>IPD模组</td>
<td>苹果+Meta双客户<strong class="text-blue-300">单机价值30美元</strong></td>
<td>技术替代(日本电产竞争)</td>
</tr>
<tr>
<td class="font-medium text-blue-300">杰普特</td>
<td>检测设备</td>
<td>苹果二代线<strong class="text-blue-300">价值量翻倍</strong></td>
<td>订单延迟(良率未达标)</td>
</tr>
<tr>
<td class="font-medium text-blue-300">恺英网络</td>
<td>VR游戏</td>
<td>首款MR游戏《MechaParty》待上线</td>
<td>内容审核趋严(版号风险)</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">验证与证伪</h4>
<p class="text-slate-300 text-sm"><strong class="text-blue-300">矛盾点</strong>研报称歌尔股份为Meta MR代工<strong class="text-blue-300">2024年12月新闻</strong>显示Meta将设计外包给歌尔<strong class="text-blue-300">制造仍自留</strong>——歌尔实际受益有限。</p>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">潜在风险与挑战</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h3 class="font-medium mb-2 text-purple-300">技术风险</h3>
<p class="text-slate-300 text-sm">Micro OLED良率<strong class="text-blue-300">&lt;30%</strong>(索尼产能瓶颈),或延迟平价机型上市。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h3 class="font-medium mb-2 text-purple-300">商业化风险</h3>
<p class="text-slate-300 text-sm">Vision Pro<strong class="text-blue-300">2小时续航</strong>限制移动场景B端需求如医疗尚未规模化。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h3 class="font-medium mb-2 text-purple-300">政策风险</h3>
<p class="text-slate-300 text-sm">中国对MR内容审查趋严如虚拟偶像直播需备案</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h3 class="font-medium mb-2 text-purple-300">信息矛盾</h3>
<p class="text-slate-300 text-sm">TrendForce预测<strong class="text-blue-300">2024年MR出货量960万台</strong>,但苹果供应链仅备货<strong class="text-blue-300">50万</strong>——存在<strong class="text-blue-300">10倍预期差</strong></p>
</div>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">综合结论与投资启示</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-purple-300">阶段判断</h3>
<div class="highlight-box">
<p class="text-slate-300">MR处于<strong class="text-blue-300">"技术泡沫期"向"应用落地期"</strong>过渡2025年平价机型或触发<strong class="text-blue-300">"iPhone 4时刻"</strong></p>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-purple-300">投资方向</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">硬件瓶颈突破</h4>
<p class="text-slate-300 text-sm"><strong class="text-blue-300">兆威机电</strong>IPD模组<strong class="text-blue-300">水晶光电</strong>Pancake光学</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-medium mb-2 text-blue-300">AI内容工具</h4>
<p class="text-slate-300 text-sm"><strong class="text-blue-300">丝路视觉</strong>Unity AI合作<strong class="text-blue-300">凡拓数创</strong>3D渲染引擎</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-purple-300">跟踪指标</h3>
<div class="space-y-3">
<div class="bg-slate-800 bg-opacity-50 p-3 rounded-lg">
<p class="text-slate-300 text-sm"><strong class="text-blue-300">2025年Q2</strong>苹果MR二代<strong class="text-blue-300">售价&lt;2000美元</strong>确认。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-3 rounded-lg">
<p class="text-slate-300 text-sm"><strong class="text-blue-300">Unity Muse</strong>生成3D模型<strong class="text-blue-300">成本下降50%</strong>(开发者调研)。</p>
</div>
<div class="bg-slate-800 bg-opacity-50 p-3 rounded-lg">
<p class="text-slate-300 text-sm"><strong class="text-blue-300">中国MR内容备案数量</strong>(文旅部月度数据)。</p>
</div>
</div>
</div>
</div>
<!-- 关联股票数据 -->
<div class="card rounded-xl p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-blue-300">关联股票数据</h2>
<div class="table-container">
<table class="w-full">
<thead>
<tr>
<th class="text-left">股票名称</th>
<th class="text-left">分类领域</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 股票数据将通过JavaScript动态生成 -->
</tbody>
</table>
</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: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#60a5fa"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: false
},
size: {
value: 3,
random: true
},
line_linked: {
enable: true,
distance: 150,
color: "#60a5fa",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
// 股票数据
const stockData = [{'MR(240118)': [{'stock': '欧菲光', '传感硬件': '摄像头; 传感器', '基础硬件': '光学膜组', '应用': '内容', '空间计算': '空间计算'}, {'stock': '立讯精密', '传感硬件': '摄像头', '代工': '代工', '整机': '整机'}, {'stock': '同兴达', '传感硬件': '摄像头', '基础硬件': '芯片组'}, {'stock': '工业富联', '传感硬件': '传感器', '整机': '整机'}, {'stock': '奥比中光', '传感硬件': '传感器', '空间计算': '空间计算'}, {'stock': '智立方', '传感硬件': '传感器; 光学膜组', '设备': '检测'}, {'stock': '蓝特光学', '传感硬件': '传感器', '基础硬件': '光学膜组'}, {'stock': '博杰股份', '传感硬件': '声学', '设备': '检测'}, {'stock': '歌尔股份', '传感硬件': '声学', '代工': '代工', '应用': '娱乐'}, {'stock': '佳禾智能', '传感硬件': '声学', '基础硬件': '光学膜组', '空间计算': '空间计算'}, {'stock': '韦尔股份', '基础硬件': '芯片组'}, {'stock': '晶晨股份', '基础硬件': '芯片组'}, {'stock': '兆易创新', '基础硬件': '芯片组'}, {'stock': '全志科技', '基础硬件': '芯片组'}, {'stock': '艾为电子', '基础硬件': '芯片组'}, {'stock': '瑞芯微', '基础硬件': '芯片组'}, {'stock': '清越科技', '基础硬件': '显示屏'}, {'stock': '双象股份', '基础硬件': '显示屏; 光学膜组'}, {'stock': '利亚德', '基础硬件': '显示屏', '应用': '展览; 娱乐'}, {'stock': '奥来德', '基础硬件': '显示屏'}, {'stock': '莱特光电', '基础硬件': '显示屏'}, {'stock': '兆威机电', '基础硬件': '光学膜组', '其他硬件': 'IPD系统'}, {'stock': '创维数字', '基础硬件': '光学膜组', '整机': '整机', '应用': '内容'}, {'stock': '五方光电', '基础硬件': '光学膜组'}, {'stock': '炬光科技', '基础硬件': '光学膜组'}, {'stock': '联创电子', '基础硬件': '光学膜组'}, {'stock': '冠石科技', '基础硬件': '光学膜组'}, {'stock': '杰普特', '基础硬件': '光学膜组'}, {'stock': '长盈精密', '其他硬件': '精密组件', '外壳': '外壳'}, {'stock': '领益智造', '其他硬件': '精密组件'}, {'stock': '致尚科技', '其他硬件': '精密组件'}, {'stock': '中石科技', '其他硬件': '精密组件'}, {'stock': '安洁科技', '其他硬件': '精密组件'}, {'stock': '格林精密', '其他硬件': '精密组件'}, {'stock': '和林微纳', '其他硬件': '精密组件'}, {'stock': '飞荣达', '其他硬件': '精密组件'}, {'stock': '蓝思科技', '其他硬件': '外壳'}, {'stock': '鹏鼎控股', '其他硬件': '连接件'}, {'stock': '东山精密', '其他硬件': '连接件'}, {'stock': '欣旺达', '其他硬件': '电池'}, {'stock': '德赛电池', '其他硬件': '电池'}, {'stock': '信维通信', '其他硬件': '通信模组'}, {'stock': '荣旗科技', '其他硬件': '通信模组', '设备': '检测'}, {'stock': '易天股份', '设备': '镀膜'}, {'stock': '杰普特', '设备': '检测'}, {'stock': '华兴源创', '设备': '检测'}, {'stock': '赛腾股份', '设备': '检测'}, {'stock': '科瑞技术', '设备': '检测'}, {'stock': '精测电子', '设备': '检测'}, {'stock': '博众精工', '设备': '检测', '整机': '整机'}, {'stock': '飞乐达', '设备': '检测'}, {'stock': '虹软科技', '设备': '检测'}, {'stock': '联得装备', '设备': '检测'}, {'stock': '丝路视觉', '应用': '内容; 展览; 空间计算'}, {'stock': '天娱数科', '应用': '内容'}, {'stock': '宏景科技', '应用': '内容; 空间计算'}, {'stock': '凌云光', '应用': '内容'}, {'stock': '芒果超媒', '应用': '内容'}, {'stock': '恒信东方', '应用': '教培; 空间计算'}, {'stock': '力盛体育', '应用': '教培'}, {'stock': '凡拓数创', '应用': '展览; 空间计算'}, {'stock': '米奥会展', '应用': '展览'}, {'stock': '风语筑', '应用': '展览; 娱乐; 空间计算'}, {'stock': '超图软件', '应用': '娱乐; 空间计算'}, {'stock': '润建股份', '应用': '娱乐'}, {'stock': '华如科技', '应用': '娱乐; 空间计算'}, {'stock': '网达软件', '应用': '娱乐'}, {'stock': '因赛集团', '应用': '营销'}, {'stock': '国脉文化', '应用': '平台'}, {'stock': '亿道信息', '整机': '整机', '空间计算': '空间计算'}, {'stock': '博众精工', '整机': '整机'}, {'stock': '则成电子', '北交所': '北交所'}, {'stock': '众诚科技', '北交所': '北交所'}, {'stock': '伟达光电', '北交所': '北交所'}, {'stock': '乐创技术', '北交所': '北交所'}]}];
// 生成股票表格
function generateStockTable() {
const tableBody = document.getElementById('stockTableBody');
const stocks = stockData[0]['MR(240118)'];
stocks.forEach(stock => {
const row = document.createElement('tr');
// 股票名称列
const nameCell = document.createElement('td');
nameCell.className = 'font-medium text-blue-300';
nameCell.textContent = stock.stock;
row.appendChild(nameCell);
// 分类领域列
const categoryCell = document.createElement('td');
const categories = [];
// 收集所有分类
for (const key in stock) {
if (key !== 'stock') {
categories.push(`<span class="tag">${key}: ${stock[key]}</span>`);
}
}
categoryCell.innerHTML = categories.join('');
row.appendChild(categoryCell);
tableBody.appendChild(row);
});
}
// 页面加载完成后生成表格
document.addEventListener('DOMContentLoaded', generateStockTable);
</script>
</body>
</html>
```