diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 45e68569..ace37932 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,85 +1,22 @@
 {
   "permissions": {
     "allow": [
-      "Bash(mkdir:*)",
-      "Bash(rm:*)",
-      "Bash(pip install:*)",
-      "Bash(python3:*)",
-      "Bash(source:*)",
-      "Bash(/usr/bin/python3:*)",
-      "Bash(python:*)",
-      "Bash(cat:*)",
-      "mcp__promptx__promptx_init",
-      "mcp__claude-code-mcp__claude_code",
-      "mcp__serena__activate_project",
-      "mcp__serena__check_onboarding_performed",
-      "mcp__serena__onboarding",
-      "mcp__serena__list_dir",
-      "mcp__serena__read_file",
-      "mcp__serena__search_for_pattern",
-      "mcp__serena__execute_shell_command",
-      "mcp__serena__think_about_collected_information",
-      "mcp__serena__write_memory",
-      "mcp__serena__list_memories",
-      "Bash(pip3 install:*)",
-      "Bash(chmod:*)",
-      "Bash(grep:*)",
-      "Bash(pip install pymysql pyyaml requests)",
-      "Bash(python3:*)",
-      "Bash(grep:*)",
-      "Bash(cat:*)",
-      "Bash(mv:*)",
-      "Bash(timeout 120 python src/test/2025-08-14_模型对比测试/model_comparison_test.py)",
-      "Bash(timeout 60 python src/test/2025-08-14_模型对比测试/test_deepseek_professional.py)",
-      "mcp__serena__create_text_file",
-      "mcp__serena__replace_regex",
-      "Bash(mysql:*)",
-      "Bash(tree:*)",
-      "Bash(pkill:*)",
-      "mcp__serena__replace_symbol_body",
-      "Bash(timeout 600 python3 src/就业管家首页/main.py)",
-      "mcp__serena__find_file",
-      "Bash(/Users/xiaoqi/Documents/Dev/Project/2025-08-12_Saas数据生成/venv/bin/python3 /Users/xiaoqi/Documents/Dev/Project/2025-08-12_Saas数据生成/src/就业管家首页/main.py)",
-      "Bash(/Users/xiaoqi/Documents/Dev/Project/2025-08-12_Saas数据生成/venv/bin/python3 run_full_generation.py)",
-      "Bash(/Users/xiaoqi/Documents/Dev/Project/2025-08-12_Saas数据生成/run.sh)",
-      "Bash(. venv/bin/activate)",
-      "Bash(./venv/bin/python3:*)",
-      "Bash(/Users/xiaoqi/Documents/Dev/Project/2025-08-12_Saas数据生成/venv/bin/python3 src/就业管家首页/main.py)",
-      "Bash(/Users/xiaoqi/Documents/Dev/Project/2025-08-12_Saas数据生成/venv/bin/python3:*)",
-      "mcp__sequential-thinking__sequentialthinking",
-      "Bash(test:*)",
-      "Bash(pnpm install:*)",
-      "Bash(pnpm:*)",
-      "Bash(nvm list:*)",
-      "Bash(export PNPM_HOME=\"/Users/xiaoqi/Library/pnpm\")",
-      "Bash(export PATH=\"$PNPM_HOME:$PATH\")",
-      "Bash(brew upgrade:*)",
-      "Bash(npm install:*)",
-      "Bash(git add:*)",
-      "Bash(export N8N_DEFAULT_LOCALE=zh-CN)",
-      "Bash(git pull:*)",
-      "Bash(git merge:*)",
-      "Bash(git checkout:*)",
-      "Bash(git stash:*)",
-      "Bash(git commit:*)",
-      "Bash(npm run dev:*)",
-      "Bash(npm run build:*)",
-      "Bash(npm run preview:*)",
-      "Bash(open http://localhost:4173)",
-      "Bash(find:*)",
-      "Bash(open index.html)",
-      "Bash(git push:*)",
-      "Bash(sed:*)",
-      "Bash(/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/n8n-n8n-1.109.2/start.bat)",
-      "Bash(curl:*)",
-      "Bash(node server.js)",
       "mcp__browser-tools__takeScreenshot",
-      "Bash(for file in pages/exhibition.html pages/marketing.html pages/operation.html pages/budget.html pages/risk.html)",
-      "Bash(do sed -i '' 's|</body>|    <script src=\"\"../js/nav-component.js\"\"></script>\\n</body>|' \"$file\")",
-      "Bash(done)",
       "mcp__playwright__browser_navigate",
-      "mcp__playwright__browser_take_screenshot"
+      "mcp__playwright__browser_wait_for",
+      "mcp__playwright__browser_click",
+      "mcp__playwright__browser_snapshot",
+      "mcp__playwright__browser_evaluate",
+      "mcp__browser-tools__getConsoleErrors",
+      "mcp__playwright__browser_console_messages",
+      "mcp__playwright__browser_close",
+      "Bash(for file in exhibition.html marketing.html operation.html overview.html)",
+      "Bash(do sed -i '' 's|<link href=\"\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\"\" rel=\"\"stylesheet\"\">|<script src=\"\"https://cdn.tailwindcss.com\"\"></script>|g' \"$file\")",
+      "Bash(done)",
+      "mcp__serena__delete_memory"
     ],
+    "deny": [],
+    "ask": [],
     "defaultMode": "acceptEdits",
     "additionalDirectories": [
       "/Users/xiaoqi/Documents"
diff --git a/.serena/memories/duoduo_agent_design_system.md b/.serena/memories/duoduo_agent_design_system.md
new file mode 100644
index 00000000..383ba9cd
--- /dev/null
+++ b/.serena/memories/duoduo_agent_design_system.md
@@ -0,0 +1,82 @@
+# Duoduo Agent 智能设计系统
+
+## 系统概述
+Duoduo Agent是一个AI驱动的展会布局设计系统，通过深度学习实现从需求到方案的智能转化。
+
+## 核心能力
+
+### 1. 技术指标
+- **交付时间**：20小时（传统2周）
+- **设计准确率**：95%
+- **成本节约**：80%
+- **一次通过率**：95%
+- **规范符合率**：99.9%
+
+### 2. 设计流程
+
+#### 阶段1：智能空间分析
+- NLP需求解析
+- 3D空间建模
+- 规范自动校验
+- 遗传算法优化
+- 处理时间：30秒
+
+#### 阶段2：智能设计生成  
+- 并行生成5-10个方案
+- 品牌VI风格迁移
+- 实时成本控制
+- 蒙特卡洛人流仿真
+- 处理时间：15分钟
+
+#### 阶段3：数字孪生建模
+- 物理环境仿真
+- VR沉浸式预览
+- 8K超高清渲染
+- 实时光线追踪
+- 材料真实映射
+
+#### 阶段4：完整交付
+- CAD施工图纸
+- 精确物料清单
+- 分步施工指南
+- 透明预算报表
+- 100%可执行率
+
+## 技术架构
+
+### 深度学习引擎
+- 10万+展会案例训练
+- 知识图谱匹配
+- 多目标优化求解
+- 实时迭代优化
+
+### 设计工具集成
+- AutoCAD 2024
+- 3DS Max + V-Ray
+- Revit BIM协同
+- 5000+ PBR材质库
+
+### 智能算法
+- 空间利用率优化
+- 人流动线模拟
+- 成本效果平衡
+- 消防建筑规范校验
+
+## 成功案例
+- 500+ 展会项目
+- 50+ 世界500强客户
+- 20+ 国家级展会
+- 98% 客户满意度
+
+## 竞争优势
+
+1. **精准度高**：基于海量数据持续优化
+2. **快速迭代**：实时修改，秒级响应
+3. **成本可控**：智能材料选择，预算监控
+4. **合规保障**：自动对标国家标准
+
+## API集成
+- RESTful API接口
+- 企业系统无缝对接
+- 24/7实时服务
+- 多格式文件导出
\ No newline at end of file
diff --git a/.serena/memories/exhibition_demo_project_2025.md b/.serena/memories/exhibition_demo_project_2025.md
deleted file mode 100644
index 5aa57f1d..00000000
--- a/.serena/memories/exhibition_demo_project_2025.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# 会展策划多Agent演示系统项目 - 2025-09-08
-
-## 项目概述
-构建一个基于React的Web演示系统，实时展示多Agent协同生成会展策划方案的完整过程。
-
-## 技术栈决策
-- **框架**: React 18 + TypeScript
-- **动画**: Framer Motion + CSS Animations
-- **样式**: Tailwind CSS (参考字节跳动、Flowith、Raycast设计风格)
-- **状态管理**: Zustand
-- **构建工具**: Vite
-
-## 项目文件结构
-```
-web_frontend/
-├── data/
-│   ├── Agent_prompt/         # 7个专业Agent的prompt文档
-│   │   ├── 信息检索专家.md
-│   │   ├── 格式编辑专家.md
-│   │   ├── 会展策划专家.md
-│   │   ├── 设计师专家.md
-│   │   ├── 财务预算专家.md
-│   │   ├── 活动执行专家.md
-│   │   └── 营销宣传专家.md
-│   └── 会展策划/
-│       └── 汽车展会展策划案_DEMO.md  # 演示输出文档
-├── doc/
-│   ├── 可行性分析.md         # 技术实施方案
-│   └── 会展策划工作流.md     # n8n工作流程图
-└── exhibition-demo/          # React演示系统
-```
-
-## 演示参数
-- **总时长**: 3分钟
-- **文字生成速度**: 30-40字/秒
-- **Agent Prompt展示**: 完整展示，逐步显示
-- **交互控制**: 暂时不支持跳过，保证演示完整性
-
-## 内容板块（6个独立页面）
-1. 策划案
-2. 展会介绍与预期效果
-3. 营销方案
-4. 现场运营方案
-5. 预算与收益分析
-6. 风险评估与应急预案
-
-## 演示流程设计
-1. 初始页面：展示Run按钮
-2. 点击Run：开始执行mermaid流程
-3. 每个Agent独立输出：
-   - 显示Agent头像和名称
-   - 展示Agent的Prompt
-   - 逐字生成文字内容（打字机效果）
-   - 图片加载时显示loading动画
-4. 生成完成后自动切换到下一个页面
-
-## 设计风格
-- **视觉风格**: 简洁实用、年轻化、高端感
-- **参考产品**: 火山引擎、Trea、Flowith、Raycast
-- **核心特征**: 
-  - 精致的微动画
-  - 清晰的信息层级
-  - 中性色调搭配品牌色
-  - 优雅的过渡效果
-
-## Git分支管理
-- **Main**: 主分支（已同步到Gitea）
-- **My_N8N**: n8n中文翻译功能
-- **Web_Create**: AgentDemo演示系统开发（当前分支）
\ No newline at end of file
diff --git a/.serena/memories/exhibition_web_frontend_2025.md b/.serena/memories/exhibition_web_frontend_2025.md
new file mode 100644
index 00000000..1489510d
--- /dev/null
+++ b/.serena/memories/exhibition_web_frontend_2025.md
@@ -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. 实现深色主题设计语言
\ No newline at end of file
diff --git a/n8n-n8n-1.109.2/n8n-20250910-022535.log b/n8n-n8n-1.109.2/n8n-20250910-022535.log
new file mode 100644
index 00000000..5956a53d
--- /dev/null
+++ b/n8n-n8n-1.109.2/n8n-20250910-022535.log
@@ -0,0 +1,23 @@
+
+> n8n-monorepo@1.109.2 start /Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/n8n-n8n-1.109.2
+> run-script-os
+
+
+> n8n-monorepo@1.109.2 start:default
+> cd packages/cli/bin && ./n8n
+
+Permissions 0644 for n8n settings file /Users/xiaoqi/.n8n/config are too wide. This is ignored for now, but in the future n8n will attempt to change the permissions automatically. To automatically enforce correct permissions now set N8N_ENFORCE_SETTINGS_FILE_PERMISSIONS=true (recommended), or turn this check off set N8N_ENFORCE_SETTINGS_FILE_PERMISSIONS=false.
+Initializing n8n process
+n8n ready on ::, port 5678
+n8n Task Broker ready on 127.0.0.1, port 5679
+Initializing AuthRolesService...
+AuthRolesService initialized successfully.
+[license SDK] Skipping renewal on init: license cert is not initialized
+Registered runner "JS Task Runner" (MUfnTJM56msr0saFg9y96) 
+Version: 1.109.2
+Locale: zh-CN
+
+Editor is now accessible via:
+http://localhost:5678
+(node:40550) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
+(Use `node --trace-deprecation ...` to show where the warning was created)
diff --git a/web_frontend/web_result/index.html b/web_frontend/web_result/index.html
index 4811997e..6db329fa 100644
--- a/web_frontend/web_result/index.html
+++ b/web_frontend/web_result/index.html
@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <title>2024长三角国际新能源汽车与智能交通产业博览会</title>
     
     <!-- 预加载关键资源 -->
@@ -14,11 +14,23 @@
     <link rel="stylesheet" href="css/animations.css">
     
     <!-- Tailwind CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
     
     <!-- 字体 -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
     
+    <!-- 错误处理（需要最早加载） -->
+    <script src="js/error-handler.js"></script>
+    
+    <!-- 页面加载动画（需要尽早加载） -->
+    <script src="js/page-loader.js"></script>
+    
+    <!-- 移动端优化 -->
+    <script src="js/mobile-optimize.js"></script>
+    
+    <!-- 性能优化 -->
+    <script src="js/performance-optimizer.js"></script>
+    
     <!-- Font Awesome 图标 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -103,18 +115,7 @@
     </style>
 </head>
 <body class="bg-gray-50 loading">
-    <!-- 页面加载器 -->
-    <div class="page-loader" id="pageLoader">
-        <div class="loader-content">
-            <div class="loader-logo">
-                <i class="fas fa-car text-4xl text-emerald-500"></i>
-            </div>
-            <div class="loader-text">加载中...</div>
-            <div class="loader-progress">
-                <div class="loader-progress-bar"></div>
-            </div>
-        </div>
-    </div>
+    <!-- 页面加载器将由page-loader.js动态创建 -->
 
     <!-- Navigation -->
     <nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300" id="navbar">
@@ -560,6 +561,7 @@
     </footer>
 
     <script src="js/nav-component.js"></script>
+    <script src="js/back-to-top.js"></script>
     <script src="js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web_frontend/web_result/js/back-to-top.js b/web_frontend/web_result/js/back-to-top.js
new file mode 100644
index 00000000..0fc4fe36
--- /dev/null
+++ b/web_frontend/web_result/js/back-to-top.js
@@ -0,0 +1,188 @@
+// 返回顶部按钮组件
+(function() {
+    // 创建返回顶部按钮HTML
+    function createBackToTopButton() {
+        const button = document.createElement('div');
+        button.id = 'back-to-top';
+        button.className = 'fixed bottom-8 right-8 z-40 opacity-0 pointer-events-none transition-all duration-300';
+        button.innerHTML = `
+            <button class="back-to-top-btn group relative w-12 h-12 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300">
+                <span class="absolute inset-0 rounded-full bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
+                <svg class="w-6 h-6 text-white absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" 
+                     fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
+                </svg>
+                <span class="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+                    返回顶部
+                </span>
+            </button>
+        `;
+        document.body.appendChild(button);
+        return button;
+    }
+
+    // 添加样式
+    function addStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            #back-to-top.show {
+                opacity: 1;
+                pointer-events: auto;
+                transform: translateY(0);
+            }
+            
+            #back-to-top:not(.show) {
+                transform: translateY(100px);
+            }
+            
+            .back-to-top-btn {
+                position: relative;
+                overflow: hidden;
+            }
+            
+            .back-to-top-btn::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+                transition: left 0.5s;
+            }
+            
+            .back-to-top-btn:hover::before {
+                left: 100%;
+            }
+            
+            .back-to-top-btn svg {
+                animation: float 2s ease-in-out infinite;
+            }
+            
+            @keyframes float {
+                0%, 100% {
+                    transform: translateX(-50%) translateY(-50%);
+                }
+                50% {
+                    transform: translateX(-50%) translateY(calc(-50% - 3px));
+                }
+            }
+            
+            /* 移动端适配 */
+            @media (max-width: 768px) {
+                #back-to-top {
+                    bottom: 1.5rem;
+                    right: 1.5rem;
+                }
+                
+                .back-to-top-btn {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                }
+                
+                .back-to-top-btn svg {
+                    width: 1.25rem;
+                    height: 1.25rem;
+                }
+            }
+            
+            /* 平滑滚动行为 */
+            html {
+                scroll-behavior: smooth;
+            }
+            
+            /* 防止按钮与其他元素冲突 */
+            @media (max-width: 640px) {
+                #back-to-top {
+                    bottom: 5rem; /* 避免与移动端菜单按钮重叠 */
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // 滚动到顶部功能
+    function scrollToTop() {
+        // 使用 smooth 滚动
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+        
+        // 可选：添加动画反馈
+        const button = document.querySelector('.back-to-top-btn');
+        if (button) {
+            button.style.transform = 'scale(0.9)';
+            setTimeout(() => {
+                button.style.transform = '';
+            }, 200);
+        }
+    }
+
+    // 控制按钮显示/隐藏
+    function handleScroll() {
+        const button = document.getElementById('back-to-top');
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const windowHeight = window.innerHeight;
+        
+        // 当滚动超过一屏高度时显示按钮
+        if (scrollTop > windowHeight * 0.5) {
+            button.classList.add('show');
+        } else {
+            button.classList.remove('show');
+        }
+        
+        // 可选：根据滚动位置调整按钮透明度
+        if (scrollTop > windowHeight) {
+            const maxScroll = document.documentElement.scrollHeight - windowHeight;
+            const scrollProgress = Math.min(scrollTop / maxScroll, 1);
+            const opacity = 0.5 + scrollProgress * 0.5; // 从50%到100%透明度
+            button.style.opacity = button.classList.contains('show') ? opacity : 0;
+        }
+    }
+
+    // 初始化
+    function init() {
+        // 添加样式
+        addStyles();
+        
+        // 创建按钮
+        const button = createBackToTopButton();
+        
+        // 添加点击事件
+        button.addEventListener('click', scrollToTop);
+        
+        // 添加滚动监听（使用节流）
+        let scrollTimer;
+        window.addEventListener('scroll', () => {
+            if (scrollTimer) {
+                clearTimeout(scrollTimer);
+            }
+            scrollTimer = setTimeout(handleScroll, 50);
+        });
+        
+        // 初始检查
+        handleScroll();
+        
+        // 键盘快捷键支持（按 'T' 键返回顶部）
+        document.addEventListener('keydown', (e) => {
+            // 排除输入框等元素
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+                return;
+            }
+            
+            // 按 T 键或 Home 键返回顶部
+            if (e.key === 't' || e.key === 'T' || e.key === 'Home') {
+                e.preventDefault();
+                scrollToTop();
+            }
+        });
+    }
+
+    // DOM加载完成后初始化
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/web_frontend/web_result/js/error-handler.js b/web_frontend/web_result/js/error-handler.js
new file mode 100644
index 00000000..41b142a3
--- /dev/null
+++ b/web_frontend/web_result/js/error-handler.js
@@ -0,0 +1,279 @@
+// 错误处理和兼容性脚本
+(function() {
+    'use strict';
+    
+    // 全局错误处理
+    window.addEventListener('error', function(event) {
+        console.error('Global error:', {
+            message: event.message,
+            filename: event.filename,
+            lineno: event.lineno,
+            colno: event.colno,
+            error: event.error
+        });
+        
+        // 发送错误到控制台（便于调试）
+        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            console.group('Error Details:');
+            console.log('Message:', event.message);
+            console.log('File:', event.filename);
+            console.log('Line:', event.lineno + ':' + event.colno);
+            if (event.error && event.error.stack) {
+                console.log('Stack:', event.error.stack);
+            }
+            console.groupEnd();
+        }
+        
+        return true; // 阻止默认错误处理
+    });
+    
+    // Promise 错误处理
+    window.addEventListener('unhandledrejection', function(event) {
+        console.error('Unhandled promise rejection:', event.reason);
+        
+        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            console.group('Promise Rejection:');
+            console.log('Reason:', event.reason);
+            if (event.reason && event.reason.stack) {
+                console.log('Stack:', event.reason.stack);
+            }
+            console.groupEnd();
+        }
+        
+        event.preventDefault(); // 阻止默认处理
+    });
+    
+    // DOM 查询安全包装
+    function safeQuerySelector(selector) {
+        try {
+            return document.querySelector(selector);
+        } catch (e) {
+            console.warn('Invalid selector:', selector, e);
+            return null;
+        }
+    }
+    
+    function safeQuerySelectorAll(selector) {
+        try {
+            return document.querySelectorAll(selector);
+        } catch (e) {
+            console.warn('Invalid selector:', selector, e);
+            return [];
+        }
+    }
+    
+    // 安全的getElementById
+    function safeGetElementById(id) {
+        try {
+            return document.getElementById(id);
+        } catch (e) {
+            console.warn('Invalid element ID:', id, e);
+            return null;
+        }
+    }
+    
+    // 修复常见的兼容性问题
+    function fixCompatibilityIssues() {
+        // 修复classList不支持的情况（简化版本以避免Illegal invocation）
+        try {
+            // 安全检测classList支持
+            var testElement = document.createElement('div');
+            if (!testElement.classList) {
+                // 简单的classList polyfill
+                window.ClassListPolyfill = {
+                addClass: function(element, className) {
+                    if (element && className) {
+                        var classes = element.className ? element.className.split(' ') : [];
+                        if (classes.indexOf(className) === -1) {
+                            classes.push(className);
+                            element.className = classes.join(' ').trim();
+                        }
+                    }
+                },
+                removeClass: function(element, className) {
+                    if (element && className) {
+                        var classes = element.className ? element.className.split(' ') : [];
+                        var index = classes.indexOf(className);
+                        if (index !== -1) {
+                            classes.splice(index, 1);
+                            element.className = classes.join(' ').trim();
+                        }
+                    }
+                },
+                hasClass: function(element, className) {
+                    if (!element || !className) return false;
+                    var classes = element.className ? element.className.split(' ') : [];
+                    return classes.indexOf(className) !== -1;
+                }
+                };
+            }
+        } catch (e) {
+            // 如果检测失败，忽略错误
+            console.warn('classList detection failed:', e);
+        }
+        
+        // 修复addEventListener不支持的情况
+        if (!Element.prototype.addEventListener && Element.prototype.attachEvent) {
+            Element.prototype.addEventListener = function(event, listener) {
+                this.attachEvent('on' + event, listener);
+            };
+            Element.prototype.removeEventListener = function(event, listener) {
+                this.detachEvent('on' + event, listener);
+            };
+        }
+        
+        // 修复Array.from不支持的情况
+        if (!Array.from) {
+            Array.from = function(arrayLike) {
+                var result = [];
+                for (var i = 0; i < arrayLike.length; i++) {
+                    result.push(arrayLike[i]);
+                }
+                return result;
+            };
+        }
+        
+        // 修复forEach不支持的情况
+        if (!NodeList.prototype.forEach) {
+            NodeList.prototype.forEach = function(callback, thisArg) {
+                for (var i = 0; i < this.length; i++) {
+                    callback.call(thisArg, this[i], i, this);
+                }
+            };
+        }
+    }
+    
+    // 检测浏览器支持情况
+    function detectBrowserSupport() {
+        const features = {
+            es6: {
+                arrow: false,
+                const: false,
+                let: false,
+                template: false,
+                destructuring: false
+            },
+            dom: {
+                classList: (function() {
+                    try {
+                        var testElement = document.createElement('div');
+                        return !!testElement.classList;
+                    } catch (e) {
+                        return false;
+                    }
+                })(),
+                querySelector: !!document.querySelector,
+                addEventListener: !!window.addEventListener
+            },
+            css: {
+                grid: typeof CSS !== 'undefined' && CSS.supports && CSS.supports('display', 'grid'),
+                flexbox: typeof CSS !== 'undefined' && CSS.supports && CSS.supports('display', 'flex'),
+                transform: typeof CSS !== 'undefined' && CSS.supports && CSS.supports('transform', 'translateX(0)')
+            }
+        };
+        
+        // 测试ES6功能
+        try {
+            eval('const x = 1');
+            features.es6.const = true;
+        } catch (e) {}
+        
+        try {
+            eval('let x = 1');
+            features.es6.let = true;
+        } catch (e) {}
+        
+        try {
+            eval('`template`');
+            features.es6.template = true;
+        } catch (e) {}
+        
+        try {
+            eval('() => {}');
+            features.es6.arrow = true;
+        } catch (e) {}
+        
+        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            console.group('Browser Support:');
+            console.table(features);
+            console.groupEnd();
+        }
+        
+        return features;
+    }
+    
+    // 修复具体的错误
+    function fixSpecificErrors() {
+        // 确保所有必要的元素存在
+        const requiredElements = [
+            'navbar',
+            'mobile-menu-button',
+            'mobile-menu',
+            'mobile-menu-overlay',
+            'close-menu'
+        ];
+        
+        setTimeout(function() {
+            requiredElements.forEach(function(id) {
+                const element = document.getElementById(id);
+                if (!element) {
+                    console.warn('Missing required element:', id);
+                    
+                    // 尝试创建缺失的元素（某些情况下）
+                    if (id === 'mobile-menu-overlay' && !document.getElementById(id)) {
+                        const overlay = document.createElement('div');
+                        overlay.id = id;
+                        overlay.className = 'mobile-menu-overlay hidden';
+                        document.body.appendChild(overlay);
+                        console.log('Created missing overlay element');
+                    }
+                }
+            });
+        }, 1000);
+    }
+    
+    // 安全的脚本加载
+    function safeLoadScript(src, callback) {
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = function() {
+            if (callback) callback();
+        };
+        script.onerror = function() {
+            console.error('Failed to load script:', src);
+        };
+        document.head.appendChild(script);
+    }
+    
+    // 初始化错误处理
+    function init() {
+        // 修复兼容性问题
+        fixCompatibilityIssues();
+        
+        // 检测浏览器支持
+        detectBrowserSupport();
+        
+        // 修复具体错误
+        fixSpecificErrors();
+        
+        // 为调试添加全局工具
+        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            window.debugTools = {
+                safeQuerySelector: safeQuerySelector,
+                safeQuerySelectorAll: safeQuerySelectorAll,
+                safeGetElementById: safeGetElementById,
+                fixCompatibilityIssues: fixCompatibilityIssues,
+                detectBrowserSupport: detectBrowserSupport
+            };
+        }
+        
+        console.log('Error handler initialized');
+    }
+    
+    // 在DOM加载后初始化
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/web_frontend/web_result/js/main.js b/web_frontend/web_result/js/main.js
index 62b624a0..89e979e4 100644
--- a/web_frontend/web_result/js/main.js
+++ b/web_frontend/web_result/js/main.js
@@ -18,18 +18,22 @@ document.addEventListener('DOMContentLoaded', function() {
     handleImageErrors();
 });
 
-// 隐藏页面加载器
+// 隐藏页面加载器（兼容新的加载器）
 function hidePageLoader() {
-    const loader = document.getElementById('pageLoader');
+    const loader = document.getElementById('pageLoader') || document.getElementById('page-loader');
     if (loader) {
-        // 添加淡出动画
+        // 如果是新的加载器，使用其自带的隐藏方法
+        if (loader.id === 'page-loader' && window.PageLoader) {
+            window.PageLoader.hideLoader();
+            return;
+        }
+        
+        // 旧的加载器逻辑
         loader.style.opacity = '0';
         loader.style.transition = 'opacity 0.5s ease-out';
         
-        // 500ms后完全移除
         setTimeout(() => {
             loader.style.display = 'none';
-            // 恢复body滚动
             document.body.style.overflow = 'auto';
             document.body.classList.remove('loading');
         }, 500);
diff --git a/web_frontend/web_result/js/mobile-optimize.js b/web_frontend/web_result/js/mobile-optimize.js
new file mode 100644
index 00000000..0c35973a
--- /dev/null
+++ b/web_frontend/web_result/js/mobile-optimize.js
@@ -0,0 +1,516 @@
+// 移动端优化组件
+(function() {
+    let isMobile = false;
+    let isTablet = false;
+    let currentOrientation = 'portrait';
+    
+    // 检测设备类型
+    function detectDevice() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        const screenWidth = window.innerWidth;
+        const screenHeight = window.innerHeight;
+        
+        // 检测是否为移动设备
+        isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) || screenWidth <= 768;
+        isTablet = /ipad|android(?!.*mobile)|tablet/i.test(userAgent) || (screenWidth > 768 && screenWidth <= 1024);
+        
+        // 检测屏幕方向
+        currentOrientation = screenWidth > screenHeight ? 'landscape' : 'portrait';
+        
+        // 添加设备类到body（确保body存在）
+        if (document.body) {
+            document.body.classList.remove('mobile', 'tablet', 'desktop', 'portrait', 'landscape');
+            document.body.classList.add(
+                isMobile ? 'mobile' : isTablet ? 'tablet' : 'desktop',
+                currentOrientation
+            );
+        }
+        
+        return { isMobile, isTablet, currentOrientation };
+    }
+    
+    // 添加移动端优化样式
+    function addMobileStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            /* 移动端基础优化 */
+            * {
+                -webkit-tap-highlight-color: transparent;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+            }
+            
+            /* 允许文本选择 */
+            p, h1, h2, h3, h4, h5, h6, span, div, article, section {
+                -webkit-user-select: text;
+                -moz-user-select: text;
+                -ms-user-select: text;
+                user-select: text;
+            }
+            
+            /* 移动端滚动优化 */
+            html {
+                -webkit-overflow-scrolling: touch;
+                scroll-behavior: smooth;
+            }
+            
+            /* 移动端字体优化 */
+            body.mobile {
+                font-size: 16px; /* 防止iOS缩放 */
+                line-height: 1.6;
+                -webkit-text-size-adjust: 100%;
+                -moz-text-size-adjust: 100%;
+                -ms-text-size-adjust: 100%;
+            }
+            
+            /* 移动端容器优化 */
+            .container {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+            
+            body.mobile .container {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+            
+            body.tablet .container {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+            
+            /* 移动端导航优化 */
+            body.mobile #navbar {
+                padding: 0.75rem 1rem;
+            }
+            
+            body.mobile .nav-container {
+                padding: 0.75rem 0;
+            }
+            
+            /* 移动端按钮优化 */
+            body.mobile button,
+            body.mobile .btn {
+                min-height: 44px; /* iOS推荐的最小触摸目标 */
+                padding: 0.75rem 1.5rem;
+                font-size: 1rem;
+            }
+            
+            /* 移动端表单优化 */
+            body.mobile input,
+            body.mobile textarea,
+            body.mobile select {
+                min-height: 44px;
+                padding: 0.75rem;
+                font-size: 16px; /* 防止iOS缩放 */
+                border-radius: 8px;
+            }
+            
+            /* 移动端卡片优化 */
+            body.mobile .card,
+            body.mobile .glass-card {
+                margin-bottom: 1rem;
+                padding: 1rem;
+                border-radius: 12px;
+            }
+            
+            /* 移动端文字优化 */
+            body.mobile h1 {
+                font-size: 2rem;
+                line-height: 1.2;
+                margin-bottom: 1rem;
+            }
+            
+            body.mobile h2 {
+                font-size: 1.75rem;
+                line-height: 1.3;
+                margin-bottom: 0.75rem;
+            }
+            
+            body.mobile h3 {
+                font-size: 1.5rem;
+                line-height: 1.4;
+                margin-bottom: 0.5rem;
+            }
+            
+            body.mobile p {
+                font-size: 1rem;
+                line-height: 1.6;
+                margin-bottom: 1rem;
+            }
+            
+            /* 移动端网格优化 */
+            body.mobile .grid {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+            
+            body.mobile .grid-cols-2,
+            body.mobile .grid-cols-3,
+            body.mobile .grid-cols-4,
+            body.mobile .md\\:grid-cols-2,
+            body.mobile .md\\:grid-cols-3,
+            body.mobile .lg\\:grid-cols-3 {
+                grid-template-columns: 1fr;
+            }
+            
+            /* 平板端网格优化 */
+            body.tablet .grid-cols-3,
+            body.tablet .lg\\:grid-cols-3 {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            
+            /* 移动端间距优化 */
+            body.mobile .py-16 { padding-top: 3rem; padding-bottom: 3rem; }
+            body.mobile .py-12 { padding-top: 2rem; padding-bottom: 2rem; }
+            body.mobile .py-8 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+            body.mobile .mb-12 { margin-bottom: 2rem; }
+            body.mobile .mb-8 { margin-bottom: 1.5rem; }
+            
+            /* 移动端图片优化 */
+            body.mobile img {
+                max-width: 100%;
+                height: auto;
+                border-radius: 8px;
+            }
+            
+            /* 横屏优化 */
+            body.mobile.landscape {
+                /* 横屏时减少垂直间距 */
+            }
+            
+            body.mobile.landscape .py-16 { 
+                padding-top: 2rem; 
+                padding-bottom: 2rem; 
+            }
+            
+            body.mobile.landscape h1 {
+                font-size: 1.75rem;
+                margin-bottom: 0.75rem;
+            }
+            
+            /* 移动端返回顶部按钮优化 */
+            body.mobile #back-to-top {
+                bottom: 1.5rem;
+                right: 1.5rem;
+            }
+            
+            body.mobile .back-to-top-btn {
+                width: 3rem;
+                height: 3rem;
+            }
+            
+            /* 移动端页面加载器优化 */
+            body.mobile #page-loader .w-20 {
+                width: 4rem;
+                height: 4rem;
+            }
+            
+            body.mobile #page-loader h1 {
+                font-size: 1.25rem;
+            }
+            
+            body.mobile #page-loader .w-64 {
+                width: 16rem;
+            }
+            
+            /* 防止页面缩放 */
+            @media screen and (max-width: 768px) {
+                html {
+                    zoom: 1;
+                    -ms-zoom: 1;
+                    -webkit-zoom: 1;
+                    -moz-zoom: 1;
+                }
+            }
+            
+            /* 触摸设备特定优化 */
+            @media (hover: none) and (pointer: coarse) {
+                /* 移除hover效果，使用active效果 */
+                .hover\\:scale-110:hover {
+                    transform: none;
+                }
+                
+                .hover\\:scale-110:active {
+                    transform: scale(1.05);
+                }
+                
+                .hover\\:shadow-xl:hover {
+                    box-shadow: none;
+                }
+                
+                .hover\\:shadow-xl:active {
+                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+                }
+            }
+            
+            /* 安全区域适配（iPhone X等带刘海屏的设备） */
+            @supports (padding: max(0px)) {
+                body.mobile {
+                    padding-left: max(1rem, env(safe-area-inset-left));
+                    padding-right: max(1rem, env(safe-area-inset-right));
+                }
+                
+                body.mobile #navbar {
+                    padding-left: max(1rem, env(safe-area-inset-left));
+                    padding-right: max(1rem, env(safe-area-inset-right));
+                    padding-top: max(0.75rem, env(safe-area-inset-top));
+                }
+                
+                body.mobile #back-to-top {
+                    right: max(1.5rem, env(safe-area-inset-right));
+                    bottom: max(1.5rem, env(safe-area-inset-bottom));
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
+    // 优化图片加载
+    function optimizeImages() {
+        const images = document.querySelectorAll('img');
+        
+        images.forEach(img => {
+            // 添加懒加载
+            if (!img.loading) {
+                img.loading = 'lazy';
+            }
+            
+            // 添加错误处理
+            img.addEventListener('error', function() {
+                this.style.display = 'none';
+            });
+            
+            // 移动端图片优化
+            if (isMobile) {
+                // 移动端使用较小的图片
+                const src = img.src;
+                if (src && !src.includes('placeholder')) {
+                    // 这里可以添加图片压缩逻辑
+                }
+            }
+        });
+    }
+    
+    // 优化触摸事件
+    function optimizeTouch() {
+        // 添加触摸反馈
+        document.addEventListener('touchstart', function(e) {
+            const target = e.target;
+            if (target.tagName === 'BUTTON' || target.classList.contains('btn') || target.tagName === 'A') {
+                target.style.opacity = '0.7';
+            }
+        }, { passive: true });
+        
+        document.addEventListener('touchend', function(e) {
+            const target = e.target;
+            if (target.tagName === 'BUTTON' || target.classList.contains('btn') || target.tagName === 'A') {
+                setTimeout(() => {
+                    target.style.opacity = '';
+                }, 150);
+            }
+        }, { passive: true });
+        
+        // 防止双击缩放
+        let lastTouchEnd = 0;
+        document.addEventListener('touchend', function(event) {
+            const now = (new Date()).getTime();
+            if (now - lastTouchEnd <= 300) {
+                event.preventDefault();
+            }
+            lastTouchEnd = now;
+        }, false);
+    }
+    
+    // 处理屏幕方向变化
+    function handleOrientationChange() {
+        // 延迟执行以确保尺寸更新
+        setTimeout(() => {
+            detectDevice();
+            
+            // 重新计算布局
+            const event = new Event('resize');
+            window.dispatchEvent(event);
+            
+            // 滚动到顶部（防止方向变化后位置错乱）
+            if (window.scrollY > 100) {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        }, 100);
+    }
+    
+    // 优化键盘弹出时的布局
+    function handleKeyboard() {
+        if (!isMobile) return;
+        
+        const originalHeight = window.innerHeight;
+        let keyboardOpen = false;
+        
+        window.addEventListener('resize', function() {
+            const currentHeight = window.innerHeight;
+            const heightDifference = originalHeight - currentHeight;
+            
+            // 键盘弹出（高度减少超过150px）
+            if (heightDifference > 150 && !keyboardOpen) {
+                keyboardOpen = true;
+                document.body.classList.add('keyboard-open');
+                
+                // 隐藏导航栏（为输入框腾出空间）
+                const navbar = document.getElementById('navbar');
+                if (navbar) {
+                    navbar.style.transform = 'translateY(-100%)';
+                }
+                
+                // 隐藏返回顶部按钮
+                const backToTop = document.getElementById('back-to-top');
+                if (backToTop) {
+                    backToTop.style.display = 'none';
+                }
+            } 
+            // 键盘收起
+            else if (heightDifference <= 150 && keyboardOpen) {
+                keyboardOpen = false;
+                document.body.classList.remove('keyboard-open');
+                
+                // 恢复导航栏
+                const navbar = document.getElementById('navbar');
+                if (navbar) {
+                    navbar.style.transform = '';
+                }
+                
+                // 恢复返回顶部按钮
+                const backToTop = document.getElementById('back-to-top');
+                if (backToTop) {
+                    backToTop.style.display = '';
+                }
+            }
+        });
+    }
+    
+    // 性能优化
+    function optimizePerformance() {
+        // 使用 Intersection Observer 优化动画
+        if ('IntersectionObserver' in window) {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animate-visible');
+                    }
+                });
+            }, {
+                threshold: 0.1,
+                rootMargin: '50px'
+            });
+            
+            // 观察所有动画元素
+            document.querySelectorAll('[class*="animate-"]').forEach(el => {
+                if (!el.classList.contains('animate-visible')) {
+                    observer.observe(el);
+                }
+            });
+        }
+        
+        // 移动端减少动画
+        if (isMobile) {
+            const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            if (mediaQuery.matches) {
+                document.body.classList.add('reduce-motion');
+            }
+        }
+    }
+    
+    // 添加调试信息（开发环境）
+    function addDebugInfo() {
+        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+            const debugInfo = document.createElement('div');
+            debugInfo.style.cssText = `
+                position: fixed;
+                top: 70px;
+                right: 10px;
+                background: rgba(0,0,0,0.8);
+                color: white;
+                padding: 8px;
+                border-radius: 4px;
+                font-size: 12px;
+                z-index: 10000;
+                font-family: monospace;
+            `;
+            
+            function updateDebugInfo() {
+                const { isMobile, isTablet, currentOrientation } = detectDevice();
+                debugInfo.innerHTML = `
+                    ${window.innerWidth}×${window.innerHeight}<br>
+                    ${isMobile ? 'Mobile' : isTablet ? 'Tablet' : 'Desktop'}<br>
+                    ${currentOrientation}
+                `;
+            }
+            
+            updateDebugInfo();
+            document.body.appendChild(debugInfo);
+            
+            window.addEventListener('resize', updateDebugInfo);
+            window.addEventListener('orientationchange', updateDebugInfo);
+        }
+    }
+    
+    // 初始化移动端优化
+    function init() {
+        // 检测设备类型
+        detectDevice();
+        
+        // 添加移动端样式
+        addMobileStyles();
+        
+        // 优化触摸体验
+        optimizeTouch();
+        
+        // 处理屏幕方向变化
+        window.addEventListener('orientationchange', handleOrientationChange);
+        window.addEventListener('resize', () => {
+            setTimeout(detectDevice, 100);
+        });
+        
+        // 页面加载完成后的优化
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                setTimeout(() => {
+                    optimizeImages();
+                    handleKeyboard();
+                    optimizePerformance();
+                    addDebugInfo();
+                }, 500);
+            });
+        } else {
+            setTimeout(() => {
+                optimizeImages();
+                handleKeyboard();
+                optimizePerformance();
+                addDebugInfo();
+            }, 500);
+        }
+        
+        // 监听页面加载完成事件
+        document.addEventListener('pageLoaded', () => {
+            setTimeout(() => {
+                optimizeImages();
+                optimizePerformance();
+            }, 100);
+        });
+    }
+    
+    // 提供外部接口
+    window.MobileOptimize = {
+        detectDevice,
+        isMobile: () => isMobile,
+        isTablet: () => isTablet,
+        getCurrentOrientation: () => currentOrientation,
+        optimizeImages,
+        optimizePerformance
+    };
+    
+    // 初始化
+    init();
+})();
\ No newline at end of file
diff --git a/web_frontend/web_result/js/nav-component.js b/web_frontend/web_result/js/nav-component.js
index 1bdc50e2..a40a2028 100644
--- a/web_frontend/web_result/js/nav-component.js
+++ b/web_frontend/web_result/js/nav-component.js
@@ -10,8 +10,8 @@
         { href: 'index.html', icon: 'fa-home', text: '首页', id: 'index' },
         { href: 'overview.html', icon: 'fa-info-circle', text: '展会概览', id: 'overview' },
         { href: 'exhibition.html', icon: 'fa-th-large', text: '展览内容', id: 'exhibition' },
+        { href: 'operation.html', icon: 'fa-drafting-compass', text: '布局设计', id: 'operation' },
         { href: 'marketing.html', icon: 'fa-bullhorn', text: '营销推广', id: 'marketing' },
-        { href: 'operation.html', icon: 'fa-cogs', text: '运营服务', id: 'operation' },
         { href: 'budget.html', icon: 'fa-chart-pie', text: '预算分析', id: 'budget' },
         { href: 'risk.html', icon: 'fa-shield-alt', text: '风险评估', id: 'risk' }
     ];
@@ -34,82 +34,230 @@
     // 生成导航HTML
     function generateNavHTML() {
         return `
-        <div class="container mx-auto px-6 py-4">
+        <div class="nav-container container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
-                <div class="flex items-center fade-in-left">
-                    <div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3">
+                <div class="flex items-center nav-logo">
+                    <div class="logo-icon w-10 h-10 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center mr-3 transition-transform hover:scale-110">
                         <i class="fas fa-charging-station text-white"></i>
                     </div>
                     <div>
-                        <h1 class="text-lg font-bold">NEVIT 2024</h1>
+                        <h1 class="text-lg font-bold text-gray-800">NEVIT 2024</h1>
                         <p class="text-xs text-gray-500">新能源汽车产业博览会</p>
                     </div>
                 </div>
-                <div class="hidden md:flex space-x-8">
+                <div class="hidden md:flex space-x-6 lg:space-x-8">
                     ${navItems.map(item => `
                         <a href="${getCorrectPath(item.href)}" 
-                           class="nav-link ${isActive(item.href) ? 'active' : ''} text-gray-700 hover:text-emerald-500 transition-colors"
+                           class="nav-link ${isActive(item.href) ? 'active text-emerald-500' : 'text-gray-700'} hover:text-emerald-500 transition-all duration-300 relative group"
                            data-nav="${item.id}">
                             <i class="fas ${item.icon} mr-2"></i>${item.text}
+                            ${isActive(item.href) ? '<span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500"></span>' : '<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 transition-all duration-300 group-hover:w-full"></span>'}
                         </a>
                     `).join('')}
                 </div>
-                <button class="md:hidden" id="mobile-menu-button">
-                    <i class="fas fa-bars text-2xl text-gray-700"></i>
+                <button class="md:hidden menu-toggle" id="mobile-menu-button">
+                    <span class="menu-icon">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </span>
                 </button>
             </div>
         </div>
         
         <!-- Mobile Menu -->
-        <div class="hidden md:hidden fixed top-16 left-0 w-full bg-white shadow-lg" id="mobile-menu">
-            <div class="px-6 py-4 space-y-3">
-                ${navItems.map(item => `
-                    <a href="${getCorrectPath(item.href)}" 
-                       class="block py-2 px-4 rounded ${isActive(item.href) ? 'bg-emerald-50 text-emerald-500' : 'text-gray-700 hover:bg-gray-50'}"
-                       data-nav="${item.id}">
-                        <i class="fas ${item.icon} mr-2"></i>${item.text}
-                    </a>
-                `).join('')}
+        <div class="mobile-menu-overlay hidden" id="mobile-menu-overlay"></div>
+        <div class="mobile-menu transform translate-x-full transition-transform duration-300 fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-50" id="mobile-menu">
+            <div class="p-6">
+                <button class="absolute top-6 right-6 text-gray-500 hover:text-gray-700" id="close-menu">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+                <div class="mb-8">
+                    <h2 class="text-2xl font-bold text-gray-800">NEVIT 2024</h2>
+                    <p class="text-sm text-gray-500">新能源汽车产业博览会</p>
+                </div>
+                <div class="space-y-4">
+                    ${navItems.map(item => `
+                        <a href="${getCorrectPath(item.href)}" 
+                           class="block py-3 px-4 rounded-lg ${isActive(item.href) ? 'bg-emerald-50 text-emerald-500' : 'text-gray-700 hover:bg-gray-50'} transition-all duration-300"
+                           data-nav="${item.id}">
+                            <i class="fas ${item.icon} mr-3 w-5"></i>${item.text}
+                        </a>
+                    `).join('')}
+                </div>
+                <div class="mt-8 pt-8 border-t border-gray-200">
+                    <p class="text-sm text-gray-500">2024年9月12-15日</p>
+                    <p class="text-sm text-gray-500">国家会展中心（上海）</p>
+                </div>
             </div>
         </div>`;
     }
     
+    // 添加样式
+    function addStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            .nav-container {
+                transition: all 0.3s ease;
+            }
+            .navbar-scrolled {
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            }
+            .navbar-scrolled .nav-container {
+                padding-top: 0.75rem;
+                padding-bottom: 0.75rem;
+            }
+            .nav-logo {
+                animation: fadeInLeft 0.6s ease-out;
+            }
+            .nav-link {
+                position: relative;
+                padding: 0.5rem 0;
+                font-weight: 500;
+            }
+            .menu-icon {
+                width: 24px;
+                height: 20px;
+                position: relative;
+                display: block;
+                cursor: pointer;
+            }
+            .menu-icon span {
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 2px;
+                background-color: #374151;
+                transition: all 0.3s ease;
+            }
+            .menu-icon span:nth-child(1) {
+                top: 0;
+            }
+            .menu-icon span:nth-child(2) {
+                top: 50%;
+                transform: translateY(-50%);
+            }
+            .menu-icon span:nth-child(3) {
+                bottom: 0;
+            }
+            .menu-open .menu-icon span:nth-child(1) {
+                transform: rotate(45deg) translate(6px, 6px);
+            }
+            .menu-open .menu-icon span:nth-child(2) {
+                opacity: 0;
+            }
+            .menu-open .menu-icon span:nth-child(3) {
+                transform: rotate(-45deg) translate(6px, -6px);
+            }
+            .mobile-menu-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0.5);
+                z-index: 40;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+            }
+            .mobile-menu-overlay.show {
+                opacity: 1;
+            }
+            .mobile-menu.show {
+                transform: translateX(0);
+            }
+            @keyframes fadeInLeft {
+                from {
+                    opacity: 0;
+                    transform: translateX(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+            @media (max-width: 768px) {
+                .nav-container {
+                    padding: 1rem 1.5rem;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
     // 初始化导航
     function initNav() {
         const navElement = document.querySelector('nav') || document.getElementById('navbar');
         if (navElement) {
-            // 统一设置导航栏样式 - 确保所有页面一致
-            navElement.className = 'fixed top-0 w-full bg-white shadow-md z-50 transition-all duration-300';
+            // 统一设置导航栏样式
+            navElement.className = 'fixed top-0 w-full bg-white z-50 transition-all duration-300';
             navElement.id = 'navbar';
-            navElement.style.backgroundColor = 'white';
-            navElement.style.zIndex = '9999';
+            
+            // 添加样式
+            addStyles();
             
             // 更新导航内容
             navElement.innerHTML = generateNavHTML();
             
-            // 添加移动端菜单交互
+            // 添加滚动效果
+            let lastScrollTop = 0;
+            window.addEventListener('scroll', function() {
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                
+                // 添加滚动阴影
+                if (scrollTop > 50) {
+                    navElement.classList.add('navbar-scrolled');
+                } else {
+                    navElement.classList.remove('navbar-scrolled');
+                }
+                
+                lastScrollTop = scrollTop;
+            });
+            
+            // 移动端菜单交互
             const mobileMenuButton = document.getElementById('mobile-menu-button');
             const mobileMenu = document.getElementById('mobile-menu');
+            const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
+            const closeMenuButton = document.getElementById('close-menu');
             
             if (mobileMenuButton && mobileMenu) {
-                mobileMenuButton.addEventListener('click', () => {
-                    mobileMenu.classList.toggle('hidden');
+                // 打开菜单
+                mobileMenuButton.addEventListener('click', function() {
+                    mobileMenu.classList.add('show');
+                    if (mobileMenuOverlay) {
+                        mobileMenuOverlay.classList.remove('hidden');
+                        setTimeout(function() {
+                            mobileMenuOverlay.classList.add('show');
+                        }, 10);
+                    }
+                    mobileMenuButton.classList.add('menu-open');
+                    document.body.style.overflow = 'hidden';
                 });
                 
-                // 点击菜单项后关闭移动端菜单
-                mobileMenu.querySelectorAll('a').forEach(link => {
-                    link.addEventListener('click', () => {
-                        mobileMenu.classList.add('hidden');
-                    });
+                // 关闭菜单功能
+                const closeMenu = function() {
+                    mobileMenu.classList.remove('show');
+                    if (mobileMenuOverlay) {
+                        mobileMenuOverlay.classList.remove('show');
+                        setTimeout(function() {
+                            mobileMenuOverlay.classList.add('hidden');
+                        }, 300);
+                    }
+                    mobileMenuButton.classList.remove('menu-open');
+                    document.body.style.overflow = '';
+                };
+                
+                // 点击关闭按钮
+                closeMenuButton.addEventListener('click', closeMenu);
+                
+                // 点击遮罩关闭
+                mobileMenuOverlay.addEventListener('click', closeMenu);
+                
+                // 点击菜单项后关闭
+                mobileMenu.querySelectorAll('a').forEach(function(link) {
+                    link.addEventListener('click', closeMenu);
                 });
             }
-            
-            // 保持导航栏始终可见，不添加滚动隐藏效果
-            // 确保导航栏始终在最顶层
-            navElement.style.position = 'fixed';
-            navElement.style.top = '0';
-            navElement.style.left = '0';
-            navElement.style.right = '0';
         }
     }
     
diff --git a/web_frontend/web_result/js/page-loader.js b/web_frontend/web_result/js/page-loader.js
new file mode 100644
index 00000000..51c7805d
--- /dev/null
+++ b/web_frontend/web_result/js/page-loader.js
@@ -0,0 +1,387 @@
+// 页面加载动画组件
+(function() {
+    // 创建加载器HTML结构
+    function createLoader() {
+        const loaderHTML = `
+            <div id="page-loader" class="fixed inset-0 bg-white z-[9999] flex items-center justify-center">
+                <!-- 背景动画 -->
+                <div class="absolute inset-0 overflow-hidden">
+                    <!-- 渐变背景 -->
+                    <div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-purple-50 to-emerald-50"></div>
+                    
+                    <!-- 浮动粒子 -->
+                    <div class="floating-particles">
+                        ${Array.from({length: 12}).map((_, i) => `
+                            <div class="particle particle-${i + 1}"></div>
+                        `).join('')}
+                    </div>
+                    
+                    <!-- 几何图形 -->
+                    <div class="geometric-shapes">
+                        <div class="shape shape-1"></div>
+                        <div class="shape shape-2"></div>
+                        <div class="shape shape-3"></div>
+                    </div>
+                </div>
+                
+                <!-- 主加载内容 -->
+                <div class="relative z-10 text-center">
+                    <!-- Logo区域 -->
+                    <div class="mb-8">
+                        <div class="w-20 h-20 mx-auto mb-4 relative">
+                            <!-- 旋转的环 -->
+                            <div class="absolute inset-0 border-4 border-transparent border-t-emerald-500 border-r-blue-500 rounded-full animate-spin"></div>
+                            <div class="absolute inset-2 border-4 border-transparent border-b-purple-500 border-l-pink-500 rounded-full animate-spin-reverse"></div>
+                            
+                            <!-- 中心图标 -->
+                            <div class="absolute inset-0 flex items-center justify-center">
+                                <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-sm animate-pulse">
+                                    新
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- 品牌名称 -->
+                        <h1 class="text-2xl font-bold text-gray-800 mb-2 animate-fade-in">
+                            长三角国际新能源汽车博览会
+                        </h1>
+                        <p class="text-gray-600 animate-fade-in-delay">
+                            智行未来，绿动长三角
+                        </p>
+                    </div>
+                    
+                    <!-- 进度条 -->
+                    <div class="w-64 mx-auto mb-6">
+                        <div class="bg-gray-200 rounded-full h-2 overflow-hidden">
+                            <div id="loading-progress" class="h-full bg-gradient-to-r from-emerald-400 to-blue-500 rounded-full transition-all duration-300 ease-out" style="width: 0%"></div>
+                        </div>
+                        <div class="flex justify-between text-xs text-gray-500 mt-2">
+                            <span>加载中</span>
+                            <span id="loading-percentage">0%</span>
+                        </div>
+                    </div>
+                    
+                    <!-- 加载状态文字 -->
+                    <div class="text-sm text-gray-500">
+                        <span id="loading-text">正在准备展会信息</span>
+                        <span class="loading-dots">
+                            <span class="dot">.</span>
+                            <span class="dot">.</span>
+                            <span class="dot">.</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // 将加载器插入到 body 的最前面，确保body存在
+        if (document.body) {
+            document.body.insertAdjacentHTML('afterbegin', loaderHTML);
+        } else {
+            // 如果body不存在，等待DOM加载完成
+            document.addEventListener('DOMContentLoaded', function() {
+                if (document.body && !document.getElementById('page-loader')) {
+                    document.body.insertAdjacentHTML('afterbegin', loaderHTML);
+                }
+            });
+        }
+    }
+
+    // 添加样式
+    function addStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            /* 基础动画定义 */
+            @keyframes spin-reverse {
+                from { transform: rotate(0deg); }
+                to { transform: rotate(-360deg); }
+            }
+            
+            @keyframes fade-in {
+                from { opacity: 0; transform: translateY(20px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            
+            @keyframes fade-in-delay {
+                from { opacity: 0; transform: translateY(15px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            
+            @keyframes float {
+                0%, 100% { transform: translateY(0px) rotate(0deg); }
+                25% { transform: translateY(-10px) rotate(90deg); }
+                50% { transform: translateY(-5px) rotate(180deg); }
+                75% { transform: translateY(-15px) rotate(270deg); }
+            }
+            
+            @keyframes dot-blink {
+                0%, 20% { opacity: 0; }
+                50% { opacity: 1; }
+                100% { opacity: 0; }
+            }
+            
+            @keyframes shape-float {
+                0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
+                33% { transform: translateY(-20px) translateX(10px) rotate(120deg); }
+                66% { transform: translateY(10px) translateX(-10px) rotate(240deg); }
+            }
+            
+            @keyframes particle-drift {
+                0% { transform: translateY(100vh) translateX(0px) rotate(0deg); opacity: 0; }
+                10% { opacity: 1; }
+                90% { opacity: 1; }
+                100% { transform: translateY(-100px) translateX(50px) rotate(360deg); opacity: 0; }
+            }
+            
+            /* 应用动画类 */
+            .animate-spin-reverse {
+                animation: spin-reverse 2s linear infinite;
+            }
+            
+            .animate-fade-in {
+                animation: fade-in 1s ease-out forwards;
+            }
+            
+            .animate-fade-in-delay {
+                animation: fade-in-delay 1s ease-out 0.3s forwards;
+                opacity: 0;
+            }
+            
+            /* 加载点动画 */
+            .loading-dots {
+                display: inline-block;
+            }
+            
+            .loading-dots .dot {
+                animation: dot-blink 1.4s infinite;
+            }
+            
+            .loading-dots .dot:nth-child(2) {
+                animation-delay: 0.2s;
+            }
+            
+            .loading-dots .dot:nth-child(3) {
+                animation-delay: 0.4s;
+            }
+            
+            /* 浮动粒子 */
+            .floating-particles {
+                position: absolute;
+                inset: 0;
+                overflow: hidden;
+                pointer-events: none;
+            }
+            
+            .particle {
+                position: absolute;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                animation: particle-drift 8s infinite linear;
+            }
+            
+            .particle-1 { background: rgba(16, 185, 129, 0.6); left: 10%; animation-delay: 0s; animation-duration: 8s; }
+            .particle-2 { background: rgba(59, 130, 246, 0.6); left: 20%; animation-delay: 1s; animation-duration: 10s; }
+            .particle-3 { background: rgba(168, 85, 247, 0.6); left: 30%; animation-delay: 2s; animation-duration: 9s; }
+            .particle-4 { background: rgba(236, 72, 153, 0.6); left: 40%; animation-delay: 3s; animation-duration: 11s; }
+            .particle-5 { background: rgba(245, 158, 11, 0.6); left: 50%; animation-delay: 4s; animation-duration: 7s; }
+            .particle-6 { background: rgba(239, 68, 68, 0.6); left: 60%; animation-delay: 5s; animation-duration: 9s; }
+            .particle-7 { background: rgba(16, 185, 129, 0.6); left: 70%; animation-delay: 6s; animation-duration: 8s; }
+            .particle-8 { background: rgba(59, 130, 246, 0.6); left: 80%; animation-delay: 7s; animation-duration: 10s; }
+            .particle-9 { background: rgba(168, 85, 247, 0.6); left: 90%; animation-delay: 1.5s; animation-duration: 9s; }
+            .particle-10 { background: rgba(236, 72, 153, 0.6); left: 15%; animation-delay: 2.5s; animation-duration: 11s; }
+            .particle-11 { background: rgba(245, 158, 11, 0.6); left: 25%; animation-delay: 3.5s; animation-duration: 7s; }
+            .particle-12 { background: rgba(239, 68, 68, 0.6); left: 85%; animation-delay: 4.5s; animation-duration: 8s; }
+            
+            /* 几何图形 */
+            .geometric-shapes {
+                position: absolute;
+                inset: 0;
+                overflow: hidden;
+                pointer-events: none;
+            }
+            
+            .shape {
+                position: absolute;
+                border-radius: 12px;
+                animation: shape-float 6s ease-in-out infinite;
+            }
+            
+            .shape-1 {
+                top: 20%;
+                left: 10%;
+                width: 40px;
+                height: 40px;
+                background: linear-gradient(45deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
+                animation-delay: 0s;
+            }
+            
+            .shape-2 {
+                top: 60%;
+                right: 15%;
+                width: 60px;
+                height: 60px;
+                background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1));
+                border-radius: 50%;
+                animation-delay: 2s;
+            }
+            
+            .shape-3 {
+                bottom: 30%;
+                left: 20%;
+                width: 32px;
+                height: 32px;
+                background: linear-gradient(225deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
+                animation-delay: 4s;
+            }
+            
+            /* 加载器隐藏动画 */
+            #page-loader.fade-out {
+                animation: fadeOutLoader 0.8s ease-in-out forwards;
+            }
+            
+            @keyframes fadeOutLoader {
+                0% {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+                100% {
+                    opacity: 0;
+                    transform: scale(1.05);
+                }
+            }
+            
+            /* 防止页面滚动 */
+            body.loading {
+                overflow: hidden;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // 更新加载进度
+    function updateProgress(percentage, text) {
+        const progressBar = document.getElementById('loading-progress');
+        const percentageText = document.getElementById('loading-percentage');
+        const loadingText = document.getElementById('loading-text');
+        
+        if (progressBar) {
+            progressBar.style.width = percentage + '%';
+        }
+        if (percentageText) {
+            percentageText.textContent = percentage + '%';
+        }
+        if (loadingText && text) {
+            loadingText.textContent = text;
+        }
+    }
+
+    // 模拟加载过程
+    function simulateLoading() {
+        const loadingSteps = [
+            { progress: 0, text: '正在准备展会信息', delay: 100 },
+            { progress: 15, text: '加载导航组件', delay: 200 },
+            { progress: 30, text: '获取展会数据', delay: 300 },
+            { progress: 45, text: '渲染页面布局', delay: 250 },
+            { progress: 60, text: '加载图片资源', delay: 400 },
+            { progress: 75, text: '初始化交互功能', delay: 200 },
+            { progress: 85, text: '优化页面性能', delay: 150 },
+            { progress: 95, text: '准备完成', delay: 200 },
+            { progress: 100, text: '加载完成', delay: 300 }
+        ];
+
+        let currentStep = 0;
+        
+        function nextStep() {
+            if (currentStep < loadingSteps.length) {
+                const step = loadingSteps[currentStep];
+                updateProgress(step.progress, step.text);
+                currentStep++;
+                setTimeout(nextStep, step.delay);
+            } else {
+                // 加载完成，延迟一点时间后隐藏加载器
+                setTimeout(hideLoader, 500);
+            }
+        }
+        
+        // 开始加载过程
+        setTimeout(nextStep, 300);
+    }
+
+    // 隐藏加载器
+    function hideLoader() {
+        const loader = document.getElementById('page-loader');
+        if (loader) {
+            loader.classList.add('fade-out');
+            
+            // 动画结束后移除元素并恢复页面滚动
+            setTimeout(() => {
+                loader.remove();
+                document.body.classList.remove('loading');
+                
+                // 触发页面加载完成事件
+                document.dispatchEvent(new CustomEvent('pageLoaded'));
+            }, 800);
+        }
+    }
+
+    // 初始化加载器
+    function init() {
+        // 确保DOM已加载
+        if (!document.body) {
+            // 如果body还不存在，等待DOM加载完成
+            document.addEventListener('DOMContentLoaded', init);
+            return;
+        }
+        
+        // 添加样式
+        addStyles();
+        
+        // 创建加载器
+        createLoader();
+        
+        // 禁用页面滚动
+        if (document.body) {
+            document.body.classList.add('loading');
+        }
+        
+        // 等待页面资源加载完成
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                setTimeout(simulateLoading, 200);
+            });
+        } else {
+            setTimeout(simulateLoading, 200);
+        }
+        
+        // 监听 window load 事件（所有资源包括图片都加载完成）
+        window.addEventListener('load', () => {
+            // 如果加载器仍然存在，加速完成过程
+            if (document.getElementById('page-loader')) {
+                updateProgress(100, '加载完成');
+                setTimeout(hideLoader, 300);
+            }
+        });
+        
+        // 监听页面可见性变化（用户切换标签页时暂停动画）
+        document.addEventListener('visibilitychange', function() {
+            const loader = document.getElementById('page-loader');
+            if (loader) {
+                if (document.hidden) {
+                    loader.style.animationPlayState = 'paused';
+                } else {
+                    loader.style.animationPlayState = 'running';
+                }
+            }
+        });
+    }
+
+    // 提供外部接口
+    window.PageLoader = {
+        updateProgress,
+        hideLoader
+    };
+
+    // 初始化
+    init();
+})();
\ No newline at end of file
diff --git a/web_frontend/web_result/js/performance-optimizer.js b/web_frontend/web_result/js/performance-optimizer.js
new file mode 100644
index 00000000..e5d056d7
--- /dev/null
+++ b/web_frontend/web_result/js/performance-optimizer.js
@@ -0,0 +1,461 @@
+// 页面性能优化组件
+(function() {
+    let performanceData = {};
+    let isOptimizing = false;
+    
+    // 性能监测
+    function measurePerformance() {
+        if ('performance' in window) {
+            const navigation = performance.getEntriesByType('navigation')[0];
+            const paint = performance.getEntriesByType('paint');
+            
+            performanceData = {
+                // 页面加载时间
+                domLoading: navigation.domContentLoadedEventEnd - navigation.navigationStart,
+                pageLoading: navigation.loadEventEnd - navigation.navigationStart,
+                
+                // 渲染时间
+                firstPaint: paint.find(p => p.name === 'first-paint')?.startTime || 0,
+                firstContentfulPaint: paint.find(p => p.name === 'first-contentful-paint')?.startTime || 0,
+                
+                // 网络时间
+                dnsTime: navigation.domainLookupEnd - navigation.domainLookupStart,
+                connectTime: navigation.connectEnd - navigation.connectStart,
+                requestTime: navigation.responseStart - navigation.requestStart,
+                downloadTime: navigation.responseEnd - navigation.responseStart,
+                
+                // 内存使用（如果支持）
+                memory: performance.memory ? {
+                    used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024),
+                    total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024),
+                    limit: Math.round(performance.memory.jsHeapSizeLimit / 1024 / 1024)
+                } : null
+            };
+        }
+        
+        return performanceData;
+    }
+    
+    // 资源预加载优化
+    function optimizeResourceLoading() {
+        // 根据当前页面位置调整路径
+        const isInPagesFolder = window.location.pathname.includes('/pages/');
+        const basePath = isInPagesFolder ? '../' : '';
+        
+        // 预加载关键资源
+        const criticalResources = [
+            { href: basePath + 'css/styles.css', as: 'style' },
+            { href: basePath + 'css/animations.css', as: 'style' },
+            { href: basePath + 'js/nav-component.js', as: 'script' }
+        ];
+        
+        criticalResources.forEach(resource => {
+            if (!document.querySelector(`link[href*="${resource.href.split('/').pop()}"]`)) {
+                const link = document.createElement('link');
+                link.rel = 'preload';
+                link.href = resource.href;
+                link.as = resource.as;
+                document.head.appendChild(link);
+            }
+        });
+    }
+    
+    // 图片懒加载和优化
+    function optimizeImages() {
+        // 创建 Intersection Observer 用于懒加载
+        if ('IntersectionObserver' in window) {
+            const imageObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        
+                        // 懒加载图片
+                        if (img.dataset.src) {
+                            img.src = img.dataset.src;
+                            img.removeAttribute('data-src');
+                        }
+                        
+                        // 添加加载状态
+                        img.classList.add('loading');
+                        
+                        img.addEventListener('load', () => {
+                            img.classList.remove('loading');
+                            img.classList.add('loaded');
+                        });
+                        
+                        img.addEventListener('error', () => {
+                            img.classList.add('error');
+                            img.style.display = 'none';
+                        });
+                        
+                        observer.unobserve(img);
+                    }
+                });
+            }, {
+                rootMargin: '50px',
+                threshold: 0.01
+            });
+            
+            // 观察所有图片
+            document.querySelectorAll('img[data-src], img:not([src])').forEach(img => {
+                imageObserver.observe(img);
+            });
+        }
+        
+        // 为现有图片添加优化
+        document.querySelectorAll('img').forEach(img => {
+            // 添加 loading="lazy" 属性
+            if (!img.loading) {
+                img.loading = 'lazy';
+            }
+            
+            // 添加 decode="async" 属性
+            if (!img.decode) {
+                img.decode = 'async';
+            }
+            
+            // 图片错误处理
+            img.addEventListener('error', function() {
+                this.style.opacity = '0';
+                this.style.transition = 'opacity 0.3s';
+            });
+        });
+    }
+    
+    // CSS 优化
+    function optimizeCSS() {
+        // 内联关键 CSS
+        const criticalCSS = `
+            /* 关键渲染路径 CSS */
+            body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; }
+            #navbar { position: fixed; top: 0; width: 100%; z-index: 50; background: white; }
+            .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
+            
+            /* 页面加载器样式 */
+            #page-loader { position: fixed; inset: 0; z-index: 9999; background: white; display: flex; align-items: center; justify-content: center; }
+        `;
+        
+        // 添加关键 CSS 到 head
+        if (!document.getElementById('critical-css')) {
+            const style = document.createElement('style');
+            style.id = 'critical-css';
+            style.textContent = criticalCSS;
+            document.head.insertBefore(style, document.head.firstChild);
+        }
+        
+        // 异步加载非关键 CSS
+        const nonCriticalCSS = document.querySelectorAll('link[rel="stylesheet"]:not([data-critical])');
+        nonCriticalCSS.forEach(link => {
+            if (link.href.includes('tailwind') || link.href.includes('font-awesome')) {
+                link.media = 'print';
+                link.addEventListener('load', function() {
+                    this.media = 'all';
+                });
+            }
+        });
+    }
+    
+    // JavaScript 优化
+    function optimizeJavaScript() {
+        // 延迟加载非关键脚本
+        const deferScripts = [
+            'js/back-to-top.js',
+            'js/mobile-optimize.js'
+        ];
+        
+        deferScripts.forEach(src => {
+            const script = document.querySelector(`script[src*="${src}"]`);
+            if (script && !script.defer && !script.async) {
+                script.defer = true;
+            }
+        });
+        
+        // 移除未使用的事件监听器（防止内存泄漏）
+        const cleanupEvents = () => {
+            // 移除已销毁元素的事件监听器
+            document.querySelectorAll('[data-cleanup]').forEach(el => {
+                el.removeEventListener('click', null);
+                el.removeEventListener('scroll', null);
+                el.removeEventListener('resize', null);
+            });
+        };
+        
+        // 页面卸载时清理
+        window.addEventListener('beforeunload', cleanupEvents);
+    }
+    
+    // 网络优化
+    function optimizeNetwork() {
+        // DNS 预解析
+        const domains = [
+            'fonts.googleapis.com',
+            'cdnjs.cloudflare.com',
+            'cdn.jsdelivr.net'
+        ];
+        
+        domains.forEach(domain => {
+            if (!document.querySelector(`link[rel="dns-prefetch"][href*="${domain}"]`)) {
+                const link = document.createElement('link');
+                link.rel = 'dns-prefetch';
+                link.href = `https://${domain}`;
+                document.head.appendChild(link);
+            }
+        });
+        
+        // 预连接到关键域名
+        const preconnectDomains = ['fonts.gstatic.com'];
+        preconnectDomains.forEach(domain => {
+            if (!document.querySelector(`link[rel="preconnect"][href*="${domain}"]`)) {
+                const link = document.createElement('link');
+                link.rel = 'preconnect';
+                link.href = `https://${domain}`;
+                link.crossOrigin = '';
+                document.head.appendChild(link);
+            }
+        });
+    }
+    
+    // 缓存优化
+    function optimizeCache() {
+        // Service Worker 注册（如果支持）
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('./sw.js')
+                    .then(registration => {
+                        console.log('SW registered: ', registration);
+                    })
+                    .catch(registrationError => {
+                        console.log('SW registration failed: ', registrationError);
+                    });
+            });
+        }
+        
+        // 本地存储优化
+        try {
+            // 缓存静态数据
+            if (localStorage) {
+                const cacheKey = 'page-cache-' + window.location.pathname;
+                const cacheTime = 30 * 60 * 1000; // 30分钟
+                
+                const cachedData = localStorage.getItem(cacheKey);
+                if (cachedData) {
+                    const { timestamp, data } = JSON.parse(cachedData);
+                    if (Date.now() - timestamp < cacheTime) {
+                        // 使用缓存数据
+                        console.log('Using cached data');
+                    }
+                }
+            }
+        } catch (e) {
+            console.warn('LocalStorage not available');
+        }
+    }
+    
+    // 动画性能优化
+    function optimizeAnimations() {
+        // 检测是否需要减少动画
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        
+        if (prefersReducedMotion) {
+            document.body.classList.add('reduce-motion');
+            
+            // 添加减少动画的 CSS
+            const style = document.createElement('style');
+            style.textContent = `
+                .reduce-motion *,
+                .reduce-motion *::before,
+                .reduce-motion *::after {
+                    animation-duration: 0.01ms !important;
+                    animation-iteration-count: 1 !important;
+                    transition-duration: 0.01ms !important;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        
+        // 使用 transform 和 opacity 进行动画（硬件加速）
+        document.querySelectorAll('[class*="animate-"]').forEach(el => {
+            el.style.willChange = 'transform, opacity';
+            
+            // 动画完成后移除 will-change
+            el.addEventListener('animationend', function() {
+                this.style.willChange = 'auto';
+            }, { once: true });
+        });
+    }
+    
+    // 内存优化
+    function optimizeMemory() {
+        // 定期清理无用的 DOM 元素
+        const cleanup = () => {
+            // 移除隐藏的元素（如果不再需要）
+            document.querySelectorAll('.hidden, [style*="display: none"]').forEach(el => {
+                if (el.dataset.keepHidden !== 'true') {
+                    // 这里可以添加更智能的清理逻辑
+                }
+            });
+        };
+        
+        // 每5分钟执行一次清理
+        setInterval(cleanup, 5 * 60 * 1000);
+        
+        // 监听内存压力（如果支持）
+        if ('memory' in performance) {
+            const checkMemory = () => {
+                const used = performance.memory.usedJSHeapSize;
+                const limit = performance.memory.jsHeapSizeLimit;
+                const usage = used / limit;
+                
+                if (usage > 0.8) {
+                    console.warn('High memory usage detected:', Math.round(usage * 100) + '%');
+                    cleanup();
+                }
+            };
+            
+            setInterval(checkMemory, 30000); // 每30秒检查一次
+        }
+    }
+    
+    // 性能监控和报告
+    function monitorPerformance() {
+        // 使用 Performance Observer 监控
+        if ('PerformanceObserver' in window) {
+            // 监控 Long Tasks
+            const longTaskObserver = new PerformanceObserver(list => {
+                list.getEntries().forEach(entry => {
+                    if (entry.duration > 50) {
+                        console.warn('Long task detected:', entry.duration + 'ms');
+                    }
+                });
+            });
+            
+            try {
+                longTaskObserver.observe({ entryTypes: ['longtask'] });
+            } catch (e) {
+                // longtask 不被支持
+            }
+            
+            // 监控 Layout Shift
+            const clsObserver = new PerformanceObserver(list => {
+                list.getEntries().forEach(entry => {
+                    if (entry.value > 0.1) {
+                        console.warn('Layout shift detected:', entry.value);
+                    }
+                });
+            });
+            
+            try {
+                clsObserver.observe({ entryTypes: ['layout-shift'] });
+            } catch (e) {
+                // layout-shift 不被支持
+            }
+        }
+    }
+    
+    // 添加性能优化样式
+    function addPerformanceStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            /* 硬件加速 */
+            .gpu-accelerated {
+                transform: translateZ(0);
+                will-change: transform, opacity;
+            }
+            
+            /* 图片加载状态 */
+            img.loading {
+                opacity: 0.3;
+                filter: blur(5px);
+                transition: opacity 0.3s, filter 0.3s;
+            }
+            
+            img.loaded {
+                opacity: 1;
+                filter: none;
+            }
+            
+            img.error {
+                opacity: 0;
+                display: none !important;
+            }
+            
+            /* 字体加载优化 */
+            .font-loading {
+                font-display: swap;
+            }
+            
+            /* 减少重绘 */
+            .contain-layout {
+                contain: layout;
+            }
+            
+            .contain-paint {
+                contain: paint;
+            }
+            
+            /* 滚动优化 */
+            .scroll-smooth {
+                scroll-behavior: smooth;
+                -webkit-overflow-scrolling: touch;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
+    // 初始化性能优化
+    function init() {
+        if (isOptimizing) return;
+        isOptimizing = true;
+        
+        // 立即执行的优化
+        optimizeResourceLoading();
+        optimizeCSS();
+        optimizeNetwork();
+        addPerformanceStyles();
+        
+        // DOM 加载完成后执行
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                optimizeImages();
+                optimizeJavaScript();
+                optimizeAnimations();
+                monitorPerformance();
+            });
+        } else {
+            optimizeImages();
+            optimizeJavaScript();
+            optimizeAnimations();
+            monitorPerformance();
+        }
+        
+        // 页面完全加载后执行
+        window.addEventListener('load', () => {
+            optimizeCache();
+            optimizeMemory();
+            
+            // 测量性能
+            setTimeout(() => {
+                const perf = measurePerformance();
+                console.log('Performance metrics:', perf);
+                
+                // 发送性能数据到分析系统（如果需要）
+                if (window.gtag) {
+                    gtag('event', 'performance', {
+                        'page_load_time': Math.round(perf.pageLoading),
+                        'dom_load_time': Math.round(perf.domLoading)
+                    });
+                }
+            }, 1000);
+        });
+    }
+    
+    // 提供外部接口
+    window.PerformanceOptimizer = {
+        measurePerformance,
+        optimizeImages,
+        getPerformanceData: () => performanceData
+    };
+    
+    // 初始化
+    init();
+})();
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/budget.html b/web_frontend/web_result/pages/budget.html
index e115b638..6fcda023 100644
--- a/web_frontend/web_result/pages/budget.html
+++ b/web_frontend/web_result/pages/budget.html
@@ -2,10 +2,22 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <title>预算分析 - 2024长三角国际新能源汽车展</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- 页面加载动画 -->
+    <!-- 错误处理（需要最早加载） -->
+    <script src="../js/error-handler.js"></script>
+
+    <script src="../js/page-loader.js"></script>
+    
+    <!-- 移动端优化 -->
+    <script src="../js/mobile-optimize.js"></script>
+    
+    <!-- 性能优化 -->
+    <script src="../js/performance-optimizer.js"></script>
     <style>
         * {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -1088,5 +1100,6 @@
         });
     </script>
     <script src="../js/nav-component.js"></script>
+    <script src="../js/back-to-top.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/exhibition.html b/web_frontend/web_result/pages/exhibition.html
index 5e33e2af..e558b125 100644
--- a/web_frontend/web_result/pages/exhibition.html
+++ b/web_frontend/web_result/pages/exhibition.html
@@ -2,18 +2,30 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <title>展会介绍 - 2024长三角国际新能源汽车展</title>
     
     <!-- 样式表 -->
     <link rel="stylesheet" href="../css/animations.css">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
     
     <!-- 字体 -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
     
     <!-- Font Awesome 图标 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- 页面加载动画 -->
+    <!-- 错误处理（需要最早加载） -->
+    <script src="../js/error-handler.js"></script>
+
+    <script src="../js/page-loader.js"></script>
+    
+    <!-- 移动端优化 -->
+    <script src="../js/mobile-optimize.js"></script>
+    
+    <!-- 性能优化 -->
+    <script src="../js/performance-optimizer.js"></script>
     <style>
         * {
             font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -794,5 +806,6 @@
         });
     </script>
     <script src="../js/nav-component.js"></script>
+    <script src="../js/back-to-top.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/marketing.html b/web_frontend/web_result/pages/marketing.html
index 64ed0c4c..b402fcb2 100644
--- a/web_frontend/web_result/pages/marketing.html
+++ b/web_frontend/web_result/pages/marketing.html
@@ -2,18 +2,30 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <title>营销方案 - 2024长三角国际新能源汽车展</title>
     
     <!-- 样式表 -->
     <link rel="stylesheet" href="../css/animations.css">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
     
     <!-- 字体 -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
     
     <!-- Font Awesome 图标 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- 页面加载动画 -->
+    <!-- 错误处理（需要最早加载） -->
+    <script src="../js/error-handler.js"></script>
+
+    <script src="../js/page-loader.js"></script>
+    
+    <!-- 移动端优化 -->
+    <script src="../js/mobile-optimize.js"></script>
+    
+    <!-- 性能优化 -->
+    <script src="../js/performance-optimizer.js"></script>
     <style>
         * {
             font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -776,5 +788,6 @@
         </div>
     </footer>
     <script src="../js/nav-component.js"></script>
+    <script src="../js/back-to-top.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/operation.html b/web_frontend/web_result/pages/operation.html
index 2550b1bc..3d872f02 100644
--- a/web_frontend/web_result/pages/operation.html
+++ b/web_frontend/web_result/pages/operation.html
@@ -2,1379 +2,855 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>现场运营 - 2024长三角国际新能源汽车展</title>
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
+    <title>布局设计 - 2024长三角国际新能源汽车展</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="../css/animations.css">
+    
+    <!-- GSAP for animations -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+    
+    <!-- 错误处理（需要最早加载） -->
+    <script src="../js/error-handler.js"></script>
+    <script src="../js/page-loader.js"></script>
+    <script src="../js/mobile-optimize.js"></script>
+    <script src="../js/performance-optimizer.js"></script>
+    
     <style>
+        :root {
+            --bg-primary: #0a0a0a;
+            --bg-secondary: #111111;
+            --bg-tertiary: #1a1a1a;
+            --accent: #646cff;
+            --accent-hover: #535bf2;
+            --text-primary: #ffffff;
+            --text-secondary: #a1a1aa;
+            --border-color: rgba(255, 255, 255, 0.1);
+        }
+        
         * {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            box-sizing: border-box;
         }
         
-        /* 3D展馆效果 */
-        .hall-3d {
-            perspective: 1000px;
+        body {
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            overflow-x: hidden;
+        }
+        
+        /* Smooth scrolling */
+        html {
+            scroll-behavior: smooth;
+        }
+        
+        /* Glass effect */
+        .glass {
+            background: rgba(255, 255, 255, 0.02);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--border-color);
+        }
+        
+        /* Gradient text */
+        .gradient-text {
+            background: linear-gradient(135deg, #646cff 0%, #b364ff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        /* Section transitions */
+        section {
+            transition: all 0.3s ease;
+        }
+        
+        /* Horizontal scroll for Duoduo Agent */
+        .horizontal-container {
+            width: 400vw;
+            height: 100vh;
+            display: flex;
+            flex-wrap: nowrap;
+            gap: 0;
+            will-change: transform;
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+        }
+        
+        .panel {
+            width: 80vw;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            flex-shrink: 0;
+            padding: 0 4rem;
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
             transform-style: preserve-3d;
+            -webkit-transform-style: preserve-3d;
         }
         
-        .hall-card {
-            transition: all 0.5s ease;
-            transform-style: preserve-3d;
+        /* Specific optimization for the last panel */
+        .panel:last-child {
+            will-change: auto !important;
+            transform: translateZ(0);
         }
         
-        .hall-card:hover {
-            transform: translateZ(20px) rotateY(5deg);
-            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
-        }
-        
-        /* 流动光效 */
-        .flow-light {
+        /* Duoduo section pinning optimization */
+        #duoduo-section {
             position: relative;
             overflow: hidden;
+            will-change: transform;
+            transform: translateZ(0);
+            transition: none !important;
         }
         
-        .flow-light::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
-            transform: rotate(45deg);
-            animation: flowLight 3s linear infinite;
+        /* Pin spacer optimization */
+        .pin-spacer {
+            overflow: visible !important;
         }
         
-        @keyframes flowLight {
-            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
-            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+
+        
+        /* Progress indicator */
+        .progress-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--text-secondary);
+            transition: all 0.3s ease;
         }
         
-        /* 数字滚动效果 */
-        .counter {
-            animation: countUp 2s ease-out forwards;
-        }
-        
-        @keyframes countUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        /* 时间轴动画 */
-        .timeline-item {
-            opacity: 0;
-            animation: slideInLeft 0.6s ease-out forwards;
-        }
-        
-        .timeline-item:nth-child(1) { animation-delay: 0.1s; }
-        .timeline-item:nth-child(2) { animation-delay: 0.2s; }
-        .timeline-item:nth-child(3) { animation-delay: 0.3s; }
-        .timeline-item:nth-child(4) { animation-delay: 0.4s; }
-        
-        @keyframes slideInLeft {
-            from { 
-                opacity: 0;
-                transform: translateX(-50px);
-            }
-            to { 
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-        
-        /* 悬浮图标动画 */
-        .float-icon {
-            animation: float 3s ease-in-out infinite;
-        }
-        
-        .float-icon:nth-child(odd) {
-            animation-delay: 0.5s;
+        .progress-dot.active {
+            background: var(--accent);
+            transform: scale(1.5);
         }
         
+        /* Subtle animations */
         @keyframes float {
             0%, 100% { transform: translateY(0px); }
             50% { transform: translateY(-20px); }
         }
         
-        /* 脉冲动画 */
-        .pulse-dot {
-            animation: pulse 2s infinite;
+        .float-animation {
+            animation: float 6s ease-in-out infinite;
         }
         
-        @keyframes pulse {
-            0%, 100% { 
-                transform: scale(1);
-                opacity: 1;
-            }
-            50% { 
-                transform: scale(1.2);
-                opacity: 0.7;
-            }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
         }
         
-        /* 渐变动画背景 */
-        .gradient-animated {
-            background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
-            background-size: 400% 400%;
-            animation: gradientShift 15s ease infinite;
+        ::-webkit-scrollbar-track {
+            background: var(--bg-secondary);
         }
         
-        @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
+        ::-webkit-scrollbar-thumb {
+            background: var(--accent);
+            border-radius: 4px;
         }
         
-        /* 霓虹灯效果 */
-        .neon-glow {
-            text-shadow: 
-                0 0 10px rgba(102, 126, 234, 0.8),
-                0 0 20px rgba(102, 126, 234, 0.6),
-                0 0 30px rgba(102, 126, 234, 0.4);
-        }
-        
-        /* Glass morphism effect */
-        .glass-morphism {
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-hover);
         }
     </style>
 </head>
-<body class="bg-gray-50">
+<body>
     <!-- Navigation -->
-    <nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
+    <nav class="fixed top-0 w-full glass z-50 transition-all duration-300">
         <!-- Content will be dynamically generated by nav-component.js -->
     </nav>
 
-    <!-- Page Header with Background Image -->
-    <section class="relative pt-24 pb-16 overflow-hidden">
-        <!-- 背景图片 -->
-        <div class="absolute inset-0" style="background-image: url('../../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;">
-            <div class="absolute inset-0 bg-gradient-to-b from-teal-900/90 via-blue-900/80 to-indigo-900/90"></div>
-        </div>
-        
-        <!-- 动态粒子背景 -->
+    <!-- Hero Section -->
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <!-- Background Image with Overlay -->
         <div class="absolute inset-0">
-            <div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
-            <div class="absolute bottom-10 right-10 w-40 h-40 bg-blue-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
-            <div class="absolute top-1/2 left-1/3 w-24 h-24 bg-emerald-300/10 rounded-full filter blur-2xl animate-pulse animation-delay-4000"></div>
+            <img src="../data/会展策划/image/Whisk_9e8c1f44ac.jpg" 
+                 alt="Exhibition Background" 
+                 class="w-full h-full object-cover opacity-20"
+                 loading="eager">
+            <div class="absolute inset-0 bg-gradient-to-br from-black/80 via-gray-900/70 to-black/80"></div>
         </div>
         
-        <div class="container mx-auto px-6 relative z-10">
-            <div class="text-center text-white animate-fadeInUp">
-                <h1 class="text-5xl md:text-6xl font-bold mb-6 neon-glow">
-                    <i class="fas fa-warehouse mr-4"></i>
-                    现场运营方案
-                </h1>
-                <p class="text-xl md:text-2xl opacity-90 mb-8">
-                    智能化管理 · 专业化服务 · 数字化体验
-                </p>
-                <div class="flex flex-wrap justify-center gap-4">
-                    <div class="glass-morphism px-6 py-3 rounded-full">
-                        <i class="fas fa-users mr-2"></i>
-                        预计接待: <span class="font-bold">10万+</span> 专业观众
-                    </div>
-                    <div class="glass-morphism px-6 py-3 rounded-full">
-                        <i class="fas fa-building mr-2"></i>
-                        展馆面积: <span class="font-bold">50,000㎡</span>
-                    </div>
-                    <div class="glass-morphism px-6 py-3 rounded-full">
-                        <i class="fas fa-user-tie mr-2"></i>
-                        服务团队: <span class="font-bold">500+</span> 专业人员
-                    </div>
+        <!-- Subtle gradient overlay -->
+        <div class="absolute inset-0 opacity-30">
+            <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-transparent to-blue-900/20"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10 text-center">
+            <h1 class="text-6xl md:text-8xl font-black mb-6">
+                AI布局<span class="gradient-text">设计</span>
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-400 mb-12 max-w-3xl mx-auto">
+                基于深度学习的展会空间智能规划系统
+            </p>
+            
+            <!-- Key benefits -->
+            <div class="flex flex-wrap justify-center gap-12 mt-16 mb-24">
+                <div class="text-center">
+                    <div class="text-5xl font-bold gradient-text mb-2">20小时</div>
+                    <div class="text-sm text-gray-500 uppercase tracking-wider">完整方案交付</div>
                 </div>
+                <div class="text-center">
+                    <div class="text-5xl font-bold gradient-text mb-2">95%</div>
+                    <div class="text-sm text-gray-500 uppercase tracking-wider">一次通过率</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-5xl font-bold gradient-text mb-2">80%</div>
+                    <div class="text-sm text-gray-500 uppercase tracking-wider">成本节约</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Scroll indicator (moved outside container) -->
+        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-gray-400 z-10">
+            <div class="flex flex-col items-center">
+                <i class="fas fa-chevron-down animate-bounce text-xl mb-2"></i>
+                <span class="text-xs">向下滚动</span>
             </div>
         </div>
     </section>
 
-    <!-- 3D Exhibition Hall Layout -->
-    <section class="py-20 bg-white relative overflow-hidden">
-        <!-- 背景装饰 -->
-        <div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/新能源车.jpg'); background-size: cover;"></div>
-        
-        <div class="container mx-auto px-6 relative z-10">
-            <div class="text-center mb-12 animate-fadeInUp">
-                <h2 class="text-4xl font-bold text-gray-800 mb-4">
-                    <i class="fas fa-map-marked-alt text-teal-600 mr-3"></i>
-                    智能展馆布局规划
-                </h2>
-                <p class="text-xl text-gray-700 font-medium">基于人流动线设计的科学布局</p>
+    <!-- How AI Design Works -->
+    <section class="py-32 relative">
+        <div class="container mx-auto px-6">
+            <div class="mb-20">
+                <h2 class="text-5xl font-black mb-6">AI设计原理</h2>
+                <p class="text-xl text-gray-400 max-w-2xl">三步实现从需求到方案的智能转化</p>
             </div>
             
-            <!-- 3D展馆可视化 -->
-            <div class="hall-3d max-w-7xl mx-auto mb-16">
-                <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
-                    <!-- A馆 - 整车展示 -->
-                    <div class="lg:col-span-2 hall-card">
-                        <div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-8 text-white shadow-2xl flow-light">
-                            <div class="flex items-center justify-between mb-6">
-                                <h3 class="text-2xl font-bold flex items-center">
-                                    <i class="fas fa-car-side mr-3"></i>
-                                    A馆 - 旗舰整车展示区
-                                </h3>
-                                <span class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-lg font-semibold">
-                                    20,000㎡
-                                </span>
-                            </div>
-                            
-                            <div class="grid grid-cols-2 gap-4 mb-6">
-                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
-                                    <h4 class="font-bold mb-2">特斯拉专区</h4>
-                                    <p class="text-sm opacity-90">Model S/3/X/Y全系展示</p>
-                                    <p class="text-xs mt-2 opacity-75">展位: A01-A10</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
-                                    <h4 class="font-bold mb-2">比亚迪专区</h4>
-                                    <p class="text-sm opacity-90">王朝/海洋系列</p>
-                                    <p class="text-xs mt-2 opacity-75">展位: A11-A20</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
-                                    <h4 class="font-bold mb-2">蔚来专区</h4>
-                                    <p class="text-sm opacity-90">ET7/ES8/EC6展示</p>
-                                    <p class="text-xs mt-2 opacity-75">展位: A21-A30</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
-                                    <h4 class="font-bold mb-2">理想专区</h4>
-                                    <p class="text-sm opacity-90">L9/L8/L7全系</p>
-                                    <p class="text-xs mt-2 opacity-75">展位: A31-A40</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-center justify-between text-sm">
-                                <div class="flex items-center">
-                                    <i class="fas fa-users mr-2"></i>
-                                    容纳人数: 5000人
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-wifi mr-2"></i>
-                                    5G全覆盖
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- B馆 - 核心零部件 -->
-                    <div class="hall-card">
-                        <div class="bg-gradient-to-br from-green-600 to-emerald-700 rounded-2xl p-6 text-white shadow-2xl h-full flow-light">
-                            <h3 class="text-xl font-bold mb-4 flex items-center">
-                                <i class="fas fa-microchip mr-2"></i>
-                                B馆 - 核心零部件
-                            </h3>
-                            <span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-4">
-                                15,000㎡
-                            </span>
-                            
-                            <div class="space-y-3">
-                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
-                                    <h4 class="font-semibold flex items-center">
-                                        <i class="fas fa-battery-full mr-2 text-yellow-300"></i>
-                                        动力电池展区
-                                    </h4>
-                                    <p class="text-xs mt-1 opacity-90">宁德时代、比亚迪刀片电池</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
-                                    <h4 class="font-semibold flex items-center">
-                                        <i class="fas fa-cog mr-2 text-blue-300"></i>
-                                        驱动电机展区
-                                    </h4>
-                                    <p class="text-xs mt-1 opacity-90">精进电动、汇川技术</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
-                                    <h4 class="font-semibold flex items-center">
-                                        <i class="fas fa-brain mr-2 text-purple-300"></i>
-                                        电控系统展区
-                                    </h4>
-                                    <p class="text-xs mt-1 opacity-90">华为、英飞凌、比亚迪半导体</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- C馆 - 智能交通 -->
-                    <div class="hall-card">
-                        <div class="bg-gradient-to-br from-purple-600 to-indigo-700 rounded-2xl p-6 text-white shadow-2xl h-full flow-light">
-                            <h3 class="text-xl font-bold mb-4 flex items-center">
-                                <i class="fas fa-satellite-dish mr-2"></i>
-                                C馆 - 智能交通
-                            </h3>
-                            <span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-4">
-                                10,000㎡
-                            </span>
-                            
-                            <div class="space-y-3">
-                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
-                                    <h4 class="font-semibold flex items-center">
-                                        <i class="fas fa-broadcast-tower mr-2 text-cyan-300"></i>
-                                        V2X通信展示
-                                    </h4>
-                                    <p class="text-xs mt-1 opacity-90">车路协同解决方案</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
-                                    <h4 class="font-semibold flex items-center">
-                                        <i class="fas fa-road mr-2 text-green-300"></i>
-                                        智慧路网系统
-                                    </h4>
-                                    <p class="text-xs mt-1 opacity-90">智能交通管理平台</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
-                                    <h4 class="font-semibold flex items-center">
-                                        <i class="fas fa-robot mr-2 text-pink-300"></i>
-                                        自动驾驶技术
-                                    </h4>
-                                    <p class="text-xs mt-1 opacity-90">L4级自动驾驶演示</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- 室外展区 -->
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
-                    <div class="hall-card">
-                        <div class="bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl p-6 text-white shadow-2xl flow-light">
-                            <h3 class="text-lg font-bold mb-3 flex items-center">
-                                <i class="fas fa-route mr-2"></i>
-                                室外体验区
-                            </h3>
-                            <span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-3">
-                                5,000㎡
-                            </span>
-                            <div class="space-y-2 text-sm">
-                                <div class="flex items-center">
-                                    <i class="fas fa-car mr-2"></i>
-                                    试乘试驾专业赛道
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-parking mr-2"></i>
-                                    自动泊车演示区
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-charging-station mr-2"></i>
-                                    超充站体验区
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="hall-card">
-                        <div class="bg-gradient-to-br from-pink-500 to-purple-600 rounded-2xl p-6 text-white shadow-2xl flow-light">
-                            <h3 class="text-lg font-bold mb-3 flex items-center">
-                                <i class="fas fa-utensils mr-2"></i>
-                                配套服务区
-                            </h3>
-                            <div class="grid grid-cols-2 gap-2 text-sm">
-                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
-                                    <i class="fas fa-coffee text-xl mb-1"></i>
-                                    <p class="text-xs">咖啡厅</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
-                                    <i class="fas fa-hamburger text-xl mb-1"></i>
-                                    <p class="text-xs">餐饮区</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
-                                    <i class="fas fa-couch text-xl mb-1"></i>
-                                    <p class="text-xs">休息区</p>
-                                </div>
-                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
-                                    <i class="fas fa-shopping-bag text-xl mb-1"></i>
-                                    <p class="text-xs">纪念品店</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="hall-card">
-                        <div class="bg-gradient-to-br from-gray-600 to-gray-800 rounded-2xl p-6 text-white shadow-2xl flow-light">
-                            <h3 class="text-lg font-bold mb-3 flex items-center">
-                                <i class="fas fa-briefcase mr-2"></i>
-                                商务中心
-                            </h3>
-                            <div class="space-y-2 text-sm">
-                                <div class="flex items-center justify-between">
-                                    <span><i class="fas fa-door-open mr-2"></i>VIP会议室</span>
-                                    <span class="text-xs bg-white/20 px-2 py-1 rounded">10间</span>
-                                </div>
-                                <div class="flex items-center justify-between">
-                                    <span><i class="fas fa-handshake mr-2"></i>洽谈区</span>
-                                    <span class="text-xs bg-white/20 px-2 py-1 rounded">50位</span>
-                                </div>
-                                <div class="flex items-center justify-between">
-                                    <span><i class="fas fa-print mr-2"></i>商务服务</span>
-                                    <span class="text-xs bg-white/20 px-2 py-1 rounded">24h</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 智能导览系统 -->
-            <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-3xl p-10 mb-16">
-                <h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
-                    <i class="fas fa-compass text-blue-600 mr-3"></i>
-                    智能导览系统
-                </h3>
-                
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
-                            <i class="fas fa-mobile-alt text-white text-2xl"></i>
-                        </div>
-                        <h4 class="text-lg font-bold mb-2">AR实景导航</h4>
-                        <p class="text-gray-600 text-sm mb-3">手机扫码即可获得增强现实导航</p>
-                        <div class="text-xs text-gray-500">
-                            <div class="flex items-center mb-1">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                精准定位展位
-                            </div>
-                            <div class="flex items-center">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                3D路径指引
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                        <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
-                            <i class="fas fa-brain text-white text-2xl"></i>
-                        </div>
-                        <h4 class="text-lg font-bold mb-2">AI智能推荐</h4>
-                        <p class="text-gray-600 text-sm mb-3">根据兴趣智能规划参观路线</p>
-                        <div class="text-xs text-gray-500">
-                            <div class="flex items-center mb-1">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                个性化推荐
-                            </div>
-                            <div class="flex items-center">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                最优路径规划
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                        <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
-                            <i class="fas fa-map-marked-alt text-white text-2xl"></i>
-                        </div>
-                        <h4 class="text-lg font-bold mb-2">实时热力图</h4>
-                        <p class="text-gray-600 text-sm mb-3">显示各展区实时人流密度</p>
-                        <div class="text-xs text-gray-500">
-                            <div class="flex items-center mb-1">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                避开拥挤区域
-                            </div>
-                            <div class="flex items-center">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                预估等待时间
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                        <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
-                            <i class="fas fa-language text-white text-2xl"></i>
-                        </div>
-                        <h4 class="text-lg font-bold mb-2">多语言服务</h4>
-                        <p class="text-gray-600 text-sm mb-3">支持8种语言实时翻译</p>
-                        <div class="text-xs text-gray-500">
-                            <div class="flex items-center mb-1">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                语音导览
-                            </div>
-                            <div class="flex items-center">
-                                <i class="fas fa-check text-green-500 mr-2"></i>
-                                实时翻译
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 参观动线设计 -->
-            <div class="bg-white rounded-3xl shadow-xl p-10">
-                <h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
-                    <i class="fas fa-route text-emerald-600 mr-3"></i>
-                    科学参观动线设计
-                </h3>
-                
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
-                    <div>
-                        <h4 class="text-xl font-bold mb-6 text-gray-700">主要参观路线</h4>
-                        <div class="space-y-4">
-                            <div class="flex items-start timeline-item">
-                                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
-                                    <span class="font-bold">1</span>
-                                </div>
-                                <div class="flex-1">
-                                    <h5 class="font-bold text-lg mb-2">主入口 - 形象展示区</h5>
-                                    <p class="text-gray-600 text-sm mb-2">LED巨幕欢迎墙、展会主题展示</p>
-                                    <div class="bg-blue-50 rounded-lg p-3 text-sm">
-                                        <i class="fas fa-clock text-blue-600 mr-2"></i>
-                                        预计停留: 5-10分钟
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start timeline-item">
-                                <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
-                                    <span class="font-bold">2</span>
-                                </div>
-                                <div class="flex-1">
-                                    <h5 class="font-bold text-lg mb-2">A馆 - 整车展示</h5>
-                                    <p class="text-gray-600 text-sm mb-2">品牌旗舰车型、新品发布区</p>
-                                    <div class="bg-green-50 rounded-lg p-3 text-sm">
-                                        <i class="fas fa-clock text-green-600 mr-2"></i>
-                                        预计停留: 60-90分钟
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start timeline-item">
-                                <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
-                                    <span class="font-bold">3</span>
-                                </div>
-                                <div class="flex-1">
-                                    <h5 class="font-bold text-lg mb-2">B馆 - 核心技术</h5>
-                                    <p class="text-gray-600 text-sm mb-2">三电系统、智能座舱体验</p>
-                                    <div class="bg-purple-50 rounded-lg p-3 text-sm">
-                                        <i class="fas fa-clock text-purple-600 mr-2"></i>
-                                        预计停留: 45-60分钟
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start timeline-item">
-                                <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
-                                    <span class="font-bold">4</span>
-                                </div>
-                                <div class="flex-1">
-                                    <h5 class="font-bold text-lg mb-2">室外 - 互动体验</h5>
-                                    <p class="text-gray-600 text-sm mb-2">试乘试驾、充电演示</p>
-                                    <div class="bg-orange-50 rounded-lg p-3 text-sm">
-                                        <i class="fas fa-clock text-orange-600 mr-2"></i>
-                                        预计停留: 30-45分钟
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div>
-                        <h4 class="text-xl font-bold mb-6 text-gray-700">专业观众路线</h4>
-                        <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6">
-                            <div class="space-y-4">
-                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
-                                    <h5 class="font-bold mb-2 flex items-center">
-                                        <i class="fas fa-user-tie text-blue-600 mr-2"></i>
-                                        VIP快速通道
-                                    </h5>
-                                    <p class="text-sm text-gray-600">专属入口、快速登记、专人接待</p>
-                                </div>
-                                
-                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
-                                    <h5 class="font-bold mb-2 flex items-center">
-                                        <i class="fas fa-handshake text-green-600 mr-2"></i>
-                                        商务洽谈路线
-                                    </h5>
-                                    <p class="text-sm text-gray-600">直达商务中心、预约制参观、一对一对接</p>
-                                </div>
-                                
-                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
-                                    <h5 class="font-bold mb-2 flex items-center">
-                                        <i class="fas fa-microscope text-purple-600 mr-2"></i>
-                                        技术交流路线
-                                    </h5>
-                                    <p class="text-sm text-gray-600">技术论坛、专家讲座、研发展示</p>
-                                </div>
-                                
-                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
-                                    <h5 class="font-bold mb-2 flex items-center">
-                                        <i class="fas fa-newspaper text-orange-600 mr-2"></i>
-                                        媒体采访路线
-                                    </h5>
-                                    <p class="text-sm text-gray-600">新闻中心、采访间、直播区</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Duoduo Agent 可视化设计流程 -->
-    <section class="py-20 bg-white relative overflow-hidden">
-        <!-- 背景装饰 -->
-        <div class="absolute inset-0 opacity-5">
-            <div class="absolute top-20 left-20 w-64 h-64 bg-purple-400 rounded-full filter blur-3xl"></div>
-            <div class="absolute bottom-20 right-20 w-64 h-64 bg-blue-400 rounded-full filter blur-3xl"></div>
-        </div>
-        
-        <div class="container mx-auto px-6 relative z-10">
-            <div class="text-center mb-12 animate-fadeInUp">
-                <h2 class="text-4xl font-bold text-gray-800 mb-4">
-                    <i class="fas fa-robot text-purple-600 mr-3"></i>
-                    Duoduo Agent 智能设计系统
-                </h2>
-                <p class="text-xl text-gray-700 font-medium mb-3">从想法到展位概念的完整可视化流程</p>
-                <p class="text-lg text-gray-600">让学生直接体验AI驱动的设计革新，快速实现创意落地</p>
-            </div>
-            
-            <!-- 流程展示 -->
-            <div class="max-w-7xl mx-auto">
-                <!-- 流程时间线 -->
-                <div class="relative mb-12">
-                    <div class="absolute left-0 right-0 top-1/2 h-1 bg-gradient-to-r from-purple-400 via-blue-400 to-emerald-400 transform -translate-y-1/2 rounded-full"></div>
-                    <div class="flex justify-between relative">
-                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-purple-400 animate-pulse">
-                            <i class="fas fa-lightbulb text-purple-600 text-2xl"></i>
-                        </div>
-                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-indigo-400">
-                            <i class="fas fa-drafting-compass text-indigo-600 text-2xl"></i>
-                        </div>
-                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-blue-400">
-                            <i class="fas fa-paint-brush text-blue-600 text-2xl"></i>
-                        </div>
-                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-cyan-400">
-                            <i class="fas fa-cube text-cyan-600 text-2xl"></i>
-                        </div>
-                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-teal-400">
-                            <i class="fas fa-palette text-teal-600 text-2xl"></i>
-                        </div>
-                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-emerald-400 animate-pulse">
-                            <i class="fas fa-store text-emerald-600 text-2xl"></i>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- 设计阶段展示 - 横向滚动 -->
-                <div class="overflow-x-auto pb-6">
-                    <div class="flex gap-6" style="min-width: 1600px;">
-                        <!-- Stage 1: CAD设计图 -->
-                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
-                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
-                            <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-4">
-                                <h3 class="text-lg font-bold flex items-center">
-                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">1</span>
-                                    CAD设计图
-                                </h3>
-                                <p class="text-sm opacity-90 mt-1">精确的工程制图</p>
-                            </div>
-                            <div class="p-2">
-                                <div class="relative overflow-hidden rounded-lg">
-                                    <img src="../../data/会展策划/image/Whisk_dcc81c5212.jpg" 
-                                         alt="CAD设计图" 
-                                         class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
-                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
-                                        <div class="absolute bottom-3 left-3 text-white">
-                                            <p class="text-xs">AutoCAD 2024</p>
-                                            <p class="text-xs opacity-75">精度: 0.1mm</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="px-4 pb-4 pt-2">
-                                <div class="flex items-center justify-between text-xs text-gray-600">
-                                    <span><i class="fas fa-clock mr-1"></i>2小时</span>
-                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                        
-                        <!-- Stage 2: 概念设计图 -->
-                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
-                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
-                            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 text-white p-4">
-                                <h3 class="text-lg font-bold flex items-center">
-                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">2</span>
-                                    概念设计图
-                                </h3>
-                                <p class="text-sm opacity-90 mt-1">创意概念可视化</p>
-                            </div>
-                            <div class="p-2">
-                                <div class="relative overflow-hidden rounded-lg">
-                                    <img src="../../data/会展策划/image/Whisk_e8f83d1a37.jpg" 
-                                         alt="概念设计图" 
-                                         class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
-                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
-                                        <div class="absolute bottom-3 left-3 text-white">
-                                            <p class="text-xs">Adobe Illustrator</p>
-                                            <p class="text-xs opacity-75">矢量设计</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="px-4 pb-4 pt-2">
-                                <div class="flex items-center justify-between text-xs text-gray-600">
-                                    <span><i class="fas fa-clock mr-1"></i>3小时</span>
-                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                        
-                        <!-- Stage 3: 三维建模白模 -->
-                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
-                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
-                            <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4">
-                                <h3 class="text-lg font-bold flex items-center">
-                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">3</span>
-                                    三维建模白模
-                                </h3>
-                                <p class="text-sm opacity-90 mt-1">空间结构展示</p>
-                            </div>
-                            <div class="p-2">
-                                <div class="relative overflow-hidden rounded-lg">
-                                    <img src="../../data/会展策划/image/Whisk_be64a7b61f.jpg" 
-                                         alt="三维建模白模" 
-                                         class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
-                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
-                                        <div class="absolute bottom-3 left-3 text-white">
-                                            <p class="text-xs">SketchUp Pro</p>
-                                            <p class="text-xs opacity-75">多边形: 128K</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="px-4 pb-4 pt-2">
-                                <div class="flex items-center justify-between text-xs text-gray-600">
-                                    <span><i class="fas fa-clock mr-1"></i>4小时</span>
-                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                        
-                        <!-- Stage 4: 三维渲染图 -->
-                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
-                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
-                            <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white p-4">
-                                <h3 class="text-lg font-bold flex items-center">
-                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">4</span>
-                                    三维渲染图
-                                </h3>
-                                <p class="text-sm opacity-90 mt-1">真实感材质渲染</p>
-                            </div>
-                            <div class="p-2">
-                                <div class="relative overflow-hidden rounded-lg">
-                                    <img src="../../data/会展策划/image/Whisk_192cdc54bc.jpg" 
-                                         alt="三维渲染图" 
-                                         class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
-                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
-                                        <div class="absolute bottom-3 left-3 text-white">
-                                            <p class="text-xs">V-Ray Next</p>
-                                            <p class="text-xs opacity-75">4K渲染</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="px-4 pb-4 pt-2">
-                                <div class="flex items-center justify-between text-xs text-gray-600">
-                                    <span><i class="fas fa-clock mr-1"></i>6小时</span>
-                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                        
-                        <!-- Stage 5: 展位概念设计图 -->
-                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
-                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl ring-4 ring-emerald-400 ring-opacity-50">
-                            <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white p-4">
-                                <h3 class="text-lg font-bold flex items-center">
-                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">5</span>
-                                    展位概念设计
-                                </h3>
-                                <p class="text-sm opacity-90 mt-1">最终展示方案</p>
-                            </div>
-                            <div class="p-2">
-                                <div class="relative overflow-hidden rounded-lg">
-                                    <img src="../../data/会展策划/image/Whisk_c478fe089d.jpg" 
-                                         alt="展位概念设计图" 
-                                         class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
-                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
-                                        <div class="absolute bottom-3 left-3 text-white">
-                                            <p class="text-xs">Final Design</p>
-                                            <p class="text-xs opacity-75">Ready to Build</p>
-                                        </div>
-                                    </div>
-                                    <div class="absolute top-3 right-3">
-                                        <span class="bg-emerald-500 text-white text-xs px-2 py-1 rounded-full animate-pulse">
-                                            <i class="fas fa-star mr-1"></i>最终方案
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="px-4 pb-4 pt-2">
-                                <div class="flex items-center justify-between text-xs text-gray-600">
-                                    <span><i class="fas fa-clock mr-1"></i>总计: 20小时</span>
-                                    <span><i class="fas fa-trophy text-yellow-500 mr-1"></i>已交付</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    </div>
-                </div>
-                
-                <!-- AI功能特点 -->
-                <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mr-4">
-                                <i class="fas fa-brain text-white text-xl"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-gray-800">AI智能生成</h4>
-                                <p class="text-sm text-gray-600">基于需求自动设计</p>
-                            </div>
-                        </div>
-                        <ul class="space-y-2 text-sm text-gray-600">
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>自动识别设计需求</li>
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>智能优化空间布局</li>
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>实时渲染预览效果</li>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Step 1 -->
+                <div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
+                    <div class="text-6xl font-black gradient-text mb-4">01</div>
+                    <h3 class="text-2xl font-bold mb-4">需求理解</h3>
+                    <div class="space-y-3 text-gray-400">
+                        <p class="text-white">自然语言处理引擎</p>
+                        <ul class="space-y-2 text-sm">
+                            <li>• 解析展会规模、预算、风格偏好</li>
+                            <li>• 提取空间约束和功能需求</li>
+                            <li>• 识别品牌VI和设计语言</li>
                         </ul>
-                    </div>
-                    
-                    <div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mr-4">
-                                <i class="fas fa-tachometer-alt text-white text-xl"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-gray-800">效率提升90%</h4>
-                                <p class="text-sm text-gray-600">传统流程需要2周</p>
-                            </div>
+                        <div class="mt-4 pt-4 border-t border-gray-700">
+                            <span class="text-xs text-emerald-400">处理时间: 30秒</span>
                         </div>
-                        <ul class="space-y-2 text-sm text-gray-600">
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>20小时完成全流程</li>
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>无需专业设计背景</li>
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>一键导出施工图纸</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center mr-4">
-                                <i class="fas fa-users text-white text-xl"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-gray-800">学生即可上手</h4>
-                                <p class="text-sm text-gray-600">零基础快速掌握</p>
-                            </div>
-                        </div>
-                        <ul class="space-y-2 text-sm text-gray-600">
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>可视化操作界面</li>
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>智能设计建议</li>
-                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>实时协作功能</li>
-                        </ul>
                     </div>
                 </div>
                 
-                <!-- 功能说明 -->
-                <div class="text-center mt-12">
-                    <p class="text-gray-600 text-lg font-medium">
-                        <i class="fas fa-info-circle mr-2 text-blue-500"></i>
-                        支持团队协作 · 云端存储 · 版本管理
-                    </p>
+                <!-- Step 2 -->
+                <div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
+                    <div class="text-6xl font-black gradient-text mb-4">02</div>
+                    <h3 class="text-2xl font-bold mb-4">方案生成</h3>
+                    <div class="space-y-3 text-gray-400">
+                        <p class="text-white">深度学习生成网络</p>
+                        <ul class="space-y-2 text-sm">
+                            <li>• 10万+案例知识图谱匹配</li>
+                            <li>• 多目标优化算法求解</li>
+                            <li>• 5-10个方案并行生成</li>
+                        </ul>
+                        <div class="mt-4 pt-4 border-t border-gray-700">
+                            <span class="text-xs text-blue-400">处理时间: 15分钟</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Step 3 -->
+                <div class="glass rounded-2xl p-8 hover:transform hover:scale-105 transition-all duration-300">
+                    <div class="text-6xl font-black gradient-text mb-4">03</div>
+                    <h3 class="text-2xl font-bold mb-4">智能优化</h3>
+                    <div class="space-y-3 text-gray-400">
+                        <p class="text-white">规范校验与仿真</p>
+                        <ul class="space-y-2 text-sm">
+                            <li>• 消防/建筑规范自动校验</li>
+                            <li>• 人流动线模拟优化</li>
+                            <li>• 成本-效果平衡调整</li>
+                        </ul>
+                        <div class="mt-4 pt-4 border-t border-gray-700">
+                            <span class="text-xs text-purple-400">处理时间: 5分钟</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- 数字化服务体系 -->
-    <section class="py-20 bg-gray-50 relative overflow-hidden">
-        <div class="absolute inset-0">
-            <div class="absolute top-20 left-20 w-64 h-64 bg-blue-200/30 rounded-full filter blur-3xl"></div>
-            <div class="absolute bottom-20 right-20 w-80 h-80 bg-purple-200/30 rounded-full filter blur-3xl"></div>
+    <!-- Duoduo Agent System - Full Screen Horizontal Scroll -->
+    <section id="duoduo-section" class="relative" style="will-change: transform;">
+        <!-- Scroll Mode Toggle Button -->
+        <div class="fixed top-24 right-6 z-50">
+            <button id="scroll-mode-toggle" class="px-4 py-2 bg-gray-800/90 backdrop-blur hover:bg-gray-700/90 text-white rounded-lg transition-all border border-gray-600 shadow-lg">
+                <i class="fas fa-exchange-alt mr-2"></i>
+                <span class="mode-text">切换滚动模式</span>
+            </button>
         </div>
         
-        <div class="container mx-auto px-6 relative z-10">
-            <div class="text-center mb-12 animate-fadeInUp">
-                <h2 class="text-4xl font-bold text-gray-800 mb-4">
-                    <i class="fas fa-server text-purple-600 mr-3"></i>
-                    数字化服务体系
-                </h2>
-                <p class="text-xl text-gray-600">全方位智能化服务保障</p>
+        <div class="sticky top-0 h-screen overflow-hidden" style="transform: translateZ(0); backface-visibility: hidden;">
+            <div id="horizontal-container" class="horizontal-container">
+                <!-- Panel 1: Introduction -->
+                <div class="panel relative overflow-hidden">
+                    <!-- Background Image with Overlay -->
+                    <div class="absolute inset-0 z-0">
+                        <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1920&q=80" 
+                             alt="Exhibition Background" 
+                             class="w-full h-full object-cover opacity-20"
+                             loading="lazy">
+                        <div class="absolute inset-0 bg-gradient-to-br from-black/85 via-gray-900/75 to-black/85"></div>
+                    </div>
+                    
+                    <div class="text-center max-w-4xl relative z-10">
+                        <h2 class="text-6xl md:text-8xl font-black mb-8">
+                            Duoduo <span class="gradient-text">Agent</span>
+                        </h2>
+                        <p class="text-2xl text-gray-300 mb-6">
+                            专业级AI布局设计系统
+                        </p>
+                        <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-8">
+                            基于10万+展会设计案例训练，融合行业最佳实践
+                        </p>
+                        <div class="flex justify-center gap-8 mb-12 text-sm">
+                            <div class="text-center">
+                                <div class="text-3xl font-bold text-emerald-400">95%</div>
+                                <div class="text-gray-500">设计准确率</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-3xl font-bold text-blue-400">20h</div>
+                                <div class="text-gray-500">交付时间</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-3xl font-bold text-purple-400">80%</div>
+                                <div class="text-gray-500">成本降低</div>
+                            </div>
+                        </div>
+                        <button class="px-8 py-4 bg-gradient-to-r from-emerald-500 to-blue-500 hover:from-emerald-600 hover:to-blue-600 text-white font-bold rounded-full transition-colors shadow-lg">
+                            <i class="fas fa-play mr-3"></i>开启智能设计之旅
+                        </button>
+                    </div>
+                    
+
+                </div>
+                
+                <!-- Panel 2: Intelligent Space Analysis -->
+                <div class="panel bg-gradient-to-br from-purple-900/10 to-black">
+                    <div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
+                        <div class="flex-1">
+                            <div class="mb-4 text-sm text-emerald-400 uppercase tracking-wider">阶段 01 / 智能空间分析</div>
+                            <h3 class="text-5xl font-black mb-6">空间规划引擎</h3>
+                            <p class="text-xl text-gray-400 mb-8">基于深度学习的智能布局算法</p>
+                            <div class="text-gray-300 mb-8 space-y-3">
+                                <p class="font-semibold text-white mb-4">🧠 AI如何理解您的空间需求？</p>
+                                <p>• <span class="text-emerald-400">需求解析：</span>自然语言处理技术理解设计要求</p>
+                                <p>• <span class="text-emerald-400">空间建模：</span>3D空间识别与约束条件自动提取</p>
+                                <p>• <span class="text-emerald-400">规范校验：</span>实时对标国家消防、建筑规范</p>
+                                <p>• <span class="text-emerald-400">优化算法：</span>基于遗传算法的多目标优化</p>
+                            </div>
+                            <div class="space-y-4">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-2 h-2 bg-accent rounded-full"></div>
+                                    <span class="text-gray-400">AutoCAD 2024</span>
+                                </div>
+                                <div class="flex items-center gap-4">
+                                    <div class="w-2 h-2 bg-accent rounded-full"></div>
+                                    <span class="text-gray-400">精度: 0.1mm</span>
+                                </div>
+                                <div class="flex items-center gap-4">
+                                    <div class="w-2 h-2 bg-accent rounded-full"></div>
+                                    <span class="text-gray-400">用时: 2小时</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-1 max-w-2xl">
+                            <img src="../data/会展策划/image/Whisk_dcc81c5212.jpg" 
+                                 alt="CAD设计图" 
+                                 class="w-full rounded-2xl shadow-2xl">
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Panel 3: Design Generation -->
+                <div class="panel bg-gradient-to-br from-blue-900/10 to-black">
+                    <div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
+                        <div class="flex-1">
+                            <div class="mb-4 text-sm text-blue-400 uppercase tracking-wider">阶段 02 / 方案生成</div>
+                            <h3 class="text-5xl font-black mb-6">智能设计生成</h3>
+                            <p class="text-xl text-gray-400 mb-8">多方案并行生成，AI优选最佳方案</p>
+                            <div class="text-gray-300 mb-8 space-y-3">
+                                <p class="font-semibold text-white mb-4">⚡ 提效核心技术</p>
+                                <p>• <span class="text-blue-400">并行计算：</span>同时生成5-10个设计方案</p>
+                                <p>• <span class="text-blue-400">风格迁移：</span>学习品牌VI，保持设计一致性</p>
+                                <p>• <span class="text-blue-400">成本优化：</span>实时预算控制，材料智能选择</p>
+                                <p>• <span class="text-blue-400">人流模拟：</span>基于蒙特卡洛的人流仿真</p>
+                            </div>
+                            <div class="bg-gray-800/50 rounded-lg p-4">
+                                <div class="text-sm text-gray-400 mb-2">效率提升</div>
+                                <div class="text-2xl font-bold text-white">传统2周 → AI 4小时</div>
+                            </div>
+                        </div>
+                        <div class="flex-1 max-w-2xl">
+                            <img src="../data/会展策划/image/Whisk_e8f83d1a37.jpg" 
+                                 alt="概念设计图" 
+                                 class="w-full rounded-2xl shadow-2xl">
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Panel 4: 3D Visualization -->
+                <div class="panel bg-gradient-to-br from-cyan-900/10 to-black">
+                    <div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
+                        <div class="flex-1">
+                            <div class="mb-4 text-sm text-cyan-400 uppercase tracking-wider">阶段 03 / 三维可视化</div>
+                            <h3 class="text-5xl font-black mb-6">数字孪生建模</h3>
+                            <p class="text-xl text-gray-400 mb-8">1:1还原真实场景，所见即所得</p>
+                            <div class="text-gray-300 mb-8 space-y-3">
+                                <p class="font-semibold text-white mb-4">🎯 设计可靠性保障</p>
+                                <p>• <span class="text-cyan-400">物理仿真：</span>光照、材质、物理碰撞模拟</p>
+                                <p>• <span class="text-cyan-400">VR预览：</span>沉浸式体验，提前发现问题</p>
+                                <p>• <span class="text-cyan-400">细节优化：</span>AI自动优化视觉焦点</p>
+                                <p>• <span class="text-cyan-400">材料映射：</span>真实材料库，精准还原效果</p>
+                            </div>
+                            <div class="bg-gray-800/50 rounded-lg p-4">
+                                <div class="text-sm text-gray-400 mb-2">渲染精度</div>
+                                <div class="text-2xl font-bold text-white">8K超高清 + 实时光追</div>
+                            </div>
+                        </div>
+                        <div class="flex-1 max-w-2xl">
+                            <img src="../data/会展策划/image/Whisk_be64a7b61f.jpg" 
+                                 alt="3D建模" 
+                                 class="w-full rounded-2xl shadow-2xl">
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Panel 5: Complete Solution -->
+                <div class="panel bg-gradient-to-br from-emerald-900/10 to-black" style="transform: translateZ(0);">
+                    <div class="flex items-center gap-12 max-w-7xl mx-auto w-full">
+                        <div class="flex-1">
+                            <div class="mb-4 text-sm text-emerald-400 uppercase tracking-wider">完整交付 / 一站式解决方案</div>
+                            <h3 class="text-5xl font-black mb-6">智能设计成果</h3>
+                            <p class="text-xl text-gray-400 mb-8">从创意到施工的完整设计链路</p>
+                            <div class="text-gray-300 mb-6 space-y-3">
+                                <p class="font-semibold text-white mb-4">✅ 交付内容清单</p>
+                                <p>• <span class="text-emerald-400">设计图纸：</span>CAD施工图 + 3D模型文件</p>
+                                <p>• <span class="text-emerald-400">物料清单：</span>精确到螺丝的采购清单</p>
+                                <p>• <span class="text-emerald-400">施工指南：</span>分步骤施工说明书</p>
+                                <p>• <span class="text-emerald-400">预算报表：</span>透明化成本明细</p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4 mt-8">
+                                <div class="bg-gradient-to-r from-emerald-500/20 to-transparent p-4 rounded-lg">
+                                    <div class="text-3xl font-bold text-emerald-400">100%</div>
+                                    <div class="text-sm text-gray-400">施工可执行率</div>
+                                </div>
+                                <div class="bg-gradient-to-r from-blue-500/20 to-transparent p-4 rounded-lg">
+                                    <div class="text-3xl font-bold text-blue-400">0</div>
+                                    <div class="text-sm text-gray-400">设计返工次数</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-1 max-w-2xl">
+                            <img src="../data/会展策划/image/Whisk_c478fe089d.jpg" 
+                                 alt="最终方案" 
+                                 class="w-full rounded-2xl shadow-2xl">
+                        </div>
+                    </div>
+                </div>
             </div>
             
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-                <!-- 智能登记系统 -->
-                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
-                    <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
-                        <i class="fas fa-qrcode text-white text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-center mb-4">智能登记系统</h3>
-                    <ul class="space-y-3 text-sm text-gray-600">
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            人脸识别快速入场
+            <!-- Progress Indicator -->
+            <div class="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-50 flex gap-4">
+                <div class="progress-dot active" data-panel="0"></div>
+                <div class="progress-dot" data-panel="1"></div>
+                <div class="progress-dot" data-panel="2"></div>
+                <div class="progress-dot" data-panel="3"></div>
+                <div class="progress-dot" data-panel="4"></div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Design Tools & Technology -->
+    <section class="py-32 relative">
+        <div class="container mx-auto px-6">
+            <div class="mb-20">
+                <h2 class="text-5xl font-black mb-6">设计工具链</h2>
+                <p class="text-xl text-gray-400 max-w-2xl">专业级设计软件深度集成，全流程自动化</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <div class="glass rounded-2xl p-10">
+                    <div class="text-4xl mb-6">📐</div>
+                    <h3 class="text-2xl font-bold mb-4">CAD工程制图</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>AutoCAD 2024原生支持</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            电子证件一键生成
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>DWG/DXF标准格式输出</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            实时数据统计分析
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            VIP专属快速通道
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>施工图自动标注</span>
                         </li>
                     </ul>
-                    <div class="mt-6 text-center">
-                        <div class="text-3xl font-bold text-blue-600 counter">< 30秒</div>
-                        <div class="text-sm text-gray-500">平均登记时间</div>
-                    </div>
                 </div>
                 
-                <!-- AI服务机器人 -->
-                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
-                    <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
-                        <i class="fas fa-robot text-white text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-center mb-4">AI服务机器人</h3>
-                    <ul class="space-y-3 text-sm text-gray-600">
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            多语言智能问答
+                <div class="glass rounded-2xl p-10">
+                    <div class="text-4xl mb-6">🎨</div>
+                    <h3 class="text-2xl font-bold mb-4">3D建模渲染</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>3DS Max + V-Ray引擎</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            展位导航引领
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>PBR材质库（5000+）</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            活动信息推送
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            紧急事件处理
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>GPU加速实时预览</span>
                         </li>
                     </ul>
-                    <div class="mt-6 text-center">
-                        <div class="text-3xl font-bold text-purple-600 counter">50+</div>
-                        <div class="text-sm text-gray-500">服务机器人数量</div>
-                    </div>
                 </div>
                 
-                <!-- 云端数据中心 -->
-                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
-                    <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
-                        <i class="fas fa-cloud text-white text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-center mb-4">云端数据中心</h3>
-                    <ul class="space-y-3 text-sm text-gray-600">
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            实时客流监控
+                <div class="glass rounded-2xl p-10">
+                    <div class="text-4xl mb-6">🔄</div>
+                    <h3 class="text-2xl font-bold mb-4">BIM协同设计</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>Revit模型同步</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            大数据分析报告
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>多专业协同碰撞检测</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            智能预警系统
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            展商数据服务
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>IFC标准数据交换</span>
                         </li>
                     </ul>
-                    <div class="mt-6 text-center">
-                        <div class="text-3xl font-bold text-green-600 counter">24/7</div>
-                        <div class="text-sm text-gray-500">全天候监控</div>
-                    </div>
                 </div>
                 
-                <!-- 智慧安防系统 -->
-                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
-                    <div class="w-20 h-20 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
-                        <i class="fas fa-shield-alt text-white text-3xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-center mb-4">智慧安防系统</h3>
-                    <ul class="space-y-3 text-sm text-gray-600">
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            AI视频监控分析
+                <div class="glass rounded-2xl p-10">
+                    <div class="text-4xl mb-6">📊</div>
+                    <h3 class="text-2xl font-bold mb-4">智能优化算法</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>空间利用率优化</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            异常行为识别
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>人流动线模拟</span>
                         </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            应急响应联动
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                            密度预警管控
+                        <li class="flex items-center gap-3">
+                            <i class="fas fa-check text-accent"></i>
+                            <span>成本-效果平衡算法</span>
                         </li>
                     </ul>
-                    <div class="mt-6 text-center">
-                        <div class="text-3xl font-bold text-orange-600 counter">1000+</div>
-                        <div class="text-sm text-gray-500">监控点位</div>
-                    </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- 特色活动安排 -->
-    <section class="py-20 bg-white relative overflow-hidden">
-        <div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/充电站.jpg'); background-size: cover;"></div>
-        
-        <div class="container mx-auto px-6 relative z-10">
-            <div class="text-center mb-12 animate-fadeInUp">
-                <h2 class="text-4xl font-bold text-gray-800 mb-4">
-                    <i class="fas fa-calendar-alt text-orange-600 mr-3"></i>
-                    精彩活动安排
-                </h2>
-                <p class="text-xl text-gray-600">四天展期，精彩不断</p>
+    <!-- Service Teams -->
+    <!-- Why Choose Our AI -->
+    <section class="py-32 relative">
+        <div class="container mx-auto px-6">
+            <div class="mb-20">
+                <h2 class="text-5xl font-black mb-6">为什么选择我们</h2>
+                <p class="text-xl text-gray-400 max-w-2xl">经过验证的企业级AI设计解决方案</p>
             </div>
             
-            <!-- 开幕式 -->
-            <div class="mb-12">
-                <div class="gradient-animated rounded-3xl p-10 text-white shadow-2xl">
-                    <div class="text-center mb-8">
-                        <h3 class="text-3xl font-bold mb-4">
-                            <i class="fas fa-crown mr-3"></i>
-                            盛大开幕典礼
-                        </h3>
-                        <p class="text-xl opacity-90">9月12日 09:00-10:30 | 主会场</p>
-                    </div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <div class="glass-morphism rounded-xl p-6">
-                            <h4 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-microphone mr-2"></i>
-                                领导致辞
-                            </h4>
-                            <ul class="text-sm space-y-2 opacity-90">
-                                <li>• 工信部领导致辞</li>
-                                <li>• 长三角城市群代表发言</li>
-                                <li>• 行业协会主席讲话</li>
-                            </ul>
-                        </div>
-                        
-                        <div class="glass-morphism rounded-xl p-6">
-                            <h4 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-rocket mr-2"></i>
-                                启动仪式
-                            </h4>
-                            <ul class="text-sm space-y-2 opacity-90">
-                                <li>• 展会正式启动</li>
-                                <li>• 战略合作签约</li>
-                                <li>• 新品全球首发</li>
-                            </ul>
-                        </div>
-                        
-                        <div class="glass-morphism rounded-xl p-6">
-                            <h4 class="font-bold text-lg mb-3 flex items-center">
-                                <i class="fas fa-tv mr-2"></i>
-                                媒体直播
-                            </h4>
-                            <ul class="text-sm space-y-2 opacity-90">
-                                <li>• 央视新闻直播</li>
-                                <li>• 50+主流媒体报道</li>
-                                <li>• 全网同步直播</li>
-                            </ul>
-                        </div>
-                    </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="glass rounded-xl p-6">
+                    <div class="text-3xl mb-4">🎯</div>
+                    <h3 class="text-lg font-bold mb-2">精准度高</h3>
+                    <p class="text-sm text-gray-400">基于实际项目反馈持续优化，设计精准度达95%以上</p>
+                </div>
+                
+                <div class="glass rounded-xl p-6">
+                    <div class="text-3xl mb-4">⚡</div>
+                    <h3 class="text-lg font-bold mb-2">快速迭代</h3>
+                    <p class="text-sm text-gray-400">实时修改，秒级响应，支持无限次方案调整</p>
+                </div>
+                
+                <div class="glass rounded-xl p-6">
+                    <div class="text-3xl mb-4">💰</div>
+                    <h3 class="text-lg font-bold mb-2">成本可控</h3>
+                    <p class="text-sm text-gray-400">智能材料选择，预算实时监控，降低80%设计成本</p>
+                </div>
+                
+                <div class="glass rounded-xl p-6">
+                    <div class="text-3xl mb-4">🔒</div>
+                    <h3 class="text-lg font-bold mb-2">合规保障</h3>
+                    <p class="text-sm text-gray-400">自动对标国家标准，100%符合消防建筑规范</p>
                 </div>
             </div>
             
-            <!-- 论坛日程 -->
-            <div class="bg-gray-50 rounded-3xl p-10">
-                <h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
-                    <i class="fas fa-comments text-blue-600 mr-3"></i>
-                    高峰论坛日程
-                </h3>
-                
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                    <!-- Day 1 -->
-                    <div>
-                        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
-                            <div class="flex items-center justify-between mb-4">
-                                <h4 class="text-xl font-bold text-gray-800">第一天 - 9月12日</h4>
-                                <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm font-semibold">
-                                    产业发展日
-                                </span>
-                            </div>
-                            
-                            <div class="space-y-4">
-                                <div class="border-l-4 border-blue-500 pl-4">
-                                    <div class="flex items-center justify-between mb-2">
-                                        <h5 class="font-bold">新能源汽车产业发展论坛</h5>
-                                        <span class="text-sm text-gray-500">10:00-12:00</span>
-                                    </div>
-                                    <p class="text-sm text-gray-600">主题：双碳目标下的产业机遇</p>
-                                    <div class="mt-2 flex items-center text-xs text-gray-500">
-                                        <i class="fas fa-users mr-2"></i>
-                                        预计参会: 500人
-                                    </div>
-                                </div>
-                                
-                                <div class="border-l-4 border-green-500 pl-4">
-                                    <div class="flex items-center justify-between mb-2">
-                                        <h5 class="font-bold">动力电池技术创新峰会</h5>
-                                        <span class="text-sm text-gray-500">14:00-16:00</span>
-                                    </div>
-                                    <p class="text-sm text-gray-600">主题：固态电池商业化进程</p>
-                                    <div class="mt-2 flex items-center text-xs text-gray-500">
-                                        <i class="fas fa-users mr-2"></i>
-                                        预计参会: 300人
-                                    </div>
-                                </div>
-                                
-                                <div class="border-l-4 border-purple-500 pl-4">
-                                    <div class="flex items-center justify-between mb-2">
-                                        <h5 class="font-bold">智能座舱体验设计论坛</h5>
-                                        <span class="text-sm text-gray-500">16:30-18:00</span>
-                                    </div>
-                                    <p class="text-sm text-gray-600">主题：人机交互的未来趋势</p>
-                                    <div class="mt-2 flex items-center text-xs text-gray-500">
-                                        <i class="fas fa-users mr-2"></i>
-                                        预计参会: 200人
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+            <!-- Success Cases -->
+            <div class="mt-20">
+                <h3 class="text-3xl font-bold mb-8">成功案例</h3>
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                    <div class="text-center">
+                        <div class="text-4xl font-bold gradient-text">500+</div>
+                        <p class="text-sm text-gray-500 mt-2">展会项目</p>
                     </div>
-                    
-                    <!-- Day 2 -->
-                    <div>
-                        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
-                            <div class="flex items-center justify-between mb-4">
-                                <h4 class="text-xl font-bold text-gray-800">第二天 - 9月13日</h4>
-                                <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-semibold">
-                                    技术创新日
-                                </span>
-                            </div>
-                            
-                            <div class="space-y-4">
-                                <div class="border-l-4 border-orange-500 pl-4">
-                                    <div class="flex items-center justify-between mb-2">
-                                        <h5 class="font-bold">自动驾驶技术峰会</h5>
-                                        <span class="text-sm text-gray-500">09:00-11:00</span>
-                                    </div>
-                                    <p class="text-sm text-gray-600">主题：L4级自动驾驶落地实践</p>
-                                    <div class="mt-2 flex items-center text-xs text-gray-500">
-                                        <i class="fas fa-users mr-2"></i>
-                                        预计参会: 400人
-                                    </div>
-                                </div>
-                                
-                                <div class="border-l-4 border-pink-500 pl-4">
-                                    <div class="flex items-center justify-between mb-2">
-                                        <h5 class="font-bold">充换电基础设施研讨会</h5>
-                                        <span class="text-sm text-gray-500">14:00-16:00</span>
-                                    </div>
-                                    <p class="text-sm text-gray-600">主题：超充网络建设与运营</p>
-                                    <div class="mt-2 flex items-center text-xs text-gray-500">
-                                        <i class="fas fa-users mr-2"></i>
-                                        预计参会: 350人
-                                    </div>
-                                </div>
-                                
-                                <div class="border-l-4 border-indigo-500 pl-4">
-                                    <div class="flex items-center justify-between mb-2">
-                                        <h5 class="font-bold">车联网安全技术论坛</h5>
-                                        <span class="text-sm text-gray-500">16:30-18:00</span>
-                                    </div>
-                                    <p class="text-sm text-gray-600">主题：智能汽车信息安全挑战</p>
-                                    <div class="mt-2 flex items-center text-xs text-gray-500">
-                                        <i class="fas fa-users mr-2"></i>
-                                        预计参会: 250人
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="text-center">
+                        <div class="text-4xl font-bold gradient-text">50+</div>
+                        <p class="text-sm text-gray-500 mt-2">世界500强</p>
                     </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- 服务保障体系 -->
-    <section class="py-20 bg-gradient-to-br from-emerald-50 to-blue-50 relative overflow-hidden">
-        <div class="container mx-auto px-6 relative z-10">
-            <div class="text-center mb-12 animate-fadeInUp">
-                <h2 class="text-4xl font-bold text-gray-800 mb-4">
-                    <i class="fas fa-hand-holding-heart text-emerald-600 mr-3"></i>
-                    全方位服务保障
-                </h2>
-                <p class="text-xl text-gray-600">专业团队，贴心服务</p>
-            </div>
-            
-            <!-- 服务承诺 -->
-            <div class="bg-gradient-to-r from-emerald-600 to-blue-600 rounded-3xl p-10 text-white mb-12 shadow-2xl">
-                <h3 class="text-3xl font-bold text-center mb-8">服务承诺标准</h3>
-                
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
-                    <div class="glass-morphism rounded-xl p-6">
-                        <div class="text-4xl font-bold mb-2 counter">< 3</div>
-                        <div class="text-sm">分钟</div>
-                        <div class="text-xs mt-2 opacity-80">平均排队时间</div>
+                    <div class="text-center">
+                        <div class="text-4xl font-bold gradient-text">20+</div>
+                        <p class="text-sm text-gray-500 mt-2">国家级展会</p>
                     </div>
-                    
-                    <div class="glass-morphism rounded-xl p-6">
-                        <div class="text-4xl font-bold mb-2 counter">< 5</div>
-                        <div class="text-sm">分钟</div>
-                        <div class="text-xs mt-2 opacity-80">问题响应时间</div>
+                    <div class="text-center">
+                        <div class="text-4xl font-bold gradient-text">98%</div>
+                        <p class="text-sm text-gray-500 mt-2">客户满意度</p>
                     </div>
-                    
-                    <div class="glass-morphism rounded-xl p-6">
-                        <div class="text-4xl font-bold mb-2 counter">100%</div>
-                        <div class="text-sm">覆盖</div>
-                        <div class="text-xs mt-2 opacity-80">WiFi信号覆盖</div>
-                    </div>
-                    
-                    <div class="glass-morphism rounded-xl p-6">
-                        <div class="text-4xl font-bold mb-2 counter">95%+</div>
-                        <div class="text-sm">满意度</div>
-                        <div class="text-xs mt-2 opacity-80">服务满意目标</div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- 服务团队 -->
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
-                    <div class="text-center mb-6">
-                        <div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <i class="fas fa-headset text-white text-3xl"></i>
-                        </div>
-                        <h4 class="text-xl font-bold">客服团队</h4>
-                    </div>
-                    <ul class="space-y-3 text-sm text-gray-600">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            专业客服人员200+
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            8种语言服务支持
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            24小时服务热线
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            现场问题即时处理
-                        </li>
-                    </ul>
-                </div>
-                
-                <div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
-                    <div class="text-center mb-6">
-                        <div class="w-24 h-24 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <i class="fas fa-shield-alt text-white text-3xl"></i>
-                        </div>
-                        <h4 class="text-xl font-bold">安保团队</h4>
-                    </div>
-                    <ul class="space-y-3 text-sm text-gray-600">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            专业安保人员300+
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            AI智能监控系统
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            应急响应3分钟内
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            全场无死角覆盖
-                        </li>
-                    </ul>
-                </div>
-                
-                <div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
-                    <div class="text-center mb-6">
-                        <div class="w-24 h-24 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <i class="fas fa-medkit text-white text-3xl"></i>
-                        </div>
-                        <h4 class="text-xl font-bold">医疗团队</h4>
-                    </div>
-                    <ul class="space-y-3 text-sm text-gray-600">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            医护人员50+
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            8个医疗服务点
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            救护车现场待命
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-green-500 mr-3"></i>
-                            AED设备全覆盖
-                        </li>
-                    </ul>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- CTA Section -->
-    <section class="py-16 gradient-animated text-white relative overflow-hidden">
-        <div class="absolute inset-0">
-            <div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
-            <div class="absolute bottom-10 right-10 w-40 h-40 bg-white/10 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
-        </div>
-        
-        <div class="container mx-auto px-6 text-center relative z-10">
-            <h2 class="text-4xl font-bold mb-6 neon-glow">专业运营，保障展会成功</h2>
-            <p class="text-xl mb-8 opacity-90">了解展会预算规划与投资回报分析</p>
-            <a href="budget.html" class="inline-block bg-white text-purple-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transform hover:scale-105 transition-all duration-300 shadow-xl">
-                <i class="fas fa-chart-pie mr-2"></i>
-                查看预算分析
-            </a>
+    <section class="py-32 relative">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-5xl font-black mb-8">开始您的AI设计之旅</h2>
+            <p class="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
+                输入需求，20小时后获得完整的展会布局方案
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button class="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-emerald-500 to-blue-500 hover:from-emerald-600 hover:to-blue-600 text-white font-semibold rounded-xl transition-all duration-300">
+                    <i class="fas fa-magic"></i>
+                    免费体验AI设计
+                </button>
+                <a href="marketing.html" class="inline-flex items-center gap-3 px-8 py-4 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-all duration-300">
+                    了解营销推广
+                    <i class="fas fa-arrow-right"></i>
+                </a>
+            </div>
         </div>
     </section>
 
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
-        <div class="container mx-auto px-6">
-            <div class="text-center">
-                <p class="text-gray-400">&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
-            </div>
+    <footer class="py-12 border-t border-gray-800">
+        <div class="container mx-auto px-6 text-center text-gray-500">
+            <p>© 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
         </div>
     </footer>
+
+    <!-- Back to top button -->
+    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-accent hover:bg-accent-hover text-white rounded-full flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+
+    <!-- Scripts -->
+    <script src="../js/nav-component.js"></script>
+    <script src="../js/back-to-top.js"></script>
     
-    <!-- JavaScript for animations -->
     <script>
-        // Counter animation
-        const observerOptions = {
-            threshold: 0.5,
-            rootMargin: '0px'
-        };
+        // Register GSAP plugins
+        gsap.registerPlugin(ScrollTrigger);
         
-        const observer = new IntersectionObserver(function(entries) {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('animate');
+        // Scroll mode management
+        let currentScrollMode = 'gsap'; // 'gsap' or 'css'
+        let scrollTriggerInstance = null;
+        
+        // Initialize horizontal scroll
+        function initGSAPScroll() {
+            const horizontalSections = gsap.utils.toArray('#horizontal-container .panel');
+            const horizontalContainer = document.querySelector('#horizontal-container');
+            
+            // Clear any existing ScrollTriggers
+            ScrollTrigger.getAll().forEach(st => st.kill());
+            
+            // Create new ScrollTrigger
+            scrollTriggerInstance = ScrollTrigger.create({
+                trigger: "#duoduo-section",
+                start: "top top",
+                end: "+=3000",
+                pin: true,
+                scrub: 1,
+                animation: gsap.to(horizontalSections, {
+                    xPercent: -100 * (horizontalSections.length - 1),
+                    ease: "none"
+                }),
+                onUpdate: self => {
+                    const progress = self.progress;
+                    const currentPanel = Math.round(progress * (horizontalSections.length - 1));
+                    updateProgressDots(currentPanel);
                 }
             });
-        }, observerOptions);
+        }
         
-        document.querySelectorAll('.counter').forEach(el => {
-            observer.observe(el);
+        // CSS-only scroll mode
+        function initCSSScroll() {
+            // Kill GSAP ScrollTrigger
+            if (scrollTriggerInstance) {
+                scrollTriggerInstance.kill();
+                scrollTriggerInstance = null;
+            }
+            ScrollTrigger.getAll().forEach(st => st.kill());
+            
+            // Reset transforms
+            const horizontalSections = gsap.utils.toArray('#horizontal-container .panel');
+            const horizontalContainer = document.querySelector('#horizontal-container');
+            
+            gsap.set(horizontalSections, { xPercent: 0, clearProps: "all" });
+            gsap.set(horizontalContainer, { x: 0, clearProps: "all" });
+            
+            // Apply CSS scroll-snap
+            horizontalContainer.style.scrollSnapType = 'x mandatory';
+            horizontalContainer.style.overflowX = 'auto';
+            horizontalContainer.style.display = 'flex';
+            
+            horizontalSections.forEach(section => {
+                section.style.scrollSnapAlign = 'center';
+                section.style.flexShrink = '0';
+            });
+            
+            // Update container styles for CSS scrolling
+            const duoduoSection = document.querySelector('#duoduo-section');
+            duoduoSection.style.height = 'auto';
+            duoduoSection.style.position = 'relative';
+            
+            const stickyContainer = duoduoSection.querySelector('.sticky');
+            stickyContainer.style.position = 'relative';
+            stickyContainer.style.overflow = 'auto';
+        }
+        
+        // Update progress dots
+        function updateProgressDots(index) {
+            document.querySelectorAll('.progress-dot').forEach((dot, i) => {
+                if (i === index) {
+                    dot.classList.add('active');
+                } else {
+                    dot.classList.remove('active');
+                }
+            });
+        }
+        
+        // Toggle scroll mode
+        const toggleButton = document.getElementById('scroll-mode-toggle');
+        if (toggleButton) {
+            toggleButton.addEventListener('click', () => {
+                if (currentScrollMode === 'gsap') {
+                    currentScrollMode = 'css';
+                    initCSSScroll();
+                    toggleButton.querySelector('.mode-text').textContent = '切换到GSAP模式';
+                    console.log('Switched to CSS scroll mode');
+                } else {
+                    currentScrollMode = 'gsap';
+                    initGSAPScroll();
+                    toggleButton.querySelector('.mode-text').textContent = '切换到CSS模式';
+                    console.log('Switched to GSAP scroll mode');
+                }
+            });
+        }
+        
+        // Initialize with GSAP mode
+        initGSAPScroll();
+        
+        // Start button functionality
+        const startButton = document.querySelector('.panel button');
+        if (startButton) {
+            startButton.addEventListener('click', () => {
+                // Scroll to second panel
+                const duoduoSection = document.querySelector('#duoduo-section');
+                const scrollDistance = duoduoSection.offsetTop + 600; // Adjust to reach second panel
+                
+                gsap.to(window, {
+                    scrollTo: {
+                        y: scrollDistance,
+                        autoKill: false
+                    },
+                    duration: 1.5,
+                    ease: "power2.inOut"
+                });
+            });
+        }
+        
+        // Progress dots click handler (Manual navigation)
+        document.querySelectorAll('.progress-dot').forEach((dot, index) => {
+            dot.addEventListener('click', () => {
+                // Use smooth scroll to section instead of GSAP
+                const targetSection = horizontalSections[index];
+                if (targetSection) {
+                    targetSection.scrollIntoView({ 
+                        behavior: 'smooth', 
+                        block: 'center',
+                        inline: 'center'
+                    });
+                }
+            });
+        });
+        
+        // Debug mode - Press 'D' to toggle
+        let debugMode = false;
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'd' || e.key === 'D') {
+                debugMode = !debugMode;
+                if (debugMode) {
+                    console.log('Debug Mode ON - Check console for ScrollTrigger info');
+                    ScrollTrigger.getAll().forEach(st => {
+                        console.log('ScrollTrigger:', {
+                            trigger: st.trigger,
+                            start: st.start,
+                            end: st.end,
+                            progress: st.progress,
+                            isActive: st.isActive
+                        });
+                    });
+                } else {
+                    console.log('Debug Mode OFF');
+                }
+            }
+        });
+        
+        // Fade in animations for sections
+        gsap.utils.toArray('section').forEach(section => {
+            gsap.from(section, {
+                opacity: 0,
+                y: 50,
+                duration: 1,
+                scrollTrigger: {
+                    trigger: section,
+                    start: "top 80%",
+                    end: "bottom 20%",
+                    toggleActions: "play none none reverse"
+                }
+            });
+        });
+        
+        // Back to top button
+        const backToTopButton = document.getElementById('backToTop');
+        
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 500) {
+                backToTopButton.style.opacity = '1';
+                backToTopButton.style.visibility = 'visible';
+            } else {
+                backToTopButton.style.opacity = '0';
+                backToTopButton.style.visibility = 'hidden';
+            }
+        });
+        
+        backToTopButton.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
         });
     </script>
-    <script src="../js/nav-component.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/operation_old.html b/web_frontend/web_result/pages/operation_old.html
new file mode 100644
index 00000000..b76e8f04
--- /dev/null
+++ b/web_frontend/web_result/pages/operation_old.html
@@ -0,0 +1,1405 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
+    <title>现场运营 - 2024长三角国际新能源汽车展</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- 页面加载动画 -->
+    <!-- 错误处理（需要最早加载） -->
+    <script src="../js/error-handler.js"></script>
+
+    <script src="../js/page-loader.js"></script>
+    
+    <!-- 移动端优化 -->
+    <script src="../js/mobile-optimize.js"></script>
+    
+    <!-- 性能优化 -->
+    <script src="../js/performance-optimizer.js"></script>
+    <link rel="stylesheet" href="../css/animations.css">
+    <style>
+        * {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+        
+        /* 3D展馆效果 */
+        .hall-3d {
+            perspective: 1000px;
+            transform-style: preserve-3d;
+        }
+        
+        .hall-card {
+            transition: all 0.5s ease;
+            transform-style: preserve-3d;
+        }
+        
+        .hall-card:hover {
+            transform: translateZ(20px) rotateY(5deg);
+            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
+        }
+        
+        /* 流动光效 */
+        .flow-light {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .flow-light::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
+            transform: rotate(45deg);
+            animation: flowLight 3s linear infinite;
+        }
+        
+        @keyframes flowLight {
+            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+        }
+        
+        /* 数字滚动效果 */
+        .counter {
+            animation: countUp 2s ease-out forwards;
+        }
+        
+        @keyframes countUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        /* 时间轴动画 */
+        .timeline-item {
+            opacity: 0;
+            animation: slideInLeft 0.6s ease-out forwards;
+        }
+        
+        .timeline-item:nth-child(1) { animation-delay: 0.1s; }
+        .timeline-item:nth-child(2) { animation-delay: 0.2s; }
+        .timeline-item:nth-child(3) { animation-delay: 0.3s; }
+        .timeline-item:nth-child(4) { animation-delay: 0.4s; }
+        
+        @keyframes slideInLeft {
+            from { 
+                opacity: 0;
+                transform: translateX(-50px);
+            }
+            to { 
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        
+        /* 悬浮图标动画 */
+        .float-icon {
+            animation: float 3s ease-in-out infinite;
+        }
+        
+        .float-icon:nth-child(odd) {
+            animation-delay: 0.5s;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+        
+        /* 脉冲动画 */
+        .pulse-dot {
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { 
+                transform: scale(1);
+                opacity: 1;
+            }
+            50% { 
+                transform: scale(1.2);
+                opacity: 0.7;
+            }
+        }
+        
+        /* 渐变动画背景 */
+        .gradient-animated {
+            background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+        }
+        
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        /* 霓虹灯效果 */
+        .neon-glow {
+            text-shadow: 
+                0 0 10px rgba(102, 126, 234, 0.8),
+                0 0 20px rgba(102, 126, 234, 0.6),
+                0 0 30px rgba(102, 126, 234, 0.4);
+        }
+        
+        /* Glass morphism effect */
+        .glass-morphism {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
+        <!-- Content will be dynamically generated by nav-component.js -->
+    </nav>
+
+    <!-- Page Header with Background Image -->
+    <section class="relative pt-24 pb-16 overflow-hidden">
+        <!-- 背景图片 -->
+        <div class="absolute inset-0" style="background-image: url('../../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;">
+            <div class="absolute inset-0 bg-gradient-to-b from-teal-900/90 via-blue-900/80 to-indigo-900/90"></div>
+        </div>
+        
+        <!-- 动态粒子背景 -->
+        <div class="absolute inset-0">
+            <div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
+            <div class="absolute bottom-10 right-10 w-40 h-40 bg-blue-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
+            <div class="absolute top-1/2 left-1/3 w-24 h-24 bg-emerald-300/10 rounded-full filter blur-2xl animate-pulse animation-delay-4000"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="text-center text-white animate-fadeInUp">
+                <h1 class="text-5xl md:text-6xl font-bold mb-6 neon-glow">
+                    <i class="fas fa-warehouse mr-4"></i>
+                    现场运营方案
+                </h1>
+                <p class="text-xl md:text-2xl opacity-90 mb-8">
+                    智能化管理 · 专业化服务 · 数字化体验
+                </p>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white px-8 py-4 rounded-xl shadow-lg">
+                        <i class="fas fa-users mr-2 text-lg"></i>
+                        <span class="text-lg font-medium">预计接待:</span> <span class="font-bold text-xl">10万+</span> <span class="text-lg">专业观众</span>
+                    </div>
+                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-8 py-4 rounded-xl shadow-lg">
+                        <i class="fas fa-building mr-2 text-lg"></i>
+                        <span class="text-lg font-medium">展馆面积:</span> <span class="font-bold text-xl">50,000㎡</span>
+                    </div>
+                    <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white px-8 py-4 rounded-xl shadow-lg">
+                        <i class="fas fa-user-tie mr-2 text-lg"></i>
+                        <span class="text-lg font-medium">服务团队:</span> <span class="font-bold text-xl">500+</span> <span class="text-lg">专业人员</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 3D Exhibition Hall Layout -->
+    <section class="py-20 bg-white relative overflow-hidden">
+        <!-- 背景装饰 -->
+        <div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/新能源车.jpg'); background-size: cover;"></div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="text-center mb-12 animate-fadeInUp">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">
+                    <i class="fas fa-map-marked-alt text-teal-600 mr-3"></i>
+                    智能展馆布局规划
+                </h2>
+                <p class="text-xl text-gray-700 font-medium">基于人流动线设计的科学布局</p>
+            </div>
+            
+            <!-- 3D展馆可视化 -->
+            <div class="hall-3d max-w-7xl mx-auto mb-16">
+                <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+                    <!-- A馆 - 整车展示 -->
+                    <div class="lg:col-span-2 hall-card">
+                        <div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-8 text-white shadow-2xl flow-light">
+                            <div class="flex items-center justify-between mb-6">
+                                <h3 class="text-2xl font-bold flex items-center">
+                                    <i class="fas fa-car-side mr-3"></i>
+                                    A馆 - 旗舰整车展示区
+                                </h3>
+                                <span class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-lg font-semibold">
+                                    20,000㎡
+                                </span>
+                            </div>
+                            
+                            <div class="grid grid-cols-2 gap-4 mb-6">
+                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
+                                    <h4 class="font-bold mb-2">特斯拉专区</h4>
+                                    <p class="text-sm opacity-90">Model S/3/X/Y全系展示</p>
+                                    <p class="text-xs mt-2 opacity-75">展位: A01-A10</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
+                                    <h4 class="font-bold mb-2">比亚迪专区</h4>
+                                    <p class="text-sm opacity-90">王朝/海洋系列</p>
+                                    <p class="text-xs mt-2 opacity-75">展位: A11-A20</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
+                                    <h4 class="font-bold mb-2">蔚来专区</h4>
+                                    <p class="text-sm opacity-90">ET7/ES8/EC6展示</p>
+                                    <p class="text-xs mt-2 opacity-75">展位: A21-A30</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded-xl p-4 hover:bg-white/20 transition">
+                                    <h4 class="font-bold mb-2">理想专区</h4>
+                                    <p class="text-sm opacity-90">L9/L8/L7全系</p>
+                                    <p class="text-xs mt-2 opacity-75">展位: A31-A40</p>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between text-sm">
+                                <div class="flex items-center">
+                                    <i class="fas fa-users mr-2"></i>
+                                    容纳人数: 5000人
+                                </div>
+                                <div class="flex items-center">
+                                    <i class="fas fa-wifi mr-2"></i>
+                                    5G全覆盖
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- B馆 - 核心零部件 -->
+                    <div class="hall-card">
+                        <div class="bg-gradient-to-br from-green-600 to-emerald-700 rounded-2xl p-6 text-white shadow-2xl h-full flow-light">
+                            <h3 class="text-xl font-bold mb-4 flex items-center">
+                                <i class="fas fa-microchip mr-2"></i>
+                                B馆 - 核心零部件
+                            </h3>
+                            <span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-4">
+                                15,000㎡
+                            </span>
+                            
+                            <div class="space-y-3">
+                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
+                                    <h4 class="font-semibold flex items-center">
+                                        <i class="fas fa-battery-full mr-2 text-yellow-300"></i>
+                                        动力电池展区
+                                    </h4>
+                                    <p class="text-xs mt-1 opacity-90">宁德时代、比亚迪刀片电池</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
+                                    <h4 class="font-semibold flex items-center">
+                                        <i class="fas fa-cog mr-2 text-blue-300"></i>
+                                        驱动电机展区
+                                    </h4>
+                                    <p class="text-xs mt-1 opacity-90">精进电动、汇川技术</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
+                                    <h4 class="font-semibold flex items-center">
+                                        <i class="fas fa-brain mr-2 text-purple-300"></i>
+                                        电控系统展区
+                                    </h4>
+                                    <p class="text-xs mt-1 opacity-90">华为、英飞凌、比亚迪半导体</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- C馆 - 智能交通 -->
+                    <div class="hall-card">
+                        <div class="bg-gradient-to-br from-purple-600 to-indigo-700 rounded-2xl p-6 text-white shadow-2xl h-full flow-light">
+                            <h3 class="text-xl font-bold mb-4 flex items-center">
+                                <i class="fas fa-satellite-dish mr-2"></i>
+                                C馆 - 智能交通
+                            </h3>
+                            <span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-4">
+                                10,000㎡
+                            </span>
+                            
+                            <div class="space-y-3">
+                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
+                                    <h4 class="font-semibold flex items-center">
+                                        <i class="fas fa-broadcast-tower mr-2 text-cyan-300"></i>
+                                        V2X通信展示
+                                    </h4>
+                                    <p class="text-xs mt-1 opacity-90">车路协同解决方案</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
+                                    <h4 class="font-semibold flex items-center">
+                                        <i class="fas fa-road mr-2 text-green-300"></i>
+                                        智慧路网系统
+                                    </h4>
+                                    <p class="text-xs mt-1 opacity-90">智能交通管理平台</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded-lg p-3 hover:bg-white/20 transition">
+                                    <h4 class="font-semibold flex items-center">
+                                        <i class="fas fa-robot mr-2 text-pink-300"></i>
+                                        自动驾驶技术
+                                    </h4>
+                                    <p class="text-xs mt-1 opacity-90">L4级自动驾驶演示</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 室外展区 -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
+                    <div class="hall-card">
+                        <div class="bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl p-6 text-white shadow-2xl flow-light">
+                            <h3 class="text-lg font-bold mb-3 flex items-center">
+                                <i class="fas fa-route mr-2"></i>
+                                室外体验区
+                            </h3>
+                            <span class="inline-block bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm mb-3">
+                                5,000㎡
+                            </span>
+                            <div class="space-y-2 text-sm">
+                                <div class="flex items-center">
+                                    <i class="fas fa-car mr-2"></i>
+                                    试乘试驾专业赛道
+                                </div>
+                                <div class="flex items-center">
+                                    <i class="fas fa-parking mr-2"></i>
+                                    自动泊车演示区
+                                </div>
+                                <div class="flex items-center">
+                                    <i class="fas fa-charging-station mr-2"></i>
+                                    超充站体验区
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="hall-card">
+                        <div class="bg-gradient-to-br from-pink-500 to-purple-600 rounded-2xl p-6 text-white shadow-2xl flow-light">
+                            <h3 class="text-lg font-bold mb-3 flex items-center">
+                                <i class="fas fa-utensils mr-2"></i>
+                                配套服务区
+                            </h3>
+                            <div class="grid grid-cols-2 gap-2 text-sm">
+                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
+                                    <i class="fas fa-coffee text-xl mb-1"></i>
+                                    <p class="text-xs">咖啡厅</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
+                                    <i class="fas fa-hamburger text-xl mb-1"></i>
+                                    <p class="text-xs">餐饮区</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
+                                    <i class="fas fa-couch text-xl mb-1"></i>
+                                    <p class="text-xs">休息区</p>
+                                </div>
+                                <div class="bg-white/10 backdrop-blur rounded p-2 text-center hover:bg-white/20 transition">
+                                    <i class="fas fa-shopping-bag text-xl mb-1"></i>
+                                    <p class="text-xs">纪念品店</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="hall-card">
+                        <div class="bg-gradient-to-br from-gray-600 to-gray-800 rounded-2xl p-6 text-white shadow-2xl flow-light">
+                            <h3 class="text-lg font-bold mb-3 flex items-center">
+                                <i class="fas fa-briefcase mr-2"></i>
+                                商务中心
+                            </h3>
+                            <div class="space-y-2 text-sm">
+                                <div class="flex items-center justify-between">
+                                    <span><i class="fas fa-door-open mr-2"></i>VIP会议室</span>
+                                    <span class="text-xs bg-white/20 px-2 py-1 rounded">10间</span>
+                                </div>
+                                <div class="flex items-center justify-between">
+                                    <span><i class="fas fa-handshake mr-2"></i>洽谈区</span>
+                                    <span class="text-xs bg-white/20 px-2 py-1 rounded">50位</span>
+                                </div>
+                                <div class="flex items-center justify-between">
+                                    <span><i class="fas fa-print mr-2"></i>商务服务</span>
+                                    <span class="text-xs bg-white/20 px-2 py-1 rounded">24h</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 智能导览系统 -->
+            <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-3xl p-10 mb-16">
+                <h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
+                    <i class="fas fa-compass text-blue-600 mr-3"></i>
+                    智能导览系统
+                </h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
+                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
+                            <i class="fas fa-mobile-alt text-white text-2xl"></i>
+                        </div>
+                        <h4 class="text-lg font-bold mb-2">AR实景导航</h4>
+                        <p class="text-gray-600 text-sm mb-3">手机扫码即可获得增强现实导航</p>
+                        <div class="text-xs text-gray-500">
+                            <div class="flex items-center mb-1">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                精准定位展位
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                3D路径指引
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
+                        <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
+                            <i class="fas fa-brain text-white text-2xl"></i>
+                        </div>
+                        <h4 class="text-lg font-bold mb-2">AI智能推荐</h4>
+                        <p class="text-gray-600 text-sm mb-3">根据兴趣智能规划参观路线</p>
+                        <div class="text-xs text-gray-500">
+                            <div class="flex items-center mb-1">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                个性化推荐
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                最优路径规划
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
+                        <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
+                            <i class="fas fa-map-marked-alt text-white text-2xl"></i>
+                        </div>
+                        <h4 class="text-lg font-bold mb-2">实时热力图</h4>
+                        <p class="text-gray-600 text-sm mb-3">显示各展区实时人流密度</p>
+                        <div class="text-xs text-gray-500">
+                            <div class="flex items-center mb-1">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                避开拥挤区域
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                预估等待时间
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
+                        <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-4 float-icon">
+                            <i class="fas fa-language text-white text-2xl"></i>
+                        </div>
+                        <h4 class="text-lg font-bold mb-2">多语言服务</h4>
+                        <p class="text-gray-600 text-sm mb-3">支持8种语言实时翻译</p>
+                        <div class="text-xs text-gray-500">
+                            <div class="flex items-center mb-1">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                语音导览
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-check text-green-500 mr-2"></i>
+                                实时翻译
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 参观动线设计 -->
+            <div class="bg-white rounded-3xl shadow-xl p-10">
+                <h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
+                    <i class="fas fa-route text-emerald-600 mr-3"></i>
+                    科学参观动线设计
+                </h3>
+                
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
+                    <div>
+                        <h4 class="text-xl font-bold mb-6 text-gray-700">主要参观路线</h4>
+                        <div class="space-y-4">
+                            <div class="flex items-start timeline-item">
+                                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
+                                    <span class="font-bold">1</span>
+                                </div>
+                                <div class="flex-1">
+                                    <h5 class="font-bold text-lg mb-2">主入口 - 形象展示区</h5>
+                                    <p class="text-gray-600 text-sm mb-2">LED巨幕欢迎墙、展会主题展示</p>
+                                    <div class="bg-blue-50 rounded-lg p-3 text-sm">
+                                        <i class="fas fa-clock text-blue-600 mr-2"></i>
+                                        预计停留: 5-10分钟
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-start timeline-item">
+                                <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
+                                    <span class="font-bold">2</span>
+                                </div>
+                                <div class="flex-1">
+                                    <h5 class="font-bold text-lg mb-2">A馆 - 整车展示</h5>
+                                    <p class="text-gray-600 text-sm mb-2">品牌旗舰车型、新品发布区</p>
+                                    <div class="bg-green-50 rounded-lg p-3 text-sm">
+                                        <i class="fas fa-clock text-green-600 mr-2"></i>
+                                        预计停留: 60-90分钟
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-start timeline-item">
+                                <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
+                                    <span class="font-bold">3</span>
+                                </div>
+                                <div class="flex-1">
+                                    <h5 class="font-bold text-lg mb-2">B馆 - 核心技术</h5>
+                                    <p class="text-gray-600 text-sm mb-2">三电系统、智能座舱体验</p>
+                                    <div class="bg-purple-50 rounded-lg p-3 text-sm">
+                                        <i class="fas fa-clock text-purple-600 mr-2"></i>
+                                        预计停留: 45-60分钟
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-start timeline-item">
+                                <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4 pulse-dot">
+                                    <span class="font-bold">4</span>
+                                </div>
+                                <div class="flex-1">
+                                    <h5 class="font-bold text-lg mb-2">室外 - 互动体验</h5>
+                                    <p class="text-gray-600 text-sm mb-2">试乘试驾、充电演示</p>
+                                    <div class="bg-orange-50 rounded-lg p-3 text-sm">
+                                        <i class="fas fa-clock text-orange-600 mr-2"></i>
+                                        预计停留: 30-45分钟
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h4 class="text-xl font-bold mb-6 text-gray-700">专业观众路线</h4>
+                        <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6">
+                            <div class="space-y-4">
+                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
+                                    <h5 class="font-bold mb-2 flex items-center">
+                                        <i class="fas fa-user-tie text-blue-600 mr-2"></i>
+                                        VIP快速通道
+                                    </h5>
+                                    <p class="text-sm text-gray-600">专属入口、快速登记、专人接待</p>
+                                </div>
+                                
+                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
+                                    <h5 class="font-bold mb-2 flex items-center">
+                                        <i class="fas fa-handshake text-green-600 mr-2"></i>
+                                        商务洽谈路线
+                                    </h5>
+                                    <p class="text-sm text-gray-600">直达商务中心、预约制参观、一对一对接</p>
+                                </div>
+                                
+                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
+                                    <h5 class="font-bold mb-2 flex items-center">
+                                        <i class="fas fa-microscope text-purple-600 mr-2"></i>
+                                        技术交流路线
+                                    </h5>
+                                    <p class="text-sm text-gray-600">技术论坛、专家讲座、研发展示</p>
+                                </div>
+                                
+                                <div class="bg-white rounded-xl p-4 shadow hover:shadow-lg transition">
+                                    <h5 class="font-bold mb-2 flex items-center">
+                                        <i class="fas fa-newspaper text-orange-600 mr-2"></i>
+                                        媒体采访路线
+                                    </h5>
+                                    <p class="text-sm text-gray-600">新闻中心、采访间、直播区</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Duoduo Agent 可视化设计流程 -->
+    <section class="py-20 bg-white relative overflow-hidden">
+        <!-- 背景装饰 -->
+        <div class="absolute inset-0 opacity-5">
+            <div class="absolute top-20 left-20 w-64 h-64 bg-purple-400 rounded-full filter blur-3xl"></div>
+            <div class="absolute bottom-20 right-20 w-64 h-64 bg-blue-400 rounded-full filter blur-3xl"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="text-center mb-12 animate-fadeInUp">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">
+                    <i class="fas fa-robot text-purple-600 mr-3"></i>
+                    Duoduo Agent 智能设计系统
+                </h2>
+                <p class="text-xl text-gray-700 font-medium mb-3">从想法到展位概念的完整可视化流程</p>
+                <p class="text-lg text-gray-600">让学生直接体验AI驱动的设计革新，快速实现创意落地</p>
+            </div>
+            
+            <!-- 流程展示 -->
+            <div class="max-w-7xl mx-auto">
+                <!-- 流程时间线 -->
+                <div class="relative mb-12">
+                    <div class="absolute left-0 right-0 top-1/2 h-1 bg-gradient-to-r from-purple-400 via-blue-400 to-emerald-400 transform -translate-y-1/2 rounded-full"></div>
+                    <div class="flex justify-between relative">
+                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-purple-400 animate-pulse">
+                            <i class="fas fa-lightbulb text-purple-600 text-2xl"></i>
+                        </div>
+                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-indigo-400">
+                            <i class="fas fa-drafting-compass text-indigo-600 text-2xl"></i>
+                        </div>
+                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-blue-400">
+                            <i class="fas fa-paint-brush text-blue-600 text-2xl"></i>
+                        </div>
+                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-cyan-400">
+                            <i class="fas fa-cube text-cyan-600 text-2xl"></i>
+                        </div>
+                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-teal-400">
+                            <i class="fas fa-palette text-teal-600 text-2xl"></i>
+                        </div>
+                        <div class="bg-white rounded-full p-3 shadow-lg border-4 border-emerald-400 animate-pulse">
+                            <i class="fas fa-store text-emerald-600 text-2xl"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 设计阶段展示 - 横向滚动 -->
+                <div class="overflow-x-auto pb-6">
+                    <div class="flex gap-6" style="min-width: 1600px;">
+                        <!-- Stage 1: CAD设计图 -->
+                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 380px;">
+                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
+                            <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-4">
+                                <h3 class="text-lg font-bold flex items-center">
+                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">1</span>
+                                    CAD设计图
+                                </h3>
+                                <p class="text-sm opacity-90 mt-1">精确的工程制图</p>
+                            </div>
+                            <div class="p-2">
+                                <div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/会展策划/image/Whisk_dcc81c5212.jpg', 'CAD设计图')">
+                                    <img src="../../data/会展策划/image/Whisk_dcc81c5212.jpg" 
+                                         alt="CAD设计图" 
+                                         class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                                        <div class="absolute bottom-3 left-3 text-white">
+                                            <p class="text-xs">AutoCAD 2024</p>
+                                            <p class="text-xs opacity-75">精度: 0.1mm</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="px-4 pb-4 pt-2">
+                                <div class="flex items-center justify-between text-xs text-gray-600">
+                                    <span><i class="fas fa-clock mr-1"></i>2小时</span>
+                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                        
+                        <!-- Stage 2: 概念设计图 -->
+                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 380px;">
+                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
+                            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 text-white p-4">
+                                <h3 class="text-lg font-bold flex items-center">
+                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">2</span>
+                                    概念设计图
+                                </h3>
+                                <p class="text-sm opacity-90 mt-1">创意概念可视化</p>
+                            </div>
+                            <div class="p-2">
+                                <div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/会展策划/image/Whisk_e8f83d1a37.jpg', '概念设计图')">
+                                    <img src="../../data/会展策划/image/Whisk_e8f83d1a37.jpg" 
+                                         alt="概念设计图" 
+                                         class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                                        <div class="absolute bottom-3 left-3 text-white">
+                                            <p class="text-xs">Adobe Illustrator</p>
+                                            <p class="text-xs opacity-75">矢量设计</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="px-4 pb-4 pt-2">
+                                <div class="flex items-center justify-between text-xs text-gray-600">
+                                    <span><i class="fas fa-clock mr-1"></i>3小时</span>
+                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                        
+                        <!-- Stage 3: 三维建模白模 -->
+                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 380px;">
+                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
+                            <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4">
+                                <h3 class="text-lg font-bold flex items-center">
+                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">3</span>
+                                    三维建模白模
+                                </h3>
+                                <p class="text-sm opacity-90 mt-1">空间结构展示</p>
+                            </div>
+                            <div class="p-2">
+                                <div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/会展策划/image/Whisk_be64a7b61f.jpg', '三维建模白模')">
+                                    <img src="../../data/会展策划/image/Whisk_be64a7b61f.jpg" 
+                                         alt="三维建模白模" 
+                                         class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                                        <div class="absolute bottom-3 left-3 text-white">
+                                            <p class="text-xs">SketchUp Pro</p>
+                                            <p class="text-xs opacity-75">多边形: 128K</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="px-4 pb-4 pt-2">
+                                <div class="flex items-center justify-between text-xs text-gray-600">
+                                    <span><i class="fas fa-clock mr-1"></i>4小时</span>
+                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                        
+                        <!-- Stage 4: 三维渲染图 -->
+                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 380px;">
+                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
+                            <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white p-4">
+                                <h3 class="text-lg font-bold flex items-center">
+                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">4</span>
+                                    三维渲染图
+                                </h3>
+                                <p class="text-sm opacity-90 mt-1">真实感材质渲染</p>
+                            </div>
+                            <div class="p-2">
+                                <div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/会展策划/image/Whisk_192cdc54bc.jpg', '三维渲染图')">
+                                    <img src="../../data/会展策划/image/Whisk_192cdc54bc.jpg" 
+                                         alt="三维渲染图" 
+                                         class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                                        <div class="absolute bottom-3 left-3 text-white">
+                                            <p class="text-xs">V-Ray Next</p>
+                                            <p class="text-xs opacity-75">4K渲染</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="px-4 pb-4 pt-2">
+                                <div class="flex items-center justify-between text-xs text-gray-600">
+                                    <span><i class="fas fa-clock mr-1"></i>6小时</span>
+                                    <span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                        
+                        <!-- Stage 5: 展位概念设计图 -->
+                        <div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 380px;">
+                        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl ring-4 ring-emerald-400 ring-opacity-50">
+                            <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white p-4">
+                                <h3 class="text-lg font-bold flex items-center">
+                                    <span class="bg-white/20 backdrop-blur rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">5</span>
+                                    展位概念设计
+                                </h3>
+                                <p class="text-sm opacity-90 mt-1">最终展示方案</p>
+                            </div>
+                            <div class="p-2">
+                                <div class="relative overflow-hidden rounded-lg cursor-pointer" onclick="openImageModal('../../data/会展策划/image/Whisk_c478fe089d.jpg', '展位概念设计图')">
+                                    <img src="../../data/会展策划/image/Whisk_c478fe089d.jpg" 
+                                         alt="展位概念设计图" 
+                                         class="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-700">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                                        <div class="absolute bottom-3 left-3 text-white">
+                                            <p class="text-xs">Final Design</p>
+                                            <p class="text-xs opacity-75">Ready to Build</p>
+                                        </div>
+                                    </div>
+                                    <div class="absolute top-3 right-3">
+                                        <span class="bg-emerald-500 text-white text-xs px-2 py-1 rounded-full animate-pulse">
+                                            <i class="fas fa-star mr-1"></i>最终方案
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="px-4 pb-4 pt-2">
+                                <div class="flex items-center justify-between text-xs text-gray-600">
+                                    <span><i class="fas fa-clock mr-1"></i>总计: 20小时</span>
+                                    <span><i class="fas fa-trophy text-yellow-500 mr-1"></i>已交付</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+                
+                <!-- AI功能特点 -->
+                <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mr-4">
+                                <i class="fas fa-brain text-white text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-800">AI智能生成</h4>
+                                <p class="text-sm text-gray-600">基于需求自动设计</p>
+                            </div>
+                        </div>
+                        <ul class="space-y-2 text-sm text-gray-600">
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>自动识别设计需求</li>
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>智能优化空间布局</li>
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>实时渲染预览效果</li>
+                        </ul>
+                    </div>
+                    
+                    <div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mr-4">
+                                <i class="fas fa-tachometer-alt text-white text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-800">效率提升90%</h4>
+                                <p class="text-sm text-gray-600">传统流程需要2周</p>
+                            </div>
+                        </div>
+                        <ul class="space-y-2 text-sm text-gray-600">
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>20小时完成全流程</li>
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>无需专业设计背景</li>
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>一键导出施工图纸</li>
+                        </ul>
+                    </div>
+                    
+                    <div class="bg-white/80 backdrop-blur rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center mr-4">
+                                <i class="fas fa-users text-white text-xl"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-800">学生即可上手</h4>
+                                <p class="text-sm text-gray-600">零基础快速掌握</p>
+                            </div>
+                        </div>
+                        <ul class="space-y-2 text-sm text-gray-600">
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>可视化操作界面</li>
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>智能设计建议</li>
+                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>实时协作功能</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <!-- 功能说明 -->
+                <div class="text-center mt-12">
+                    <p class="text-gray-600 text-lg font-medium">
+                        <i class="fas fa-info-circle mr-2 text-blue-500"></i>
+                        支持团队协作 · 云端存储 · 版本管理
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 数字化服务体系 -->
+    <section class="py-20 bg-gray-50 relative overflow-hidden">
+        <div class="absolute inset-0">
+            <div class="absolute top-20 left-20 w-64 h-64 bg-blue-200/30 rounded-full filter blur-3xl"></div>
+            <div class="absolute bottom-20 right-20 w-80 h-80 bg-purple-200/30 rounded-full filter blur-3xl"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="text-center mb-12 animate-fadeInUp">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">
+                    <i class="fas fa-server text-purple-600 mr-3"></i>
+                    数字化服务体系
+                </h2>
+                <p class="text-xl text-gray-600">全方位智能化服务保障</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- 智能登记系统 -->
+                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
+                    <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
+                        <i class="fas fa-qrcode text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-4">智能登记系统</h3>
+                    <ul class="space-y-3 text-sm text-gray-600">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            人脸识别快速入场
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            电子证件一键生成
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            实时数据统计分析
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            VIP专属快速通道
+                        </li>
+                    </ul>
+                    <div class="mt-6 text-center">
+                        <div class="text-3xl font-bold text-blue-600 counter">< 30秒</div>
+                        <div class="text-sm text-gray-500">平均登记时间</div>
+                    </div>
+                </div>
+                
+                <!-- AI服务机器人 -->
+                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
+                    <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
+                        <i class="fas fa-robot text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-4">AI服务机器人</h3>
+                    <ul class="space-y-3 text-sm text-gray-600">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            多语言智能问答
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            展位导航引领
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            活动信息推送
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            紧急事件处理
+                        </li>
+                    </ul>
+                    <div class="mt-6 text-center">
+                        <div class="text-3xl font-bold text-purple-600 counter">50+</div>
+                        <div class="text-sm text-gray-500">服务机器人数量</div>
+                    </div>
+                </div>
+                
+                <!-- 云端数据中心 -->
+                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
+                    <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
+                        <i class="fas fa-cloud text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-4">云端数据中心</h3>
+                    <ul class="space-y-3 text-sm text-gray-600">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            实时客流监控
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            大数据分析报告
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            智能预警系统
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            展商数据服务
+                        </li>
+                    </ul>
+                    <div class="mt-6 text-center">
+                        <div class="text-3xl font-bold text-green-600 counter">24/7</div>
+                        <div class="text-sm text-gray-500">全天候监控</div>
+                    </div>
+                </div>
+                
+                <!-- 智慧安防系统 -->
+                <div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-3">
+                    <div class="w-20 h-20 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-6 mx-auto float-icon">
+                        <i class="fas fa-shield-alt text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-center mb-4">智慧安防系统</h3>
+                    <ul class="space-y-3 text-sm text-gray-600">
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            AI视频监控分析
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            异常行为识别
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            应急响应联动
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                            密度预警管控
+                        </li>
+                    </ul>
+                    <div class="mt-6 text-center">
+                        <div class="text-3xl font-bold text-orange-600 counter">1000+</div>
+                        <div class="text-sm text-gray-500">监控点位</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 特色活动安排 -->
+    <section class="py-20 bg-white relative overflow-hidden">
+        <div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/充电站.jpg'); background-size: cover;"></div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="text-center mb-12 animate-fadeInUp">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">
+                    <i class="fas fa-calendar-alt text-orange-600 mr-3"></i>
+                    精彩活动安排
+                </h2>
+                <p class="text-xl text-gray-600">四天展期，精彩不断</p>
+            </div>
+            
+            <!-- 开幕式 -->
+            <div class="mb-12">
+                <div class="gradient-animated rounded-3xl p-10 text-white shadow-2xl">
+                    <div class="text-center mb-8">
+                        <h3 class="text-3xl font-bold mb-4">
+                            <i class="fas fa-crown mr-3"></i>
+                            盛大开幕典礼
+                        </h3>
+                        <p class="text-xl opacity-90">9月12日 09:00-10:30 | 主会场</p>
+                    </div>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="glass-morphism rounded-xl p-6">
+                            <h4 class="font-bold text-lg mb-3 flex items-center">
+                                <i class="fas fa-microphone mr-2"></i>
+                                领导致辞
+                            </h4>
+                            <ul class="text-sm space-y-2 opacity-90">
+                                <li>• 工信部领导致辞</li>
+                                <li>• 长三角城市群代表发言</li>
+                                <li>• 行业协会主席讲话</li>
+                            </ul>
+                        </div>
+                        
+                        <div class="glass-morphism rounded-xl p-6">
+                            <h4 class="font-bold text-lg mb-3 flex items-center">
+                                <i class="fas fa-rocket mr-2"></i>
+                                启动仪式
+                            </h4>
+                            <ul class="text-sm space-y-2 opacity-90">
+                                <li>• 展会正式启动</li>
+                                <li>• 战略合作签约</li>
+                                <li>• 新品全球首发</li>
+                            </ul>
+                        </div>
+                        
+                        <div class="glass-morphism rounded-xl p-6">
+                            <h4 class="font-bold text-lg mb-3 flex items-center">
+                                <i class="fas fa-tv mr-2"></i>
+                                媒体直播
+                            </h4>
+                            <ul class="text-sm space-y-2 opacity-90">
+                                <li>• 央视新闻直播</li>
+                                <li>• 50+主流媒体报道</li>
+                                <li>• 全网同步直播</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 论坛日程 -->
+            <div class="bg-gray-50 rounded-3xl p-10">
+                <h3 class="text-3xl font-bold text-center mb-10 text-gray-800">
+                    <i class="fas fa-comments text-blue-600 mr-3"></i>
+                    高峰论坛日程
+                </h3>
+                
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <!-- Day 1 -->
+                    <div>
+                        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                            <div class="flex items-center justify-between mb-4">
+                                <h4 class="text-xl font-bold text-gray-800">第一天 - 9月12日</h4>
+                                <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm font-semibold">
+                                    产业发展日
+                                </span>
+                            </div>
+                            
+                            <div class="space-y-4">
+                                <div class="border-l-4 border-blue-500 pl-4">
+                                    <div class="flex items-center justify-between mb-2">
+                                        <h5 class="font-bold">新能源汽车产业发展论坛</h5>
+                                        <span class="text-sm text-gray-500">10:00-12:00</span>
+                                    </div>
+                                    <p class="text-sm text-gray-600">主题：双碳目标下的产业机遇</p>
+                                    <div class="mt-2 flex items-center text-xs text-gray-500">
+                                        <i class="fas fa-users mr-2"></i>
+                                        预计参会: 500人
+                                    </div>
+                                </div>
+                                
+                                <div class="border-l-4 border-green-500 pl-4">
+                                    <div class="flex items-center justify-between mb-2">
+                                        <h5 class="font-bold">动力电池技术创新峰会</h5>
+                                        <span class="text-sm text-gray-500">14:00-16:00</span>
+                                    </div>
+                                    <p class="text-sm text-gray-600">主题：固态电池商业化进程</p>
+                                    <div class="mt-2 flex items-center text-xs text-gray-500">
+                                        <i class="fas fa-users mr-2"></i>
+                                        预计参会: 300人
+                                    </div>
+                                </div>
+                                
+                                <div class="border-l-4 border-purple-500 pl-4">
+                                    <div class="flex items-center justify-between mb-2">
+                                        <h5 class="font-bold">智能座舱体验设计论坛</h5>
+                                        <span class="text-sm text-gray-500">16:30-18:00</span>
+                                    </div>
+                                    <p class="text-sm text-gray-600">主题：人机交互的未来趋势</p>
+                                    <div class="mt-2 flex items-center text-xs text-gray-500">
+                                        <i class="fas fa-users mr-2"></i>
+                                        预计参会: 200人
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Day 2 -->
+                    <div>
+                        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                            <div class="flex items-center justify-between mb-4">
+                                <h4 class="text-xl font-bold text-gray-800">第二天 - 9月13日</h4>
+                                <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-semibold">
+                                    技术创新日
+                                </span>
+                            </div>
+                            
+                            <div class="space-y-4">
+                                <div class="border-l-4 border-orange-500 pl-4">
+                                    <div class="flex items-center justify-between mb-2">
+                                        <h5 class="font-bold">自动驾驶技术峰会</h5>
+                                        <span class="text-sm text-gray-500">09:00-11:00</span>
+                                    </div>
+                                    <p class="text-sm text-gray-600">主题：L4级自动驾驶落地实践</p>
+                                    <div class="mt-2 flex items-center text-xs text-gray-500">
+                                        <i class="fas fa-users mr-2"></i>
+                                        预计参会: 400人
+                                    </div>
+                                </div>
+                                
+                                <div class="border-l-4 border-pink-500 pl-4">
+                                    <div class="flex items-center justify-between mb-2">
+                                        <h5 class="font-bold">充换电基础设施研讨会</h5>
+                                        <span class="text-sm text-gray-500">14:00-16:00</span>
+                                    </div>
+                                    <p class="text-sm text-gray-600">主题：超充网络建设与运营</p>
+                                    <div class="mt-2 flex items-center text-xs text-gray-500">
+                                        <i class="fas fa-users mr-2"></i>
+                                        预计参会: 350人
+                                    </div>
+                                </div>
+                                
+                                <div class="border-l-4 border-indigo-500 pl-4">
+                                    <div class="flex items-center justify-between mb-2">
+                                        <h5 class="font-bold">车联网安全技术论坛</h5>
+                                        <span class="text-sm text-gray-500">16:30-18:00</span>
+                                    </div>
+                                    <p class="text-sm text-gray-600">主题：智能汽车信息安全挑战</p>
+                                    <div class="mt-2 flex items-center text-xs text-gray-500">
+                                        <i class="fas fa-users mr-2"></i>
+                                        预计参会: 250人
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 服务保障体系 -->
+    <section class="py-20 bg-gradient-to-br from-emerald-50 to-blue-50 relative overflow-hidden">
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="text-center mb-12 animate-fadeInUp">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">
+                    <i class="fas fa-hand-holding-heart text-emerald-600 mr-3"></i>
+                    全方位服务保障
+                </h2>
+                <p class="text-xl text-gray-600">专业团队，贴心服务</p>
+            </div>
+            
+            <!-- 服务团队 -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
+                    <div class="text-center mb-6">
+                        <div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-headset text-white text-3xl"></i>
+                        </div>
+                        <h4 class="text-xl font-bold">客服团队</h4>
+                    </div>
+                    <ul class="space-y-3 text-sm text-gray-600">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            专业客服人员200+
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            8种语言服务支持
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            24小时服务热线
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            现场问题即时处理
+                        </li>
+                    </ul>
+                </div>
+                
+                <div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
+                    <div class="text-center mb-6">
+                        <div class="w-24 h-24 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-shield-alt text-white text-3xl"></i>
+                        </div>
+                        <h4 class="text-xl font-bold">安保团队</h4>
+                    </div>
+                    <ul class="space-y-3 text-sm text-gray-600">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            专业安保人员300+
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            AI智能监控系统
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            应急响应3分钟内
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            全场无死角覆盖
+                        </li>
+                    </ul>
+                </div>
+                
+                <div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-2xl transition-all duration-300">
+                    <div class="text-center mb-6">
+                        <div class="w-24 h-24 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-medkit text-white text-3xl"></i>
+                        </div>
+                        <h4 class="text-xl font-bold">医疗团队</h4>
+                    </div>
+                    <ul class="space-y-3 text-sm text-gray-600">
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            医护人员50+
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            8个医疗服务点
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            救护车现场待命
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-check text-green-500 mr-3"></i>
+                            AED设备全覆盖
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 gradient-animated text-white relative overflow-hidden">
+        <div class="absolute inset-0">
+            <div class="absolute top-10 left-10 w-32 h-32 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
+            <div class="absolute bottom-10 right-10 w-40 h-40 bg-white/10 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 text-center relative z-10">
+            <h2 class="text-4xl font-bold mb-6 neon-glow">专业运营，保障展会成功</h2>
+            <p class="text-xl mb-8 opacity-90">了解展会预算规划与投资回报分析</p>
+            <a href="budget.html" class="inline-block bg-white text-purple-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transform hover:scale-105 transition-all duration-300 shadow-xl">
+                <i class="fas fa-chart-pie mr-2"></i>
+                查看预算分析
+            </a>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="text-center">
+                <p class="text-gray-400">&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <!-- JavaScript for animations -->
+    <script>
+        // Counter animation
+        const observerOptions = {
+            threshold: 0.5,
+            rootMargin: '0px'
+        };
+        
+        const observer = new IntersectionObserver(function(entries) {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate');
+                }
+            });
+        }, observerOptions);
+        
+        document.querySelectorAll('.counter').forEach(el => {
+            observer.observe(el);
+        });
+    </script>
+    <script src="../js/nav-component.js"></script>
+    <script src="../js/back-to-top.js"></script>
+    
+    <!-- 图片放大模态框 -->
+    <div id="imageModal" class="fixed inset-0 z-[9999] hidden">
+        <div class="absolute inset-0 bg-black/90 backdrop-blur" onclick="closeImageModal()"></div>
+        <div class="relative w-full h-full flex items-center justify-center p-8">
+            <img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain">
+            <button onclick="closeImageModal()" class="absolute top-8 right-8 text-white text-3xl hover:text-gray-300 transition-colors">
+                <i class="fas fa-times"></i>
+            </button>
+            <div id="modalCaption" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white text-xl font-bold bg-black/50 px-6 py-3 rounded-lg"></div>
+        </div>
+    </div>
+    
+    <script>
+        // 图片弹窗功能
+        function openImageModal(imageSrc, caption) {
+            const modal = document.getElementById('imageModal');
+            const modalImg = document.getElementById('modalImage');
+            const modalCaption = document.getElementById('modalCaption');
+            
+            modal.classList.remove('hidden');
+            modalImg.src = imageSrc;
+            modalCaption.textContent = caption;
+            
+            // 禁止页面滚动
+            document.body.style.overflow = 'hidden';
+        }
+        
+        function closeImageModal() {
+            const modal = document.getElementById('imageModal');
+            modal.classList.add('hidden');
+            
+            // 恢复页面滚动
+            document.body.style.overflow = '';
+        }
+        
+        // ESC键关闭弹窗
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                closeImageModal();
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/overview.html b/web_frontend/web_result/pages/overview.html
index 18bb132a..c65f73f6 100644
--- a/web_frontend/web_result/pages/overview.html
+++ b/web_frontend/web_result/pages/overview.html
@@ -2,13 +2,25 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <title>策划概述 - 2024长三角国际新能源汽车展</title>
     <link rel="stylesheet" href="../css/styles.css">
     <link rel="stylesheet" href="../css/animations.css">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- 页面加载动画 -->
+    <!-- 错误处理（需要最早加载） -->
+    <script src="../js/error-handler.js"></script>
+
+    <script src="../js/page-loader.js"></script>
+    
+    <!-- 移动端优化 -->
+    <script src="../js/mobile-optimize.js"></script>
+    
+    <!-- 性能优化 -->
+    <script src="../js/performance-optimizer.js"></script>
     <style>
         * {
             font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -482,5 +494,6 @@
         </div>
     </footer>
     <script src="../js/nav-component.js"></script>
+    <script src="../js/back-to-top.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/risk.html b/web_frontend/web_result/pages/risk.html
index 18c4857f..3bb6de44 100644
--- a/web_frontend/web_result/pages/risk.html
+++ b/web_frontend/web_result/pages/risk.html
@@ -2,10 +2,22 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <title>风险评估 - 2024长三角国际新能源汽车展</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- 页面加载动画 -->
+    <!-- 错误处理（需要最早加载） -->
+    <script src="../js/error-handler.js"></script>
+
+    <script src="../js/page-loader.js"></script>
+    
+    <!-- 移动端优化 -->
+    <script src="../js/mobile-optimize.js"></script>
+    
+    <!-- 性能优化 -->
+    <script src="../js/performance-optimizer.js"></script>
     <style>
         * {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -1041,5 +1053,6 @@
         });
     </script>
     <script src="../js/nav-component.js"></script>
+    <script src="../js/back-to-top.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web_frontend/web_result/sw.js b/web_frontend/web_result/sw.js
new file mode 100644
index 00000000..80ec9123
--- /dev/null
+++ b/web_frontend/web_result/sw.js
@@ -0,0 +1,283 @@
+// Service Worker for performance optimization
+const CACHE_NAME = 'n8n-demo-v1';
+const STATIC_CACHE = 'static-v1';
+const DYNAMIC_CACHE = 'dynamic-v1';
+
+// 需要缓存的静态资源
+const STATIC_FILES = [
+    '/',
+    '/index.html',
+    '/pages/overview.html',
+    '/pages/exhibition.html',
+    '/pages/marketing.html',
+    '/pages/operation.html',
+    '/pages/budget.html',
+    '/pages/risk.html',
+    '/js/nav-component.js',
+    '/js/back-to-top.js',
+    '/js/mobile-optimize.js',
+    '/js/performance-optimizer.js',
+    '/js/page-loader.js',
+    '/css/styles.css',
+    '/css/animations.css'
+];
+
+// 缓存策略配置
+const CACHE_STRATEGIES = {
+    // 静态资源：缓存优先
+    static: {
+        pattern: /\.(js|css|woff|woff2|ttf|eot)$/,
+        strategy: 'cacheFirst',
+        maxAge: 30 * 24 * 60 * 60 * 1000 // 30天
+    },
+    // HTML页面：网络优先，失败时使用缓存
+    html: {
+        pattern: /\.html$/,
+        strategy: 'networkFirst',
+        maxAge: 24 * 60 * 60 * 1000 // 1天
+    },
+    // 图片：缓存优先
+    images: {
+        pattern: /\.(png|jpg|jpeg|gif|svg|webp)$/,
+        strategy: 'cacheFirst',
+        maxAge: 7 * 24 * 60 * 60 * 1000 // 7天
+    },
+    // 外部资源：网络优先
+    external: {
+        pattern: /^https:\/\/(fonts\.googleapis\.com|cdnjs\.cloudflare\.com|cdn\.jsdelivr\.net)/,
+        strategy: 'networkFirst',
+        maxAge: 7 * 24 * 60 * 60 * 1000 // 7天
+    }
+};
+
+// 安装事件 - 缓存静态资源
+self.addEventListener('install', event => {
+    console.log('SW: Install event');
+    
+    event.waitUntil(
+        caches.open(STATIC_CACHE)
+            .then(cache => {
+                console.log('SW: Caching static files');
+                return cache.addAll(STATIC_FILES);
+            })
+            .then(() => {
+                console.log('SW: Static files cached');
+                return self.skipWaiting();
+            })
+            .catch(err => {
+                console.error('SW: Failed to cache static files', err);
+            })
+    );
+});
+
+// 激活事件 - 清理旧缓存
+self.addEventListener('activate', event => {
+    console.log('SW: Activate event');
+    
+    event.waitUntil(
+        caches.keys()
+            .then(cacheNames => {
+                return Promise.all(
+                    cacheNames.map(cacheName => {
+                        // 删除旧版本的缓存
+                        if (cacheName !== STATIC_CACHE && cacheName !== DYNAMIC_CACHE) {
+                            console.log('SW: Deleting old cache:', cacheName);
+                            return caches.delete(cacheName);
+                        }
+                    })
+                );
+            })
+            .then(() => {
+                console.log('SW: Old caches cleaned');
+                return self.clients.claim();
+            })
+    );
+});
+
+// 获取事件 - 实现缓存策略
+self.addEventListener('fetch', event => {
+    // 只处理 GET 请求
+    if (event.request.method !== 'GET') {
+        return;
+    }
+    
+    const url = new URL(event.request.url);
+    
+    // 跳过 chrome-extension 等协议
+    if (!url.protocol.startsWith('http')) {
+        return;
+    }
+    
+    event.respondWith(handleFetch(event.request));
+});
+
+// 处理请求的核心函数
+async function handleFetch(request) {
+    const url = new URL(request.url);
+    
+    try {
+        // 确定缓存策略
+        const strategy = getCacheStrategy(request);
+        
+        switch (strategy.strategy) {
+            case 'cacheFirst':
+                return await cacheFirst(request, strategy);
+            case 'networkFirst':
+                return await networkFirst(request, strategy);
+            case 'networkOnly':
+                return await fetch(request);
+            default:
+                return await networkFirst(request, strategy);
+        }
+    } catch (error) {
+        console.error('SW: Fetch failed:', error);
+        
+        // 返回离线页面或缓存的响应
+        return await getOfflineResponse(request);
+    }
+}
+
+// 获取缓存策略
+function getCacheStrategy(request) {
+    const url = request.url;
+    
+    for (const [key, config] of Object.entries(CACHE_STRATEGIES)) {
+        if (config.pattern.test(url)) {
+            return config;
+        }
+    }
+    
+    // 默认策略
+    return { strategy: 'networkFirst', maxAge: 24 * 60 * 60 * 1000 };
+}
+
+// 缓存优先策略
+async function cacheFirst(request, strategy) {
+    const cacheName = isStaticResource(request) ? STATIC_CACHE : DYNAMIC_CACHE;
+    const cache = await caches.open(cacheName);
+    const cachedResponse = await cache.match(request);
+    
+    if (cachedResponse) {
+        // 检查缓存是否过期
+        const cachedDate = new Date(cachedResponse.headers.get('date') || Date.now());
+        const now = new Date();
+        
+        if (now - cachedDate < strategy.maxAge) {
+            return cachedResponse;
+        }
+    }
+    
+    try {
+        const networkResponse = await fetch(request);
+        
+        if (networkResponse.ok) {
+            // 缓存新响应
+            await cache.put(request, networkResponse.clone());
+        }
+        
+        return networkResponse;
+    } catch (error) {
+        // 网络失败，返回缓存（即使过期）
+        if (cachedResponse) {
+            return cachedResponse;
+        }
+        throw error;
+    }
+}
+
+// 网络优先策略
+async function networkFirst(request, strategy) {
+    const cacheName = isStaticResource(request) ? STATIC_CACHE : DYNAMIC_CACHE;
+    const cache = await caches.open(cacheName);
+    
+    try {
+        const networkResponse = await fetch(request);
+        
+        if (networkResponse.ok) {
+            // 缓存响应
+            await cache.put(request, networkResponse.clone());
+        }
+        
+        return networkResponse;
+    } catch (error) {
+        // 网络失败，尝试从缓存获取
+        const cachedResponse = await cache.match(request);
+        
+        if (cachedResponse) {
+            return cachedResponse;
+        }
+        
+        throw error;
+    }
+}
+
+// 判断是否为静态资源
+function isStaticResource(request) {
+    const url = new URL(request.url);
+    return STATIC_FILES.some(file => url.pathname.endsWith(file));
+}
+
+// 获取离线响应
+async function getOfflineResponse(request) {
+    const url = new URL(request.url);
+    
+    // 如果是 HTML 请求，返回主页
+    if (request.headers.get('accept')?.includes('text/html')) {
+        const cache = await caches.open(STATIC_CACHE);
+        return await cache.match('/index.html') || new Response('Offline', { status: 503 });
+    }
+    
+    // 其他资源返回 503
+    return new Response('Offline', { status: 503 });
+}
+
+// 监听消息事件
+self.addEventListener('message', event => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+        self.skipWaiting();
+    }
+    
+    if (event.data && event.data.type === 'GET_VERSION') {
+        event.ports[0].postMessage({ version: CACHE_NAME });
+    }
+});
+
+// 后台同步（如果支持）
+self.addEventListener('sync', event => {
+    if (event.tag === 'background-sync') {
+        event.waitUntil(doBackgroundSync());
+    }
+});
+
+async function doBackgroundSync() {
+    // 这里可以执行后台同步任务
+    console.log('SW: Background sync');
+}
+
+// 推送通知（如果需要）
+self.addEventListener('push', event => {
+    if (event.data) {
+        const data = event.data.json();
+        const options = {
+            body: data.body,
+            icon: data.icon || '/favicon.ico',
+            badge: '/badge.png',
+            vibrate: [200, 100, 200],
+            data: data.data,
+            actions: data.actions
+        };
+        
+        event.waitUntil(
+            self.registration.showNotification(data.title, options)
+        );
+    }
+});
+
+// 通知点击事件
+self.addEventListener('notificationclick', event => {
+    event.notification.close();
+    
+    event.waitUntil(
+        clients.openWindow(event.notification.data?.url || '/')
+    );
+});
\ No newline at end of file