Add Font Awesome v4 compatibility WOFF2 file
This commit is contained in:
杨水淼
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,907 @@
|
||||
<!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="/libai/anime.min.js"></script>
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<script src="/libai/shader-park-core.esm.js" type="module"></script>
|
||||
<link href="/libai/googlecss2.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-bg: #1a1d29;
|
||||
--secondary-bg: #2563eb;
|
||||
--accent-color: #0891b2;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cbd5e1;
|
||||
--card-bg: rgba(30, 41, 59, 0.8);
|
||||
--border-color: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
background: linear-gradient(135deg, var(--primary-bg) 0%, #0f172a 100%);
|
||||
color: var(--text-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('./resources/neural-network-bg.png') center/cover;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, rgba(26, 29, 41, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
border-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.company-header {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(8, 145, 178, 0.1));
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.company-logo-large {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 400px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.swot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.swot-item {
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.swot-strengths {
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
border-color: #059669;
|
||||
}
|
||||
|
||||
.swot-weaknesses {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.swot-opportunities {
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.swot-threats {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.swot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.company-logo-large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Background -->
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 nav-blur">
|
||||
<div class="container">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="index.html" class="text-gray-300 hover:text-white transition-colors">首页</a>
|
||||
<a href="#overview" class="text-gray-300 hover:text-white transition-colors">概览</a>
|
||||
<a href="#analysis" class="text-gray-300 hover:text-white transition-colors">深度分析</a>
|
||||
<a href="#financial" class="text-gray-300 hover:text-white transition-colors">财务数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Company Header Section -->
|
||||
<section class="pt-24 pb-12">
|
||||
<div class="container">
|
||||
<div class="company-header fade-in">
|
||||
<div class="company-logo-large" id="companyLogo">寒</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4" id="companyName">寒武纪</h1>
|
||||
<p class="text-xl text-gray-300 mb-6" id="companySlogan">国产AI芯片的技术先锋</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<span class="px-4 py-2 bg-blue-500 bg-opacity-20 text-blue-400 rounded-full text-sm" id="companyCategory">上游 - AI芯片</span>
|
||||
<span class="px-4 py-2 bg-green-500 bg-opacity-20 text-green-400 rounded-full text-sm">护城河评分: <span id="moatScore">9.2</span>/10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-blue-400" id="marketShare">15%</div>
|
||||
<div class="metric-label">市场份额</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-green-400" id="patents">2700+</div>
|
||||
<div class="metric-label">专利数量</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-purple-400" id="revenue">2.3亿</div>
|
||||
<div class="metric-label">营收规模</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-cyan-400" id="growth">+65%</div>
|
||||
<div class="metric-label">同比增长</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="section">
|
||||
<div class="container">
|
||||
<div class="grid lg:grid-cols-3 gap-8">
|
||||
<!-- Company Overview -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card p-8 fade-in">
|
||||
<h2 class="text-2xl font-bold mb-6">公司概览</h2>
|
||||
<div class="prose prose-invert max-w-none">
|
||||
<p class="text-gray-300 leading-relaxed mb-4">
|
||||
寒武纪作为中国AI芯片领域的领军企业，其护城河主要建立在<strong>深厚的技术积累、前瞻性的市场布局以及日益完善的生态系统</strong>之上。公司专注于人工智能芯片产品的研发与技术创新，致力于打造人工智能领域的核心处理器芯片。
|
||||
</p>
|
||||
<p class="text-gray-300 leading-relaxed mb-4">
|
||||
在技术层面，寒武纪的核心竞争力源于其自主研发的<strong>Cambricon指令集</strong>和创新的<strong>存算一体架构</strong>。这一指令集是专为人工智能计算设计的，能够高效地处理复杂的神经网络算法，从而在AI推理任务中实现卓越的性能和能效比。
|
||||
</p>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
在市场表现方面，寒武纪凭借其技术优势，迅速在国内云端AI芯片市场占据了一席之地。根据2025年上半年的数据显示，寒武纪的AI芯片营收实现了<strong>65%的同比增长</strong>，市场份额达到了约<strong>15%</strong>，在国内厂商中仅次于华为昇腾，稳居第二。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 fade-in">
|
||||
<h3 class="text-lg font-semibold mb-4">关键数据</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">成立时间</span>
|
||||
<span>2016年</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">员工规模</span>
|
||||
<span>800+人</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">研发投入</span>
|
||||
<span class="text-green-400">85%+</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">上市时间</span>
|
||||
<span>2020年</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h3 class="text-lg font-semibold mb-4">产品矩阵</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<span class="text-sm">终端智能处理器IP</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<span class="text-sm">云端智能芯片</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-purple-500 rounded-full"></div>
|
||||
<span class="text-sm">边缘智能芯片</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-cyan-500 rounded-full"></div>
|
||||
<span class="text-sm">基础系统软件</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Analysis Section -->
|
||||
<section id="analysis" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 fade-in">护城河深度分析</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-8 mb-12">
|
||||
<!-- Technology Barrier -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">技术壁垒分析</h3>
|
||||
<div id="techRadarChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Market Performance -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">市场表现趋势</h3>
|
||||
<div id="performanceChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SWOT Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">SWOT分析</h3>
|
||||
<div class="swot-grid">
|
||||
<div class="swot-item swot-strengths">
|
||||
<h4 class="font-semibold mb-3 text-green-400">优势 (Strengths)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 自主研发的Cambricon指令集</li>
|
||||
<li>• 存算一体架构创新</li>
|
||||
<li>• 强大的研发团队（硕博80%+）</li>
|
||||
<li>• 丰富的专利组合（2700+项）</li>
|
||||
<li>• 国产替代政策支持</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-weaknesses">
|
||||
<h4 class="font-semibold mb-3 text-red-400">劣势 (Weaknesses)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 规模相对较小</li>
|
||||
<li>• 生态系统建设初期</li>
|
||||
<li>• 客户集中度较高</li>
|
||||
<li>• 盈利能力待提升</li>
|
||||
<li>• 国际竞争力有限</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-opportunities">
|
||||
<h4 class="font-semibold mb-3 text-blue-400">机会 (Opportunities)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 国产替代加速推进</li>
|
||||
<li>• AI应用场景快速扩展</li>
|
||||
<li>• 政策支持力度加大</li>
|
||||
<li>• 边缘计算市场兴起</li>
|
||||
<li>• 车规级芯片需求增长</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-threats">
|
||||
<h4 class="font-semibold mb-3 text-yellow-400">威胁 (Threats)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 英伟达等巨头技术领先</li>
|
||||
<li>• 华为等国内厂商竞争</li>
|
||||
<li>• 技术迭代速度加快</li>
|
||||
<li>• 地缘政治风险</li>
|
||||
<li>• 供应链安全挑战</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Financial Section -->
|
||||
<section id="financial" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 fade-in">财务数据分析</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-8">
|
||||
<!-- Revenue Chart -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">营收趋势</h3>
|
||||
<div id="revenueChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Profit Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">盈利能力分析</h3>
|
||||
<div id="profitChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Financial Metrics -->
|
||||
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-blue-400">盈利能力</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">毛利率</span>
|
||||
<span class="text-green-400">65.2%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">净利率</span>
|
||||
<span class="text-red-400">-15.3%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">ROE</span>
|
||||
<span class="text-yellow-400">-8.7%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-purple-400">运营效率</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">总资产周转率</span>
|
||||
<span class="text-blue-400">0.32</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">存货周转天数</span>
|
||||
<span class="text-cyan-400">156天</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">应收账款周转</span>
|
||||
<span class="text-purple-400">89天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-cyan-400">成长能力</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">营收增长率</span>
|
||||
<span class="text-green-400">+65%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">净利润增长</span>
|
||||
<span class="text-red-400">-23%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">研发投入比</span>
|
||||
<span class="text-yellow-400">85%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Future Outlook -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="card p-8 fade-in">
|
||||
<h2 class="text-2xl font-bold mb-6">未来展望</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-blue-400">发展战略</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>持续推进存算一体架构技术迭代</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>扩大边缘AI和车载AI市场布局</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>加强生态系统建设和开发者支持</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>探索新的商业模式和合作机会</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-purple-400">投资建议</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-blue-500 bg-opacity-10 border border-blue-500 border-opacity-30 rounded-lg">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="text-blue-400 font-semibold">长期投资</span>
|
||||
<span class="text-green-400 text-sm">推荐</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300">
|
||||
技术壁垒深厚，受益于国产替代趋势，长期发展前景良好
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 bg-yellow-500 bg-opacity-10 border border-yellow-500 border-opacity-30 rounded-lg">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="text-yellow-400 font-semibold">风险提示</span>
|
||||
<span class="text-red-400 text-sm">谨慎</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300">
|
||||
短期内仍面临盈利压力，需关注技术迭代和市场竞争
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-800">
|
||||
<div class="container text-center">
|
||||
<div class="flex items-center justify-center space-x-2 mb-4">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析平台</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2025 AI产业链护城河深度分析. 专业数据驱动的商业洞察
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 公司详情页JavaScript
|
||||
let techRadarChart, performanceChart, revenueChart, profitChart;
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeAnimations();
|
||||
initializeCharts();
|
||||
loadCompanyData();
|
||||
});
|
||||
|
||||
// 初始化动画
|
||||
function initializeAnimations() {
|
||||
anime({
|
||||
targets: '.fade-in',
|
||||
opacity: [0, 1],
|
||||
translateY: [30, 0],
|
||||
delay: anime.stagger(200),
|
||||
duration: 800,
|
||||
easing: 'easeOutQuart'
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initializeCharts() {
|
||||
// 技术壁垒雷达图
|
||||
const techRadarDom = document.getElementById('techRadarChart');
|
||||
techRadarChart = echarts.init(techRadarDom);
|
||||
|
||||
const techRadarOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '技术能力评估',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '技术创新', max: 10 },
|
||||
{ name: '专利保护', max: 10 },
|
||||
{ name: '产品性能', max: 10 },
|
||||
{ name: '生态建设', max: 10 },
|
||||
{ name: '市场地位', max: 10 },
|
||||
{ name: '成本优势', max: 10 }
|
||||
],
|
||||
axisName: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } },
|
||||
splitArea: { show: false }
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
data: [{
|
||||
value: [9.5, 9.2, 8.8, 7.5, 8.0, 7.2],
|
||||
name: '寒武纪',
|
||||
itemStyle: { color: '#2563eb' },
|
||||
areaStyle: { color: 'rgba(37, 99, 235, 0.2)' }
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
techRadarChart.setOption(techRadarOption);
|
||||
|
||||
// 市场表现趋势图
|
||||
const performanceDom = document.getElementById('performanceChart');
|
||||
performanceChart = echarts.init(performanceDom);
|
||||
|
||||
const performanceOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '股价与市值趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['股价', '市值'],
|
||||
textStyle: { color: '#94a3b8' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '股价(元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '市值(亿元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '股价',
|
||||
type: 'line',
|
||||
data: [68, 95, 45, 78, 125, 98],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
itemStyle: { color: '#2563eb' }
|
||||
},
|
||||
{
|
||||
name: '市值',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [270, 380, 180, 310, 500, 390],
|
||||
lineStyle: { color: '#059669', width: 3 },
|
||||
itemStyle: { color: '#059669' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
performanceChart.setOption(performanceOption);
|
||||
|
||||
// 营收趋势图
|
||||
const revenueDom = document.getElementById('revenueChart');
|
||||
revenueChart = echarts.init(revenueDom);
|
||||
|
||||
const revenueOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '营收增长趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025H1'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '营收(亿元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [1.0, 4.4, 4.6, 5.3, 7.2, 9.1, 11.8, 7.1],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#2563eb' },
|
||||
{ offset: 1, color: '#0891b2' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
revenueChart.setOption(revenueOption);
|
||||
|
||||
// 盈利能力分析图
|
||||
const profitDom = document.getElementById('profitChart');
|
||||
profitChart = echarts.init(profitDom);
|
||||
|
||||
const profitOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '盈利能力指标',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['毛利率', '净利率', 'ROE'],
|
||||
textStyle: { color: '#94a3b8' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '百分比(%)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '毛利率',
|
||||
type: 'line',
|
||||
data: [78.5, 82.3, 79.8, 75.2, 71.6, 68.9, 65.2],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
itemStyle: { color: '#2563eb' }
|
||||
},
|
||||
{
|
||||
name: '净利率',
|
||||
type: 'line',
|
||||
data: [-45.2, -38.7, -28.9, -22.1, -18.5, -16.8, -15.3],
|
||||
lineStyle: { color: '#dc2626', width: 3 },
|
||||
itemStyle: { color: '#dc2626' }
|
||||
},
|
||||
{
|
||||
name: 'ROE',
|
||||
type: 'line',
|
||||
data: [-12.8, -9.5, -6.2, -4.8, -6.1, -7.3, -8.7],
|
||||
lineStyle: { color: '#f59e0b', width: 3 },
|
||||
itemStyle: { color: '#f59e0b' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
profitChart.setOption(profitOption);
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', function() {
|
||||
techRadarChart.resize();
|
||||
performanceChart.resize();
|
||||
revenueChart.resize();
|
||||
profitChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 加载公司数据
|
||||
function loadCompanyData() {
|
||||
// 从URL参数获取公司ID
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const companyId = urlParams.get('company') || 'cambricon';
|
||||
|
||||
// 根据不同公司加载不同数据
|
||||
const companyData = {
|
||||
cambricon: {
|
||||
name: '寒武纪',
|
||||
logo: '寒',
|
||||
slogan: '国产AI芯片的技术先锋',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.2,
|
||||
marketShare: '15%',
|
||||
patents: '2700+',
|
||||
revenue: '2.3亿',
|
||||
growth: '+65%'
|
||||
},
|
||||
huawei: {
|
||||
name: '华为昇腾',
|
||||
logo: '华',
|
||||
slogan: '自主可控的AI算力基石',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.5,
|
||||
marketShare: '25%',
|
||||
patents: '5000+',
|
||||
revenue: '8.5亿',
|
||||
growth: '+45%'
|
||||
},
|
||||
nvidia: {
|
||||
name: '英伟达',
|
||||
logo: '英',
|
||||
slogan: '全球AI芯片的领导者',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.9,
|
||||
marketShare: '90%',
|
||||
patents: '8000+',
|
||||
revenue: '60.9亿',
|
||||
growth: '+122%'
|
||||
}
|
||||
};
|
||||
|
||||
const data = companyData[companyId] || companyData.cambricon;
|
||||
|
||||
// 更新页面内容
|
||||
document.getElementById('companyName').textContent = data.name;
|
||||
document.getElementById('companyLogo').textContent = data.logo;
|
||||
document.getElementById('companySlogan').textContent = data.slogan;
|
||||
document.getElementById('companyCategory').textContent = data.category;
|
||||
document.getElementById('moatScore').textContent = data.moatScore;
|
||||
document.getElementById('marketShare').textContent = data.marketShare;
|
||||
document.getElementById('patents').textContent = data.patents;
|
||||
document.getElementById('revenue').textContent = data.revenue;
|
||||
document.getElementById('growth').textContent = data.growth;
|
||||
}
|
||||
|
||||
// 平滑滚动导航
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
const target = document.getElementById(targetId);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,166 @@
|
||||
# AI产业链分析平台 - 设计风格
|
||||
|
||||
## 设计理念
|
||||
|
||||
### 核心概念
|
||||
**"数字时代的商业智慧"** - 将复杂的AI产业链分析转化为直观、专业的数字体验
|
||||
|
||||
### 设计原则
|
||||
1. **专业权威**: 体现深度分析的专业性和可信度
|
||||
2. **科技前沿**: 展现AI产业的创新性和未来感
|
||||
3. **数据驱动**: 突出数据可视化的重要性
|
||||
4. **简洁优雅**: 避免过度设计，保持内容聚焦
|
||||
|
||||
## 视觉语言
|
||||
|
||||
### 色彩系统
|
||||
**主色调**: 深蓝灰 (#1a1d29) - 专业、稳重、科技感
|
||||
**辅助色**:
|
||||
- 青蓝色 (#2563eb) - 科技、创新
|
||||
- 深青色 (#0891b2) - 数据、智能
|
||||
- 暖灰色 (#6b7280) - 中性、平衡
|
||||
|
||||
**功能色彩**:
|
||||
- 成功绿 (#059669) - 正向数据
|
||||
- 警告橙 (#d97706) - 中性数据
|
||||
- 错误红 (#dc2626) - 负向数据
|
||||
|
||||
**背景色**: 渐变从深蓝到黑色，营造深度感
|
||||
|
||||
### 字体系统
|
||||
**标题字体**: Noto Sans SC (粗体)
|
||||
- 现代、简洁、具有科技感
|
||||
- 用于主标题、导航、按钮
|
||||
|
||||
**正文字体**: Noto Serif SC (常规)
|
||||
- 优雅、易读、专业感
|
||||
- 用于正文内容、数据标签
|
||||
|
||||
**数据字体**: JetBrains Mono
|
||||
- 等宽字体，用于代码和数据展示
|
||||
|
||||
### 布局系统
|
||||
**网格系统**: 12列响应式网格
|
||||
**间距系统**: 基于8px的间距单位
|
||||
**圆角**: 8px统一圆角，体现现代感
|
||||
**阴影**: 微妙的投影，增加层次感
|
||||
|
||||
## 视觉效果
|
||||
|
||||
### 背景效果
|
||||
**主背景**: 使用shader-park创建的动态粒子场
|
||||
- 深蓝色基调
|
||||
- 缓慢移动的粒子
|
||||
- 微妙的连接线条
|
||||
- 响应鼠标移动的交互
|
||||
|
||||
### 数据可视化风格
|
||||
**图表配色**: 使用低饱和度的蓝色系渐变
|
||||
**动画效果**:
|
||||
- 数据加载动画
|
||||
- 悬停高亮效果
|
||||
- 平滑的过渡动画
|
||||
|
||||
### 交互效果
|
||||
**悬停效果**:
|
||||
- 卡片轻微上浮 (translateY: -4px)
|
||||
- 阴影加深
|
||||
- 颜色微妙变化
|
||||
|
||||
**点击效果**:
|
||||
- 微妙的缩放动画
|
||||
- 涟漪效果
|
||||
- 状态变化反馈
|
||||
|
||||
### 滚动动画
|
||||
**触发机制**: 元素进入视口上半部分时触发
|
||||
**动画效果**:
|
||||
- 淡入效果 (opacity: 0 → 1)
|
||||
- 上移效果 (translateY: 20px → 0)
|
||||
- 交错延迟 (stagger: 100ms)
|
||||
|
||||
## 组件设计
|
||||
|
||||
### 公司卡片
|
||||
**设计特点**:
|
||||
- 圆角矩形设计
|
||||
- 微妙的边框和阴影
|
||||
- 公司logo和关键信息
|
||||
- 护城河评分可视化
|
||||
|
||||
**交互状态**:
|
||||
- 默认: 轻微阴影
|
||||
- 悬停: 上浮 + 阴影加深
|
||||
- 选中: 边框高亮
|
||||
|
||||
### 数据图表
|
||||
**设计原则**:
|
||||
- 简洁的配色方案
|
||||
- 清晰的标签和图例
|
||||
- 响应式设计
|
||||
- 交互式提示框
|
||||
|
||||
### 导航组件
|
||||
**设计风格**:
|
||||
- 顶部固定导航栏
|
||||
- 半透明背景
|
||||
- 清晰的层级结构
|
||||
- 当前页面高亮
|
||||
|
||||
## 响应式设计
|
||||
|
||||
### 断点设置
|
||||
- 移动端: 320px - 767px
|
||||
- 平板端: 768px - 1199px
|
||||
- 桌面端: 1200px+
|
||||
|
||||
### 适配策略
|
||||
**移动端**:
|
||||
- 单列布局
|
||||
- 大尺寸触摸目标
|
||||
- 简化的导航
|
||||
|
||||
**平板端**:
|
||||
- 两列布局
|
||||
- 可折叠侧边栏
|
||||
- 触摸优化
|
||||
|
||||
**桌面端**:
|
||||
- 多列布局
|
||||
- 丰富的悬停效果
|
||||
- 完整的交互功能
|
||||
|
||||
## 品牌元素
|
||||
|
||||
### Logo设计概念
|
||||
**设计思路**: 抽象的神经网络节点连接图案
|
||||
**颜色**: 青蓝色渐变
|
||||
**寓意**: AI产业的连接性和智能化
|
||||
|
||||
### 图标系统
|
||||
**风格**: 线性图标
|
||||
**粗细**: 2px统一粗细
|
||||
**颜色**: 继承文本颜色
|
||||
**大小**: 16px, 20px, 24px标准尺寸
|
||||
|
||||
### 插图风格
|
||||
**风格**: 扁平化几何插图
|
||||
**配色**: 品牌色彩系统
|
||||
**主题**: AI、数据、科技元素
|
||||
|
||||
## 可访问性设计
|
||||
|
||||
### 颜色对比度
|
||||
- 所有文本与背景对比度 ≥ 4.5:1
|
||||
- 大文本对比度 ≥ 3:1
|
||||
- 使用工具验证对比度
|
||||
|
||||
### 交互反馈
|
||||
- 清晰的焦点指示器
|
||||
- 足够的点击目标大小 (44px+)
|
||||
- 明确的加载状态
|
||||
|
||||
### 内容结构
|
||||
- 语义化HTML结构
|
||||
- 清晰的标题层级
|
||||
- 有意义的链接文本
|
||||
@@ -0,0 +1,665 @@
|
||||
<!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="/research/js/3.4.16.js"></script>
|
||||
<script src="/libai/anime.min.js"></script>
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<script src="/libai/shader-park-core.esm.js" type="module"></script>
|
||||
<link href="/libai/googlecss2.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-bg: #1a1d29;
|
||||
--secondary-bg: #2563eb;
|
||||
--accent-color: #0891b2;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cbd5e1;
|
||||
--card-bg: rgba(30, 41, 59, 0.8);
|
||||
--border-color: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
background: linear-gradient(135deg, var(--primary-bg) 0%, #0f172a 100%);
|
||||
color: var(--text-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('./resources/hero-ai-chain.png') center/cover;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, rgba(26, 29, 41, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
border-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 8px 16px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn:hover, .filter-btn.active {
|
||||
background: var(--secondary-bg);
|
||||
color: white;
|
||||
border-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
.company-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.company-card {
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.moat-indicator {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 400px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.company-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Background -->
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 nav-blur">
|
||||
<div class="container">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#overview" class="text-gray-300 hover:text-white transition-colors">概览</a>
|
||||
<a href="#companies" class="text-gray-300 hover:text-white transition-colors">公司矩阵</a>
|
||||
<a href="#analysis" class="text-gray-300 hover:text-white transition-colors">深度分析</a>
|
||||
<a href="company.html" class="text-gray-300 hover:text-white transition-colors">公司详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-screen flex items-center justify-center pt-16">
|
||||
<div class="container text-center">
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in">
|
||||
<span class="gradient-text">AI产业链</span><br>
|
||||
<span class="text-white">护城河深度分析</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto fade-in">
|
||||
深入解析中国AI上市公司的技术壁垒、市场地位与竞争优势
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center fade-in">
|
||||
<button class="btn-primary" onclick="scrollToSection('companies')">
|
||||
探索公司矩阵
|
||||
</button>
|
||||
<button class="border border-gray-500 px-6 py-3 rounded-lg text-gray-300 hover:border-blue-500 hover:text-white transition-colors" onclick="scrollToSection('analysis')">
|
||||
查看分析报告
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-16 fade-in">
|
||||
<h2 class="text-4xl font-bold mb-6">产业链全景</h2>
|
||||
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
AI产业链分为上、中、下游三个层次，每个层次都有其独特的技术壁垒和市场特征
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||||
<!-- Upstream -->
|
||||
<div class="card p-8 fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">🔬</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">上游：基础层</h3>
|
||||
<p class="text-gray-400">AI芯片、算力、数据、算法</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">技术壁垒</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-4/5 h-full bg-green-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">资本密集度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-5/6 h-full bg-red-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">市场集中度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-3/4 h-full bg-yellow-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midstream -->
|
||||
<div class="card p-8 fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">⚙️</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">中游：技术层</h3>
|
||||
<p class="text-gray-400">AI开发框架、模型、平台</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">技术壁垒</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-3/4 h-full bg-green-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">生态重要性</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-5/6 h-full bg-blue-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">标准化程度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-2/3 h-full bg-purple-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Downstream -->
|
||||
<div class="card p-8 fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">🚀</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">下游：应用层</h3>
|
||||
<p class="text-gray-400">行业解决方案、产品服务</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">市场成熟度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-3/5 h-full bg-green-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">应用场景</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-5/6 h-full bg-orange-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">商业化程度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-4/5 h-full bg-red-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Market Data Chart -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center">AI产业市场规模分析</h3>
|
||||
<div id="marketChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Companies Section -->
|
||||
<section id="companies" class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-16 fade-in">
|
||||
<h2 class="text-4xl font-bold mb-6">公司矩阵</h2>
|
||||
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
深度分析AI产业链各环节的核心企业及其护城河优势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter Buttons -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-12 fade-in">
|
||||
<button class="filter-btn active" data-filter="all">全部</button>
|
||||
<button class="filter-btn" data-filter="upstream">上游</button>
|
||||
<button class="filter-btn" data-filter="midstream">中游</button>
|
||||
<button class="filter-btn" data-filter="downstream">下游</button>
|
||||
<button class="filter-btn" data-filter="chips">AI芯片</button>
|
||||
<button class="filter-btn" data-filter="algorithm">算法</button>
|
||||
<button class="filter-btn" data-filter="application">应用</button>
|
||||
</div>
|
||||
|
||||
<!-- Company Grid -->
|
||||
<div class="company-grid" id="companyGrid">
|
||||
<!-- Upstream Companies -->
|
||||
<div class="company-card card fade-in" data-category="upstream chips" data-company="cambricon">
|
||||
<div class="company-logo">寒</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">寒武纪</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">国产AI芯片技术先锋</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术壁垒</span>
|
||||
<span class="text-green-400">9.2/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场份额</span>
|
||||
<span class="text-blue-400">15%</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>专利数量</span>
|
||||
<span class="text-purple-400">2700+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：Cambricon指令集、存算一体架构
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="upstream chips" data-company="huawei">
|
||||
<div class="company-logo">华</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">华为昇腾</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">自主可控AI算力基石</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术壁垒</span>
|
||||
<span class="text-green-400">9.5/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>生态完整性</span>
|
||||
<span class="text-blue-400">9.8/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场地位</span>
|
||||
<span class="text-purple-400">领导者</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：达芬奇架构、MindSpore框架
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="upstream chips" data-company="nvidia">
|
||||
<div class="company-logo">英</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">英伟达</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">全球AI芯片领导者</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术壁垒</span>
|
||||
<span class="text-green-400">9.9/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场份额</span>
|
||||
<span class="text-blue-400">90%+</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>生态规模</span>
|
||||
<span class="text-purple-400">400万+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：CUDA生态系统、GPU性能
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="upstream data" data-company="iflytek">
|
||||
<div class="company-logo">科</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">科大讯飞</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">垂直行业数据壁垒</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>数据壁垒</span>
|
||||
<span class="text-green-400">9.3/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术领先性</span>
|
||||
<span class="text-blue-400">9.1/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>应用场景</span>
|
||||
<span class="text-purple-400">教育/医疗</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：垂直行业数据、语音识别技术
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midstream Companies -->
|
||||
<div class="company-card card fade-in" data-category="midstream framework" data-company="baidu">
|
||||
<div class="company-logo">百</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">百度飞桨</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">深度学习框架生态</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>开发者数量</span>
|
||||
<span class="text-green-400">2333万</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>生态成熟度</span>
|
||||
<span class="text-blue-400">9.0/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>硬件适配</span>
|
||||
<span class="text-purple-400">40+芯片</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：庞大开发者生态、本土化优势
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="midstream framework" data-company="huawei-mindspore">
|
||||
<div class="company-logo">华</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">华为MindSpore</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">自主可控AI框架</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>自主可控</span>
|
||||
<span class="text-green-400">9.8/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>全场景支持</span>
|
||||
<span class="text-blue-400">9.5/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>硬件协同</span>
|
||||
<span class="text-purple-400">昇腾优化</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：软硬件一体化、自主可控
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Downstream Companies -->
|
||||
<div class="company-card card fade-in" data-category="downstream application" data-company="hikvision">
|
||||
<div class="company-logo">海</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">海康威视</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">智能安防领导者</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场份额</span>
|
||||
<span class="text-green-400">全球第一</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术融合</span>
|
||||
<span class="text-blue-400">AI+IoT</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>准确率</span>
|
||||
<span class="text-purple-400">99%+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：物联感知+AI深度融合
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="downstream application" data-company="dahua">
|
||||
<div class="company-logo">大</div>
|
||||
<div class="moat-indicator" style="background: #d97706;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">大华股份</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">智慧物联解决方案</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场地位</span>
|
||||
<span class="text-green-400">全球第二</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>国内份额</span>
|
||||
<span class="text-blue-400">12%+</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>转型进度</span>
|
||||
<span class="text-purple-400">AIoT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：全面产品线、规模效应
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Analysis Section -->
|
||||
<section id="analysis" class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-16 fade-in">
|
||||
<h2 class="text-4xl font-bold mb-6">深度分析</h2>
|
||||
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
基于多维度数据分析，洞察AI产业竞争格局与发展趋势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 mb-16">
|
||||
<!-- Technology Barrier Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">技术壁垒分析</h3>
|
||||
<div id="techBarrierChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Market Share Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">市场份额分布</h3>
|
||||
<div id="marketShareChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Insights -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">核心洞察</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-4 text-blue-400">护城河特征</h4>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>技术壁垒：</strong>核心技术专利和持续创新能力</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>数据壁垒：</strong>垂直行业高质量数据积累</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>生态壁垒：</strong>开发者社区和合作伙伴网络</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>规模壁垒：</strong>市场份额和成本优势</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-4 text-purple-400">发展趋势</h4>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>国产替代：</strong>自主可控成为关键驱动力</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>软硬一体：</strong>软硬件协同优化趋势明显</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>垂直深耕：</strong>行业应用深度决定价值</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>生态竞争：</strong>平台化服务能力成为关键</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-800">
|
||||
<div class="container text-center">
|
||||
<div class="flex items-center justify-center space-x-2 mb-4">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析平台</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2025 AI产业链护城河深度分析. 专业数据驱动的商业洞察
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
# AI产业链分析平台 - 交互设计
|
||||
|
||||
## 核心交互功能
|
||||
|
||||
### 1. 智能筛选系统
|
||||
**功能描述**: 用户可以通过多个维度筛选AI公司
|
||||
**交互方式**:
|
||||
- 产业链层级筛选 (上游/中游/下游)
|
||||
- 技术领域筛选 (芯片/算法/数据/应用)
|
||||
- 市值规模筛选 (大型/中型/初创)
|
||||
- 地理位置筛选 (北京/上海/深圳等)
|
||||
|
||||
**交互流程**:
|
||||
1. 用户点击筛选器按钮
|
||||
2. 展开多选下拉菜单
|
||||
3. 选择筛选条件
|
||||
4. 实时更新公司网格显示
|
||||
5. 显示筛选结果数量
|
||||
|
||||
### 2. 公司对比工具
|
||||
**功能描述**: 用户可以选择多家公司进行深度对比
|
||||
**交互方式**:
|
||||
- 在公司卡片上点击"添加对比"
|
||||
- 最多选择4家公司进行对比
|
||||
- 打开对比面板显示关键指标
|
||||
|
||||
**对比维度**:
|
||||
- 市值和财务数据
|
||||
- 技术专利数量
|
||||
- 市场份额
|
||||
- 护城河深度评分
|
||||
- 产品线对比
|
||||
|
||||
### 3. 交互式数据可视化
|
||||
**功能描述**: 丰富的图表支持用户交互探索
|
||||
**图表类型**:
|
||||
- **产业链地图**: 点击节点查看公司详情
|
||||
- **市场份额饼图**: 悬停显示具体数值
|
||||
- **技术壁垒雷达图**: 多维度对比
|
||||
- **发展趋势折线图**: 时间轴交互
|
||||
- **地理分布热力图**: 区域集中度分析
|
||||
|
||||
**交互行为**:
|
||||
- 悬停显示详细数据
|
||||
- 点击钻取到具体数据
|
||||
- 拖拽时间轴查看历史数据
|
||||
- 缩放和平移地图视图
|
||||
|
||||
### 4. 深度分析导航
|
||||
**功能描述**: 引导用户深入了解护城河分析
|
||||
**导航结构**:
|
||||
- 技术壁垒分析
|
||||
- 数据资源分析
|
||||
- 生态系统分析
|
||||
- 市场表现分析
|
||||
- 未来趋势预测
|
||||
|
||||
**交互方式**:
|
||||
- 侧边栏导航菜单
|
||||
- 面包屑导航
|
||||
- 相关推荐链接
|
||||
- 返回顶部按钮
|
||||
|
||||
## 用户体验流程
|
||||
|
||||
### 首次访问流程
|
||||
1. **Landing**: 用户进入主页，看到震撼的hero区域
|
||||
2. **概览**: 快速了解AI产业链全景
|
||||
3. **探索**: 通过筛选器找到感兴趣的公司
|
||||
4. **深入**: 点击公司卡片查看详细分析
|
||||
5. **对比**: 使用对比工具进行多公司分析
|
||||
|
||||
### 深度分析流程
|
||||
1. **选择关注点**: 用户选择特定的产业链环节
|
||||
2. **查看分析**: 阅读深度的护城河分析
|
||||
3. **数据验证**: 通过图表验证分析结论
|
||||
4. **扩展探索**: 查看相关公司和技术
|
||||
5. **形成洞察**: 获得完整的市场认知
|
||||
|
||||
## 响应式设计考虑
|
||||
|
||||
### 桌面端 (1200px+)
|
||||
- 三栏布局: 侧边栏 + 主内容 + 信息面板
|
||||
- 大尺寸图表和详细数据表格
|
||||
- 鼠标悬停效果和右键菜单
|
||||
|
||||
### 平板端 (768px-1199px)
|
||||
- 两栏布局: 可折叠侧边栏 + 主内容
|
||||
- 触摸友好的图表交互
|
||||
- 简化的对比功能
|
||||
|
||||
### 移动端 (320px-767px)
|
||||
- 单栏布局: 全屏内容展示
|
||||
- 底部导航栏
|
||||
- 手势操作支持
|
||||
- 简化的筛选和对比功能
|
||||
|
||||
## 可访问性设计
|
||||
|
||||
### 键盘导航
|
||||
- Tab键顺序优化
|
||||
- 快捷键支持 (Ctrl+K 快速搜索)
|
||||
- 焦点指示器清晰可见
|
||||
|
||||
### 屏幕阅读器支持
|
||||
- 语义化HTML结构
|
||||
- ARIA标签和角色定义
|
||||
- 图表的文字描述替代
|
||||
|
||||
### 视觉设计
|
||||
- 高对比度颜色方案
|
||||
- 可调节的字体大小
|
||||
- 色盲友好的配色
|
||||
|
||||
## 性能优化
|
||||
|
||||
### 加载策略
|
||||
- 关键内容优先加载
|
||||
- 图片懒加载
|
||||
- 图表按需渲染
|
||||
- 预加载关键资源
|
||||
|
||||
### 交互优化
|
||||
- 防抖和节流处理
|
||||
- 虚拟滚动长列表
|
||||
- 缓存筛选结果
|
||||
- 渐进式数据加载
|
||||
@@ -0,0 +1,637 @@
|
||||
// AI产业链分析平台 - 主要JavaScript文件
|
||||
|
||||
// 全局变量
|
||||
let currentFilter = 'all';
|
||||
let marketChart, techBarrierChart, marketShareChart;
|
||||
|
||||
// 公司数据
|
||||
const companiesData = {
|
||||
cambricon: {
|
||||
name: '寒武纪',
|
||||
category: 'upstream',
|
||||
moatScore: 9.2,
|
||||
marketShare: 15,
|
||||
patents: 2700,
|
||||
revenue: 2.3,
|
||||
growth: 65
|
||||
},
|
||||
huawei: {
|
||||
name: '华为昇腾',
|
||||
category: 'upstream',
|
||||
moatScore: 9.5,
|
||||
marketShare: 25,
|
||||
patents: 5000,
|
||||
revenue: 8.5,
|
||||
growth: 45
|
||||
},
|
||||
nvidia: {
|
||||
name: '英伟达',
|
||||
category: 'upstream',
|
||||
moatScore: 9.9,
|
||||
marketShare: 90,
|
||||
patents: 8000,
|
||||
revenue: 60.9,
|
||||
growth: 122
|
||||
},
|
||||
iflytek: {
|
||||
name: '科大讯飞',
|
||||
category: 'upstream',
|
||||
moatScore: 9.1,
|
||||
marketShare: 18,
|
||||
patents: 3200,
|
||||
revenue: 18.3,
|
||||
growth: 25
|
||||
},
|
||||
baidu: {
|
||||
name: '百度飞桨',
|
||||
category: 'midstream',
|
||||
moatScore: 9.0,
|
||||
marketShare: 35,
|
||||
developers: 2333,
|
||||
models: 110,
|
||||
growth: 40
|
||||
},
|
||||
hikvision: {
|
||||
name: '海康威视',
|
||||
category: 'downstream',
|
||||
moatScore: 8.8,
|
||||
marketShare: 28,
|
||||
revenue: 81.2,
|
||||
accuracy: 99,
|
||||
growth: 12
|
||||
}
|
||||
};
|
||||
|
||||
// DOM加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeAnimations();
|
||||
initializeCharts();
|
||||
initializeFilters();
|
||||
initializeScrollEffects();
|
||||
});
|
||||
|
||||
// 初始化滚动动画
|
||||
function initializeAnimations() {
|
||||
// 页面加载动画
|
||||
anime({
|
||||
targets: '.fade-in',
|
||||
opacity: [0, 1],
|
||||
translateY: [30, 0],
|
||||
delay: anime.stagger(200),
|
||||
duration: 800,
|
||||
easing: 'easeOutQuart'
|
||||
});
|
||||
|
||||
// 公司卡片动画
|
||||
anime({
|
||||
targets: '.company-card',
|
||||
scale: [0.9, 1],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(100, {start: 500}),
|
||||
duration: 600,
|
||||
easing: 'easeOutBack'
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initializeCharts() {
|
||||
// 市场规模分析图表
|
||||
const marketChartDom = document.getElementById('marketChart');
|
||||
marketChart = echarts.init(marketChartDom);
|
||||
|
||||
const marketOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: 'AI产业市场规模趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 18 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['中国AI市场', '全球AI市场', 'AI芯片市场'],
|
||||
textStyle: { color: '#cbd5e1' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '中国AI市场',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [150, 220, 320, 450, 620, 850],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(37, 99, 235, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(37, 99, 235, 0.05)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '全球AI市场',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [1200, 1650, 2200, 2900, 3800, 4900],
|
||||
lineStyle: { color: '#0891b2', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(8, 145, 178, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(8, 145, 178, 0.05)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'AI芯片市场',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [180, 280, 420, 650, 950, 1400],
|
||||
lineStyle: { color: '#059669', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(5, 150, 105, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(5, 150, 105, 0.05)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
marketChart.setOption(marketOption);
|
||||
|
||||
// 技术壁垒分析图表
|
||||
const techChartDom = document.getElementById('techBarrierChart');
|
||||
techBarrierChart = echarts.init(techChartDom);
|
||||
|
||||
const techOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '各公司技术壁垒评分',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['寒武纪', '华为昇腾', '英伟达', '科大讯飞', '百度飞桨', '海康威视'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8', rotate: 45 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 10,
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [9.2, 9.5, 9.9, 9.1, 9.0, 8.8],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#2563eb' },
|
||||
{ offset: 1, color: '#0891b2' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: { color: '#059669' }
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
techBarrierChart.setOption(techOption);
|
||||
|
||||
// 市场份额分析图表
|
||||
const shareChartDom = document.getElementById('marketShareChart');
|
||||
marketShareChart = echarts.init(shareChartDom);
|
||||
|
||||
const shareOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: 'AI芯片市场份额',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: '0%',
|
||||
textStyle: { color: '#94a3b8' }
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '45%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '18',
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 90, name: '英伟达', itemStyle: { color: '#2563eb' } },
|
||||
{ value: 25, name: '华为昇腾', itemStyle: { color: '#0891b2' } },
|
||||
{ value: 15, name: '寒武纪', itemStyle: { color: '#059669' } },
|
||||
{ value: 8, name: '其他', itemStyle: { color: '#6b7280' } }
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
marketShareChart.setOption(shareOption);
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', function() {
|
||||
marketChart.resize();
|
||||
techBarrierChart.resize();
|
||||
marketShareChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化筛选功能
|
||||
function initializeFilters() {
|
||||
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||
const companyCards = document.querySelectorAll('.company-card');
|
||||
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// 更新按钮状态
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
const filter = this.getAttribute('data-filter');
|
||||
currentFilter = filter;
|
||||
|
||||
// 筛选公司卡片
|
||||
companyCards.forEach(card => {
|
||||
const categories = card.getAttribute('data-category');
|
||||
|
||||
if (filter === 'all' || categories.includes(filter)) {
|
||||
card.style.display = 'block';
|
||||
anime({
|
||||
targets: card,
|
||||
opacity: [0, 1],
|
||||
scale: [0.8, 1],
|
||||
duration: 400,
|
||||
easing: 'easeOutBack'
|
||||
});
|
||||
} else {
|
||||
anime({
|
||||
targets: card,
|
||||
opacity: [1, 0],
|
||||
scale: [1, 0.8],
|
||||
duration: 300,
|
||||
easing: 'easeInBack',
|
||||
complete: function() {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 公司卡片点击事件
|
||||
companyCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
const companyId = this.getAttribute('data-company');
|
||||
if (companyId) {
|
||||
showCompanyDetails(companyId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 显示公司详情
|
||||
function showCompanyDetails(companyId) {
|
||||
const company = companiesData[companyId];
|
||||
if (!company) return;
|
||||
|
||||
// 创建模态框显示公司详情
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
||||
modal.innerHTML = `
|
||||
<div class="bg-gray-900 rounded-lg p-8 max-w-2xl w-full mx-4 max-h-96 overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-2xl font-bold">${company.name} - 详细分析</h3>
|
||||
<button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-400 hover:text-white">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-3 text-blue-400">基本指标</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>护城河评分:</span>
|
||||
<span class="text-green-400">${company.moatScore}/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>市场份额:</span>
|
||||
<span class="text-blue-400">${company.marketShare}%</span>
|
||||
</div>
|
||||
${company.patents ? `<div class="flex justify-between"><span>专利数量:</span><span class="text-purple-400">${company.patents}+</span></div>` : ''}
|
||||
${company.developers ? `<div class="flex justify-between"><span>开发者数:</span><span class="text-cyan-400">${company.developers}万</span></div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-3 text-purple-400">财务表现</h4>
|
||||
<div class="space-y-2">
|
||||
${company.revenue ? `<div class="flex justify-between"><span>营收规模:</span><span class="text-yellow-400">${company.revenue}亿元</span></div>` : ''}
|
||||
${company.growth ? `<div class="flex justify-between"><span>同比增长:</span><span class="text-green-400">+${company.growth}%</span></div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<button onclick="window.location.href='company.html?company=${companyId}'" class="btn-primary">
|
||||
查看完整分析报告
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// 添加动画
|
||||
anime({
|
||||
targets: modal.querySelector('div'),
|
||||
scale: [0.8, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 300,
|
||||
easing: 'easeOutBack'
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化滚动效果
|
||||
function initializeScrollEffects() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
|
||||
// 为图表添加动画
|
||||
if (entry.target.querySelector('.chart-container')) {
|
||||
animateChart(entry.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
document.querySelectorAll('.fade-in').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 图表动画
|
||||
function animateChart(container) {
|
||||
const chartContainer = container.querySelector('.chart-container');
|
||||
if (!chartContainer) return;
|
||||
|
||||
const chartId = chartContainer.id;
|
||||
|
||||
// 根据图表类型添加不同的动画
|
||||
switch(chartId) {
|
||||
case 'marketChart':
|
||||
animateMarketChart();
|
||||
break;
|
||||
case 'techBarrierChart':
|
||||
animateTechBarrierChart();
|
||||
break;
|
||||
case 'marketShareChart':
|
||||
animateMarketShareChart();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 市场规模图表动画
|
||||
function animateMarketChart() {
|
||||
if (!marketChart) return;
|
||||
|
||||
const option = marketChart.getOption();
|
||||
const newOption = { ...option };
|
||||
|
||||
// 重置数据为0
|
||||
newOption.series.forEach(series => {
|
||||
series.data = series.data.map(() => 0);
|
||||
});
|
||||
|
||||
marketChart.setOption(newOption);
|
||||
|
||||
// 动画显示数据
|
||||
setTimeout(() => {
|
||||
marketChart.setOption(option);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 技术壁垒图表动画
|
||||
function animateTechBarrierChart() {
|
||||
if (!techBarrierChart) return;
|
||||
|
||||
const option = techBarrierChart.getOption();
|
||||
const newOption = { ...option };
|
||||
|
||||
// 重置数据为0
|
||||
newOption.series[0].data = newOption.series[0].data.map(() => 0);
|
||||
|
||||
techBarrierChart.setOption(newOption);
|
||||
|
||||
// 动画显示数据
|
||||
setTimeout(() => {
|
||||
techBarrierChart.setOption(option);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 市场份额图表动画
|
||||
function animateMarketShareChart() {
|
||||
if (!marketShareChart) return;
|
||||
|
||||
const option = marketShareChart.getOption();
|
||||
const newOption = { ...option };
|
||||
|
||||
// 重置数据为0
|
||||
newOption.series[0].data.forEach(item => {
|
||||
item.value = 0;
|
||||
});
|
||||
|
||||
marketShareChart.setOption(newOption);
|
||||
|
||||
// 动画显示数据
|
||||
setTimeout(() => {
|
||||
marketShareChart.setOption(option);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 滚动到指定区域
|
||||
function scrollToSection(sectionId) {
|
||||
const section = document.getElementById(sectionId);
|
||||
if (section) {
|
||||
section.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 平滑滚动导航
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
scrollToSection(targetId);
|
||||
});
|
||||
});
|
||||
|
||||
// 导航栏滚动效果
|
||||
window.addEventListener('scroll', function() {
|
||||
const nav = document.querySelector('nav');
|
||||
if (window.scrollY > 100) {
|
||||
nav.style.background = 'rgba(30, 41, 59, 0.95)';
|
||||
} else {
|
||||
nav.style.background = 'rgba(30, 41, 59, 0.8)';
|
||||
}
|
||||
});
|
||||
|
||||
// 添加鼠标移动视差效果
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
const mouseX = e.clientX / window.innerWidth;
|
||||
const mouseY = e.clientY / window.innerHeight;
|
||||
|
||||
// 为hero背景添加微妙的视差效果
|
||||
const heroBg = document.querySelector('.hero-bg');
|
||||
if (heroBg) {
|
||||
const moveX = (mouseX - 0.5) * 20;
|
||||
const moveY = (mouseY - 0.5) * 20;
|
||||
heroBg.style.transform = `translate(${moveX}px, ${moveY}px)`;
|
||||
}
|
||||
});
|
||||
|
||||
// 键盘快捷键支持
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// Ctrl/Cmd + K 快速搜索
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
// 这里可以添加搜索功能
|
||||
console.log('快速搜索功能');
|
||||
}
|
||||
|
||||
// ESC 关闭模态框
|
||||
if (e.key === 'Escape') {
|
||||
const modal = document.querySelector('.fixed.inset-0');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 性能优化：防抖和节流
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
function throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function() {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => inThrottle = false, limit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用防抖优化窗口大小改变事件
|
||||
const debouncedResize = debounce(function() {
|
||||
if (marketChart) marketChart.resize();
|
||||
if (techBarrierChart) techBarrierChart.resize();
|
||||
if (marketShareChart) marketShareChart.resize();
|
||||
}, 250);
|
||||
|
||||
window.addEventListener('resize', debouncedResize);
|
||||
|
||||
// 使用节流优化滚动事件
|
||||
const throttledScroll = throttle(function() {
|
||||
// 滚动相关的处理
|
||||
}, 16);
|
||||
|
||||
window.addEventListener('scroll', throttledScroll);
|
||||
@@ -0,0 +1,71 @@
|
||||
# AI产业链上市公司护城河深度分析 - 项目大纲
|
||||
|
||||
## 项目概述
|
||||
创建一个专业的AI产业链分析网站，展示中国AI上市公司的护城河深度分析，包含丰富的数据可视化和交互元素。
|
||||
|
||||
## 网站结构
|
||||
|
||||
### 1. 主页面 (index.html)
|
||||
- **Hero区域**: 动态背景效果 + 主标题
|
||||
- **产业链概览**: 上游、中游、下游的可视化展示
|
||||
- **公司矩阵**: 交互式公司卡片网格
|
||||
- **关键数据**: 市场数据可视化图表
|
||||
- **分析洞察**: 护城河深度分析摘要
|
||||
|
||||
### 2. 公司详情页 (company.html)
|
||||
- **公司概览**: 基本信息和核心业务
|
||||
- **护城河分析**: 深度技术分析
|
||||
- **市场表现**: 财务数据和市场份额
|
||||
- **竞争优势**: SWOT分析可视化
|
||||
- **未来发展**: 战略展望
|
||||
|
||||
### 3. 产业链分析页 (analysis.html)
|
||||
- **产业链全景**: 三层结构详细分析
|
||||
- **技术壁垒**: 核心技术对比
|
||||
- **市场格局**: 竞争态势分析
|
||||
- **发展趋势**: 未来预测
|
||||
|
||||
### 4. 数据看板页 (dashboard.html)
|
||||
- **实时数据**: 市场表现监控
|
||||
- **对比分析**: 多公司数据对比
|
||||
- **趋势预测**: 数据驱动的洞察
|
||||
- **交互图表**: 可筛选的数据可视化
|
||||
|
||||
## 核心功能
|
||||
|
||||
### 交互元素
|
||||
1. **公司筛选器**: 按产业链位置、市值、技术领域筛选
|
||||
2. **数据对比工具**: 多公司数据对比功能
|
||||
3. **交互式图表**: 可点击、悬停的数据可视化
|
||||
4. **搜索功能**: 公司和技术的快速搜索
|
||||
|
||||
### 视觉效果
|
||||
1. **动态背景**: 使用shader-park创建科技感的背景
|
||||
2. **数据动画**: 使用ECharts实现数据动画效果
|
||||
3. **滚动动画**: 使用Anime.js创建滚动触发动画
|
||||
4. **悬停效果**: 卡片和按钮的3D悬停效果
|
||||
|
||||
### 内容结构
|
||||
1. **上游**: AI芯片、算力、数据、算法
|
||||
2. **中游**: AI开发框架、模型、平台
|
||||
3. **下游**: 行业解决方案、产品服务
|
||||
|
||||
## 技术栈
|
||||
- **前端框架**: 纯HTML/CSS/JavaScript
|
||||
- **样式**: Tailwind CSS
|
||||
- **动画**: Anime.js
|
||||
- **图表**: ECharts.js
|
||||
- **特效**: shader-park, p5.js
|
||||
- **字体**: Noto Sans SC (标题), Noto Serif SC (正文)
|
||||
|
||||
## 设计原则
|
||||
- **专业权威**: 体现深度分析的专业性
|
||||
- **现代科技**: 展现AI产业的科技属性
|
||||
- **数据驱动**: 突出数据可视化的重要性
|
||||
- **交互友好**: 提供良好的用户体验
|
||||
|
||||
## 内容重点
|
||||
- 深度分析各公司的技术护城河
|
||||
- 展示市场数据和竞争格局
|
||||
- 提供交互式的数据探索体验
|
||||
- 突出中国AI产业的发展特色
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 970 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Reference in New Issue
Block a user