simonandClaude Code
f3f9d19da7
库文件整理: - 所有JS/CSS/字体库统一到lib/js/、lib/css/、lib/webfonts/ - 按名称-版本格式重命名(jquery-3.6.0.min.js等) - 删除约80个重复/废弃的库文件副本 - 更新17个文件中的引用路径 图表模式标准化: - moneyflow/realestate/estate3个页面从$.ajax/PHP注入转为fetch+loading overlay模式 - 新增moneyflowData/estateData两个AJAX端点 - chartmoneyflow.js、estate.js移至deprecated README.md更新为完整功能介绍 Co-Authored-By: Claude Code <noreply@anthropic.com>
665 lines
30 KiB
HTML
665 lines
30 KiB
HTML
<!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="/lib/js/tailwindcss-3.4.17.js"></script>
|
|
<script src="/lib/js/anime-3.2.min.js"></script>
|
|
<script src="/lib/js/echarts-5.4.2.js"></script>
|
|
<script src="/lib/js/shader-park-core-0.1.esm.js" type="module"></script>
|
|
<link href="/lib/css/google-fonts.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> |