3825deb3e0
- 更新settings.local.json，移除冗余的权限设置，添加新的Playwright相关权限。 - 删除exhibition_demo_project_2025.md文档，清理不再使用的文件。 - 更新多个HTML页面，统一viewport设置，添加页面加载动画、错误处理和性能优化脚本。 - 统一使用Tailwind CSS的引入方式，提升页面加载性能。 - 增强导航组件，支持移动端菜单和返回顶部功能，改善用户体验。
2.6 KiB
2.6 KiB
展会Web前端项目记忆 - 2025年更新
项目概览
- 项目路径：
/web_frontend/web_result/ - 主题：新能源汽车产业博览会（NEVIT 2024）
- 技术栈：HTML5 + Tailwind CSS + GSAP动画 + Vue组件化
核心页面结构
1. 导航系统 (nav-component.js)
- 统一导航组件，自动适配页面路径
- 导航顺序：首页 → 展会概览 → 展览内容 → 布局设计 → 营销推广 → 预算分析 → 风险评估
- 移动端响应式菜单
2. 布局设计页面 (operation.html) - 重点页面
主题：AI驱动的展会布局设计系统
页面结构：
- Hero区：AI布局设计介绍，关键指标展示
- AI设计原理：三步流程（需求理解→方案生成→智能优化）
- Duoduo Agent系统：5阶段横向滚动展示
- 智能空间分析
- 智能设计生成
- 数字孪生建模
- 完整交付方案
- 设计工具链：CAD、3D建模、BIM协同、智能算法
- 成功案例展示
技术特点：
- GSAP ScrollTrigger横向滚动
- 深色主题设计系统
- Glass morphism效果
- 性能优化（避免过度动画）
3. 图片资源
- 路径：
/web_frontend/web_result/data/会展策划/image/ - 页面引用：
../data/会展策划/image/ - 主要图片：Whisk系列JPG文件
设计系统
颜色变量
--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子页面）
- 统一样式和交互
开发规范
- 性能优先：避免过度动画和复杂效果
- 响应式设计：移动端优先，渐进增强
- 组件复用：导航、返回顶部等通用组件
- 图片优化：使用lazy loading，合理压缩
- 代码组织：JS组件化，CSS模块化
最近更新 (2025-01-09)
- 重构operation.html为AI布局设计主题
- 优化GSAP横向滚动性能
- 修复图片路径问题
- 统一导航组件系统
- 实现深色主题设计语言