86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
|
# 展会Web前端项目记忆 - 2025年更新
|
|||
|
|
|
|||
|
|
## 项目概览
|
|||
|
|
- 项目路径：`/web_frontend/web_result/`
|
|||
|
|
- 主题：新能源汽车产业博览会（NEVIT 2024）
|
|||
|
|
- 技术栈：HTML5 + Tailwind CSS + GSAP动画 + Vue组件化
|
|||
|
|
|
|||
|
|
## 核心页面结构
|
|||
|
|
|
|||
|
|
### 1. 导航系统 (nav-component.js)
|
|||
|
|
- 统一导航组件，自动适配页面路径
|
|||
|
|
- 导航顺序：首页 → 展会概览 → 展览内容 → 布局设计 → 营销推广 → 预算分析 → 风险评估
|
|||
|
|
- 移动端响应式菜单
|
|||
|
|
|
|||
|
|
### 2. 布局设计页面 (operation.html) - 重点页面
|
|||
|
|
**主题**：AI驱动的展会布局设计系统
|
|||
|
|
|
|||
|
|
**页面结构**：
|
|||
|
|
1. Hero区：AI布局设计介绍，关键指标展示
|
|||
|
|
2. AI设计原理：三步流程（需求理解→方案生成→智能优化）
|
|||
|
|
3. Duoduo Agent系统：5阶段横向滚动展示
|
|||
|
|
- 智能空间分析
|
|||
|
|
- 智能设计生成
|
|||
|
|
- 数字孪生建模
|
|||
|
|
- 完整交付方案
|
|||
|
|
4. 设计工具链：CAD、3D建模、BIM协同、智能算法
|
|||
|
|
5. 成功案例展示
|
|||
|
|
|
|||
|
|
**技术特点**：
|
|||
|
|
- GSAP ScrollTrigger横向滚动
|
|||
|
|
- 深色主题设计系统
|
|||
|
|
- Glass morphism效果
|
|||
|
|
- 性能优化（避免过度动画）
|
|||
|
|
|
|||
|
|
### 3. 图片资源
|
|||
|
|
- 路径：`/web_frontend/web_result/data/会展策划/image/`
|
|||
|
|
- 页面引用：`../data/会展策划/image/`
|
|||
|
|
- 主要图片：Whisk系列JPG文件
|
|||
|
|
|
|||
|
|
## 设计系统
|
|||
|
|
|
|||
|
|
### 颜色变量
|
|||
|
|
```css
|
|||
|
|
--bg-primary: #0a0a0a;
|
|||
|
|
--bg-secondary: #111111;
|
|||
|
|
--accent: #646cff;
|
|||
|
|
--text-primary: #ffffff;
|
|||
|
|
--text-secondary: #a1a1aa;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 关键样式
|
|||
|
|
- Glass效果：`bg-white/5 backdrop-blur-lg border-white/10`
|
|||
|
|
- 渐变文字：`gradient-text` (emerald到blue渐变)
|
|||
|
|
- 卡片悬浮：`hover:transform hover:scale-105`
|
|||
|
|
|
|||
|
|
## 常见问题及解决方案
|
|||
|
|
|
|||
|
|
### 1. 图片路径
|
|||
|
|
- 从pages目录访问：使用`../data/`而非`../../data/`
|
|||
|
|
- 缺失图片替换：使用备用的Whisk系列图片
|
|||
|
|
|
|||
|
|
### 2. GSAP滚动优化
|
|||
|
|
- 避免滚动结束跳动：使用精确的end计算
|
|||
|
|
- 性能优化：减少will-change使用，避免过度动画
|
|||
|
|
- 移动端适配：使用matchMedia区分处理
|
|||
|
|
|
|||
|
|
### 3. 导航栏统一
|
|||
|
|
- 所有页面引入nav-component.js
|
|||
|
|
- 自动处理路径差异（首页vs子页面）
|
|||
|
|
- 统一样式和交互
|
|||
|
|
|
|||
|
|
## 开发规范
|
|||
|
|
|
|||
|
|
1. **性能优先**：避免过度动画和复杂效果
|
|||
|
|
2. **响应式设计**：移动端优先，渐进增强
|
|||
|
|
3. **组件复用**：导航、返回顶部等通用组件
|
|||
|
|
4. **图片优化**：使用lazy loading，合理压缩
|
|||
|
|
5. **代码组织**：JS组件化，CSS模块化
|
|||
|
|
|
|||
|
|
## 最近更新 (2025-01-09)
|
|||
|
|
|
|||
|
|
1. 重构operation.html为AI布局设计主题
|
|||
|
|
2. 优化GSAP横向滚动性能
|
|||
|
|
3. 修复图片路径问题
|
|||
|
|
4. 统一导航组件系统
|
|||
|
|
5. 实现深色主题设计语言
|