优化项目配置和页面结构

- 更新settings.local.json,移除冗余的权限设置,添加新的Playwright相关权限。
- 删除exhibition_demo_project_2025.md文档,清理不再使用的文件。
- 更新多个HTML页面,统一viewport设置,添加页面加载动画、错误处理和性能优化脚本。
- 统一使用Tailwind CSS的引入方式,提升页面加载性能。
- 增强导航组件,支持移动端菜单和返回顶部功能,改善用户体验。
This commit is contained in:
Yep_Q
2025-09-10 02:35:16 +08:00
parent 6d3825c4ab
commit 3825deb3e0
21 changed files with 4735 additions and 1462 deletions

View File

@@ -0,0 +1,86 @@
# 展会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. 实现深色主题设计语言