576 lines
28 KiB
HTML
576 lines
28 KiB
HTML
我将为您创建一个专业的金融科技风格HTML页面，展示谷歌AI转型的完整投资分析。这个页面将融合数据可视化、动态效果和响应式设计。
|
||
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>谷歌AI产业链投资分析 - 战略蜕变与价值重估</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
* {
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.card-hover {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.pulse-dot {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.number-animate {
|
||
animation: countUp 1s ease-out;
|
||
}
|
||
|
||
@keyframes countUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 8px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: #667eea;
|
||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||
}
|
||
|
||
.timeline-item::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 20px;
|
||
width: 2px;
|
||
height: calc(100% + 10px);
|
||
background: #e5e7eb;
|
||
}
|
||
|
||
.timeline-item:last-child::after {
|
||
display: none;
|
||
}
|
||
|
||
.glass-effect {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.glow-text {
|
||
text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
|
||
}
|
||
|
||
.scroll-hidden::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.badge-glow {
|
||
animation: badgeGlow 2s ease-in-out infinite alternate;
|
||
}
|
||
|
||
@keyframes badgeGlow {
|
||
from {
|
||
box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
|
||
}
|
||
to {
|
||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Hero Section -->
|
||
<section class="gradient-bg text-white py-20 px-4">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-10">
|
||
<div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-full mb-6 badge-glow">
|
||
<i class="fab fa-google text-3xl"></i>
|
||
</div>
|
||
<h1 class="text-5xl md:text-6xl font-bold mb-6 glow-text">
|
||
谷歌AI产业链投资分析
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto">
|
||
从"搜索广告公司"向"AI基础设施+应用生态平台"的战略蜕变
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-4 gap-6 mt-16">
|
||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||
<div class="text-3xl font-bold number-animate">450<span class="text-xl">万</span></div>
|
||
<div class="text-blue-200 mt-2">等效H100算力</div>
|
||
<div class="text-sm text-blue-300 mt-1">2025年预期</div>
|
||
</div>
|
||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||
<div class="text-3xl font-bold number-animate">1300<span class="text-xl">万亿</span></div>
|
||
<div class="text-blue-200 mt-2">月均Token处理量</div>
|
||
<div class="text-sm text-blue-300 mt-1">环比增长30%</div>
|
||
</div>
|
||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||
<div class="text-3xl font-bold number-animate">23.7<span class="text-xl">%</span></div>
|
||
<div class="text-blue-200 mt-2">云业务利润率</div>
|
||
<div class="text-sm text-blue-300 mt-1">Q3 2025</div>
|
||
</div>
|
||
<div class="glass-effect rounded-xl p-6 card-hover">
|
||
<div class="text-3xl font-bold number-animate">1550<span class="text-xl">亿美元</span></div>
|
||
<div class="text-blue-200 mt-2">云积压订单</div>
|
||
<div class="text-sm text-blue-300 mt-1">环比增长46.2%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Key Timeline -->
|
||
<section class="py-16 px-4 bg-white">
|
||
<div class="max-w-7xl mx-auto">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
|
||
<i class="fas fa-clock text-purple-600 mr-3"></i>关键时间轴
|
||
</h2>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div class="timeline-item">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年2-3月</div>
|
||
<div class="text-lg font-semibold text-gray-800 mb-2">AI Overview大规模推广</div>
|
||
<div class="text-gray-600 text-sm">Token消耗量达480万亿/月</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年5月</div>
|
||
<div class="text-lg font-semibold text-gray-800 mb-2">Gemini 2.5 Pro发布</div>
|
||
<div class="text-gray-600 text-sm">AI Mode上线，月活破1亿</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年8月</div>
|
||
<div class="text-lg font-semibold text-gray-800 mb-2">Pixel 9搭载Gemini Nano</div>
|
||
<div class="text-gray-600 text-sm">Gemini Live对标Apple Intelligence</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年9月</div>
|
||
<div class="text-lg font-semibold text-gray-800 mb-2">反垄断判决超预期</div>
|
||
<div class="text-gray-600 text-sm">保留Chrome，消除不确定性</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年10月</div>
|
||
<div class="text-lg font-semibold text-gray-800 mb-2">Q3财报验证AI正循环</div>
|
||
<div class="text-gray-600 text-sm">搜索收入增速创2-3年新高</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="text-sm text-purple-600 font-semibold mb-2">2024年11月</div>
|
||
<div class="text-lg font-semibold text-gray-800 mb-2">TPU外供重大突破</div>
|
||
<div class="text-gray-600 text-sm">OpenAI/META成为客户</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Core Logic Section -->
|
||
<section class="py-16 px-4 bg-gray-100">
|
||
<div class="max-w-7xl mx-auto">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">
|
||
<i class="fas fa-brain text-purple-600 mr-3"></i>核心逻辑分析
|
||
</h2>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
||
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
|
||
<div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mb-6">
|
||
<i class="fas fa-microchip text-white text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">算力自主化</h3>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
自研TPU芯片性能对标英伟达B200，凭借功耗和成本优势，云业务利润率从11%提升至23.7%，单季度利润率提升超12个百分点
|
||
</p>
|
||
<div class="mt-6 flex items-center text-purple-600 font-semibold">
|
||
<span>450万等效H100</span>
|
||
<i class="fas fa-arrow-trend-up ml-2"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
|
||
<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center mb-6">
|
||
<i class="fas fa-robot text-white text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">模型代际领先</h3>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
Gemini 2.5 Pro在LMArena测评中ELO分数达1448分，Veo 3、Imagen 4、Genie模型在多模态领域实现突破性进展
|
||
</p>
|
||
<div class="mt-6 flex items-center text-green-600 font-semibold">
|
||
<span>多模态原生能力</span>
|
||
<i class="fas fa-trophy ml-2"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl p-8 card-hover shadow-lg">
|
||
<div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center mb-6">
|
||
<i class="fas fa-chart-line text-white text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">流量护城河转化</h3>
|
||
<p class="text-gray-600 leading-relaxed">
|
||
AI Overview覆盖15-20亿月活，AI Mode Token消耗是传统模式的2-3倍，重构搜索商业模式，提升广告ROI
|
||
</p>
|
||
<div class="mt-6 flex items-center text-orange-600 font-semibold">
|
||
<span>20亿月活用户</span>
|
||
<i class="fas fa-users ml-2"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Market Sentiment -->
|
||
<div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-2xl p-8">
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-6">
|
||
<i class="fas fa-chart-pie text-purple-600 mr-3"></i>市场预期差
|
||
</h3>
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div>
|
||
<h4 class="font-semibold text-gray-700 mb-4">当前市场认知</h4>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<span class="text-red-500 mr-2"><i class="fas fa-times-circle"></i></span>
|
||
<span class="text-gray-600">估值便宜但增长乏力（PE 18倍）</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-red-500 mr-2"><i class="fas fa-times-circle"></i></span>
|
||
<span class="text-gray-600">担忧AI搜索冲击广告收入</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-red-500 mr-2"><i class="fas fa-times-circle"></i></span>
|
||
<span class="text-gray-600">机构低配，情绪偏谨慎</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-700 mb-4">产业实际进展</h4>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2"><i class="fas fa-check-circle"></i></span>
|
||
<span class="text-gray-600">产业链订单上修30-50%</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2"><i class="fas fa-check-circle"></i></span>
|
||
<span class="text-gray-600">TPU外供打开第二增长曲线</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2"><i class="fas fa-check-circle"></i></span>
|
||
<span class="text-gray-600">进入"业绩饥渴"状态</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock Chain Table -->
|
||
<section class="py-16 px-4 bg-white">
|
||
<div class="max-w-7xl mx-auto">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
|
||
<i class="fas fa-network-wired text-purple-600 mr-3"></i>谷歌产业链核心标的
|
||
</h2>
|
||
|
||
<div class="mb-8 flex flex-wrap gap-4 justify-center">
|
||
<button onclick="filterCategory('all')" class="px-6 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition">
|
||
全部
|
||
</button>
|
||
<button onclick="filterCategory('光模块')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||
光模块
|
||
</button>
|
||
<button onclick="filterCategory('PCB')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||
PCB
|
||
</button>
|
||
<button onclick="filterCategory('OCS')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||
OCS
|
||
</button>
|
||
<button onclick="filterCategory('液冷散热')" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
||
液冷散热
|
||
</button>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full border-collapse" id="stockTable">
|
||
<thead>
|
||
<tr class="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
|
||
<th class="p-4 text-left font-semibold">分类</th>
|
||
<th class="p-4 text-left font-semibold">个股</th>
|
||
<th class="p-4 text-left font-semibold">相关性描述</th>
|
||
<th class="p-4 text-left font-semibold">消息来源</th>
|
||
<th class="p-4 text-center font-semibold">投资评级</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="stockTableBody">
|
||
<!-- Table content will be dynamically generated -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Risk Analysis -->
|
||
<section class="py-16 px-4 bg-gradient-to-br from-red-50 to-orange-50">
|
||
<div class="max-w-7xl mx-auto">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">
|
||
<i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>风险提示
|
||
</h2>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div class="bg-white rounded-xl p-6 border-l-4 border-red-500">
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-microchip text-red-500 mr-2"></i>技术风险
|
||
</h3>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li>• AI Mode幻觉率达15-20%</li>
|
||
<li>• Agent识别第三方应用仅30%</li>
|
||
<li>• Agent to Agent协议推进缓慢</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 border-l-4 border-orange-500">
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-dollar-sign text-orange-500 mr-2"></i>商业化风险
|
||
</h3>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li>• AI Ultra月费245美元过高</li>
|
||
<li>• 广告展示次数或降30-40%</li>
|
||
<li>• Gemini Advanced仅3000万用户</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-6 border-l-4 border-yellow-500">
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">
|
||
<i class="fas fa-gavel text-yellow-600 mr-2"></i>政策风险
|
||
</h3>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li>• 美国司法部终极裁决未定</li>
|
||
<li>• 欧盟数字税反制风险</li>
|
||
<li>• 广告业务拆分风险犹存</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Investment Advice -->
|
||
<section class="py-16 px-4 gradient-bg text-white">
|
||
<div class="max-w-7xl mx-auto">
|
||
<h2 class="text-3xl font-bold mb-12 text-center glow-text">
|
||
<i class="fas fa-lightbulb mr-3"></i>投资建议
|
||
</h2>
|
||
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div class="glass-effect rounded-2xl p-8">
|
||
<h3 class="text-2xl font-bold mb-6">谷歌本体 (GOOGL)</h3>
|
||
<div class="mb-6">
|
||
<div class="text-4xl font-bold mb-2">增持评级</div>
|
||
<div class="text-blue-200">目标价：$233-250</div>
|
||
</div>
|
||
<ul class="space-y-3 text-blue-100">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-3 mt-1"></i>
|
||
<span>当前18倍PE未反映TPU外供价值</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-3 mt-1"></i>
|
||
<span>监管出清后估值向25倍PE修复</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check-circle mr-3 mt-1"></i>
|
||
<span>AI订阅带来第二增长曲线</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="glass-effect rounded-2xl p-8">
|
||
<h3 class="text-2xl font-bold mb-6">A股产业链配置</h3>
|
||
<div class="mb-6">
|
||
<div class="text-4xl font-bold mb-2">重点配置</div>
|
||
<div class="text-blue-200">硬件链业绩确定性最强</div>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||
<span>光库科技</span>
|
||
<span class="text-green-300 font-semibold">第一优先级</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||
<span>中际旭创</span>
|
||
<span class="text-green-300 font-semibold">第二优先级</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-white/10 rounded-lg p-3">
|
||
<span>沪电股份</span>
|
||
<span class="text-green-300 font-semibold">第三优先级</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-12 text-center">
|
||
<div class="inline-flex items-center bg-white/20 rounded-full px-8 py-4">
|
||
<i class="fas fa-chart-line text-3xl mr-4 pulse-dot"></i>
|
||
<div class="text-left">
|
||
<div class="text-sm text-blue-200">关键跟踪指标</div>
|
||
<div class="text-xl font-bold">Q4云业务利润率 & Token环比增速</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-white py-8 px-4">
|
||
<div class="max-w-7xl mx-auto text-center">
|
||
<p class="text-gray-400">© 2024 谷歌AI产业链投资分析 | 数据来源：公开研报、路演纪要、产业链调研</p>
|
||
<p class="text-gray-500 text-sm mt-2">风险提示：投资有风险，入市需谨慎</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Stock data processing
|
||
const stockData = [
|
||
{category: '光模块', name: '中际旭创', desc: '供货谷歌800G光模块份额A股第一，2025年谷歌光模块采购量约350万只，中际旭创占其采购份额的70%', source: '网传纪要', rating: '强烈推荐'},
|
||
{category: '光模块', name: '新易盛', desc: '供货谷歌800G光模块份额A股第二，2025年首次切入谷歌800G供应链', source: '网传纪要', rating: '推荐'},
|
||
{category: '光模块', name: '长芯盛创', desc: '800G硅光模块已通过谷歌多轮验证，计划2025年第三季度量产，预计年出货量超50万只', source: '网传纪要', rating: '推荐'},
|
||
{category: 'PCB', name: '沪电股份', desc: '供货谷歌PCB份额A股第一，谷歌TPU PCB的核心供应商，在谷歌TPU供应商中占比约30%', source: '网传纪要', rating: '强烈推荐'},
|
||
{category: 'PCB', name: '胜宏科技', desc: '谷歌V7大份额一供', source: '机构研报', rating: '推荐'},
|
||
{category: 'OCS', name: '腾景科技', desc: '谷歌OCS交换机的核心光学器件供应商,业务收入占比已达28%', source: '公开资料', rating: '推荐'},
|
||
{category: 'OCS', name: '光库科技', desc: '2025年6月份并购的武汉捷普工厂，是过去谷歌OCS交换机方案的独家代工厂商', source: '网传纪要', rating: '强烈推荐'},
|
||
{category: '液冷散热', name: '英维克', desc: '公司推出基于谷歌Descartes 5 CDU规格的CDU产品，同时展示26MW全链路液冷案例', source: '公开资料', rating: '推荐'}
|
||
];
|
||
|
||
// Populate table
|
||
function populateTable(data) {
|
||
const tbody = document.getElementById('stockTableBody');
|
||
tbody.innerHTML = '';
|
||
|
||
data.forEach((stock, index) => {
|
||
const row = document.createElement('tr');
|
||
row.className = 'border-b hover:bg-gray-50 transition-colors';
|
||
row.innerHTML = `
|
||
<td class="p-4">
|
||
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
|
||
${stock.category}
|
||
</span>
|
||
</td>
|
||
<td class="p-4 font-semibold text-gray-800">${stock.name}</td>
|
||
<td class="p-4 text-gray-600 max-w-md">${stock.desc}</td>
|
||
<td class="p-4 text-gray-500 text-sm">${stock.source}</td>
|
||
<td class="p-4 text-center">
|
||
<span class="inline-block px-3 py-1 ${
|
||
stock.rating === '强烈推荐' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'
|
||
} rounded-full text-sm font-medium">
|
||
${stock.rating}
|
||
</span>
|
||
</td>
|
||
`;
|
||
tbody.appendChild(row);
|
||
});
|
||
}
|
||
|
||
// Filter category
|
||
function filterCategory(category) {
|
||
const buttons = document.querySelectorAll('button');
|
||
buttons.forEach(btn => {
|
||
if (btn.textContent === '全部' && category === 'all' ||
|
||
btn.textContent === category) {
|
||
btn.className = 'px-6 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition';
|
||
} else if (btn.textContent !== '全部') {
|
||
btn.className = 'px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition';
|
||
}
|
||
});
|
||
|
||
const filtered = category === 'all' ? stockData : stockData.filter(s => s.category === category);
|
||
populateTable(filtered);
|
||
}
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
populateTable(stockData);
|
||
|
||
// Add smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
|
||
// Animate numbers on scroll
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('number-animate');
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.number-animate').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
这个HTML页面完整展示了谷歌AI转型的投资分析，包含以下核心特性：
|
||
|
||
## 🎯 核心亮点
|
||
|
||
1. **动态数据可视化**：Hero区域展示关键数据指标，带动画效果
|
||
2. **时间轴展示**：清晰呈现谷歌AI发展的关键节点
|
||
3. **产业链分析**：交互式表格展示核心标的，支持分类筛选
|
||
4. **风险提示矩阵**：三维度风险分析（技术、商业化、政策）
|
||
5. **投资建议卡片**：玻璃拟态设计展示具体配置建议
|
||
|
||
## 💫 设计特色
|
||
|
||
- **渐变色彩系统**：紫色到蓝色的科技感渐变
|
||
- **卡片悬浮效果**：鼠标悬停时的3D浮起动画
|
||
- **脉冲动画**：重要指标的呼吸灯效果
|
||
- **响应式布局**：完美适配移动端和桌面端
|
||
- **微交互设计**：按钮点击、表格筛选等细节动画
|
||
|
||
## 📊 数据展示
|
||
|
||
- 完整保留了insight中的核心数据和逻辑
|
||
- 股票产业链表格支持动态筛选
|
||
- 关键数据突出显示（450万算力、1300万亿Token等）
|
||
- 风险和投资建议分层展示
|
||
|
||
这个页面不仅是一个信息展示工具，更是一个专业的投资决策辅助界面，通过视觉化设计帮助投资者快速把握谷歌AI产业链的投资机会。 |