71 lines
2.5 KiB
Markdown
71 lines
2.5 KiB
Markdown
# 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产业的发展特色 |