Files
vf_react/public/htmls/阿里AI千问、灵光.html
2025-11-25 19:38:50 +08:00

661 lines
34 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.0">
<title>阿里AI千问、灵光概念深度分析</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.24/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<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, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.neon-text {
text-shadow: 0 0 10px rgba(139, 92, 246, 0.8),
0 0 20px rgba(139, 92, 246, 0.6),
0 0 30px rgba(139, 92, 246, 0.4);
}
.timeline-line {
background: linear-gradient(180deg, #8b5cf6, #3b82f6);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.gradient-border {
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
background-size: 200% 200%;
animation: gradient-shift 3s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.stock-table th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.stat-card {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.5);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.8);
}
</style>
</head>
<body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
<!-- Hero Section -->
<div class="hero min-h-screen bg-gradient-to-br from-purple-900/90 via-blue-900/90 to-indigo-900/90">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-white p-8">
<div class="max-w-6xl mx-auto">
<div class="badge badge-error badge-lg mb-4 pulse-animation">
<i class="fas fa-fire mr-2"></i>热点概念
</div>
<h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text">
阿里AI千问、灵光
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">
从B端技术领先到C端超级入口的战略跃迁
</p>
<div class="flex flex-wrap justify-center gap-4 mb-8">
<div class="stat-card rounded-lg p-4">
<div class="text-3xl font-bold text-yellow-400">1000万+</div>
<div class="text-sm">首周下载量</div>
</div>
<div class="stat-card rounded-lg p-4">
<div class="text-3xl font-bold text-green-400">TOP 3</div>
<div class="text-sm">App Store排名</div>
</div>
<div class="stat-card rounded-lg p-4">
<div class="text-3xl font-bold text-blue-400">3800亿</div>
<div class="text-sm">AI基础设施投资</div>
</div>
</div>
<div class="flex justify-center gap-4">
<button onclick="scrollToSection('timeline')" class="btn btn-primary btn-lg">
<i class="fas fa-clock mr-2"></i>查看时间轴
</button>
<button onclick="scrollToSection('analysis')" class="btn btn-secondary btn-lg">
<i class="fas fa-chart-line mr-2"></i>深度分析
</button>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-white text-center mb-12">
<i class="fas fa-lightbulb text-yellow-400 mr-3"></i>核心观点摘要
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="card card-hover glass-morphism text-white">
<div class="card-body">
<div class="card-title justify-center">
<i class="fas fa-rocket text-3xl text-blue-400 mb-2"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-center">战略跃迁</h3>
<p class="text-sm text-center">从B端技术领先到C端超级入口的关键转折点</p>
</div>
</div>
<div class="card card-hover glass-morphism text-white">
<div class="card-body">
<div class="card-title justify-center">
<i class="fas fa-shield-alt text-3xl text-green-400 mb-2"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-center">开源护城河</h3>
<p class="text-sm text-center">全球第一开源模型家族3亿下载量10万+衍生模型</p>
</div>
</div>
<div class="card card-hover glass-morphism text-white">
<div class="card-body">
<div class="card-title justify-center">
<i class="fas fa-infinity text-3xl text-purple-400 mb-2"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-center">生态协同</h3>
<p class="text-sm text-center">全场景生活服务闭环,淘宝、高德、支付宝深度融合</p>
</div>
</div>
<div class="card card-hover glass-morphism text-white">
<div class="card-body">
<div class="card-title justify-center">
<i class="fas fa-chart-pie text-3xl text-red-400 mb-2"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-center">投资主线</h3>
<p class="text-sm text-center">算力基础设施与生态合作伙伴最具确定性</p>
</div>
</div>
</div>
</div>
</section>
<!-- 时间轴 -->
<section id="timeline" class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-white text-center mb-12">
<i class="fas fa-history text-blue-400 mr-3"></i>概念事件时间轴
</h2>
<div class="relative">
<div class="timeline-line absolute left-1/2 transform -translate-x-1/2 w-1 h-full"></div>
<!-- 时间轴事件 -->
<div class="space-y-12">
<div class="flex items-center justify-end md:w-1/2 pr-8">
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="badge badge-warning mb-2">2025年11月17日</div>
<h3 class="text-xl font-bold">千问APP公测版上线</h3>
<p>定位"会聊天能办事的个人AI助手"全面对标ChatGPT</p>
</div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="w-4 h-4 bg-yellow-400 rounded-full pulse-animation"></div>
</div>
<div class="flex items-center md:w-1/2 md:ml-auto pl-8">
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="badge badge-info mb-2">2025年11月19日</div>
<h3 class="text-xl font-bold">冲入App Store前三</h3>
<p>首周下载量突破1000万次成为史上增长最快的AI应用</p>
</div>
</div>
</div>
<div class="flex items-center justify-end md:w-1/2 pr-8">
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="badge badge-success mb-2">2025年9月</div>
<h3 class="text-xl font-bold">Qwen3-Next发布</h3>
<p>训练成本降低90%,实现性能与效率的最优平衡</p>
</div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="w-4 h-4 bg-green-400 rounded-full"></div>
</div>
<div class="flex items-center md:w-1/2 md:ml-auto pl-8">
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="badge badge-primary mb-2">2025年4月</div>
<h3 class="text-xl font-bold">新加坡国家AI合作</h3>
<p>新加坡放弃Meta模型转向阿里千问开源架构</p>
</div>
</div>
</div>
<div class="flex items-center justify-end md:w-1/2 pr-8">
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="badge badge-secondary mb-2">2025年2月</div>
<h3 class="text-xl font-bold">苹果战略合作</h3>
<p>为国内2.5亿iOS用户提供AI服务带来确定性算力需求</p>
</div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="w-4 h-4 bg-blue-400 rounded-full"></div>
</div>
<div class="flex items-center md:w-1/2 md:ml-auto pl-8">
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="badge badge-error mb-2">2024年9月</div>
<h3 class="text-xl font-bold">三年3800亿投资计划</h3>
<p>彰显AI战略决心重点布局算力基础设施</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心逻辑分析 -->
<section id="analysis" class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-white text-center mb-12">
<i class="fas fa-brain text-purple-400 mr-3"></i>四维共振逻辑
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-microchip text-white text-xl"></i>
</div>
<h3 class="card-title text-2xl">技术壁垒驱动</h3>
</div>
<ul class="space-y-2 text-sm">
<li><i class="fas fa-check text-green-400 mr-2"></i>Qwen3系列在11项基准测试全面超越DeepSeek V3</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>开源生态200+模型3亿下载量10万+衍生模型</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>Qwen3-Next训练成本降低超90%</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>QwQ-32B以320亿参数实现6710亿参数性能</li>
</ul>
</div>
</div>
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-flag text-white text-xl"></i>
</div>
<h3 class="card-title text-2xl">战略决心驱动</h3>
</div>
<ul class="space-y-2 text-sm">
<li><i class="fas fa-check text-green-400 mr-2"></i>管理层视千问为"AI时代的未来之战"</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>集团CEO吴泳铭亲自管理组织架构大调整</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>3800亿投资年资本开支超1200亿</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>千问APP从启动到上线仅4天执行力验证</li>
</ul>
</div>
</div>
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-network-wired text-white text-xl"></i>
</div>
<h3 class="card-title text-2xl">生态协同驱动</h3>
</div>
<ul class="space-y-2 text-sm">
<li><i class="fas fa-check text-green-400 mr-2"></i>淘宝、高德、飞猪、支付宝全场景融合</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>自然语言交互+任务自动执行闭环</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>与NBA合作开发专属AI模型</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>独特的生活服务体验,竞争对手难以复制</li>
</ul>
</div>
</div>
<div class="card glass-morphism text-white card-hover">
<div class="card-body">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-users text-white text-xl"></i>
</div>
<h3 class="card-title text-2xl">市场需求驱动</h3>
</div>
<ul class="space-y-2 text-sm">
<li><i class="fas fa-check text-green-400 mr-2"></i>千问APP完全免费CAC趋近于零</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>首周1000万下载网络效应已启动</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>苹果合作带来2.5亿iOS用户确定性增量</li>
<li><i class="fas fa-check text-green-400 mr-2"></i>2026年C端AI应用重要突破年</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 产业链分析 -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-white text-center mb-12">
<i class="fas fa-sitemap text-green-400 mr-3"></i>产业链核心公司
</h2>
<div class="overflow-x-auto">
<table class="stock-table w-full text-white">
<thead>
<tr>
<th class="px-4 py-3">公司</th>
<th class="px-4 py-3">关联度</th>
<th class="px-4 py-3">核心逻辑</th>
<th class="px-4 py-3">竞争优势</th>
<th class="px-4 py-3">潜在风险</th>
<th class="px-4 py-3">投资评级</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-white/10 transition">
<td class="px-4 py-3 font-semibold">石基信息</td>
<td class="px-4 py-3"><span class="badge badge-error">极高</span></td>
<td class="px-4 py-3">千问生态落地最大受益方</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 股权绑定:淘宝为第二大股东</div>
<div>• 业务独占:预订功能强制使用</div>
<div>• 场景刚需:酒旅预订核心场景</div>
</div>
</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 阿里战略调整</div>
<div>• 酒店业景气度下行</div>
</div>
</td>
<td class="px-4 py-3"><span class="badge badge-warning">Alpha来源最纯</span></td>
</tr>
<tr class="hover:bg-white/10 transition">
<td class="px-4 py-3 font-semibold">数据港</td>
<td class="px-4 py-3"><span class="badge badge-warning"></span></td>
<td class="px-4 py-3">阿里算力基础设施提供商</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 深度绑定阿里最大IDC供应商</div>
<div>• 需求刚性C端爆发带来增量</div>
<div>• 地域优势:满足低延时要求</div>
</div>
</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 行业竞争加剧</div>
<div>• 阿里议价能力强</div>
</div>
</td>
<td class="px-4 py-3"><span class="badge badge-info">Beta属性明显</span></td>
</tr>
<tr class="hover:bg-white/10 transition">
<td class="px-4 py-3 font-semibold">值得买</td>
<td class="px-4 py-3"><span class="badge badge-secondary"></span></td>
<td class="px-4 py-3">阿里电商数据服务商</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 数据资产完善</div>
<div>• 场景融合需要</div>
<div>• 深度合作历史</div>
</div>
</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 变现模式不清晰</div>
<div>• 阿里可能自建</div>
</div>
</td>
<td class="px-4 py-3"><span class="badge badge-neutral">逻辑较弱,观望</span></td>
</tr>
<tr class="hover:bg-white/10 transition">
<td class="px-4 py-3 font-semibold">浪潮信息</td>
<td class="px-4 py-3"><span class="badge badge-warning"></span></td>
<td class="px-4 py-3">阿里服务器供应商</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 国产替代机遇</div>
<div>• 规模效应</div>
</div>
</td>
<td class="px-4 py-3">
<div class="text-xs space-y-1">
<div>• 价格战激烈</div>
<div>• 技术迭代风险</div>
</div>
</td>
<td class="px-4 py-3"><span class="badge badge-info">偏硬件,弹性有限</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 关键跟踪指标 -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-white text-center mb-12">
<i class="fas fa-chart-line text-yellow-400 mr-3"></i>关键跟踪指标
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="card glass-morphism text-white">
<div class="card-body">
<h3 class="card-title mb-4">
<i class="fas fa-user-check text-blue-400 mr-2"></i>用户粘性指标
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span>30日留存率</span>
<span class="badge badge-warning">目标 &gt;40%</span>
</div>
<div class="flex justify-between items-center">
<span>人均日使用时长</span>
<span class="badge badge-success">目标 &gt;15分钟</span>
</div>
<div class="flex justify-between items-center">
<span>功能渗透率</span>
<span class="badge badge-info">目标 &gt;20%</span>
</div>
</div>
</div>
</div>
<div class="card glass-morphism text-white">
<div class="card-body">
<h3 class="card-title mb-4">
<i class="fas fa-dollar-sign text-green-400 mr-2"></i>商业化指标
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span>ARPU值</span>
<span class="badge badge-warning">2026目标 &gt;50元/年</span>
</div>
<div class="flex justify-between items-center">
<span>MaaS平台利润率</span>
<span class="badge badge-success">目标 &gt;25%</span>
</div>
<div class="flex justify-between items-center">
<span>苹果合作收入</span>
<span class="badge badge-info">2026Q4 &gt;20亿</span>
</div>
</div>
</div>
</div>
<div class="card glass-morphism text-white">
<div class="card-body">
<h3 class="card-title mb-4">
<i class="fas fa-microchip text-purple-400 mr-2"></i>技术指标
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span>开源模型下载增速</span>
<span class="badge badge-success">目标 &gt;10%/月</span>
</div>
<div class="flex justify-between items-center">
<span>Agent任务成功率</span>
<span class="badge badge-warning">目标 &gt;80%</span>
</div>
<div class="flex justify-between items-center">
<span>QwQ-Max发布</span>
<span class="badge badge-error">2026Q2前</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 投资建议 -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-white text-center mb-12">
<i class="fas fa-lightbulb text-yellow-400 mr-3"></i>综合结论与投资启示
</h2>
<div class="glass-morphism rounded-2xl p-8 text-white">
<div class="mb-8">
<h3 class="text-2xl font-bold mb-4">阶段判断</h3>
<p class="text-lg leading-relaxed mb-4">
当前阿里AI千问概念处于 <span class="text-yellow-400 font-bold">"预期验证"的第二阶段</span>
</p>
<div class="space-y-2 ml-4">
<p><span class="text-blue-400"></span> 第一阶段2024年及以前纯主题炒作市场不信任阿里C端能力</p>
<p><span class="text-green-400"></span> 第二阶段2025年11月至今产品数据验证估值开始反应</p>
<p><span class="text-purple-400"></span> 第三阶段2026年H2-2027年若留存和商业化数据验证估值体系重构</p>
</div>
</div>
<div class="mb-8">
<h3 class="text-2xl font-bold mb-4">核心矛盾</h3>
<p class="text-lg bg-gradient-to-r from-yellow-400/20 to-orange-400/20 p-4 rounded-lg">
<i class="fas fa-exclamation-triangle mr-2"></i>
短期股价反映"用户增长故事",但长期价值取决于"商业化能力"
</p>
</div>
<div>
<h3 class="text-2xl font-bold mb-4">投资建议</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-blue-500/20 rounded-lg p-4">
<h4 class="font-bold mb-2"><i class="fas fa-star mr-2"></i>首选</h4>
<p class="font-semibold">算力基础设施</p>
<p class="text-sm mt-2">数据港、万国数据</p>
<p class="text-xs mt-2 opacity-80">确定性算力需求上架率70%→90%加速</p>
</div>
<div class="bg-green-500/20 rounded-lg p-4">
<h4 class="font-bold mb-2"><i class="fas fa-check mr-2"></i>次选</h4>
<p class="font-semibold">场景绑定应用</p>
<p class="text-sm mt-2">石基信息</p>
<p class="text-xs mt-2 opacity-80">若留存率>40%酒旅场景产生真实GMV</p>
</div>
<div class="bg-yellow-500/20 rounded-lg p-4">
<h4 class="font-bold mb-2"><i class="fas fa-eye mr-2"></i>谨慎</h4>
<p class="font-semibold">纯模型概念</p>
<p class="text-sm mt-2">阿里巴巴自身</p>
<p class="text-xs mt-2 opacity-80">股价已隐含较高预期,适合观察仓</p>
</div>
</div>
</div>
<div class="mt-8 p-4 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-lg">
<p class="text-center text-lg font-semibold">
<i class="fas fa-quote-left mr-2"></i>
当前阶段:"重算力、轻应用、缓判巨头"
<i class="fas fa-quote-right ml-2"></i>
</p>
</div>
</div>
</div>
</section>
<!-- 股票数据 -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-white text-center mb-12">
<i class="fas fa-chart-bar text-blue-400 mr-3"></i>相关股票数据
</h2>
<div class="glass-morphism rounded-2xl p-8">
<div class="text-white text-center">
<i class="fas fa-file-image text-6xl mb-4 opacity-50"></i>
<p class="text-xl">股票数据更新</p>
<p class="text-sm mt-2 opacity-70">阿里AI千问、灵光(251124)更新</p>
<div class="mt-4">
<span class="badge badge-info badge-lg">
<i class="fas fa-database mr-2"></i>数据文件: FB9D0D78-6EA9-4429-8461-A233333158F3.png
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 px-4 bg-black/30">
<div class="max-w-7xl mx-auto text-center text-white">
<p class="mb-2">本报告仅供参考,不构成投资建议</p>
<p class="text-sm opacity-70">数据来源新闻、路演、Insight | 更新时间2025年11月24日</p>
</div>
</footer>
<script>
// 平滑滚动
function scrollToSection(sectionId) {
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}
// 添加滚动动画
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const parallax = document.querySelector('.hero');
if (parallax) {
parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
// 数字动画效果
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = Math.floor(progress * (end - start) + start) + obj.innerHTML.replace(/[\d,]+/, '');
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// 页面加载完成后执行动画
window.addEventListener('load', () => {
const stats = document.querySelectorAll('.stat-card .text-3xl');
stats.forEach(stat => {
const value = parseInt(stat.innerHTML.replace(/[^0-9]/g, ''));
if (value) {
animateValue(stat, 0, value, 2000);
}
});
});
// 添加交互提示
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px) scale(1.02)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0) scale(1)';
});
});
</script>
</body>
</html>