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

687 lines
30 KiB
HTML
Raw 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>Rokid AR 概念分析报告</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" 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', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
min-height: 100vh;
}
.glass-effect {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #3b82f6;
left: -8px;
top: 6px;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.timeline-line {
position: absolute;
width: 2px;
background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
left: 0;
top: 0;
bottom: 0;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.progress-bar {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 4s ease-in-out infinite;
}
.table-responsive {
overflow-x: auto;
}
.table-responsive::-webkit-scrollbar {
height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.5);
border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
background: rgba(59, 130, 246, 0.8);
}
</style>
</head>
<body class="p-4 md:p-8">
<div class="max-w-7xl mx-auto">
<!-- 页面标题 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">Rokid AR 概念分析报告</h1>
<p class="text-lg text-slate-300 max-w-3xl mx-auto">深入分析Rokid AR技术发展路径、市场格局及投资机会</p>
</div>
<!-- 概念事件时间轴 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-clock mr-3 text-blue-400"></i>
概念事件时间轴
</h2>
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="timeline-dot">
<div class="glass-effect rounded-xl p-4">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h3 class="font-bold text-lg text-blue-300">2024-07-25</h3>
<p class="font-semibold">Rokid AR Lite 开售首发价4499元12小时销量破万</p>
</div>
<span class="text-sm text-slate-400 mt-2 md:mt-0">来源路演2024-08-06</span>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="glass-effect rounded-xl p-4">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h3 class="font-bold text-lg text-blue-300">2024-08-15</h3>
<p class="font-semibold">风语筑公告已针对Rokid AR眼镜测试内容开发但尚未投入使用</p>
</div>
<span class="text-sm text-slate-400 mt-2 md:mt-0">来源:新闻</span>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="glass-effect rounded-xl p-4">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h3 class="font-bold text-lg text-blue-300">2024-09-30</h3>
<p class="font-semibold">Rokid获1亿元D轮融资江夏科投领投估值140亿元</p>
</div>
<span class="text-sm text-slate-400 mt-2 md:mt-0">来源:新闻</span>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="glass-effect rounded-xl p-4">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h3 class="font-bold text-lg text-blue-300">2024-11-18</h3>
<p class="font-semibold">Rokid Glasses 发布49g、2499元、通义千问大模型、与暴龙联名</p>
</div>
<span class="text-sm text-slate-400 mt-2 md:mt-0">来源路演2025-02-05</span>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="glass-effect rounded-xl p-4">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h3 class="font-bold text-lg text-blue-300">2024-11-18</h3>
<p class="font-semibold">淘宝×Rokid上线3D购物AR眼镜首次接入电商场景</p>
</div>
<span class="text-sm text-slate-400 mt-2 md:mt-0">来源:新闻</span>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="glass-effect rounded-xl p-4">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h3 class="font-bold text-lg text-blue-300">2025-02-18</h3>
<p class="font-semibold">总理佩戴Rokid Glasses在余杭区大会发言首次AR眼镜政府级亮相</p>
</div>
<span class="text-sm text-slate-400 mt-2 md:mt-0">来源:新闻</span>
</div>
</div>
</div>
<div class="timeline-dot">
<div class="glass-effect rounded-xl p-4">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h3 class="font-bold text-lg text-blue-300">2025-06-05</h3>
<p class="font-semibold">Rokid消费级AR眼镜将在速卖通独家首发加入"百亿补贴"出海计划</p>
</div>
<span class="text-sm text-slate-400 mt-2 md:mt-0">来源:新闻</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<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="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="glass-effect rounded-xl p-5">
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3">
<i class="fas fa-chart-line text-white"></i>
</div>
<h3 class="font-bold text-lg">阶段判断</h3>
</div>
<p class="text-slate-300">Rokid AR已从"技术验证"进入"消费级放量前夜"<span class="text-blue-300 font-semibold">2025年Q2新品上市+出海渠道打通</span>将成关键拐点。</p>
</div>
<div class="glass-effect rounded-xl p-5">
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center mr-3">
<i class="fas fa-cogs text-white"></i>
</div>
<h3 class="font-bold text-lg">核心驱动力</h3>
</div>
<p class="text-slate-300"><span class="text-purple-300 font-semibold">AI大模型通义千问+轻量化硬件49g+场景破圈(电商/文旅)</span>,形成"硬件-内容-渠道"飞轮。</p>
</div>
<div class="glass-effect rounded-xl p-5">
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-3">
<i class="fas fa-rocket text-white"></i>
</div>
<h3 class="font-bold text-lg">未来潜力</h3>
</div>
<p class="text-slate-300">中期看<span class="text-green-300 font-semibold">3000万台AR眼镜对应330亿元光波导市场</span>国盛通信测算Rokid凭生态卡位有望占20%+份额。</p>
</div>
</div>
</div>
<!-- 概念核心逻辑与市场认知 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-brain mr-3 text-indigo-400"></i>
概念核心逻辑与市场认知
</h2>
<div class="mb-8">
<h3 class="text-xl font-bold mb-4 text-indigo-300">核心驱动力拆解</h3>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 font-semibold">维度</th>
<th class="py-3 px-4 font-semibold">现状</th>
<th class="py-3 px-4 font-semibold">数据支撑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium">技术突破</td>
<td class="py-3 px-4">Micro LED+衍射光波导量产就绪</td>
<td class="py-3 px-4">Rokid Glasses 1000nit入眼亮度49g重量路演2025-02-05</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium">成本拐点</td>
<td class="py-3 px-4">BOM成本降至2500元以下</td>
<td class="py-3 px-4">2024年AR Lite定价4499元路演2024-08-06</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium">场景刚需</td>
<td class="py-3 px-4">文旅/教育/电商已落地</td>
<td class="py-3 px-4">合作200+博物馆、淘宝3D购物新闻</td>
</tr>
<tr>
<td class="py-3 px-4 font-medium">政策催化</td>
<td class="py-3 px-4">2026年AR产业目标2500万台中国</td>
<td class="py-3 px-4">安信传媒路演2023-03</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4 text-indigo-300">市场认知偏差</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="glass-effect rounded-xl p-5 border-l-4 border-yellow-500">
<h4 class="font-bold mb-2 text-yellow-300">过度乐观</h4>
<p class="text-slate-300">部分研报将Rokid与Meta并列<span class="text-yellow-300 font-semibold">2023年国内市占率仅14-21%</span>路演2024-08-15远低于雷鸟32-39%)。</p>
</div>
<div class="glass-effect rounded-xl p-5 border-l-4 border-red-500">
<h4 class="font-bold mb-2 text-red-300">忽略风险</h4>
<p class="text-slate-300">光波导良率仍低几何波导二维扩瞳良率70%民生电子路演2024-09-24可能影响Q2大规模交付。</p>
</div>
</div>
</div>
</div>
<!-- 催化剂与路径 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<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="mb-8">
<h3 class="text-xl font-bold mb-4 text-orange-300">近期催化剂3-6个月</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-1 mr-4">
<span class="text-white font-bold">1</span>
</div>
<div>
<h4 class="font-bold mb-1">2025年Q2 Rokid Glasses上市</h4>
<p class="text-slate-300">2499元价格带或引爆C端需求对比Meta Ray-Ban 299美元</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-1 mr-4">
<span class="text-white font-bold">2</span>
</div>
<div>
<h4 class="font-bold mb-1">速卖通出海</h4>
<p class="text-slate-300">6月"百亿补贴"首发复制日本KDDI运营商模式2023年黑五海外销量3000台→2025年目标<span class="text-orange-300 font-semibold">3-5万台</span>)。</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-1 mr-4">
<span class="text-white font-bold">3</span>
</div>
<div>
<h4 class="font-bold mb-1">政策落地</h4>
<p class="text-slate-300">文旅部"AR+博物馆"示范项目招标(风语筑已参与测试)。</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4 text-orange-300">长期路径</h3>
<div class="glass-effect rounded-xl p-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-center mb-6 md:mb-0">
<div class="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center mx-auto mb-3 float-animation">
<i class="fas fa-microchip text-white text-2xl"></i>
</div>
<h4 class="font-bold mb-1">2024</h4>
<p class="text-sm text-slate-300">产品验证</p>
<p class="text-xs text-blue-300 mt-1">AR Lite 10万台</p>
<p class="text-xs text-slate-400">文旅/教育</p>
</div>
<div class="hidden md:block text-slate-500">
<i class="fas fa-arrow-right text-2xl"></i>
</div>
<div class="text-center mb-6 md:mb-0">
<div class="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center mx-auto mb-3 float-animation" style="animation-delay: 1s;">
<i class="fas fa-shopping-cart text-white text-2xl"></i>
</div>
<h4 class="font-bold mb-1">2025</h4>
<p class="text-sm text-slate-300">消费级放量</p>
<p class="text-xs text-purple-300 mt-1">Glasses 100万台</p>
<p class="text-xs text-slate-400">电商/办公</p>
</div>
<div class="hidden md:block text-slate-500">
<i class="fas fa-arrow-right text-2xl"></i>
</div>
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center mx-auto mb-3 float-animation" style="animation-delay: 2s;">
<i class="fas fa-globe text-white text-2xl"></i>
</div>
<h4 class="font-bold mb-1">2026</h4>
<p class="text-sm text-slate-300">生态成熟</p>
<p class="text-xs text-green-300 mt-1">全彩光波导 1000万台</p>
<p class="text-xs text-slate-400">全天候佩戴</p>
</div>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-sitemap mr-3 text-teal-400"></i>
产业链与核心公司
</h2>
<div class="mb-8">
<h3 class="text-xl font-bold mb-4 text-teal-300">产业链图谱</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="glass-effect rounded-xl p-5">
<h4 class="font-bold mb-3 text-blue-300 flex items-center">
<i class="fas fa-arrow-up mr-2"></i>
上游
</h4>
<ul class="space-y-2 text-slate-300">
<li>光学(舜宇光学、水晶光电)</li>
<li>芯片高通AR1</li>
<li>电池(紫建电子)</li>
</ul>
</div>
<div class="glass-effect rounded-xl p-5">
<h4 class="font-bold mb-3 text-purple-300 flex items-center">
<i class="fas fa-equals mr-2"></i>
中游
</h4>
<ul class="space-y-2 text-slate-300">
<li>整机Rokid、亿道信息代工</li>
<li>操作系统YodaOS</li>
</ul>
</div>
<div class="glass-effect rounded-xl p-5">
<h4 class="font-bold mb-3 text-green-300 flex items-center">
<i class="fas fa-arrow-down mr-2"></i>
下游
</h4>
<ul class="space-y-2 text-slate-300">
<li>渠道(博士眼镜)</li>
<li>内容(淘宝、钉钉、爱奇艺)</li>
</ul>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4 text-teal-300">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 font-semibold">公司</th>
<th class="py-3 px-4 font-semibold">角色</th>
<th class="py-3 px-4 font-semibold">验证/证伪点</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-bold text-blue-300">Rokid</td>
<td class="py-3 px-4">整机+生态</td>
<td class="py-3 px-4">
<span class="text-green-400"></span>2023年市占率18.4%IDC<span class="text-red-400"></span>但光波导良率未披露
</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-bold text-purple-300">博士眼镜</td>
<td class="py-3 px-4">线下渠道</td>
<td class="py-3 px-4">
<span class="text-green-400"></span>全国3000+门店接入Rokid<span class="text-red-400"></span>镜片定制毛利率70%未验证
</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-bold text-green-300">舜宇光学</td>
<td class="py-3 px-4">光波导代工</td>
<td class="py-3 px-4">
<span class="text-green-400"></span>Meta/Rokid双供应链<span class="text-red-400"></span>阵列波导产能仅10万套/年(民生路演)
</td>
</tr>
<tr>
<td class="py-3 px-4 font-bold text-yellow-300">亿道信息</td>
<td class="py-3 px-4">空间计算合作</td>
<td class="py-3 px-4">
<span class="text-green-400"></span>共同研发AR产品<span class="text-red-400"></span>未披露订单金额
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 潜在风险 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<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="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 font-semibold">风险类型</th>
<th class="py-3 px-4 font-semibold">具体表现</th>
<th class="py-3 px-4 font-semibold">数据支撑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-red-300">技术</td>
<td class="py-3 px-4">Micro LED全彩化量产延迟</td>
<td class="py-3 px-4">路演2024-10-19全彩方案良率<50%</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-orange-300">商业化</td>
<td class="py-3 px-4">2499元定价下毛利率承压</td>
<td class="py-3 px-4">AR Lite BOM成本估算<span class="text-orange-300 font-semibold">>60%</span>路演2024-08-06</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-yellow-300">竞争</td>
<td class="py-3 px-4">雷鸟X32024-12发布或挤压份额</td>
<td class="py-3 px-4">雷鸟市占率32-39% vs Rokid 14-21%</td>
</tr>
<tr>
<td class="py-3 px-4 font-medium text-purple-300">信息矛盾</td>
<td class="py-3 px-4">出货量数据冲突IDC称2023年Rokid 4.8万台,路演称"年化30-50万"</td>
<td class="py-3 px-4">需跟踪Q2财报验证</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-chart-pie mr-3 text-cyan-400"></i>
综合结论与投资启示
</h2>
<div class="mb-6">
<div class="glass-effect rounded-xl p-5 bg-gradient-to-r from-blue-900/50 to-purple-900/50">
<h3 class="font-bold mb-2 text-lg text-cyan-300">阶段判断</h3>
<p class="text-slate-300"><span class="text-cyan-300 font-semibold">主题炒作→基本面过渡</span>2025年Q2出货量是分水岭。</p>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-bold mb-4 text-cyan-300">投资方向</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0 mt-1 mr-4">
<span class="text-white font-bold">1</span>
</div>
<div>
<h4 class="font-bold mb-1">光学链</h4>
<p class="text-slate-300"><span class="text-blue-300 font-semibold">水晶光电</span>(衍射波导量产)+ <span class="text-blue-300 font-semibold">舜宇光学</span>Meta/Rokid双验证</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center flex-shrink-0 mt-1 mr-4">
<span class="text-white font-bold">2</span>
</div>
<div>
<h4 class="font-bold mb-1">渠道链</h4>
<p class="text-slate-300"><span class="text-purple-300 font-semibold">博士眼镜</span>线下体验不可替代AR眼镜需验光配镜</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 mt-1 mr-4">
<span class="text-white font-bold">3</span>
</div>
<div>
<h4 class="font-bold mb-1">生态链</h4>
<p class="text-slate-300"><span class="text-green-300 font-semibold">风语筑</span>文旅AR内容已测试Rokid硬件</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4 text-cyan-300">跟踪指标</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="glass-effect rounded-xl p-4">
<h4 class="font-bold mb-2 text-blue-300">Rokid Glasses首月激活量</h4>
<p class="text-slate-300"><span class="text-blue-300 font-semibold">>5万台</span>验证需求</p>
</div>
<div class="glass-effect rounded-xl p-4">
<h4 class="font-bold mb-2 text-purple-300">博士眼镜AR眼镜坪效</h4>
<p class="text-slate-300">单店月销<span class="text-purple-300 font-semibold">>20副</span></p>
</div>
<div class="glass-effect rounded-xl p-4">
<h4 class="font-bold mb-2 text-green-300">光波导成本曲线</h4>
<p class="text-slate-300">2025年目标降至<span class="text-green-300 font-semibold">800元/副</span></p>
</div>
</div>
</div>
<div class="mt-6 glass-effect rounded-xl p-4 bg-gradient-to-r from-red-900/30 to-orange-900/30 border-l-4 border-red-500">
<p class="text-slate-300"><i class="fas fa-exclamation-circle text-red-400 mr-2"></i><strong class="text-red-300">风险提示</strong>若Q2新品因良率延迟上市板块或面临"预期差杀估值"。</p>
</div>
</div>
<!-- 关联股票数据 -->
<div class="glass-effect rounded-2xl p-6 card-hover">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-coins mr-3 text-amber-400"></i>
关联股票数据
</h2>
<div class="table-responsive">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 font-semibold">股票</th>
<th class="py-3 px-4 font-semibold">行业</th>
<th class="py-3 px-4 font-semibold">硬件构成</th>
<th class="py-3 px-4 font-semibold">全球市场份额</th>
<th class="py-3 px-4 font-semibold">国内市场份额</th>
<th class="py-3 px-4 font-semibold">合作商</th>
<th class="py-3 px-4 font-semibold">参股公司</th>
<th class="py-3 px-4 font-semibold">产业链定位</th>
<th class="py-3 px-4 font-semibold">投资理由</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-bold text-amber-300">Rokid AR(240729)</td>
<td class="py-3 px-4">AR/VR</td>
<td class="py-3 px-4">光学显示单元43%、计算单元31%、感知单元9%、其他17%</td>
<td class="py-3 px-4">Xreal(50%)、Rokid(16%)、雷鸟(14%)、影目(8%)、Magic Leap(3%)</td>
<td class="py-3 px-4">雷鸟(32%-39%)、Xreal(28%)、Rokid(14%-21%)、影目(5%-8%)</td>
<td class="py-3 px-4">
<div class="space-y-1">
<div>亿道信息(共同研发AR空间计算产品)</div>
<div>博士眼镜(可调焦距解决方案)</div>
<div>宏景科技(构建跨场景多任务基础模型)</div>
<div>汤姆猫(《汤姆猫跑酷》AR应用)</div>
<div>盛天网络(随乐游平台接入Rokid生态)</div>
<div>杰美特(手机/AR/VR结构件供应)</div>
<div>天娱数科(战略合作推进MR发展)</div>
<div>顺网科技(云电脑人机交互合作)</div>
</div>
</td>
<td class="py-3 px-4">
<div class="space-y-1">
<div>浙版传媒(春晓基金持股88%投资3400万元)</div>
<div>慈文传媒(参与上海敦鸿基金投资)</div>
</div>
</td>
<td class="py-3 px-4">AR眼镜研发与生态构建</td>
<td class="py-3 px-4">Rokid作为AR行业核心企业覆盖硬件研发、生态合作及产业链整合通过与多家上市公司战略合作强化技术落地与市场拓展</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// 添加页面加载动画
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.card-hover');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, {
threshold: 0.1
});
cards.forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
});
</script>
</body>
</html>
```