2.5 KiB
2.5 KiB
AI产业链上市公司护城河深度分析 - 项目大纲
项目概述
创建一个专业的AI产业链分析网站，展示中国AI上市公司的护城河深度分析，包含丰富的数据可视化和交互元素。
网站结构
1. 主页面 (index.html)
- Hero区域: 动态背景效果 + 主标题
- 产业链概览: 上游、中游、下游的可视化展示
- 公司矩阵: 交互式公司卡片网格
- 关键数据: 市场数据可视化图表
- 分析洞察: 护城河深度分析摘要
2. 公司详情页 (company.html)
- 公司概览: 基本信息和核心业务
- 护城河分析: 深度技术分析
- 市场表现: 财务数据和市场份额
- 竞争优势: SWOT分析可视化
- 未来发展: 战略展望
3. 产业链分析页 (analysis.html)
- 产业链全景: 三层结构详细分析
- 技术壁垒: 核心技术对比
- 市场格局: 竞争态势分析
- 发展趋势: 未来预测
4. 数据看板页 (dashboard.html)
- 实时数据: 市场表现监控
- 对比分析: 多公司数据对比
- 趋势预测: 数据驱动的洞察
- 交互图表: 可筛选的数据可视化
核心功能
交互元素
- 公司筛选器: 按产业链位置、市值、技术领域筛选
- 数据对比工具: 多公司数据对比功能
- 交互式图表: 可点击、悬停的数据可视化
- 搜索功能: 公司和技术的快速搜索
视觉效果
- 动态背景: 使用shader-park创建科技感的背景
- 数据动画: 使用ECharts实现数据动画效果
- 滚动动画: 使用Anime.js创建滚动触发动画
- 悬停效果: 卡片和按钮的3D悬停效果
内容结构
- 上游: AI芯片、算力、数据、算法
- 中游: AI开发框架、模型、平台
- 下游: 行业解决方案、产品服务
技术栈
- 前端框架: 纯HTML/CSS/JavaScript
- 样式: Tailwind CSS
- 动画: Anime.js
- 图表: ECharts.js
- 特效: shader-park, p5.js
- 字体: Noto Sans SC (标题), Noto Serif SC (正文)
设计原则
- 专业权威: 体现深度分析的专业性
- 现代科技: 展现AI产业的科技属性
- 数据驱动: 突出数据可视化的重要性
- 交互友好: 提供良好的用户体验
内容重点
- 深度分析各公司的技术护城河
- 展示市场数据和竞争格局
- 提供交互式的数据探索体验
- 突出中国AI产业的发展特色