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

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-11-21 14:34:15 +08:00
parent 0aa050b95f
commit 564caa08c2
10 changed files with 6355 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

576
public/htmls/谷歌.html Normal file
View File

@@ -0,0 +1,576 @@
我将为您创建一个专业的金融科技风格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产业链的投资机会。