971 lines
52 KiB
HTML
971 lines
52 KiB
HTML
我将为您创建一个详实且炫酷的华为AI容器概念展示页面。这个页面将完整呈现Insight的深度内容，并以现代化的设计风格展示相关股票数据。
|
||
|
||
|
||
<!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.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
* {
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
}
|
||
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.glass-effect {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.timeline-line {
|
||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.hover-lift {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.hover-lift:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.text-gradient {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.pulse-dot {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
|
||
}
|
||
}
|
||
|
||
.stock-table {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.stock-table::-webkit-scrollbar {
|
||
height: 6px;
|
||
}
|
||
|
||
.stock-table::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.stock-table::-webkit-scrollbar-thumb {
|
||
background: #667eea;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.tag-cloud span {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.tag-cloud span:hover {
|
||
transform: scale(1.05);
|
||
z-index: 10;
|
||
}
|
||
|
||
.metric-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.metric-card:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Hero Section -->
|
||
<div class="gradient-bg text-white">
|
||
<div class="container mx-auto px-4 py-16">
|
||
<div class="flex flex-col lg:flex-row items-center justify-between">
|
||
<div class="lg:w-2/3 mb-8 lg:mb-0">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="bg-white/20 px-3 py-1 rounded-full text-sm">核心概念</span>
|
||
<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
|
||
<i data-lucide="flame" class="w-4 h-4"></i>
|
||
舆情热度 20251120
|
||
</span>
|
||
</div>
|
||
<h1 class="text-4xl lg:text-6xl font-bold mb-4">华为AI容器</h1>
|
||
<p class="text-xl lg:text-2xl mb-6 opacity-90">算力效率革命的战略突围</p>
|
||
<p class="text-lg opacity-80 mb-8">在美国先进制程封锁倒逼下，通过系统级软件创新实现算力效率革命</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<div class="glass-effect px-4 py-2 rounded-lg">
|
||
<i data-lucide="calendar" class="inline w-5 h-5 mr-2"></i>
|
||
2025年11月21日发布
|
||
</div>
|
||
<div class="glass-effect px-4 py-2 rounded-lg">
|
||
<i data-lucide="code-2" class="inline w-5 h-5 mr-2"></i>
|
||
开源Flex:ai技术
|
||
</div>
|
||
<div class="glass-effect px-4 py-2 rounded-lg">
|
||
<i data-lucide="target" class="inline w-5 h-5 mr-2"></i>
|
||
对标英伟达AI技术
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lg:w-1/3">
|
||
<div class="glass-effect rounded-2xl p-6">
|
||
<h3 class="text-xl font-semibold mb-4">核心催化剂</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0 pulse-dot">
|
||
<span class="text-sm font-bold">1</span>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold">2025年9月</p>
|
||
<p class="text-sm opacity-80">UCM推理加速器开源</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||
<span class="text-sm font-bold">2</span>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold">2025年11月21日</p>
|
||
<p class="text-sm opacity-80">Flex:ai正式发布开源</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||
<span class="text-sm font-bold">3</span>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold">2027年Q4</p>
|
||
<p class="text-sm opacity-80">Atlas 960 SuperPoD发布</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation Tabs -->
|
||
<div class="bg-white shadow-sm sticky top-0 z-40">
|
||
<div class="container mx-auto px-4">
|
||
<div class="tabs tabs-boxed flex flex-nowrap overflow-x-auto py-4" id="mainTabs">
|
||
<a href="#overview" class="tab tab-active" onclick="showSection('overview')">
|
||
<i data-lucide="eye" class="w-4 h-4 mr-2"></i>核心洞察
|
||
</a>
|
||
<a href="#logic" class="tab" onclick="showSection('logic')">
|
||
<i data-lucide="brain" class="w-4 h-4 mr-2"></i>核心逻辑
|
||
</a>
|
||
<a href="#catalyst" class="tab" onclick="showSection('catalyst')">
|
||
<i data-lucide="zap" class="w-4 h-4 mr-2"></i>催化剂
|
||
</a>
|
||
<a href="#industry" class="tab" onclick="showSection('industry')">
|
||
<i data-lucide="git-branch" class="w-4 h-4 mr-2"></i>产业链
|
||
</a>
|
||
<a href="#stocks" class="tab" onclick="showSection('stocks')">
|
||
<i data-lucide="line-chart" class="w-4 h-4 mr-2"></i>核心股票
|
||
</a>
|
||
<a href="#risk" class="tab" onclick="showSection('risk')">
|
||
<i data-lucide="alert-triangle" class="w-4 h-4 mr-2"></i>风险提示
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Overview Section -->
|
||
<section id="overview" class="container mx-auto px-4 py-12">
|
||
<div class="grid lg:grid-cols-3 gap-6">
|
||
<!-- 核心观点 -->
|
||
<div class="lg:col-span-2">
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 hover-lift">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
|
||
<i data-lucide="lightbulb" class="w-6 h-6 text-white"></i>
|
||
</div>
|
||
<h2 class="text-2xl font-bold">核心观点摘要</h2>
|
||
</div>
|
||
<div class="prose prose-lg max-w-none">
|
||
<p class="text-gray-700 leading-relaxed mb-4">
|
||
华为AI容器概念正处于<strong class="text-gradient">"技术突破预期发酵期"</strong>，其核心驱动力并非单一产品发布，而是<strong class="text-gradient">在美国先进制程封锁倒逼下，通过系统级软件创新实现算力效率革命的战略突围</strong>。
|
||
</p>
|
||
<p class="text-gray-700 leading-relaxed mb-4">
|
||
当前市场关注度逐步升温，但存在显著<strong class="text-purple-600">预期差</strong>：多数人聚焦昇腾硬件性能，却低估中间层容器技术作为"算力操作系统"的战略价值。
|
||
</p>
|
||
<p class="text-gray-700 leading-relaxed">
|
||
Flex:ai的开源若在性能上真正逼近英伟达生态，将重塑国产AI算力价值链，使华为从"卖铲子"升级为"制定采矿规则"，具备<strong class="text-gradient">从主题投资向基本面驱动跃迁</strong>的潜力。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 市场热度评估 -->
|
||
<div>
|
||
<div class="bg-white rounded-2xl shadow-lg p-6 hover-lift">
|
||
<h3 class="text-xl font-bold mb-4 flex items-center">
|
||
<i data-lucide="trending-up" class="w-5 h-5 mr-2 text-purple-600"></i>
|
||
市场热度评估
|
||
</h3>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<div class="flex justify-between mb-2">
|
||
<span class="text-sm text-gray-600">舆情热度</span>
|
||
<span class="text-sm font-semibold">80%</span>
|
||
</div>
|
||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between mb-2">
|
||
<span class="text-sm text-gray-600">研报覆盖</span>
|
||
<span class="text-sm font-semibold">30%</span>
|
||
</div>
|
||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 30%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between mb-2">
|
||
<span class="text-sm text-gray-600">交易拥挤度</span>
|
||
<span class="text-sm font-semibold">25%</span>
|
||
</div>
|
||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 25%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 p-4 bg-purple-50 rounded-lg">
|
||
<p class="text-sm text-purple-700">
|
||
<i data-lucide="info" class="inline w-4 h-4 mr-1"></i>
|
||
距离11月发布尚有8个月，属于<strong>预期发酵早期</strong>，尚未达到交易拥挤
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预期差分析 -->
|
||
<div class="mt-8 bg-white rounded-2xl shadow-lg p-8">
|
||
<h3 class="text-2xl font-bold mb-6 flex items-center">
|
||
<i data-lucide="layers" class="w-6 h-6 mr-3 text-purple-600"></i>
|
||
预期差深度挖掘
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="table w-full">
|
||
<thead>
|
||
<tr class="text-left">
|
||
<th class="bg-purple-50 text-purple-700">市场普遍认知</th>
|
||
<th class="bg-purple-50 text-purple-700">被忽略的关键事实</th>
|
||
<th class="bg-purple-50 text-purple-700">预期差影响</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="py-4">Flex:ai只是一个容器工具</td>
|
||
<td class="py-4">
|
||
<span class="inline-block px-2 py-1 bg-blue-100 text-blue-700 rounded text-sm mb-1">UCM（9月开源）</span>
|
||
<span class="inline-block px-2 py-1 bg-blue-100 text-blue-700 rounded text-sm">+ Flex:ai（11月发布）</span>
|
||
<p class="text-sm mt-1">构成"推理+训练"全栈优化</p>
|
||
</td>
|
||
<td class="py-4 text-green-600">技术价值被系统性低估</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="py-4">华为AI容器主要服务昇腾生态</td>
|
||
<td class="py-4">
|
||
<span class="inline-block px-2 py-1 bg-green-100 text-green-700 rounded text-sm">兼容K8s/Docker原生接口</span>
|
||
<p class="text-sm mt-1">可管理第三方云设施</p>
|
||
</td>
|
||
<td class="py-4 text-green-600">潜在市场空间从昇腾扩展到全行业</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="py-4">开源=不赚钱</td>
|
||
<td class="py-4">
|
||
<span class="inline-block px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-sm">博睿数据</span>
|
||
<span class="inline-block px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-sm">3000万采购订单</span>
|
||
<p class="text-sm mt-1">OEM模式已跑通</p>
|
||
</td>
|
||
<td class="py-4 text-green-600">商业模式已验证，变现路径清晰</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Logic Section -->
|
||
<section id="logic" class="container mx-auto px-4 py-12 hidden">
|
||
<div class="mb-8">
|
||
<h2 class="text-3xl font-bold mb-4">核心驱动力三维解析</h2>
|
||
<p class="text-gray-600">深入剖析华为AI容器背后的战略逻辑</p>
|
||
</div>
|
||
|
||
<div class="grid lg:grid-cols-3 gap-6">
|
||
<!-- 地缘政治驱动 -->
|
||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||
<div class="bg-gradient-to-br from-red-500 to-orange-500 p-6 text-white">
|
||
<i data-lucide="shield-off" class="w-10 h-10 mb-3"></i>
|
||
<h3 class="text-xl font-bold">地缘政治驱动</h3>
|
||
<p class="text-sm opacity-90 mt-2">被迫创新下的突围</p>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="space-y-3">
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">7nm制程限制</p>
|
||
<p class="text-sm text-gray-600">无法追赶英伟达最新GPU</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">软件定义硬件</p>
|
||
<p class="text-sm text-gray-600">系统级创新突破物理限制</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="check-circle" class="w-5 h-5 text-green-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">CloudMatrix架构</p>
|
||
<p class="text-sm text-gray-600">384颗NPU全对等互联</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI算力需求驱动 -->
|
||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||
<div class="bg-gradient-to-br from-blue-500 to-cyan-500 p-6 text-white">
|
||
<i data-lucide="cpu" class="w-10 h-10 mb-3"></i>
|
||
<h3 class="text-xl font-bold">AI算力需求驱动</h3>
|
||
<p class="text-sm opacity-90 mt-2">场景驱动的爆发增长</p>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="space-y-3">
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="trending-up" class="w-5 h-5 text-blue-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">中国市场增速55%</p>
|
||
<p class="text-sm text-gray-600">AI服务器市场2023H1达30亿美元</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="trending-up" class="w-5 h-5 text-blue-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">智能算力增速3-3.9倍</p>
|
||
<p class="text-sm text-gray-600">远超通用算力16.6%</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="trending-up" class="w-5 h-5 text-blue-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">成本降低30%+</p>
|
||
<p class="text-sm text-gray-600">容器技术优化万卡集群效率</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 生态构建驱动 -->
|
||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||
<div class="bg-gradient-to-br from-purple-500 to-indigo-500 p-6 text-white">
|
||
<i data-lucide="globe" class="w-10 h-10 mb-3"></i>
|
||
<h3 class="text-xl font-bold">生态构建驱动</h3>
|
||
<p class="text-sm opacity-90 mt-2">标准制定的战略布局</p>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="space-y-3">
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="git-merge" class="w-5 h-5 text-purple-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">开源复制TensorFlow路径</p>
|
||
<p class="text-sm text-gray-600">建立开发者生态</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="git-merge" class="w-5 h-5 text-purple-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">20+万卡集群客户基础</p>
|
||
<p class="text-sm text-gray-600">锁定昇腾硬件采购</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="git-merge" class="w-5 h-5 text-purple-500 mt-0.5"></i>
|
||
<div>
|
||
<p class="font-semibold">软件-硬件-云服务闭环</p>
|
||
<p class="text-sm text-gray-600">类比CUDA锁定NV GPU</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Catalyst Section -->
|
||
<section id="catalyst" class="container mx-auto px-4 py-12 hidden">
|
||
<div class="mb-8">
|
||
<h2 class="text-3xl font-bold mb-4">关键催化剂与时间轴</h2>
|
||
<p class="text-gray-600">把握华为AI容器发展的关键节点</p>
|
||
</div>
|
||
|
||
<!-- Timeline -->
|
||
<div class="relative">
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full timeline-line"></div>
|
||
|
||
<!-- 2025年Q3 -->
|
||
<div class="relative flex items-center mb-8">
|
||
<div class="w-1/2 pr-8 text-right">
|
||
<div class="bg-white rounded-xl shadow-lg p-6 hover-lift">
|
||
<span class="inline-block px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm mb-2">近期催化剂</span>
|
||
<h3 class="text-xl font-bold mb-2">2025年9月 UCM正式开源</h3>
|
||
<p class="text-gray-600 text-sm">推理记忆数据管理器开源，作为Flex:ai的前奏</p>
|
||
<div class="mt-3 flex justify-end gap-2">
|
||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">金融场景试点</span>
|
||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">GitHub Star数</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-blue-500 rounded-full border-4 border-white flex items-center justify-center">
|
||
<i data-lucide="calendar" class="w-4 h-4 text-white"></i>
|
||
</div>
|
||
<div class="w-1/2 pl-8"></div>
|
||
</div>
|
||
|
||
<!-- 2025年11月 -->
|
||
<div class="relative flex items-center mb-8">
|
||
<div class="w-1/2 pr-8"></div>
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-purple-500 rounded-full border-4 border-white flex items-center justify-center">
|
||
<i data-lucide="rocket" class="w-4 h-4 text-white"></i>
|
||
</div>
|
||
<div class="w-1/2 pl-8">
|
||
<div class="bg-white rounded-xl shadow-lg p-6 hover-lift">
|
||
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm mb-2">核心事件</span>
|
||
<h3 class="text-xl font-bold mb-2">2025年11月21日 Flex:ai发布</h3>
|
||
<p class="text-gray-600 text-sm">上海论坛正式发布并开源，对标英伟达AI技术</p>
|
||
<div class="mt-3 flex gap-2">
|
||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">性能测试数据</span>
|
||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">社区活跃度</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2026-2027 -->
|
||
<div class="relative flex items-center">
|
||
<div class="w-1/2 pr-8 text-right">
|
||
<div class="bg-white rounded-xl shadow-lg p-6 hover-lift">
|
||
<span class="inline-block px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm mb-2">长期发展</span>
|
||
<h3 class="text-xl font-bold mb-2">2026-2027 生态爆发期</h3>
|
||
<p class="text-gray-600 text-sm">Atlas 960 SuperPoD发布，15,488张加速卡</p>
|
||
<div class="mt-3 flex justify-end gap-2">
|
||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">标准输出</span>
|
||
<span class="text-xs bg-gray-100 px-2 py-1 rounded">全球引领</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-green-500 rounded-full border-4 border-white flex items-center justify-center">
|
||
<i data-lucide="target" class="w-4 h-4 text-white"></i>
|
||
</div>
|
||
<div class="w-1/2 pl-8"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Key Metrics -->
|
||
<div class="grid lg:grid-cols-4 gap-4 mt-12">
|
||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||
<div class="text-3xl font-bold text-gradient mb-2">3000万</div>
|
||
<p class="text-gray-600 text-sm">博睿数据订单金额</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||
<div class="text-3xl font-bold text-gradient mb-2">20+</div>
|
||
<p class="text-gray-600 text-sm">CloudMatrix超级节点</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||
<div class="text-3xl font-bold text-gradient mb-2">8192</div>
|
||
<p class="text-gray-600 text-sm">Atlas 950加速卡数</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow-lg p-6 text-center metric-card">
|
||
<div class="text-3xl font-bold text-gradient mb-2">245TB</div>
|
||
<p class="text-gray-600 text-sm">AI SSD单盘容量</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Industry Chain Section -->
|
||
<section id="industry" class="container mx-auto px-4 py-12 hidden">
|
||
<div class="mb-8">
|
||
<h2 class="text-3xl font-bold mb-4">产业链全景图</h2>
|
||
<p class="text-gray-600">华为AI容器的完整生态体系</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl shadow-lg p-8">
|
||
<!-- 上游：基础设施层 -->
|
||
<div class="mb-8">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
|
||
<i data-lucide="server" class="w-6 h-6 text-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold">上游：基础设施层</h3>
|
||
</div>
|
||
<div class="grid lg:grid-cols-4 gap-4">
|
||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-orange-600">昇腾芯片</h4>
|
||
<p class="text-sm text-gray-600">昇腾910/950处理器<br>华为海思自主研发</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-orange-600">CloudMatrix</h4>
|
||
<p class="text-sm text-gray-600">384超级节点架构<br>全对等互联技术</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-orange-600">Atlas集群</h4>
|
||
<p class="text-sm text-gray-600">950/960 SuperPoD<br>万卡级算力集群</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-orange-600">AI存储</h4>
|
||
<p class="text-sm text-gray-600">245TB AI SSD<br>"以存代算"技术</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t-2 border-dashed my-8"></div>
|
||
|
||
<!-- 中游：AI容器平台层 -->
|
||
<div class="mb-8">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
|
||
<i data-lucide="layers" class="w-6 h-6 text-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold">中游：AI容器平台层</h3>
|
||
</div>
|
||
<div class="grid lg:grid-cols-4 gap-4">
|
||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-blue-600">Flex:ai引擎</h4>
|
||
<p class="text-sm text-gray-600">开源AI容器引擎<br>核心调度算法</p>
|
||
</div>
|
||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-blue-600">UCS管理平台</h4>
|
||
<p class="text-sm text-gray-600">华为云统一管理<br>分布式集群管控</p>
|
||
</div>
|
||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-blue-600">UCM加速套件</h4>
|
||
<p class="text-sm text-gray-600">KV Cache优化<br>推理性能提升</p>
|
||
</div>
|
||
<div class="bg-blue-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-blue-600">中间件适配</h4>
|
||
<p class="text-sm text-gray-600">东方通/中国软件<br>信创生态整合</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t-2 border-dashed my-8"></div>
|
||
|
||
<!-- 下游：行业应用 -->
|
||
<div>
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg flex items-center justify-center">
|
||
<i data-lucide="globe-2" class="w-6 h-6 text-white"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold">下游：行业应用与解决方案</h3>
|
||
</div>
|
||
<div class="grid lg:grid-cols-4 gap-4">
|
||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-green-600">智慧医疗</h4>
|
||
<p class="text-sm text-gray-600">DCS AI解决方案<br>华大系/塞力医疗</p>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-green-600">金融科技</h4>
|
||
<p class="text-sm text-gray-600">银联UCM试点<br>博睿数据运维</p>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-green-600">政务云</h4>
|
||
<p class="text-sm text-gray-600">混合云容器服务<br>电科数字/青云科技</p>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-4 hover:shadow-md transition">
|
||
<h4 class="font-semibold mb-2 text-green-600">企业服务</h4>
|
||
<p class="text-sm text-gray-600">企业级容器云<br>行业定制方案</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stocks Section -->
|
||
<section id="stocks" class="container mx-auto px-4 py-12 hidden">
|
||
<div class="mb-8">
|
||
<h2 class="text-3xl font-bold mb-4">核心股票池</h2>
|
||
<p class="text-gray-600">华为AI容器产业链核心标的</p>
|
||
</div>
|
||
|
||
<!-- Stock Table -->
|
||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||
<div class="p-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
|
||
<h3 class="text-xl font-bold">股票数据详情</h3>
|
||
</div>
|
||
<div class="stock-table">
|
||
<table class="table w-full">
|
||
<thead>
|
||
<tr class="bg-gray-50">
|
||
<th class="text-left p-4">股票名称</th>
|
||
<th class="text-left p-4">分类</th>
|
||
<th class="text-left p-4">相关性描述</th>
|
||
<th class="text-left p-4">信源</th>
|
||
<th class="text-center p-4">强度</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="border-b hover:bg-purple-50 transition">
|
||
<td class="p-4 font-semibold">博睿数据</td>
|
||
<td class="p-4">
|
||
<span class="badge badge-info">技术服务</span>
|
||
</td>
|
||
<td class="p-4 text-sm">华为云UCS可观测软件框架供应商，3000万采购订单已落地</td>
|
||
<td class="p-4 text-sm">互动</td>
|
||
<td class="p-4 text-center">
|
||
<div class="flex justify-center gap-1">
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-purple-50 transition">
|
||
<td class="p-4 font-semibold">飞荣达</td>
|
||
<td class="p-4">
|
||
<span class="badge badge-secondary">散热</span>
|
||
</td>
|
||
<td class="p-4 text-sm">华为服务器液冷散热核心供应商，受益Atlas集群放量</td>
|
||
<td class="p-4 text-sm">路演</td>
|
||
<td class="p-4 text-center">
|
||
<div class="flex justify-center gap-1">
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-purple-50 transition">
|
||
<td class="p-4 font-semibold">青云科技</td>
|
||
<td class="p-4">
|
||
<span class="badge badge-primary">容器云</span>
|
||
</td>
|
||
<td class="p-4 text-sm">KubeSphere容器平台，华为云原生生态伙伴</td>
|
||
<td class="p-4 text-sm">官网</td>
|
||
<td class="p-4 text-center">
|
||
<div class="flex justify-center gap-1">
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-purple-50 transition">
|
||
<td class="p-4 font-semibold">神州数码</td>
|
||
<td class="p-4">
|
||
<span class="badge badge-primary">容器云</span>
|
||
</td>
|
||
<td class="p-4 text-sm">推出首个基于鲲鹏环境的开源容器云发行版</td>
|
||
<td class="p-4 text-sm">公告</td>
|
||
<td class="p-4 text-center">
|
||
<div class="flex justify-center gap-1">
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-purple-50 transition">
|
||
<td class="p-4 font-semibold">电科数字</td>
|
||
<td class="p-4">
|
||
<span class="badge badge-primary">容器云</span>
|
||
</td>
|
||
<td class="p-4 text-sm">华讯容器云平台，华为云高级别合作伙伴</td>
|
||
<td class="p-4 text-sm">官微/互动</td>
|
||
<td class="p-4 text-center">
|
||
<div class="flex justify-center gap-1">
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-purple-50 transition">
|
||
<td class="p-4 font-semibold">蜂助手</td>
|
||
<td class="p-4">
|
||
<span class="badge badge-success">技术服务</span>
|
||
</td>
|
||
<td class="p-4 text-sm">容器虚拟化核心技术，加强与华为产品级技术合作</td>
|
||
<td class="p-4 text-sm">互动</td>
|
||
<td class="p-4 text-center">
|
||
<div class="flex justify-center gap-1">
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b hover:bg-purple-50 transition">
|
||
<td class="p-4 font-semibold">东方通</td>
|
||
<td class="p-4">
|
||
<span class="badge badge-warning">中间件</span>
|
||
</td>
|
||
<td class="p-4 text-sm">云原生中间件平台TongCNMP，已应用于华为云</td>
|
||
<td class="p-4 text-sm">公告/互动</td>
|
||
<td class="p-4 text-center">
|
||
<div class="flex justify-center gap-1">
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
<i data-lucide="star" class="w-4 h-4 text-gray-300"></i>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Investment Advice -->
|
||
<div class="mt-8 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl p-8">
|
||
<h3 class="text-2xl font-bold mb-4">投资建议</h3>
|
||
<div class="grid lg:grid-cols-3 gap-6">
|
||
<div class="bg-white rounded-xl p-6">
|
||
<h4 class="font-semibold mb-3 text-green-600">首选</h4>
|
||
<p class="text-sm">博睿数据：唯一明确获得华为云AI容器平台采购订单的公司，OEM模式深度绑定，收入确定性最高</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-6">
|
||
<h4 class="font-semibold mb-3 text-blue-600">次选</h4>
|
||
<p class="text-sm">飞荣达：算力效率提升必然带来功耗密度增加，Atlas集群的万卡级部署对液冷需求爆发</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-6">
|
||
<h4 class="font-semibold mb-3 text-yellow-600">备选</h4>
|
||
<p class="text-sm">华大系/塞力医疗：华为医疗军团的DCS AI方案已明确集成容器技术，需关注临床落地进展</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Risk Section -->
|
||
<section id="risk" class="container mx-auto px-4 py-12 hidden">
|
||
<div class="mb-8">
|
||
<h2 class="text-3xl font-bold mb-4">风险提示</h2>
|
||
<p class="text-gray-600">投资需关注的关键风险点</p>
|
||
</div>
|
||
|
||
<div class="grid lg:grid-cols-3 gap-6">
|
||
<!-- 技术风险 -->
|
||
<div class="bg-white rounded-2xl shadow-lg p-6 border-l-4 border-red-500">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<i data-lucide="alert-triangle" class="w-6 h-6 text-red-500"></i>
|
||
<h3 class="text-xl font-bold">技术风险</h3>
|
||
</div>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-red-500 mt-0.5"></i>
|
||
<span class="text-sm">Flex:ai性能能否真正对标英伟达存疑</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-red-500 mt-0.5"></i>
|
||
<span class="text-sm">开源社区活跃度不及预期</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-red-500 mt-0.5"></i>
|
||
<span class="text-sm">ISV生态构建速度缓慢</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 商业化风险 -->
|
||
<div class="bg-white rounded-2xl shadow-lg p-6 border-l-4 border-orange-500">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<i data-lucide="trending-down" class="w-6 h-6 text-orange-500"></i>
|
||
<h3 class="text-xl font-bold">商业化风险</h3>
|
||
</div>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-orange-500 mt-0.5"></i>
|
||
<span class="text-sm">变现路径不清晰</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-orange-500 mt-0.5"></i>
|
||
<span class="text-sm">客户迁移成本高</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-orange-500 mt-0.5"></i>
|
||
<span class="text-sm">华为云容器收入占比低（<5%）</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 政策竞争风险 -->
|
||
<div class="bg-white rounded-2xl shadow-lg p-6 border-l-4 border-yellow-500">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<i data-lucide="shield" class="w-6 h-6 text-yellow-500"></i>
|
||
<h3 class="text-xl font-bold">政策与竞争风险</h3>
|
||
</div>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-yellow-500 mt-0.5"></i>
|
||
<span class="text-sm">阿里云、腾讯云快速跟进</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-yellow-500 mt-0.5"></i>
|
||
<span class="text-sm">国内云CR3市场份额超70%</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-yellow-500 mt-0.5"></i>
|
||
<span class="text-sm">开源软件出口管制风险</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Risk Warning Box -->
|
||
<div class="mt-8 bg-red-50 border-2 border-red-200 rounded-xl p-6">
|
||
<div class="flex items-start gap-3">
|
||
<i data-lucide="alert-circle" class="w-6 h-6 text-red-500 mt-0.5"></i>
|
||
<div>
|
||
<h4 class="font-bold text-red-700 mb-2">重要提示</h4>
|
||
<p class="text-sm text-red-600">
|
||
距离11月Flex:ai发布尚有8个月时间窗口，存在重大不确定性。历史上华为曾延期发布产品，需警惕"预期过度前置"风险。
|
||
建议在9月UCM开源后根据社区热度动态调整仓位，若技术反馈正面可加仓，若平淡则减仓锁定收益。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-white py-12 mt-20">
|
||
<div class="container mx-auto px-4">
|
||
<div class="text-center">
|
||
<p class="text-sm opacity-75">© 2025 华为AI容器概念分析 | 数据来源：公开信息整理</p>
|
||
<p class="text-xs opacity-50 mt-2">投资有风险，入市需谨慎</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Initialize Lucide icons
|
||
lucide.createIcons();
|
||
|
||
// Tab navigation
|
||
function showSection(sectionId) {
|
||
// Hide all sections
|
||
const sections = document.querySelectorAll('section');
|
||
sections.forEach(section => {
|
||
section.classList.add('hidden');
|
||
});
|
||
|
||
// Show selected section
|
||
const selectedSection = document.getElementById(sectionId);
|
||
if (selectedSection) {
|
||
selectedSection.classList.remove('hidden');
|
||
}
|
||
|
||
// Update tab active state
|
||
const tabs = document.querySelectorAll('.tab');
|
||
tabs.forEach(tab => {
|
||
tab.classList.remove('tab-active');
|
||
});
|
||
event.target.classList.add('tab-active');
|
||
|
||
// Reinitialize icons for newly shown content
|
||
setTimeout(() => lucide.createIcons(), 100);
|
||
}
|
||
|
||
// Add smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
// Add animation on scroll
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// Observe all metric cards and hover-lift elements
|
||
document.querySelectorAll('.metric-card, .hover-lift').forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(20px)';
|
||
el.style.transition = 'all 0.6s ease';
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
这个HTML页面完整展示了华为AI容器概念的深度分析，主要特点包括：
|
||
|
||
## 核心功能：
|
||
1. **详实的内容保留** - 完整呈现了Insight中的核心观点、逻辑分析、催化剂时间轴等
|
||
2. **炫酷的视觉设计** - 使用渐变色、玻璃态效果、动画过渡等现代设计元素
|
||
3. **股票数据表格** - 清晰展示相关股票及其关联度，使用星级评价系统
|
||
4. **响应式布局** - 完美适配移动端和桌面端
|
||
5. **交互式导航** - 标签页切换不同内容模块
|
||
6. **数据可视化** - 进度条、时间轴、卡片等多种数据展示方式
|
||
|
||
## 设计亮点：
|
||
- 渐变色主题贯穿全站
|
||
- 卡片悬浮效果增强交互感
|
||
- 时间轴清晰展示发展路径
|
||
- 星级评价直观展示股票关联度
|
||
- 风险提示醒目突出
|
||
- 移动端友好的触控交互
|
||
|
||
页面内容深度与视觉效果并重，既保留了专业金融分析的严谨性，又具有现代化的审美体验。 |