# 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产业的发展特色