From 2b1ed656cddb8293d2cf575a43df0aa7a7a6faee Mon Sep 17 00:00:00 2001
From: Yep_Q <xiaoqi6pi@qq.com>
Date: Mon, 8 Sep 2025 14:05:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BC=9A=E5=B1=95?=
 =?UTF-8?q?=E7=BD=91=E7=AB=99=E9=A6=96=E9=A1=B5=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

主要改进:
- 修复星形图标可见性问题，改为黄色高对比度显示
- 移除'立即参展'按钮，清理冗余CTA元素
- 修正背景图片路径并优化透明度(opacity-10)
- 为所有容器区域添加hover提示文字
- 删除'立即参与，共创绿色出行未来'整个CTA区块
- 优化页面加载器和图片错误处理
- 修复展会信息卡片文字对比度问题
- 增强多层背景遮罩效果

影响文件:
- web_frontend/web_result/index.html
- web_frontend/web_result/css/animations.css
- web_frontend/web_result/js/main.js
- 新增多个页面和样式文件

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/settings.local.json                   |   3 +-
 .../exhibition_demo_multiagent_system.md      | 157 +++
 .../design_iterations/exhibition_site_1.html  | 424 ++++++++
 .../design_iterations/exhibition_site_2.html  | 516 ++++++++++
 .../design_iterations/exhibition_site_3.html  | 644 ++++++++++++
 .../design_iterations/exhibition_site_4.html  | 635 ++++++++++++
 .../design_iterations/exhibition_site_5.html  | 814 ++++++++++++++++
 web_frontend/doc/网页结果生成.md              |   2 +-
 .../src/components/ResultModal.tsx            |   8 +-
 web_frontend/web_result/css/animations.css    | 919 ++++++++++++++++++
 web_frontend/web_result/css/styles.css        | 454 +++++++++
 web_frontend/web_result/index.html            | 617 +++++++++---
 web_frontend/web_result/js/main.js            | 709 ++++++++++++++
 web_frontend/web_result/pages/budget.html     | 636 ++++++++++++
 web_frontend/web_result/pages/exhibition.html | 350 +++++--
 web_frontend/web_result/pages/marketing.html  | 805 +++++++++++++++
 web_frontend/web_result/pages/operation.html  | 700 +++++++++++++
 web_frontend/web_result/pages/overview.html   | 287 ++++--
 web_frontend/web_result/pages/risk.html       | 634 ++++++++++++
 19 files changed, 8961 insertions(+), 353 deletions(-)
 create mode 100644 .serena/memories/exhibition_demo_multiagent_system.md
 create mode 100644 .superdesign/design_iterations/exhibition_site_1.html
 create mode 100644 .superdesign/design_iterations/exhibition_site_2.html
 create mode 100644 .superdesign/design_iterations/exhibition_site_3.html
 create mode 100644 .superdesign/design_iterations/exhibition_site_4.html
 create mode 100644 .superdesign/design_iterations/exhibition_site_5.html
 create mode 100644 web_frontend/web_result/css/animations.css
 create mode 100644 web_frontend/web_result/css/styles.css
 create mode 100644 web_frontend/web_result/js/main.js
 create mode 100644 web_frontend/web_result/pages/budget.html
 create mode 100644 web_frontend/web_result/pages/marketing.html
 create mode 100644 web_frontend/web_result/pages/operation.html
 create mode 100644 web_frontend/web_result/pages/risk.html

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 7036828a..a36d226f 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -64,7 +64,8 @@
       "Bash(npm run build:*)",
       "Bash(npm run preview:*)",
       "Bash(open http://localhost:4173)",
-      "Bash(find:*)"
+      "Bash(find:*)",
+      "Bash(open index.html)"
     ],
     "defaultMode": "acceptEdits",
     "additionalDirectories": [
diff --git a/.serena/memories/exhibition_demo_multiagent_system.md b/.serena/memories/exhibition_demo_multiagent_system.md
new file mode 100644
index 00000000..0fcccbb4
--- /dev/null
+++ b/.serena/memories/exhibition_demo_multiagent_system.md
@@ -0,0 +1,157 @@
+# 展会策划 AI 多智能体演示系统项目总结
+
+## 项目概述
+- **项目名称**: 展会策划 AI 多智能体协作演示系统
+- **开发时间**: 2025-09-08
+- **项目路径**: `/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo`
+- **技术栈**: React 18 + TypeScript + Tailwind CSS + Framer Motion + Zustand + Vite
+- **部署端口**: 4173
+
+## 核心功能实现
+
+### 1. 多智能体架构
+系统包含 7 个专业 AI Agent：
+- **信息检索专家** (DeepSeek Chat Model5): 市场调研、数据收集、竞品分析
+- **设计专家** (Google Gemini Chat Model2): 视觉设计、空间布局、品牌形象
+- **财务预算专家** (DeepSeek Chat Model2): 成本核算、预算规划、ROI分析
+- **格式编辑专家** (DeepSeek Chat Model4): 文档格式化、内容结构优化
+- **活动执行专家** (DeepSeek Chat Model1): 执行计划、时间线管理、任务分配
+- **营销宣传专家** (DeepSeek Chat Model3): 推广策略、媒体规划、品牌传播
+- **会展策划专家** (Chat Models + Memories): 中央协调、方案整合、决策支持
+
+### 2. 终端模拟系统
+- **打字机效果**: 30-40字/秒的输出速度
+- **进度条系统**: 实现了真实的卡顿效果（在15%, 40%, 68%, 90%位置）
+- **内容类型**: 支持文本、图片、进度条、结构化数据等多种输出
+- **滚动控制**: 自动滚动到最新内容，支持手动滚动查看历史
+
+### 3. 用户交互流程
+1. **需求输入模态框** (`RequirementModal.tsx`)
+   - 预设新能源汽车展模板
+   - 支持自定义需求输入
+   
+2. **执行过程展示** (`WorkflowPageV4.tsx`)
+   - 左侧嵌入 n8n 工作流可视化
+   - 右侧终端实时输出
+   - Agent 头像和状态显示
+   
+3. **结果展示模态框** (`ResultModal.tsx`)
+   - 显示生成统计（68页文档、3分钟生成、30% ROI）
+   - 章节完成状态
+   - 查看详情和下载选项
+
+### 4. 图片加载优化
+- **骨架屏加载**: 简单的灰色渐变动画
+- **同步加载**: 后续内容等待图片加载完成
+- **图片来源**: 使用实际展会策划文档中的图片
+
+## 关键技术实现
+
+### 状态管理 (Zustand)
+```typescript
+// store/demoStore.ts
+export interface Agent {
+  id: string;
+  name: string;
+  icon: string;
+  avatar?: string;
+  model: string;
+  role: string;
+  status: 'waiting' | 'thinking' | 'generating' | 'done';
+}
+```
+
+### 进度条卡顿效果
+```typescript
+const stutters = [15, 40, 68, 90];
+if (stutters.includes(progress)) {
+  await new Promise(resolve => setTimeout(resolve, getRandomDelay(1000, 3000)));
+}
+```
+
+### 图片加载控制
+```typescript
+const handleImageLoad = (lineId: string) => {
+  setImageLoadingStates(prev => ({
+    ...prev,
+    [lineId]: false
+  }));
+  // 图片加载完成后才继续执行
+  setImageLoadComplete(true);
+};
+```
+
+## 项目文件结构
+```
+exhibition-demo/
+├── src/
+│   ├── pages/
+│   │   └── WorkflowPageV4.tsx  # 主演示页面（最终版本）
+│   ├── components/
+│   │   ├── RequirementModal.tsx # 需求输入
+│   │   └── ResultModal.tsx      # 结果展示
+│   ├── store/
+│   │   └── demoStore.ts         # 状态管理
+│   └── App.tsx
+├── public/
+│   ├── agents/                  # Agent 头像
+│   └── images/                  # 展会图片资源
+└── vite.config.ts               # 端口配置 4173
+```
+
+## 开发过程中的关键优化
+
+### 迭代历史
+- **V1**: 基础框架，缺少完整演示流程
+- **V2**: 添加嵌入式 n8n 工作流，终端风格执行
+- **V3**: 修复滚动问题，添加进度条和 Agent 头像
+- **V4**: 实现真实进度条效果，添加需求/结果模态框（最终版本）
+
+### 解决的问题
+1. **滚动条问题**: 添加 `max-height: calc(100vh - 200px)` 和自定义滚动条样式
+2. **进度条真实性**: 改为覆盖式更新（updateProgressLine）而非追加
+3. **图片加载闪烁**: 添加骨架屏和同步等待机制
+4. **模态框触发**: 修正 useEffect 条件判断（currentAgentIndex >= 0）
+5. **TypeScript 类型错误**: 修正 NodeJS.Timeout 为 number 类型
+
+## 部署和运行
+```bash
+# 安装依赖
+cd web_frontend/exhibition-demo
+pnpm install
+
+# 开发模式
+pnpm dev
+
+# 生产构建
+pnpm build
+
+# 预览（端口 4173）
+pnpm preview
+```
+
+## 项目亮点
+1. **完整的多智能体协作演示**: 真实模拟 AI 团队协作过程
+2. **优秀的用户体验**: 流畅的动画、真实的执行效果
+3. **现代化技术栈**: React 18 最新特性、TypeScript 类型安全
+4. **可扩展架构**: 易于添加新的 Agent 或修改执行流程
+5. **视觉效果**: 干净现代的设计，避免丑陋的渐变色
+
+## 相关资源
+- n8n 工作流地址: http://localhost:5678/workflow/XbfF8iRI4a69hmYS
+- 展会策划文档: `/web_frontend/data/会展策划/汽车展会展策划案_DEMO.md`
+- Git 分支: Web_Create
+- 最新提交: c0644d4b (2025-09-08)
+
+## 重要配置
+- Vite 配置使用端口 4173
+- n8n 服务运行在端口 5678
+- 图片资源路径: public/images/
+- Agent 头像路径: public/agents/
+
+## 未来优化建议
+1. 可以添加更多的 Agent 类型
+2. 支持自定义执行流程
+3. 添加导出功能（PDF、Word）
+4. 集成真实的 AI API 调用
+5. 支持多语言界面
\ No newline at end of file
diff --git a/.superdesign/design_iterations/exhibition_site_1.html b/.superdesign/design_iterations/exhibition_site_1.html
new file mode 100644
index 00000000..29886aea
--- /dev/null
+++ b/.superdesign/design_iterations/exhibition_site_1.html
@@ -0,0 +1,424 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代1</title>
+    <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">
+    <style>
+        :root {
+            --primary: #10b981;
+            --secondary: #3b82f6;
+            --accent: #8b5cf6;
+            --dark: #1e293b;
+            --light: #f8fafc;
+        }
+        
+        body {
+            font-family: 'Inter', 'Noto Sans SC', sans-serif;
+        }
+        
+        .gradient-mesh {
+            background: 
+                radial-gradient(at 40% 20%, hsla(162, 74%, 40%, 0.3) 0px, transparent 50%),
+                radial-gradient(at 80% 0%, hsla(217, 91%, 60%, 0.2) 0px, transparent 50%),
+                radial-gradient(at 0% 50%, hsla(271, 68%, 63%, 0.2) 0px, transparent 50%),
+                radial-gradient(at 80% 50%, hsla(189, 100%, 56%, 0.1) 0px, transparent 50%),
+                radial-gradient(at 0% 100%, hsla(217, 91%, 60%, 0.2) 0px, transparent 50%);
+        }
+        
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .neon-glow {
+            text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
+        }
+        
+        .hover-lift {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .hover-lift:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            25% { transform: translateY(-20px) rotate(2deg); }
+            75% { transform: translateY(-10px) rotate(-2deg); }
+        }
+        
+        .float-animation {
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        @keyframes gradient-shift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        .animated-gradient {
+            background: linear-gradient(-45deg, #10b981, #3b82f6, #8b5cf6, #ec4899);
+            background-size: 400% 400%;
+            animation: gradient-shift 15s ease infinite;
+        }
+        
+        .card-3d {
+            transform-style: preserve-3d;
+            transition: transform 0.6s;
+        }
+        
+        .card-3d:hover {
+            transform: rotateY(10deg) rotateX(10deg);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- 固定导航栏 -->
+    <nav class="fixed top-0 left-0 right-0 z-50 glass-effect">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center space-x-4">
+                    <div class="w-10 h-10 animated-gradient rounded-full"></div>
+                    <span class="text-xl font-bold text-gray-800">NEVIT 2024</span>
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#home" class="text-gray-700 hover:text-emerald-500 transition-colors">首页</a>
+                    <a href="#about" class="text-gray-700 hover:text-emerald-500 transition-colors">关于展会</a>
+                    <a href="#exhibits" class="text-gray-700 hover:text-emerald-500 transition-colors">展览内容</a>
+                    <a href="#schedule" class="text-gray-700 hover:text-emerald-500 transition-colors">日程安排</a>
+                    <a href="#register" class="text-gray-700 hover:text-emerald-500 transition-colors">参展登记</a>
+                    <a href="#contact" class="text-gray-700 hover:text-emerald-500 transition-colors">联系我们</a>
+                </div>
+                <button class="md:hidden p-2">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 英雄区域 -->
+    <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <div class="absolute inset-0 gradient-mesh"></div>
+        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-gray-50"></div>
+        
+        <!-- 动态背景元素 -->
+        <div class="absolute inset-0">
+            <div class="absolute top-20 left-10 w-72 h-72 bg-emerald-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 float-animation"></div>
+            <div class="absolute top-40 right-20 w-96 h-96 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 float-animation" style="animation-delay: 2s;"></div>
+            <div class="absolute bottom-20 left-1/2 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 float-animation" style="animation-delay: 4s;"></div>
+        </div>
+        
+        <div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
+            <h1 class="text-6xl md:text-8xl font-black mb-6">
+                <span class="block text-transparent bg-clip-text animated-gradient">2024 长三角</span>
+                <span class="block text-gray-800 mt-2">新能源汽车博览会</span>
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-600 mb-8 font-light">
+                引领绿色出行新时代 · 共创智能交通新未来
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button class="px-8 py-4 bg-emerald-500 text-white rounded-full font-semibold hover-lift hover:bg-emerald-600 shadow-lg">
+                    立即参展
+                </button>
+                <button class="px-8 py-4 glass-effect text-gray-800 rounded-full font-semibold hover-lift">
+                    了解更多
+                </button>
+            </div>
+            
+            <!-- 展会信息卡片 -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-20">
+                <div class="glass-effect rounded-2xl p-6 hover-lift">
+                    <div class="text-4xl mb-3">📅</div>
+                    <h3 class="text-lg font-semibold mb-1">展会时间</h3>
+                    <p class="text-gray-600">2024年6月15-17日</p>
+                </div>
+                <div class="glass-effect rounded-2xl p-6 hover-lift">
+                    <div class="text-4xl mb-3">📍</div>
+                    <h3 class="text-lg font-semibold mb-1">展会地点</h3>
+                    <p class="text-gray-600">苏州国际博览中心</p>
+                </div>
+                <div class="glass-effect rounded-2xl p-6 hover-lift">
+                    <div class="text-4xl mb-3">🏢</div>
+                    <h3 class="text-lg font-semibold mb-1">展览规模</h3>
+                    <p class="text-gray-600">50,000平方米</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 数据展示区 -->
+    <section class="py-20 bg-white">
+        <div class="max-w-7xl mx-auto px-4">
+            <h2 class="text-4xl font-bold text-center mb-16">
+                <span class="text-transparent bg-clip-text animated-gradient">展会数据一览</span>
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div class="text-center card-3d">
+                    <div class="text-5xl font-black text-emerald-500 mb-2">500+</div>
+                    <p class="text-gray-600">参展企业</p>
+                </div>
+                <div class="text-center card-3d">
+                    <div class="text-5xl font-black text-blue-500 mb-2">50,000</div>
+                    <p class="text-gray-600">专业观众</p>
+                </div>
+                <div class="text-center card-3d">
+                    <div class="text-5xl font-black text-purple-500 mb-2">100+</div>
+                    <p class="text-gray-600">同期活动</p>
+                </div>
+                <div class="text-center card-3d">
+                    <div class="text-5xl font-black text-pink-500 mb-2">30+</div>
+                    <p class="text-gray-600">媒体合作</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 展览亮点 -->
+    <section class="py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4">
+            <h2 class="text-4xl font-bold text-center mb-16">展览亮点</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
+                    <div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-xl flex items-center justify-center mb-6">
+                        <span class="text-2xl">🚗</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">新能源整车</h3>
+                    <p class="text-gray-600 leading-relaxed">展示最新纯电动、混合动力、氢燃料电池等新能源汽车技术与产品</p>
+                </div>
+                <div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
+                    <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center mb-6">
+                        <span class="text-2xl">🔋</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">动力电池技术</h3>
+                    <p class="text-gray-600 leading-relaxed">聚焦固态电池、快充技术、电池回收等前沿动力电池解决方案</p>
+                </div>
+                <div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
+                    <div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl flex items-center justify-center mb-6">
+                        <span class="text-2xl">🤖</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">智能驾驶</h3>
+                    <p class="text-gray-600 leading-relaxed">展示L3-L5级自动驾驶、车路协同、智能座舱等创新技术</p>
+                </div>
+                <div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
+                    <div class="w-16 h-16 bg-gradient-to-br from-pink-400 to-pink-600 rounded-xl flex items-center justify-center mb-6">
+                        <span class="text-2xl">⚡</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">充电基础设施</h3>
+                    <p class="text-gray-600 leading-relaxed">超级快充、无线充电、换电站等充电基础设施整体解决方案</p>
+                </div>
+                <div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
+                    <div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center mb-6">
+                        <span class="text-2xl">🌐</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">车联网技术</h3>
+                    <p class="text-gray-600 leading-relaxed">5G-V2X、OTA升级、云服务平台等智能网联汽车技术展示</p>
+                </div>
+                <div class="bg-white rounded-2xl p-8 hover-lift shadow-lg">
+                    <div class="w-16 h-16 bg-gradient-to-br from-red-400 to-red-600 rounded-xl flex items-center justify-center mb-6">
+                        <span class="text-2xl">🏭</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">智能制造</h3>
+                    <p class="text-gray-600 leading-relaxed">工业4.0、柔性生产线、数字孪生等汽车智能制造解决方案</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 日程安排时间线 -->
+    <section class="py-20 bg-white">
+        <div class="max-w-7xl mx-auto px-4">
+            <h2 class="text-4xl font-bold text-center mb-16">活动日程</h2>
+            <div class="relative">
+                <!-- 时间线 -->
+                <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-emerald-400 to-blue-400"></div>
+                
+                <!-- 日程项 -->
+                <div class="space-y-12">
+                    <div class="flex items-center">
+                        <div class="flex-1 text-right pr-8">
+                            <div class="glass-effect rounded-xl p-6 inline-block hover-lift">
+                                <h3 class="text-xl font-semibold mb-2">开幕式暨主论坛</h3>
+                                <p class="text-gray-600">6月15日 09:00-12:00</p>
+                                <p class="text-sm text-gray-500 mt-2">政府领导致辞、产业发展报告发布</p>
+                            </div>
+                        </div>
+                        <div class="w-4 h-4 bg-emerald-500 rounded-full border-4 border-white shadow-lg z-10"></div>
+                        <div class="flex-1 pl-8"></div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 pr-8"></div>
+                        <div class="w-4 h-4 bg-blue-500 rounded-full border-4 border-white shadow-lg z-10"></div>
+                        <div class="flex-1 text-left pl-8">
+                            <div class="glass-effect rounded-xl p-6 inline-block hover-lift">
+                                <h3 class="text-xl font-semibold mb-2">新品发布会</h3>
+                                <p class="text-gray-600">6月15日 14:00-17:00</p>
+                                <p class="text-sm text-gray-500 mt-2">20+品牌新车型全球首发</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 text-right pr-8">
+                            <div class="glass-effect rounded-xl p-6 inline-block hover-lift">
+                                <h3 class="text-xl font-semibold mb-2">技术创新峰会</h3>
+                                <p class="text-gray-600">6月16日 09:00-17:00</p>
+                                <p class="text-sm text-gray-500 mt-2">8大专题论坛并行举办</p>
+                            </div>
+                        </div>
+                        <div class="w-4 h-4 bg-purple-500 rounded-full border-4 border-white shadow-lg z-10"></div>
+                        <div class="flex-1 pl-8"></div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 pr-8"></div>
+                        <div class="w-4 h-4 bg-pink-500 rounded-full border-4 border-white shadow-lg z-10"></div>
+                        <div class="flex-1 text-left pl-8">
+                            <div class="glass-effect rounded-xl p-6 inline-block hover-lift">
+                                <h3 class="text-xl font-semibold mb-2">商务对接会</h3>
+                                <p class="text-gray-600">6月17日 09:00-15:00</p>
+                                <p class="text-sm text-gray-500 mt-2">供需对接、项目签约仪式</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 参展登记 -->
+    <section id="register" class="py-20 bg-gradient-to-br from-emerald-50 to-blue-50">
+        <div class="max-w-4xl mx-auto px-4">
+            <h2 class="text-4xl font-bold text-center mb-16">参展登记</h2>
+            <div class="bg-white rounded-3xl shadow-2xl p-8 md:p-12">
+                <form class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">企业名称</label>
+                            <input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">联系人</label>
+                            <input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">联系电话</label>
+                            <input type="tel" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">电子邮箱</label>
+                            <input type="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">展位需求</label>
+                        <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all">
+                            <option>标准展位 (9㎡)</option>
+                            <option>豪华展位 (18㎡)</option>
+                            <option>特装展位 (36㎡)</option>
+                            <option>室外展位</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">留言</label>
+                        <textarea rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"></textarea>
+                    </div>
+                    <button type="submit" class="w-full py-4 bg-gradient-to-r from-emerald-500 to-blue-500 text-white rounded-lg font-semibold hover:shadow-xl transform hover:scale-105 transition-all">
+                        提交申请
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="max-w-7xl mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">NEVIT 2024</h3>
+                    <p class="text-gray-400">长三角国际新能源汽车与智能交通产业博览会</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">快速链接</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">展会介绍</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">参展指南</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">观众服务</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">新闻中心</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">联系方式</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li>电话：400-888-8888</li>
+                        <li>邮箱：info@nevit2024.com</li>
+                        <li>地址：苏州工业园区苏州大道东688号</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">关注我们</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-emerald-500 transition-colors">
+                            <span>微</span>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-emerald-500 transition-colors">
+                            <span>博</span>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-emerald-500 transition-colors">
+                            <span>in</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2024 NEVIT. All rights reserved. | 设计迭代版本 1.0</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // 平滑滚动
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' });
+                }
+            });
+        });
+        
+        // 滚动动画
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+        
+        document.querySelectorAll('.hover-lift').forEach(el => {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(20px)';
+            el.style.transition = 'all 0.5s ease-out';
+            observer.observe(el);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.superdesign/design_iterations/exhibition_site_2.html b/.superdesign/design_iterations/exhibition_site_2.html
new file mode 100644
index 00000000..25a879a5
--- /dev/null
+++ b/.superdesign/design_iterations/exhibition_site_2.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代2</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: oklch(0.7 0.2 150);
+            --secondary: oklch(0.6 0.25 250);
+            --accent: oklch(0.65 0.3 30);
+            --surface: oklch(0.98 0 0);
+            --text: oklch(0.2 0 0);
+        }
+        
+        [data-theme="dark"] {
+            --primary: oklch(0.65 0.2 150);
+            --secondary: oklch(0.7 0.25 250);
+            --accent: oklch(0.75 0.3 30);
+            --surface: oklch(0.15 0 0);
+            --text: oklch(0.95 0 0);
+        }
+        
+        * {
+            font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
+        }
+        
+        body {
+            background: var(--surface);
+            color: var(--text);
+            transition: all 0.3s ease;
+        }
+        
+        .morphism {
+            background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: 
+                20px 20px 60px rgba(0,0,0,0.1),
+                -20px -20px 60px rgba(255,255,255,0.1);
+        }
+        
+        .neumorphism {
+            background: var(--surface);
+            box-shadow: 
+                inset 5px 5px 10px rgba(0,0,0,0.1),
+                inset -5px -5px 10px rgba(255,255,255,0.1);
+        }
+        
+        .glow-text {
+            text-shadow: 
+                0 0 10px var(--primary),
+                0 0 20px var(--primary),
+                0 0 30px var(--primary);
+        }
+        
+        .hover-magnetic {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        @keyframes levitate {
+            0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
+            25% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); }
+            75% { transform: translateY(-5px) rotateX(-5deg) rotateY(-5deg); }
+        }
+        
+        .levitate {
+            animation: levitate 4s ease-in-out infinite;
+            transform-style: preserve-3d;
+        }
+        
+        @keyframes aurora {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        .aurora-bg {
+            background: linear-gradient(
+                -45deg, 
+                oklch(0.7 0.2 150 / 0.3),
+                oklch(0.6 0.25 250 / 0.3),
+                oklch(0.65 0.3 30 / 0.3),
+                oklch(0.7 0.2 300 / 0.3)
+            );
+            background-size: 400% 400%;
+            animation: aurora 20s ease infinite;
+        }
+        
+        .grid-pattern {
+            background-image: 
+                linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
+            background-size: 50px 50px;
+        }
+        
+        .text-gradient {
+            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .card-hover {
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-10px) rotateX(10deg) scale(1.02);
+            box-shadow: 
+                0 30px 60px rgba(0,0,0,0.2),
+                0 0 40px var(--primary);
+        }
+        
+        .parallax-container {
+            perspective: 1000px;
+        }
+        
+        .parallax-layer {
+            transform-style: preserve-3d;
+        }
+    </style>
+</head>
+<body class="min-h-screen overflow-x-hidden">
+    <!-- 极光背景 -->
+    <div class="fixed inset-0 aurora-bg opacity-30 -z-10"></div>
+    <div class="fixed inset-0 grid-pattern opacity-10 -z-10"></div>
+    
+    <!-- 高级导航栏 -->
+    <nav class="fixed top-0 left-0 right-0 z-50 morphism px-6 py-4">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-4">
+                <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-400 to-blue-500 flex items-center justify-center text-white font-bold levitate">
+                    NE
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold">NEVIT 2024</h1>
+                    <p class="text-xs opacity-60">新能源汽车产业博览会</p>
+                </div>
+            </div>
+            
+            <div class="hidden lg:flex items-center space-x-8">
+                <a href="#" class="hover-magnetic relative group">
+                    <span class="relative z-10">首页</span>
+                    <span class="absolute inset-0 bg-gradient-to-r from-emerald-400 to-blue-500 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity"></span>
+                </a>
+                <a href="#" class="hover-magnetic">展会概览</a>
+                <a href="#" class="hover-magnetic">展商服务</a>
+                <a href="#" class="hover-magnetic">观众中心</a>
+                <a href="#" class="hover-magnetic">新闻动态</a>
+                <a href="#" class="hover-magnetic">联系我们</a>
+            </div>
+            
+            <div class="flex items-center space-x-4">
+                <button id="themeToggle" class="w-10 h-10 rounded-full neumorphism flex items-center justify-center">
+                    <span class="text-xl">🌙</span>
+                </button>
+                <button class="px-6 py-2 rounded-full bg-gradient-to-r from-emerald-400 to-blue-500 text-white font-semibold hover:shadow-lg transition-all">
+                    立即报名
+                </button>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- 3D英雄区域 -->
+    <section class="min-h-screen flex items-center justify-center pt-20 parallax-container">
+        <div class="text-center px-4 parallax-layer">
+            <div class="mb-8 levitate">
+                <h1 class="text-7xl md:text-9xl font-black mb-4">
+                    <span class="block text-gradient">2024</span>
+                    <span class="block text-4xl md:text-6xl mt-2">长三角新能源汽车</span>
+                    <span class="block text-3xl md:text-5xl mt-2 opacity-80">智能交通产业博览会</span>
+                </h1>
+            </div>
+            
+            <p class="text-xl md:text-2xl mb-12 opacity-80 max-w-3xl mx-auto">
+                探索未来出行 · 引领产业变革 · 共创绿色生态
+            </p>
+            
+            <!-- 3D卡片组 -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto mt-20">
+                <div class="morphism rounded-3xl p-8 card-hover">
+                    <div class="text-5xl mb-4">⚡</div>
+                    <h3 class="text-2xl font-bold mb-2">50,000㎡</h3>
+                    <p class="opacity-70">超大展览空间</p>
+                </div>
+                <div class="morphism rounded-3xl p-8 card-hover" style="animation-delay: 0.1s;">
+                    <div class="text-5xl mb-4">🚗</div>
+                    <h3 class="text-2xl font-bold mb-2">500+</h3>
+                    <p class="opacity-70">知名展商</p>
+                </div>
+                <div class="morphism rounded-3xl p-8 card-hover" style="animation-delay: 0.2s;">
+                    <div class="text-5xl mb-4">👥</div>
+                    <h3 class="text-2xl font-bold mb-2">50,000+</h3>
+                    <p class="opacity-70">专业观众</p>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 悬浮装饰元素 -->
+        <div class="absolute top-20 left-10 w-20 h-20 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 opacity-20 levitate"></div>
+        <div class="absolute bottom-20 right-10 w-32 h-32 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 opacity-20 levitate" style="animation-delay: 1s;"></div>
+        <div class="absolute top-1/2 left-20 w-16 h-16 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 opacity-20 levitate" style="animation-delay: 2s;"></div>
+    </section>
+    
+    <!-- 特色展区 -->
+    <section class="py-20 px-4">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-5xl font-black text-center mb-4">
+                <span class="text-gradient">核心展区</span>
+            </h2>
+            <p class="text-center text-xl opacity-70 mb-16">六大主题展区，全方位展示产业链创新成果</p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- 展区卡片 -->
+                <div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
+                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-emerald-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white text-2xl mb-6">
+                            🔋
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">动力电池展区</h3>
+                        <p class="opacity-70 mb-4">固态电池、快充技术、电池管理系统等前沿技术展示</p>
+                        <div class="flex items-center text-emerald-500 font-semibold">
+                            <span>了解更多</span>
+                            <span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
+                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-2xl mb-6">
+                            🤖
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">智能驾驶展区</h3>
+                        <p class="opacity-70 mb-4">L3-L5级自动驾驶、激光雷达、高精地图等核心技术</p>
+                        <div class="flex items-center text-blue-500 font-semibold">
+                            <span>了解更多</span>
+                            <span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
+                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white text-2xl mb-6">
+                            ⚡
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">充电设施展区</h3>
+                        <p class="opacity-70 mb-4">超级快充、无线充电、换电站等基础设施解决方案</p>
+                        <div class="flex items-center text-purple-500 font-semibold">
+                            <span>了解更多</span>
+                            <span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
+                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-pink-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-400 to-pink-600 flex items-center justify-center text-white text-2xl mb-6">
+                            🚗
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">整车制造展区</h3>
+                        <p class="opacity-70 mb-4">纯电动、混合动力、氢能源等新能源整车展示</p>
+                        <div class="flex items-center text-pink-500 font-semibold">
+                            <span>了解更多</span>
+                            <span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
+                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-yellow-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-white text-2xl mb-6">
+                            🌐
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">车联网展区</h3>
+                        <p class="opacity-70 mb-4">5G-V2X、OTA升级、智能座舱等互联技术展示</p>
+                        <div class="flex items-center text-yellow-500 font-semibold">
+                            <span>了解更多</span>
+                            <span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative overflow-hidden rounded-3xl morphism p-8 card-hover">
+                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-400 to-transparent opacity-20 rounded-full -mr-16 -mt-16"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center text-white text-2xl mb-6">
+                            🏭
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">智能制造展区</h3>
+                        <p class="opacity-70 mb-4">工业4.0、数字孪生、柔性制造等生产技术</p>
+                        <div class="flex items-center text-red-500 font-semibold">
+                            <span>了解更多</span>
+                            <span class="ml-2 transform group-hover:translate-x-2 transition-transform">→</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 互动式时间线 -->
+    <section class="py-20 px-4">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-5xl font-black text-center mb-16">
+                <span class="text-gradient">精彩日程</span>
+            </h2>
+            
+            <div class="relative">
+                <!-- 中心线 -->
+                <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-emerald-400 via-blue-400 to-purple-400 rounded-full"></div>
+                
+                <!-- 时间节点 -->
+                <div class="space-y-20">
+                    <div class="flex items-center">
+                        <div class="flex-1 text-right pr-12">
+                            <div class="inline-block">
+                                <div class="morphism rounded-3xl p-8 card-hover text-left max-w-md">
+                                    <div class="text-sm text-emerald-500 font-semibold mb-2">DAY 1 - 6月15日</div>
+                                    <h3 class="text-2xl font-bold mb-3">开幕式暨主论坛</h3>
+                                    <p class="opacity-70 mb-4">09:00 - 12:00</p>
+                                    <ul class="space-y-2 opacity-70">
+                                        <li>• 政府领导致辞</li>
+                                        <li>• 产业报告发布</li>
+                                        <li>• 战略合作签约</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="w-6 h-6 bg-emerald-500 rounded-full border-4 border-white shadow-lg z-10 levitate"></div>
+                        <div class="flex-1 pl-12"></div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 pr-12"></div>
+                        <div class="w-6 h-6 bg-blue-500 rounded-full border-4 border-white shadow-lg z-10 levitate" style="animation-delay: 0.5s;"></div>
+                        <div class="flex-1 text-left pl-12">
+                            <div class="inline-block">
+                                <div class="morphism rounded-3xl p-8 card-hover max-w-md">
+                                    <div class="text-sm text-blue-500 font-semibold mb-2">DAY 1 - 6月15日</div>
+                                    <h3 class="text-2xl font-bold mb-3">新品发布会</h3>
+                                    <p class="opacity-70 mb-4">14:00 - 17:00</p>
+                                    <ul class="space-y-2 opacity-70">
+                                        <li>• 20+新车型首发</li>
+                                        <li>• 技术创新展示</li>
+                                        <li>• 媒体专访</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 text-right pr-12">
+                            <div class="inline-block">
+                                <div class="morphism rounded-3xl p-8 card-hover text-left max-w-md">
+                                    <div class="text-sm text-purple-500 font-semibold mb-2">DAY 2 - 6月16日</div>
+                                    <h3 class="text-2xl font-bold mb-3">技术创新峰会</h3>
+                                    <p class="opacity-70 mb-4">09:00 - 17:00</p>
+                                    <ul class="space-y-2 opacity-70">
+                                        <li>• 8大专题论坛</li>
+                                        <li>• 院士专家演讲</li>
+                                        <li>• 圆桌讨论</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="w-6 h-6 bg-purple-500 rounded-full border-4 border-white shadow-lg z-10 levitate" style="animation-delay: 1s;"></div>
+                        <div class="flex-1 pl-12"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 合作伙伴展示 -->
+    <section class="py-20 px-4">
+        <div class="max-w-7xl mx-auto text-center">
+            <h2 class="text-5xl font-black mb-4">
+                <span class="text-gradient">战略合作伙伴</span>
+            </h2>
+            <p class="text-xl opacity-70 mb-16">携手行业领军企业，共创产业新生态</p>
+            
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
+                <div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
+                    <span class="text-2xl font-bold opacity-50">比亚迪</span>
+                </div>
+                <div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
+                    <span class="text-2xl font-bold opacity-50">特斯拉</span>
+                </div>
+                <div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
+                    <span class="text-2xl font-bold opacity-50">蔚来</span>
+                </div>
+                <div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
+                    <span class="text-2xl font-bold opacity-50">理想</span>
+                </div>
+                <div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
+                    <span class="text-2xl font-bold opacity-50">小鹏</span>
+                </div>
+                <div class="morphism rounded-2xl p-6 flex items-center justify-center h-24 card-hover">
+                    <span class="text-2xl font-bold opacity-50">宁德时代</span>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- CTA区域 -->
+    <section class="py-20 px-4">
+        <div class="max-w-4xl mx-auto">
+            <div class="morphism rounded-3xl p-12 md:p-16 text-center">
+                <h2 class="text-4xl md:text-5xl font-black mb-6">
+                    <span class="text-gradient">立即加入我们</span>
+                </h2>
+                <p class="text-xl opacity-70 mb-8 max-w-2xl mx-auto">
+                    成为2024长三角新能源汽车产业博览会的一部分，共同见证行业变革时刻
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <button class="px-8 py-4 rounded-full bg-gradient-to-r from-emerald-400 to-blue-500 text-white font-semibold text-lg hover:shadow-xl transform hover:scale-105 transition-all">
+                        申请参展
+                    </button>
+                    <button class="px-8 py-4 rounded-full morphism font-semibold text-lg hover:shadow-xl transform hover:scale-105 transition-all">
+                        观众预登记
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 页脚 -->
+    <footer class="py-12 px-4 border-t border-white/10">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4 text-gradient">NEVIT 2024</h3>
+                    <p class="opacity-70">引领新能源汽车产业发展方向</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">快速链接</h4>
+                    <ul class="space-y-2 opacity-70">
+                        <li><a href="#" class="hover:opacity-100 transition-opacity">展会介绍</a></li>
+                        <li><a href="#" class="hover:opacity-100 transition-opacity">参展指南</a></li>
+                        <li><a href="#" class="hover:opacity-100 transition-opacity">媒体中心</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">服务支持</h4>
+                    <ul class="space-y-2 opacity-70">
+                        <li><a href="#" class="hover:opacity-100 transition-opacity">交通指南</a></li>
+                        <li><a href="#" class="hover:opacity-100 transition-opacity">酒店预订</a></li>
+                        <li><a href="#" class="hover:opacity-100 transition-opacity">展商服务</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">联系我们</h4>
+                    <ul class="space-y-2 opacity-70">
+                        <li>📞 400-888-8888</li>
+                        <li>✉️ info@nevit2024.com</li>
+                        <li>📍 苏州国际博览中心</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="text-center pt-8 border-t border-white/10">
+                <p class="opacity-50">&copy; 2024 NEVIT. All rights reserved. | 设计迭代版本 2.0</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = html.getAttribute('data-theme');
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            html.setAttribute('data-theme', newTheme);
+            themeToggle.textContent = newTheme === 'light' ? '🌙' : '☀️';
+        });
+        
+        // 磁性悬停效果
+        document.querySelectorAll('.hover-magnetic').forEach(element => {
+            element.addEventListener('mousemove', (e) => {
+                const rect = element.getBoundingClientRect();
+                const x = e.clientX - rect.left - rect.width / 2;
+                const y = e.clientY - rect.top - rect.height / 2;
+                
+                element.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
+            });
+            
+            element.addEventListener('mouseleave', () => {
+                element.style.transform = 'translate(0, 0)';
+            });
+        });
+        
+        // 滚动视差效果
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const parallax = document.querySelectorAll('.parallax-layer');
+            
+            parallax.forEach(element => {
+                const speed = element.dataset.speed || 0.5;
+                element.style.transform = `translateY(${scrolled * speed}px)`;
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.superdesign/design_iterations/exhibition_site_3.html b/.superdesign/design_iterations/exhibition_site_3.html
new file mode 100644
index 00000000..b6c866a9
--- /dev/null
+++ b/.superdesign/design_iterations/exhibition_site_3.html
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代3</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Outfit', 'Noto Sans SC', sans-serif;
+        }
+        
+        :root {
+            --neon-green: #00ff88;
+            --electric-blue: #00d4ff;
+            --cyber-purple: #9945ff;
+            --hot-pink: #ff00ff;
+            --dark-bg: #0a0a0a;
+            --card-bg: #111111;
+        }
+        
+        body {
+            background: var(--dark-bg);
+            color: #ffffff;
+            overflow-x: hidden;
+        }
+        
+        /* 赛博朋克网格背景 */
+        .cyber-grid {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                linear-gradient(rgba(0,255,136,0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0,255,136,0.1) 1px, transparent 1px);
+            background-size: 100px 100px;
+            z-index: -2;
+        }
+        
+        /* 霓虹光效 */
+        .neon-text {
+            text-shadow: 
+                0 0 10px var(--neon-green),
+                0 0 20px var(--neon-green),
+                0 0 30px var(--neon-green),
+                0 0 40px var(--neon-green);
+        }
+        
+        .neon-border {
+            border: 2px solid var(--neon-green);
+            box-shadow: 
+                0 0 10px var(--neon-green),
+                inset 0 0 10px rgba(0,255,136,0.2);
+        }
+        
+        /* 全息投影效果 */
+        .hologram {
+            background: linear-gradient(45deg, 
+                transparent 30%, 
+                rgba(0,255,136,0.1) 50%, 
+                transparent 70%);
+            background-size: 200% 200%;
+            animation: hologram-scan 3s linear infinite;
+        }
+        
+        @keyframes hologram-scan {
+            0% { background-position: 200% 200%; }
+            100% { background-position: -200% -200%; }
+        }
+        
+        /* 故障艺术效果 */
+        .glitch {
+            position: relative;
+            color: white;
+            font-size: 4em;
+            font-weight: 900;
+            text-transform: uppercase;
+        }
+        
+        .glitch::before,
+        .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        
+        .glitch::before {
+            animation: glitch-1 0.3s infinite;
+            color: var(--neon-green);
+            z-index: -1;
+        }
+        
+        .glitch::after {
+            animation: glitch-2 0.3s infinite;
+            color: var(--hot-pink);
+            z-index: -2;
+        }
+        
+        @keyframes glitch-1 {
+            0%, 100% { clip: rect(0, 900px, 0, 0); }
+            25% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(-2px, -2px); }
+            50% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(2px, 2px); }
+            75% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(-2px, 2px); }
+        }
+        
+        @keyframes glitch-2 {
+            0%, 100% { clip: rect(0, 900px, 0, 0); }
+            25% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(2px, -2px); }
+            50% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(-2px, 2px); }
+            75% { clip: rect(random(100)px, 900px, random(100)px, 0); transform: translate(2px, 2px); }
+        }
+        
+        /* 赛博卡片 */
+        .cyber-card {
+            background: var(--card-bg);
+            border: 1px solid rgba(0,255,136,0.3);
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        
+        .cyber-card::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, var(--neon-green), var(--electric-blue), var(--cyber-purple), var(--hot-pink));
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .cyber-card:hover::before {
+            opacity: 1;
+            animation: border-rotate 2s linear infinite;
+        }
+        
+        @keyframes border-rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .cyber-card:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 
+                0 20px 40px rgba(0,255,136,0.3),
+                0 0 60px rgba(0,255,136,0.2);
+        }
+        
+        /* 数据流动画 */
+        .data-stream {
+            position: absolute;
+            width: 2px;
+            height: 100px;
+            background: linear-gradient(to bottom, transparent, var(--neon-green), transparent);
+            animation: stream 2s linear infinite;
+        }
+        
+        @keyframes stream {
+            0% { transform: translateY(-100px); }
+            100% { transform: translateY(100vh); }
+        }
+        
+        /* 扫描线效果 */
+        .scan-line {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
+            animation: scan 3s linear infinite;
+            z-index: 100;
+            pointer-events: none;
+        }
+        
+        @keyframes scan {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(100vh); }
+        }
+        
+        /* 像素化按钮 */
+        .pixel-btn {
+            background: linear-gradient(135deg, var(--neon-green), var(--electric-blue));
+            clip-path: polygon(
+                0 10px, 10px 0,
+                calc(100% - 10px) 0, 100% 10px,
+                100% calc(100% - 10px), calc(100% - 10px) 100%,
+                10px 100%, 0 calc(100% - 10px)
+            );
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        
+        .pixel-btn:hover {
+            transform: scale(1.05);
+            filter: brightness(1.2);
+            box-shadow: 0 0 30px var(--neon-green);
+        }
+        
+        /* 终端样式文字 */
+        .terminal-text {
+            font-family: 'Courier New', monospace;
+            color: var(--neon-green);
+        }
+        
+        .terminal-text::before {
+            content: '> ';
+            color: var(--electric-blue);
+        }
+        
+        /* 加载动画 */
+        .cyber-loader {
+            width: 60px;
+            height: 60px;
+            border: 3px solid rgba(0,255,136,0.3);
+            border-top-color: var(--neon-green);
+            border-radius: 50%;
+            animation: cyber-spin 1s linear infinite;
+        }
+        
+        @keyframes cyber-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        /* 3D透视卡片 */
+        .perspective-card {
+            transform-style: preserve-3d;
+            transform: perspective(1000px) rotateX(10deg) rotateY(-10deg);
+            transition: transform 0.5s ease;
+        }
+        
+        .perspective-card:hover {
+            transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <!-- 赛博朋克网格背景 -->
+    <div class="cyber-grid"></div>
+    
+    <!-- 扫描线效果 -->
+    <div class="scan-line"></div>
+    
+    <!-- 数据流 -->
+    <div class="data-stream" style="left: 10%;"></div>
+    <div class="data-stream" style="left: 30%; animation-delay: 0.5s;"></div>
+    <div class="data-stream" style="left: 50%; animation-delay: 1s;"></div>
+    <div class="data-stream" style="left: 70%; animation-delay: 1.5s;"></div>
+    <div class="data-stream" style="left: 90%; animation-delay: 2s;"></div>
+    
+    <!-- 赛博朋克导航 -->
+    <nav class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-green-500/30">
+        <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-4">
+                <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 rotate-45 flex items-center justify-center">
+                    <span class="text-black font-bold -rotate-45">NE</span>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold neon-text">NEVIT_2024</h1>
+                    <p class="text-xs terminal-text">SYSTEM.ONLINE</p>
+                </div>
+            </div>
+            
+            <div class="hidden md:flex items-center space-x-6">
+                <a href="#" class="hover:text-green-400 transition-colors terminal-text">HOME</a>
+                <a href="#" class="hover:text-green-400 transition-colors terminal-text">EXHIBITS</a>
+                <a href="#" class="hover:text-green-400 transition-colors terminal-text">SCHEDULE</a>
+                <a href="#" class="hover:text-green-400 transition-colors terminal-text">REGISTER</a>
+                <a href="#" class="hover:text-green-400 transition-colors terminal-text">CONTACT</a>
+            </div>
+            
+            <button class="px-6 py-2 pixel-btn text-black font-bold">
+                ENTER_EXPO
+            </button>
+        </div>
+    </nav>
+    
+    <!-- 英雄区域 -->
+    <section class="min-h-screen flex items-center justify-center relative pt-20">
+        <div class="text-center z-10 px-4">
+            <div class="mb-8">
+                <h1 class="glitch text-6xl md:text-8xl mb-4" data-text="NEVIT 2024">NEVIT 2024</h1>
+                <div class="text-2xl md:text-4xl font-light mb-2">
+                    <span class="text-green-400">长三角</span>
+                    <span class="text-blue-400">新能源汽车</span>
+                </div>
+                <div class="text-xl md:text-3xl font-light">
+                    <span class="text-purple-400">智能交通</span>
+                    <span class="text-pink-400">产业博览会</span>
+                </div>
+            </div>
+            
+            <div class="mb-12">
+                <p class="terminal-text text-xl">INITIALIZING_FUTURE_MOBILITY</p>
+                <p class="text-gray-400 mt-2">2024.06.15-17 | SUZHOU_EXPO_CENTER</p>
+            </div>
+            
+            <!-- 数据指标 -->
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+                <div class="cyber-card p-6 rounded-lg">
+                    <div class="text-3xl font-bold text-green-400 mb-2">500+</div>
+                    <div class="text-xs uppercase tracking-wider">Exhibitors</div>
+                </div>
+                <div class="cyber-card p-6 rounded-lg">
+                    <div class="text-3xl font-bold text-blue-400 mb-2">50K</div>
+                    <div class="text-xs uppercase tracking-wider">Visitors</div>
+                </div>
+                <div class="cyber-card p-6 rounded-lg">
+                    <div class="text-3xl font-bold text-purple-400 mb-2">100+</div>
+                    <div class="text-xs uppercase tracking-wider">Events</div>
+                </div>
+                <div class="cyber-card p-6 rounded-lg">
+                    <div class="text-3xl font-bold text-pink-400 mb-2">50K㎡</div>
+                    <div class="text-xs uppercase tracking-wider">Area</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 全息投影装饰 -->
+        <div class="absolute inset-0 hologram opacity-20 pointer-events-none"></div>
+    </section>
+    
+    <!-- 展区矩阵 -->
+    <section class="py-20 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-5xl font-bold mb-4">
+                    <span class="neon-text">EXHIBITION_MATRIX</span>
+                </h2>
+                <p class="terminal-text text-xl">LOADING_SECTORS...</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- 展区卡片 -->
+                <div class="cyber-card p-8 rounded-lg perspective-card">
+                    <div class="flex items-center mb-4">
+                        <div class="w-2 h-8 bg-green-400 mr-4"></div>
+                        <h3 class="text-2xl font-bold">BATTERY_TECH</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">固态电池 | 快充技术 | BMS系统</p>
+                    <div class="flex items-center justify-between">
+                        <span class="text-green-400 text-sm">STATUS: ACTIVE</span>
+                        <span class="text-xs">HALL_A1</span>
+                    </div>
+                </div>
+                
+                <div class="cyber-card p-8 rounded-lg perspective-card">
+                    <div class="flex items-center mb-4">
+                        <div class="w-2 h-8 bg-blue-400 mr-4"></div>
+                        <h3 class="text-2xl font-bold">AUTO_PILOT</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">L3-L5自动驾驶 | 激光雷达 | V2X</p>
+                    <div class="flex items-center justify-between">
+                        <span class="text-blue-400 text-sm">STATUS: ACTIVE</span>
+                        <span class="text-xs">HALL_B2</span>
+                    </div>
+                </div>
+                
+                <div class="cyber-card p-8 rounded-lg perspective-card">
+                    <div class="flex items-center mb-4">
+                        <div class="w-2 h-8 bg-purple-400 mr-4"></div>
+                        <h3 class="text-2xl font-bold">CHARGING_INFRA</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">超级快充 | 无线充电 | 换电站</p>
+                    <div class="flex items-center justify-between">
+                        <span class="text-purple-400 text-sm">STATUS: ACTIVE</span>
+                        <span class="text-xs">HALL_C3</span>
+                    </div>
+                </div>
+                
+                <div class="cyber-card p-8 rounded-lg perspective-card">
+                    <div class="flex items-center mb-4">
+                        <div class="w-2 h-8 bg-pink-400 mr-4"></div>
+                        <h3 class="text-2xl font-bold">VEHICLE_MFG</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">纯电动 | 混动 | 氢能源</p>
+                    <div class="flex items-center justify-between">
+                        <span class="text-pink-400 text-sm">STATUS: ACTIVE</span>
+                        <span class="text-xs">HALL_D4</span>
+                    </div>
+                </div>
+                
+                <div class="cyber-card p-8 rounded-lg perspective-card">
+                    <div class="flex items-center mb-4">
+                        <div class="w-2 h-8 bg-yellow-400 mr-4"></div>
+                        <h3 class="text-2xl font-bold">IOV_TECH</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">5G-V2X | OTA | 智能座舱</p>
+                    <div class="flex items-center justify-between">
+                        <span class="text-yellow-400 text-sm">STATUS: ACTIVE</span>
+                        <span class="text-xs">HALL_E5</span>
+                    </div>
+                </div>
+                
+                <div class="cyber-card p-8 rounded-lg perspective-card">
+                    <div class="flex items-center mb-4">
+                        <div class="w-2 h-8 bg-red-400 mr-4"></div>
+                        <h3 class="text-2xl font-bold">SMART_MFG</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">工业4.0 | 数字孪生 | 柔性制造</p>
+                    <div class="flex items-center justify-between">
+                        <span class="text-red-400 text-sm">STATUS: ACTIVE</span>
+                        <span class="text-xs">HALL_F6</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 时间轴界面 -->
+    <section class="py-20 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-5xl font-bold mb-4">
+                    <span class="neon-text">EVENT_TIMELINE</span>
+                </h2>
+                <p class="terminal-text text-xl">SYNCHRONIZING_SCHEDULE...</p>
+            </div>
+            
+            <div class="relative">
+                <!-- 中心光柱 -->
+                <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-green-400 via-blue-400 to-purple-400"></div>
+                
+                <!-- 时间节点 -->
+                <div class="space-y-12">
+                    <div class="flex items-center">
+                        <div class="flex-1 text-right pr-8">
+                            <div class="cyber-card inline-block p-6 rounded-lg">
+                                <div class="text-green-400 font-mono text-sm mb-2">[DAY_01] 2024.06.15</div>
+                                <h3 class="text-xl font-bold mb-2">OPENING_CEREMONY</h3>
+                                <p class="text-gray-400 text-sm">09:00 - 12:00 | MAIN_HALL</p>
+                            </div>
+                        </div>
+                        <div class="w-4 h-4 bg-green-400 rounded-full neon-border relative z-10"></div>
+                        <div class="flex-1 pl-8"></div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 pr-8"></div>
+                        <div class="w-4 h-4 bg-blue-400 rounded-full neon-border relative z-10"></div>
+                        <div class="flex-1 text-left pl-8">
+                            <div class="cyber-card inline-block p-6 rounded-lg">
+                                <div class="text-blue-400 font-mono text-sm mb-2">[DAY_01] 2024.06.15</div>
+                                <h3 class="text-xl font-bold mb-2">PRODUCT_LAUNCH</h3>
+                                <p class="text-gray-400 text-sm">14:00 - 17:00 | HALL_A</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 text-right pr-8">
+                            <div class="cyber-card inline-block p-6 rounded-lg">
+                                <div class="text-purple-400 font-mono text-sm mb-2">[DAY_02] 2024.06.16</div>
+                                <h3 class="text-xl font-bold mb-2">TECH_SUMMIT</h3>
+                                <p class="text-gray-400 text-sm">09:00 - 17:00 | MULTI_HALL</p>
+                            </div>
+                        </div>
+                        <div class="w-4 h-4 bg-purple-400 rounded-full neon-border relative z-10"></div>
+                        <div class="flex-1 pl-8"></div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="flex-1 pr-8"></div>
+                        <div class="w-4 h-4 bg-pink-400 rounded-full neon-border relative z-10"></div>
+                        <div class="flex-1 text-left pl-8">
+                            <div class="cyber-card inline-block p-6 rounded-lg">
+                                <div class="text-pink-400 font-mono text-sm mb-2">[DAY_03] 2024.06.17</div>
+                                <h3 class="text-xl font-bold mb-2">BUSINESS_MATCH</h3>
+                                <p class="text-gray-400 text-sm">09:00 - 15:00 | VIP_ZONE</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 注册接口 -->
+    <section class="py-20 px-4">
+        <div class="max-w-4xl mx-auto">
+            <div class="cyber-card p-12 rounded-lg">
+                <h2 class="text-4xl font-bold mb-8 text-center">
+                    <span class="neon-text">ACCESS_PORTAL</span>
+                </h2>
+                
+                <form class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="terminal-text block mb-2">COMPANY_NAME</label>
+                            <input type="text" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
+                        </div>
+                        <div>
+                            <label class="terminal-text block mb-2">CONTACT_PERSON</label>
+                            <input type="text" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
+                        </div>
+                        <div>
+                            <label class="terminal-text block mb-2">PHONE_NUMBER</label>
+                            <input type="tel" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
+                        </div>
+                        <div>
+                            <label class="terminal-text block mb-2">EMAIL_ADDRESS</label>
+                            <input type="email" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label class="terminal-text block mb-2">BOOTH_TYPE</label>
+                        <select class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors">
+                            <option>STANDARD_9M2</option>
+                            <option>PREMIUM_18M2</option>
+                            <option>CUSTOM_36M2</option>
+                            <option>OUTDOOR_SPACE</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label class="terminal-text block mb-2">MESSAGE</label>
+                        <textarea rows="4" class="w-full bg-black/50 border border-green-400/30 rounded px-4 py-3 focus:border-green-400 focus:outline-none transition-colors"></textarea>
+                    </div>
+                    
+                    <button type="submit" class="w-full py-4 pixel-btn text-black font-bold text-lg">
+                        SUBMIT_REQUEST
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 赛博页脚 -->
+    <footer class="border-t border-green-400/30 py-12 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4 neon-text">NEVIT_2024</h3>
+                    <p class="text-gray-400 text-sm">FUTURE_MOBILITY_ECOSYSTEM</p>
+                </div>
+                <div>
+                    <h4 class="terminal-text mb-4">QUICK_LINKS</h4>
+                    <ul class="space-y-2 text-gray-400 text-sm">
+                        <li><a href="#" class="hover:text-green-400 transition-colors">ABOUT</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition-colors">EXHIBITORS</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition-colors">VISITORS</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="terminal-text mb-4">SERVICES</h4>
+                    <ul class="space-y-2 text-gray-400 text-sm">
+                        <li><a href="#" class="hover:text-green-400 transition-colors">TRANSPORT</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition-colors">HOTEL</a></li>
+                        <li><a href="#" class="hover:text-green-400 transition-colors">SUPPORT</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="terminal-text mb-4">CONTACT</h4>
+                    <ul class="space-y-2 text-gray-400 text-sm">
+                        <li>TEL: 400-888-8888</li>
+                        <li>MAIL: info@nevit2024.com</li>
+                        <li>LOC: SUZHOU_EXPO</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="text-center pt-8 border-t border-green-400/30">
+                <p class="terminal-text">COPYRIGHT_2024_NEVIT | VERSION_3.0 | DESIGN_ITERATION</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // 故障效果随机化
+        function random(max) {
+            return Math.floor(Math.random() * max);
+        }
+        
+        // 打字机效果
+        function typeWriter(element, text, speed = 50) {
+            let i = 0;
+            function type() {
+                if (i < text.length) {
+                    element.innerHTML += text.charAt(i);
+                    i++;
+                    setTimeout(type, speed);
+                }
+            }
+            type();
+        }
+        
+        // 页面加载动画
+        window.addEventListener('load', () => {
+            const terminals = document.querySelectorAll('.terminal-text');
+            terminals.forEach(el => {
+                const text = el.innerText;
+                el.innerText = '';
+                typeWriter(el, text, 30);
+            });
+        });
+        
+        // 鼠标跟踪光效
+        document.addEventListener('mousemove', (e) => {
+            const x = e.clientX;
+            const y = e.clientY;
+            
+            const glow = document.createElement('div');
+            glow.style.position = 'fixed';
+            glow.style.left = x + 'px';
+            glow.style.top = y + 'px';
+            glow.style.width = '20px';
+            glow.style.height = '20px';
+            glow.style.background = 'radial-gradient(circle, rgba(0,255,136,0.5), transparent)';
+            glow.style.pointerEvents = 'none';
+            glow.style.transform = 'translate(-50%, -50%)';
+            glow.style.animation = 'fade-out 1s ease-out forwards';
+            
+            document.body.appendChild(glow);
+            
+            setTimeout(() => {
+                glow.remove();
+            }, 1000);
+        });
+        
+        // 添加淡出动画
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fade-out {
+                0% { opacity: 1; }
+                100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.superdesign/design_iterations/exhibition_site_4.html b/.superdesign/design_iterations/exhibition_site_4.html
new file mode 100644
index 00000000..757836c3
--- /dev/null
+++ b/.superdesign/design_iterations/exhibition_site_4.html
@@ -0,0 +1,635 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2024长三角国际新能源汽车与智能交通产业博览会 - 设计迭代4</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --background: oklch(0.98 0 0);
+            --foreground: oklch(0.15 0 0);
+            --primary: oklch(0.65 0.2 160);
+            --secondary: oklch(0.70 0.15 220);
+            --accent: oklch(0.75 0.18 40);
+            --muted: oklch(0.95 0.01 0);
+            --border: oklch(0.90 0 0);
+            --radius: 1rem;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'DM Sans', 'Noto Sans SC', system-ui, sans-serif;
+            background: var(--background);
+            color: var(--foreground);
+            line-height: 1.6;
+        }
+        
+        .mono {
+            font-family: 'Space Mono', monospace;
+        }
+        
+        /* 极简主义网格 */
+        .minimal-grid {
+            background-image: 
+                linear-gradient(var(--border) 1px, transparent 1px),
+                linear-gradient(90deg, var(--border) 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        
+        /* 新拟态设计 */
+        .neu-flat {
+            background: var(--background);
+            box-shadow: 
+                5px 5px 10px oklch(0.85 0 0),
+                -5px -5px 10px oklch(1 0 0);
+        }
+        
+        .neu-pressed {
+            background: var(--background);
+            box-shadow: 
+                inset 5px 5px 10px oklch(0.85 0 0),
+                inset -5px -5px 10px oklch(1 0 0);
+        }
+        
+        /* 极简渐变 */
+        .minimal-gradient {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        /* 微交互动画 */
+        .micro-interaction {
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .micro-interaction:hover {
+            transform: translateY(-2px);
+        }
+        
+        .micro-interaction:active {
+            transform: translateY(0);
+        }
+        
+        /* 液态按钮 */
+        .liquid-button {
+            position: relative;
+            overflow: hidden;
+            border-radius: var(--radius);
+            background: var(--foreground);
+            color: var(--background);
+            transition: all 0.3s ease;
+        }
+        
+        .liquid-button::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: var(--primary);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        
+        .liquid-button:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+        
+        .liquid-button span {
+            position: relative;
+            z-index: 1;
+        }
+        
+        /* 分割布局 */
+        .split-layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            min-height: 100vh;
+        }
+        
+        @media (max-width: 768px) {
+            .split-layout {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        /* 悬浮卡片 */
+        .float-card {
+            background: var(--background);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            padding: 2rem;
+            transition: all 0.3s ease;
+        }
+        
+        .float-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            border-color: var(--primary);
+        }
+        
+        /* 文字描边效果 */
+        .text-outline {
+            -webkit-text-stroke: 2px var(--foreground);
+            -webkit-text-fill-color: transparent;
+        }
+        
+        /* 极简进度条 */
+        .minimal-progress {
+            height: 2px;
+            background: var(--border);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .minimal-progress::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 30%;
+            background: var(--primary);
+            animation: progress 2s ease-in-out infinite;
+        }
+        
+        @keyframes progress {
+            0% { left: -30%; }
+            100% { left: 100%; }
+        }
+        
+        /* 分割文字 */
+        .split-text {
+            display: inline-block;
+            position: relative;
+        }
+        
+        .split-text::after {
+            content: attr(data-text);
+            position: absolute;
+            left: 2px;
+            top: 2px;
+            color: var(--primary);
+            z-index: -1;
+        }
+        
+        /* 磁性悬停 */
+        .magnetic {
+            display: inline-block;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        /* 点阵动画 */
+        @keyframes dot-pulse {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 1; }
+        }
+        
+        .dot-grid {
+            display: grid;
+            grid-template-columns: repeat(5, 8px);
+            gap: 8px;
+        }
+        
+        .dot {
+            width: 8px;
+            height: 8px;
+            background: var(--primary);
+            border-radius: 50%;
+            animation: dot-pulse 1.5s ease-in-out infinite;
+        }
+        
+        .dot:nth-child(2) { animation-delay: 0.1s; }
+        .dot:nth-child(3) { animation-delay: 0.2s; }
+        .dot:nth-child(4) { animation-delay: 0.3s; }
+        .dot:nth-child(5) { animation-delay: 0.4s; }
+        
+        /* 渐变边框 */
+        .gradient-border {
+            position: relative;
+            background: var(--background);
+            border-radius: var(--radius);
+        }
+        
+        .gradient-border::before {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            border-radius: var(--radius);
+            padding: 2px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: exclude;
+            mask-composite: exclude;
+        }
+    </style>
+</head>
+<body>
+    <!-- 极简导航 -->
+    <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-sm border-b border-gray-200">
+        <div class="max-w-7xl mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-4">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-blue-500"></div>
+                    <span class="text-xl font-bold">NEVIT</span>
+                </div>
+                
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#" class="magnetic micro-interaction">首页</a>
+                    <a href="#" class="magnetic micro-interaction">展会</a>
+                    <a href="#" class="magnetic micro-interaction">日程</a>
+                    <a href="#" class="magnetic micro-interaction">服务</a>
+                    <a href="#" class="magnetic micro-interaction">关于</a>
+                </div>
+                
+                <button class="liquid-button px-6 py-2">
+                    <span>立即参展</span>
+                </button>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- 分割英雄区 -->
+    <section class="split-layout pt-20">
+        <!-- 左侧内容 -->
+        <div class="flex items-center justify-center p-12 minimal-grid">
+            <div>
+                <div class="mono text-sm text-gray-500 mb-4">2024.06.15-17</div>
+                <h1 class="text-6xl md:text-7xl font-bold mb-6">
+                    <span class="block text-outline">长三角</span>
+                    <span class="block minimal-gradient">新能源</span>
+                    <span class="block">汽车博览会</span>
+                </h1>
+                <p class="text-xl text-gray-600 mb-8 max-w-md">
+                    探索未来出行方式，引领产业创新发展，共创绿色智能生态。
+                </p>
+                <div class="flex items-center space-x-4">
+                    <button class="px-8 py-3 neu-flat rounded-full micro-interaction">
+                        了解详情
+                    </button>
+                    <div class="dot-grid">
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 右侧图形 -->
+        <div class="bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center">
+            <div class="relative">
+                <!-- 抽象图形组合 -->
+                <div class="w-64 h-64 rounded-full border-4 border-gray-200 absolute -top-8 -left-8"></div>
+                <div class="w-48 h-48 rounded-full bg-gradient-to-br from-green-400 to-blue-500 opacity-20"></div>
+                <div class="w-32 h-32 rounded-full border-2 border-gray-300 absolute bottom-0 right-0"></div>
+                
+                <!-- 数据展示 -->
+                <div class="absolute -bottom-8 -right-8 bg-white p-4 rounded-lg shadow-lg">
+                    <div class="text-3xl font-bold minimal-gradient">500+</div>
+                    <div class="text-sm text-gray-500">展商</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 极简数据展示 -->
+    <section class="py-20 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div class="text-center">
+                    <div class="text-4xl font-bold mb-2">500+</div>
+                    <div class="text-sm text-gray-500 mono">EXHIBITORS</div>
+                    <div class="minimal-progress mt-4"></div>
+                </div>
+                <div class="text-center">
+                    <div class="text-4xl font-bold mb-2">50K</div>
+                    <div class="text-sm text-gray-500 mono">VISITORS</div>
+                    <div class="minimal-progress mt-4"></div>
+                </div>
+                <div class="text-center">
+                    <div class="text-4xl font-bold mb-2">100+</div>
+                    <div class="text-sm text-gray-500 mono">EVENTS</div>
+                    <div class="minimal-progress mt-4"></div>
+                </div>
+                <div class="text-center">
+                    <div class="text-4xl font-bold mb-2">50K㎡</div>
+                    <div class="text-sm text-gray-500 mono">AREA</div>
+                    <div class="minimal-progress mt-4"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 极简展区卡片 -->
+    <section class="py-20 px-6 bg-gray-50">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">
+                    <span class="split-text" data-text="核心展区">核心展区</span>
+                </h2>
+                <p class="text-gray-500">六大主题，全产业链覆盖</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="float-card group">
+                    <div class="flex items-start justify-between mb-4">
+                        <div>
+                            <div class="w-2 h-8 bg-green-400 mb-4"></div>
+                            <h3 class="text-xl font-semibold">动力电池</h3>
+                        </div>
+                        <span class="mono text-sm text-gray-400">01</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">固态电池、快充技术、电池管理系统</p>
+                    <div class="flex items-center text-green-500">
+                        <span class="text-sm">展厅 A1</span>
+                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                    </div>
+                </div>
+                
+                <div class="float-card group">
+                    <div class="flex items-start justify-between mb-4">
+                        <div>
+                            <div class="w-2 h-8 bg-blue-400 mb-4"></div>
+                            <h3 class="text-xl font-semibold">智能驾驶</h3>
+                        </div>
+                        <span class="mono text-sm text-gray-400">02</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">L3-L5自动驾驶、激光雷达、V2X</p>
+                    <div class="flex items-center text-blue-500">
+                        <span class="text-sm">展厅 B2</span>
+                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                    </div>
+                </div>
+                
+                <div class="float-card group">
+                    <div class="flex items-start justify-between mb-4">
+                        <div>
+                            <div class="w-2 h-8 bg-purple-400 mb-4"></div>
+                            <h3 class="text-xl font-semibold">充电设施</h3>
+                        </div>
+                        <span class="mono text-sm text-gray-400">03</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">超级快充、无线充电、换电站</p>
+                    <div class="flex items-center text-purple-500">
+                        <span class="text-sm">展厅 C3</span>
+                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                    </div>
+                </div>
+                
+                <div class="float-card group">
+                    <div class="flex items-start justify-between mb-4">
+                        <div>
+                            <div class="w-2 h-8 bg-pink-400 mb-4"></div>
+                            <h3 class="text-xl font-semibold">整车制造</h3>
+                        </div>
+                        <span class="mono text-sm text-gray-400">04</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">纯电动、混合动力、氢能源</p>
+                    <div class="flex items-center text-pink-500">
+                        <span class="text-sm">展厅 D4</span>
+                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                    </div>
+                </div>
+                
+                <div class="float-card group">
+                    <div class="flex items-start justify-between mb-4">
+                        <div>
+                            <div class="w-2 h-8 bg-yellow-400 mb-4"></div>
+                            <h3 class="text-xl font-semibold">车联网</h3>
+                        </div>
+                        <span class="mono text-sm text-gray-400">05</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">5G-V2X、OTA升级、智能座舱</p>
+                    <div class="flex items-center text-yellow-500">
+                        <span class="text-sm">展厅 E5</span>
+                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                    </div>
+                </div>
+                
+                <div class="float-card group">
+                    <div class="flex items-start justify-between mb-4">
+                        <div>
+                            <div class="w-2 h-8 bg-red-400 mb-4"></div>
+                            <h3 class="text-xl font-semibold">智能制造</h3>
+                        </div>
+                        <span class="mono text-sm text-gray-400">06</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">工业4.0、数字孪生、柔性制造</p>
+                    <div class="flex items-center text-red-500">
+                        <span class="text-sm">展厅 F6</span>
+                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 极简时间线 -->
+    <section class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">活动日程</h2>
+                <p class="text-gray-500">三天精彩，不容错过</p>
+            </div>
+            
+            <div class="space-y-8">
+                <div class="flex items-start space-x-6">
+                    <div class="flex-shrink-0">
+                        <div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
+                            <span class="mono text-sm">15</span>
+                        </div>
+                    </div>
+                    <div class="flex-grow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-xl font-semibold">开幕式暨主论坛</h3>
+                            <span class="mono text-sm text-gray-400">09:00</span>
+                        </div>
+                        <p class="text-gray-600">政府领导致辞、产业报告发布、战略合作签约</p>
+                    </div>
+                </div>
+                
+                <div class="flex items-start space-x-6">
+                    <div class="flex-shrink-0">
+                        <div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
+                            <span class="mono text-sm">15</span>
+                        </div>
+                    </div>
+                    <div class="flex-grow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-xl font-semibold">新品发布会</h3>
+                            <span class="mono text-sm text-gray-400">14:00</span>
+                        </div>
+                        <p class="text-gray-600">20+品牌新车型全球首发、技术创新展示</p>
+                    </div>
+                </div>
+                
+                <div class="flex items-start space-x-6">
+                    <div class="flex-shrink-0">
+                        <div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
+                            <span class="mono text-sm">16</span>
+                        </div>
+                    </div>
+                    <div class="flex-grow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-xl font-semibold">技术创新峰会</h3>
+                            <span class="mono text-sm text-gray-400">09:00</span>
+                        </div>
+                        <p class="text-gray-600">8大专题论坛、院士专家演讲、圆桌讨论</p>
+                    </div>
+                </div>
+                
+                <div class="flex items-start space-x-6">
+                    <div class="flex-shrink-0">
+                        <div class="w-12 h-12 rounded-full neu-flat flex items-center justify-center">
+                            <span class="mono text-sm">17</span>
+                        </div>
+                    </div>
+                    <div class="flex-grow">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-xl font-semibold">商务对接会</h3>
+                            <span class="mono text-sm text-gray-400">09:00</span>
+                        </div>
+                        <p class="text-gray-600">供需对接、项目洽谈、签约仪式</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 极简CTA -->
+    <section class="py-20 px-6 bg-gray-50">
+        <div class="max-w-4xl mx-auto text-center">
+            <div class="gradient-border p-12">
+                <h2 class="text-4xl font-bold mb-6">加入我们</h2>
+                <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
+                    成为2024长三角新能源汽车产业博览会的一部分
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <button class="px-8 py-3 liquid-button rounded-full">
+                        <span>申请参展</span>
+                    </button>
+                    <button class="px-8 py-3 neu-flat rounded-full micro-interaction">
+                        观众预登记
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 极简页脚 -->
+    <footer class="py-12 px-6 border-t">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <h3 class="font-bold mb-4">NEVIT 2024</h3>
+                    <p class="text-sm text-gray-500">引领新能源汽车产业发展</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">快速链接</h4>
+                    <ul class="space-y-2 text-sm text-gray-500">
+                        <li><a href="#" class="hover:text-gray-900 transition-colors">展会介绍</a></li>
+                        <li><a href="#" class="hover:text-gray-900 transition-colors">参展指南</a></li>
+                        <li><a href="#" class="hover:text-gray-900 transition-colors">观众服务</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">服务支持</h4>
+                    <ul class="space-y-2 text-sm text-gray-500">
+                        <li><a href="#" class="hover:text-gray-900 transition-colors">交通指南</a></li>
+                        <li><a href="#" class="hover:text-gray-900 transition-colors">酒店预订</a></li>
+                        <li><a href="#" class="hover:text-gray-900 transition-colors">展商服务</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">联系我们</h4>
+                    <ul class="space-y-2 text-sm text-gray-500">
+                        <li>400-888-8888</li>
+                        <li>info@nevit2024.com</li>
+                        <li>苏州国际博览中心</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="text-center pt-8 border-t">
+                <p class="text-sm text-gray-400 mono">© 2024 NEVIT | VERSION 4.0 | MINIMAL DESIGN</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // 磁性悬停效果
+        document.querySelectorAll('.magnetic').forEach(element => {
+            element.addEventListener('mousemove', (e) => {
+                const rect = element.getBoundingClientRect();
+                const x = e.clientX - rect.left - rect.width / 2;
+                const y = e.clientY - rect.top - rect.height / 2;
+                
+                element.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
+            });
+            
+            element.addEventListener('mouseleave', () => {
+                element.style.transform = 'translate(0, 0)';
+            });
+        });
+        
+        // 平滑滚动
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' });
+                }
+            });
+        });
+        
+        // 滚动显示动画
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+        
+        document.querySelectorAll('.float-card').forEach(el => {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(20px)';
+            el.style.transition = 'all 0.6s ease-out';
+            observer.observe(el);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.superdesign/design_iterations/exhibition_site_5.html b/.superdesign/design_iterations/exhibition_site_5.html
new file mode 100644
index 00000000..3e5df8be
--- /dev/null
+++ b/.superdesign/design_iterations/exhibition_site_5.html
@@ -0,0 +1,814 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2024长三角国际新能源汽车与智能交通产业博览会 - 终极设计版</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        :root {
+            --primary: #10b981;
+            --secondary: #3b82f6;
+            --accent: #8b5cf6;
+            --dark: #0f172a;
+            --light: #f8fafc;
+            --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+        }
+        
+        body {
+            font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
+            background: var(--light);
+            color: var(--dark);
+            overflow-x: hidden;
+        }
+        
+        .mono {
+            font-family: 'JetBrains Mono', monospace;
+        }
+        
+        /* 高级渐变网格 */
+        .gradient-mesh {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.03;
+            z-index: -1;
+            background: 
+                radial-gradient(at 20% 80%, var(--primary) 0px, transparent 50%),
+                radial-gradient(at 80% 20%, var(--secondary) 0px, transparent 50%),
+                radial-gradient(at 40% 40%, var(--accent) 0px, transparent 50%),
+                radial-gradient(at 90% 70%, var(--primary) 0px, transparent 50%);
+        }
+        
+        /* 高级玻璃态 */
+        .glass-morphism {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+        }
+        
+        .dark-glass {
+            background: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+        }
+        
+        /* 3D卡片翻转 */
+        .card-3d {
+            transform-style: preserve-3d;
+            transition: transform 0.6s;
+            position: relative;
+        }
+        
+        .card-3d:hover {
+            transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
+        }
+        
+        .card-front,
+        .card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+        }
+        
+        .card-back {
+            transform: rotateY(180deg);
+        }
+        
+        /* 流光动画 */
+        @keyframes flow {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        .flowing-gradient {
+            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), var(--primary));
+            background-size: 300% 100%;
+            animation: flow 6s ease-in-out infinite;
+        }
+        
+        /* 高级悬停效果 */
+        .hover-lift {
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .hover-lift:hover {
+            transform: translateY(-12px) scale(1.02);
+            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
+        }
+        
+        /* 粒子背景 */
+        .particle {
+            position: fixed;
+            pointer-events: none;
+            opacity: 0.3;
+            animation: float-particle 20s infinite linear;
+        }
+        
+        @keyframes float-particle {
+            from {
+                transform: translateY(100vh) rotate(0deg);
+            }
+            to {
+                transform: translateY(-100vh) rotate(360deg);
+            }
+        }
+        
+        /* 文字渐变动画 */
+        .animated-text-gradient {
+            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
+            background-size: 200% auto;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            animation: shine 3s linear infinite;
+        }
+        
+        @keyframes shine {
+            to { background-position: 200% center; }
+        }
+        
+        /* 高级按钮 */
+        .premium-button {
+            position: relative;
+            padding: 1rem 2rem;
+            border-radius: 9999px;
+            font-weight: 600;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        
+        .premium-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transition: left 0.5s ease;
+        }
+        
+        .premium-button:hover::before {
+            left: 100%;
+        }
+        
+        /* 滚动指示器 */
+        .scroll-indicator {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: var(--primary);
+            transform-origin: left;
+            z-index: 100;
+            transition: transform 0.1s ease;
+        }
+        
+        /* 数字滚动效果 */
+        @keyframes count-up {
+            from {
+                opacity: 0;
+                transform: translateY(50px) rotateX(90deg);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) rotateX(0);
+            }
+        }
+        
+        .count-animation {
+            animation: count-up 1s ease-out forwards;
+        }
+        
+        /* 交错动画 */
+        .stagger-animation {
+            opacity: 0;
+            transform: translateY(30px);
+            animation: stagger-in 0.6s ease forwards;
+        }
+        
+        @keyframes stagger-in {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .stagger-animation:nth-child(1) { animation-delay: 0.1s; }
+        .stagger-animation:nth-child(2) { animation-delay: 0.2s; }
+        .stagger-animation:nth-child(3) { animation-delay: 0.3s; }
+        .stagger-animation:nth-child(4) { animation-delay: 0.4s; }
+        .stagger-animation:nth-child(5) { animation-delay: 0.5s; }
+        .stagger-animation:nth-child(6) { animation-delay: 0.6s; }
+        
+        /* 波浪动画 */
+        .wave {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100px;
+            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2310b981' fill-opacity='0.3' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,128C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+            background-size: cover;
+            animation: wave 10s linear infinite;
+        }
+        
+        @keyframes wave {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        
+        /* 高级工具提示 */
+        .tooltip {
+            position: relative;
+        }
+        
+        .tooltip::after {
+            content: attr(data-tooltip);
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%) translateY(-5px);
+            background: var(--dark);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            white-space: nowrap;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+        }
+        
+        .tooltip:hover::after {
+            opacity: 1;
+            transform: translateX(-50%) translateY(-10px);
+        }
+    </style>
+</head>
+<body>
+    <!-- 渐变网格背景 -->
+    <div class="gradient-mesh"></div>
+    
+    <!-- 粒子动画 -->
+    <div class="particle" style="left: 10%; animation-delay: 0s; width: 4px; height: 4px; background: var(--primary);"></div>
+    <div class="particle" style="left: 30%; animation-delay: 3s; width: 6px; height: 6px; background: var(--secondary);"></div>
+    <div class="particle" style="left: 50%; animation-delay: 6s; width: 3px; height: 3px; background: var(--accent);"></div>
+    <div class="particle" style="left: 70%; animation-delay: 9s; width: 5px; height: 5px; background: var(--primary);"></div>
+    <div class="particle" style="left: 90%; animation-delay: 12s; width: 4px; height: 4px; background: var(--secondary);"></div>
+    
+    <!-- 滚动进度条 -->
+    <div class="scroll-indicator" id="scrollIndicator"></div>
+    
+    <!-- 高级导航栏 -->
+    <nav class="fixed top-0 left-0 right-0 z-50 glass-morphism transition-all duration-300" id="navbar">
+        <div class="max-w-7xl mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-4">
+                    <div class="w-12 h-12 rounded-xl flowing-gradient flex items-center justify-center text-white font-bold shadow-lg">
+                        <span>NE</span>
+                    </div>
+                    <div>
+                        <h1 class="text-xl font-bold">NEVIT 2024</h1>
+                        <p class="text-xs text-gray-500 mono">NEW ENERGY VEHICLE IT</p>
+                    </div>
+                </div>
+                
+                <div class="hidden lg:flex items-center space-x-8">
+                    <a href="#home" class="nav-link relative py-2 transition-colors hover:text-primary">
+                        <span>首页</span>
+                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
+                    </a>
+                    <a href="#about" class="nav-link relative py-2 transition-colors hover:text-primary">
+                        <span>关于展会</span>
+                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
+                    </a>
+                    <a href="#exhibits" class="nav-link relative py-2 transition-colors hover:text-primary">
+                        <span>展区分布</span>
+                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
+                    </a>
+                    <a href="#schedule" class="nav-link relative py-2 transition-colors hover:text-primary">
+                        <span>活动日程</span>
+                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
+                    </a>
+                    <a href="#register" class="nav-link relative py-2 transition-colors hover:text-primary">
+                        <span>参展登记</span>
+                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300"></span>
+                    </a>
+                </div>
+                
+                <div class="flex items-center space-x-4">
+                    <button class="premium-button bg-gradient-to-r from-emerald-500 to-blue-500 text-white">
+                        立即参展
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- 英雄区域 -->
+    <section id="home" class="min-h-screen flex items-center justify-center relative pt-20 overflow-hidden">
+        <div class="absolute inset-0 wave opacity-20"></div>
+        
+        <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
+            <div class="mb-8">
+                <div class="inline-block px-4 py-2 glass-morphism rounded-full mb-6">
+                    <span class="text-sm font-semibold text-gray-600 mono">2024.06.15-17 | SUZHOU EXPO CENTER</span>
+                </div>
+                
+                <h1 class="text-6xl md:text-8xl font-black mb-6">
+                    <span class="block animated-text-gradient">2024 长三角</span>
+                    <span class="block text-gray-800 mt-2">新能源汽车博览会</span>
+                </h1>
+                
+                <p class="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto">
+                    探索未来出行新模式 · 引领产业创新发展 · 共创绿色智能生态
+                </p>
+                
+                <div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
+                    <button class="premium-button bg-gradient-to-r from-emerald-500 to-blue-500 text-white text-lg shadow-xl hover:shadow-2xl">
+                        申请参展
+                    </button>
+                    <button class="premium-button glass-morphism text-gray-800 text-lg">
+                        下载展会手册
+                    </button>
+                </div>
+            </div>
+            
+            <!-- 数据展示 -->
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
+                    <div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">500+</div>
+                    <div class="text-sm text-gray-600">参展企业</div>
+                </div>
+                <div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
+                    <div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">50,000</div>
+                    <div class="text-sm text-gray-600">专业观众</div>
+                </div>
+                <div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
+                    <div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">100+</div>
+                    <div class="text-sm text-gray-600">同期活动</div>
+                </div>
+                <div class="glass-morphism rounded-2xl p-6 hover-lift stagger-animation">
+                    <div class="text-4xl font-bold mb-2 count-animation animated-text-gradient">50,000㎡</div>
+                    <div class="text-sm text-gray-600">展览面积</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 展区介绍 -->
+    <section id="exhibits" class="py-20 px-6 bg-gradient-to-b from-white to-gray-50">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-5xl font-black mb-4">
+                    <span class="animated-text-gradient">核心展区</span>
+                </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="group relative card-3d">
+                    <div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
+                            🔋
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">动力电池技术</h3>
+                        <p class="text-gray-600 mb-4">固态电池、快充技术、电池管理系统、电池回收等前沿技术展示</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm font-semibold text-emerald-500">展厅 A1-A3</span>
+                            <span class="text-sm text-gray-400">150+ 展商</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative card-3d">
+                    <div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
+                            🤖
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">智能驾驶系统</h3>
+                        <p class="text-gray-600 mb-4">L3-L5级自动驾驶、激光雷达、高精地图、车路协同技术展示</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm font-semibold text-blue-500">展厅 B1-B2</span>
+                            <span class="text-sm text-gray-400">80+ 展商</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative card-3d">
+                    <div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
+                            ⚡
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">充电基础设施</h3>
+                        <p class="text-gray-600 mb-4">超级快充、无线充电、换电站、充电网络运营管理平台</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm font-semibold text-purple-500">展厅 C1-C2</span>
+                            <span class="text-sm text-gray-400">60+ 展商</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative card-3d">
+                    <div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-400 to-pink-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
+                            🚗
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">新能源整车</h3>
+                        <p class="text-gray-600 mb-4">纯电动、混合动力、氢燃料电池等新能源汽车展示试驾</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm font-semibold text-pink-500">展厅 D1-D4</span>
+                            <span class="text-sm text-gray-400">100+ 展商</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative card-3d">
+                    <div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
+                            🌐
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">车联网技术</h3>
+                        <p class="text-gray-600 mb-4">5G-V2X、OTA升级、智能座舱、车载娱乐系统展示体验</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm font-semibold text-yellow-500">展厅 E1-E2</span>
+                            <span class="text-sm text-gray-400">70+ 展商</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative card-3d">
+                    <div class="glass-morphism rounded-3xl p-8 hover-lift h-full">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center text-white text-2xl mb-6 shadow-lg">
+                            🏭
+                        </div>
+                        <h3 class="text-2xl font-bold mb-3">智能制造</h3>
+                        <p class="text-gray-600 mb-4">工业4.0、数字孪生、柔性生产线、智能工厂解决方案</p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm font-semibold text-red-500">展厅 F1-F2</span>
+                            <span class="text-sm text-gray-400">40+ 展商</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 活动日程 -->
+    <section id="schedule" class="py-20 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-5xl font-black mb-4">
+                    <span class="animated-text-gradient">精彩日程</span>
+                </h2>
+                <p class="text-xl text-gray-600">三天展会，百场活动，不容错过</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- 第一天 -->
+                <div class="glass-morphism rounded-3xl p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
+                            15
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="text-2xl font-bold">Day 1</h3>
+                            <p class="text-gray-500">开幕日</p>
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div class="border-l-4 border-emerald-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">09:00-12:00</div>
+                            <div class="font-semibold">开幕式暨主论坛</div>
+                            <div class="text-sm text-gray-600">主会场</div>
+                        </div>
+                        <div class="border-l-4 border-emerald-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">14:00-17:00</div>
+                            <div class="font-semibold">新品发布会</div>
+                            <div class="text-sm text-gray-600">发布厅</div>
+                        </div>
+                        <div class="border-l-4 border-emerald-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">18:00-20:00</div>
+                            <div class="font-semibold">欢迎晚宴</div>
+                            <div class="text-sm text-gray-600">宴会厅</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 第二天 -->
+                <div class="glass-morphism rounded-3xl p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
+                            16
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="text-2xl font-bold">Day 2</h3>
+                            <p class="text-gray-500">技术日</p>
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div class="border-l-4 border-blue-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">09:00-12:00</div>
+                            <div class="font-semibold">技术创新峰会</div>
+                            <div class="text-sm text-gray-600">分论坛A-D</div>
+                        </div>
+                        <div class="border-l-4 border-blue-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">14:00-16:00</div>
+                            <div class="font-semibold">专题研讨会</div>
+                            <div class="text-sm text-gray-600">会议室1-8</div>
+                        </div>
+                        <div class="border-l-4 border-blue-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">16:30-18:00</div>
+                            <div class="font-semibold">圆桌讨论</div>
+                            <div class="text-sm text-gray-600">主会场</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 第三天 -->
+                <div class="glass-morphism rounded-3xl p-8">
+                    <div class="flex items-center mb-6">
+                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
+                            17
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="text-2xl font-bold">Day 3</h3>
+                            <p class="text-gray-500">商务日</p>
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div class="border-l-4 border-purple-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">09:00-12:00</div>
+                            <div class="font-semibold">商务对接会</div>
+                            <div class="text-sm text-gray-600">VIP洽谈区</div>
+                        </div>
+                        <div class="border-l-4 border-purple-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">14:00-15:30</div>
+                            <div class="font-semibold">项目签约仪式</div>
+                            <div class="text-sm text-gray-600">主会场</div>
+                        </div>
+                        <div class="border-l-4 border-purple-500 pl-4">
+                            <div class="text-sm text-gray-500 mono">16:00-17:00</div>
+                            <div class="font-semibold">闭幕式</div>
+                            <div class="text-sm text-gray-600">主会场</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 参展登记 -->
+    <section id="register" class="py-20 px-6 bg-gradient-to-b from-gray-50 to-white">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-5xl font-black mb-4">
+                    <span class="animated-text-gradient">立即参展</span>
+                </h2>
+                <p class="text-xl text-gray-600">加入我们，共创新能源汽车产业未来</p>
+            </div>
+            
+            <div class="glass-morphism rounded-3xl p-8 md:p-12">
+                <form class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block text-sm font-semibold text-gray-700 mb-2">企业名称 *</label>
+                            <input type="text" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-semibold text-gray-700 mb-2">联系人 *</label>
+                            <input type="text" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-semibold text-gray-700 mb-2">联系电话 *</label>
+                            <input type="tel" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-semibold text-gray-700 mb-2">电子邮箱 *</label>
+                            <input type="email" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">展位类型 *</label>
+                        <select class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all">
+                            <option>标准展位 (9㎡) - ¥8,800</option>
+                            <option>豪华展位 (18㎡) - ¥16,800</option>
+                            <option>特装展位 (36㎡) - ¥32,800</option>
+                            <option>室外展位 (定制) - 面议</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">参展类别</label>
+                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+                            <label class="flex items-center space-x-2 cursor-pointer">
+                                <input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
+                                <span class="text-sm">整车制造</span>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer">
+                                <input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
+                                <span class="text-sm">动力电池</span>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer">
+                                <input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
+                                <span class="text-sm">智能驾驶</span>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer">
+                                <input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
+                                <span class="text-sm">充电设施</span>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer">
+                                <input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
+                                <span class="text-sm">车联网</span>
+                            </label>
+                            <label class="flex items-center space-x-2 cursor-pointer">
+                                <input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
+                                <span class="text-sm">其他</span>
+                            </label>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">备注说明</label>
+                        <textarea rows="4" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all"></textarea>
+                    </div>
+                    
+                    <div class="flex items-center space-x-2">
+                        <input type="checkbox" class="rounded text-emerald-500 focus:ring-emerald-200">
+                        <label class="text-sm text-gray-600">
+                            我已阅读并同意 <a href="#" class="text-emerald-500 hover:underline">展会条款</a> 和 <a href="#" class="text-emerald-500 hover:underline">隐私政策</a>
+                        </label>
+                    </div>
+                    
+                    <button type="submit" class="w-full py-4 premium-button bg-gradient-to-r from-emerald-500 to-blue-500 text-white text-lg font-semibold shadow-xl">
+                        提交申请
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 页脚 -->
+    <footer class="bg-gradient-to-b from-gray-900 to-black text-white py-16 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+                <div>
+                    <div class="flex items-center space-x-3 mb-4">
+                        <div class="w-10 h-10 rounded-xl flowing-gradient"></div>
+                        <h3 class="text-xl font-bold">NEVIT 2024</h3>
+                    </div>
+                    <p class="text-gray-400 text-sm">长三角国际新能源汽车与智能交通产业博览会</p>
+                    <div class="flex space-x-4 mt-6">
+                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-emerald-500 transition-colors">
+                            <span class="text-sm">微</span>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-emerald-500 transition-colors">
+                            <span class="text-sm">博</span>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-emerald-500 transition-colors">
+                            <span class="text-sm">in</span>
+                        </a>
+                    </div>
+                </div>
+                
+                <div>
+                    <h4 class="font-semibold mb-4">快速链接</h4>
+                    <ul class="space-y-2 text-gray-400 text-sm">
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">展会介绍</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">参展指南</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">观众服务</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">新闻中心</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">下载中心</a></li>
+                    </ul>
+                </div>
+                
+                <div>
+                    <h4 class="font-semibold mb-4">服务支持</h4>
+                    <ul class="space-y-2 text-gray-400 text-sm">
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">交通指南</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">酒店预订</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">展台搭建</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">物流服务</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors">常见问题</a></li>
+                    </ul>
+                </div>
+                
+                <div>
+                    <h4 class="font-semibold mb-4">联系我们</h4>
+                    <ul class="space-y-3 text-gray-400 text-sm">
+                        <li class="flex items-center space-x-2">
+                            <span>📞</span>
+                            <span>400-888-8888</span>
+                        </li>
+                        <li class="flex items-center space-x-2">
+                            <span>✉️</span>
+                            <span>info@nevit2024.com</span>
+                        </li>
+                        <li class="flex items-start space-x-2">
+                            <span>📍</span>
+                            <span>江苏省苏州市工业园区苏州大道东688号</span>
+                        </li>
+                        <li class="flex items-center space-x-2">
+                            <span>🕐</span>
+                            <span>周一至周五 9:00-18:00</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div class="border-t border-gray-800 pt-8 text-center">
+                <p class="text-gray-400 text-sm">
+                    &copy; 2024 NEVIT. All rights reserved. | 苏ICP备2024XXXXX号 | 终极设计版本 5.0
+                </p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // 滚动进度条
+        window.addEventListener('scroll', () => {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrollPercentage = (scrollTop / scrollHeight) * 100;
+            document.getElementById('scrollIndicator').style.transform = `scaleX(${scrollPercentage / 100})`;
+        });
+        
+        // 导航栏滚动效果
+        window.addEventListener('scroll', () => {
+            const navbar = document.getElementById('navbar');
+            if (window.scrollY > 100) {
+                navbar.classList.add('shadow-lg');
+            } else {
+                navbar.classList.remove('shadow-lg');
+            }
+        });
+        
+        // 导航链接激活状态
+        document.querySelectorAll('.nav-link').forEach(link => {
+            link.addEventListener('mouseenter', function() {
+                this.querySelector('span:last-child').style.width = '100%';
+            });
+            link.addEventListener('mouseleave', function() {
+                if (!this.classList.contains('active')) {
+                    this.querySelector('span:last-child').style.width = '0';
+                }
+            });
+        });
+        
+        // 平滑滚动
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+        
+        // 数字动画
+        const observerOptions = {
+            threshold: 0.5,
+            rootMargin: '0px 0px -100px 0px'
+        };
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('count-animation');
+                }
+            });
+        }, observerOptions);
+        
+        document.querySelectorAll('.count-animation').forEach(el => {
+            observer.observe(el);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web_frontend/doc/网页结果生成.md b/web_frontend/doc/网页结果生成.md
index cba088c6..05f1f2d7 100644
--- a/web_frontend/doc/网页结果生成.md
+++ b/web_frontend/doc/网页结果生成.md
@@ -5,7 +5,7 @@
 
 ## 技术决策
 - **框架**: React 18 + TypeScript
-- **动画**: Framer Motion + CSS Animations  
+- **动画**: GSAP / https://animejs.com/
 - **样式**: Tailwind CSS (参考字节跳动、Flowith、Raycast设计风格)
 - **状态管理**: Zustand
 - **构建工具**: Vite
diff --git a/web_frontend/exhibition-demo/src/components/ResultModal.tsx b/web_frontend/exhibition-demo/src/components/ResultModal.tsx
index dd8a7981..dad21a3c 100644
--- a/web_frontend/exhibition-demo/src/components/ResultModal.tsx
+++ b/web_frontend/exhibition-demo/src/components/ResultModal.tsx
@@ -141,13 +141,15 @@ const ResultModal: React.FC<ResultModalProps> = ({ isOpen, onClose, onViewDetail
 
                 {/* 操作按钮 */}
                 <div className="flex gap-3">
-                  <button
-                    onClick={onViewDetails}
+                  <a
+                    href="../../web_result/index.html"
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium hover:shadow-lg transform hover:scale-105 transition-all flex items-center justify-center gap-2"
                   >
                     <Eye className="w-5 h-5" />
                     查看详细方案
-                  </button>
+                  </a>
                   <button
                     className="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center justify-center gap-2"
                   >
diff --git a/web_frontend/web_result/css/animations.css b/web_frontend/web_result/css/animations.css
new file mode 100644
index 00000000..02841e1d
--- /dev/null
+++ b/web_frontend/web_result/css/animations.css
@@ -0,0 +1,919 @@
+/* 2024长三角国际新能源汽车与智能交通产业博览会 - 高级动画样式 */
+
+/* ============================================
+   字体图标引入
+   ============================================ */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
+
+/* ============================================
+   自定义字体
+   ============================================ */
+@font-face {
+  font-family: 'TechFont';
+  src: url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
+}
+
+/* ============================================
+   核心动画变量
+   ============================================ */
+:root {
+  /* 动画时长 */
+  --anim-fast: 0.2s;
+  --anim-normal: 0.3s;
+  --anim-slow: 0.5s;
+  --anim-slower: 0.8s;
+  --anim-slowest: 1.2s;
+  
+  /* 缓动函数 */
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
+  
+  /* 渐变色 */
+  --gradient-electric: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-ocean: linear-gradient(135deg, #667eea 0%, #42e695 100%);
+  --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  --gradient-aurora: linear-gradient(135deg, #42e695 0%, #3bb2b8 100%);
+}
+
+/* ============================================
+   基础动画类
+   ============================================ */
+/* 淡入向上动画 */
+.animate-fadeInUp {
+  opacity: 0;
+  transform: translateY(30px);
+  animation: fadeInUp 0.8s ease-out forwards;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 淡入向左动画 */
+.animate-fadeInLeft {
+  opacity: 0;
+  transform: translateX(-30px);
+  animation: fadeInLeft 0.8s ease-out forwards;
+}
+
+@keyframes fadeInLeft {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 淡入向右动画 */
+.animate-fadeInRight {
+  opacity: 0;
+  transform: translateX(30px);
+  animation: fadeInRight 0.8s ease-out forwards;
+}
+
+@keyframes fadeInRight {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 动画延迟类 */
+.animation-delay-100 { animation-delay: 0.1s; }
+.animation-delay-200 { animation-delay: 0.2s; }
+.animation-delay-300 { animation-delay: 0.3s; }
+.animation-delay-400 { animation-delay: 0.4s; }
+.animation-delay-500 { animation-delay: 0.5s; }
+.animation-delay-600 { animation-delay: 0.6s; }
+.animation-delay-700 { animation-delay: 0.7s; }
+.animation-delay-800 { animation-delay: 0.8s; }
+.animation-delay-900 { animation-delay: 0.9s; }
+.animation-delay-1000 { animation-delay: 1s; }
+.animation-delay-1100 { animation-delay: 1.1s; }
+.animation-delay-2000 { animation-delay: 2s; }
+.animation-delay-4000 { animation-delay: 4s; }
+
+/* ============================================
+   页面加载动画
+   ============================================ */
+.page-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeOut 0.5s ease-out 1s forwards;
+}
+
+.loader-content {
+  text-align: center;
+}
+
+.loader-logo {
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 20px;
+  background: white;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: pulse 1s infinite;
+}
+
+.loader-text {
+  color: white;
+  font-size: 1.2rem;
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.loader-progress {
+  width: 200px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  margin: 20px auto;
+  overflow: hidden;
+}
+
+.loader-progress-bar {
+  width: 0%;
+  height: 100%;
+  background: white;
+  animation: loading 1s ease-out forwards;
+}
+
+@keyframes loading {
+  to { width: 100%; }
+}
+
+/* ============================================
+   入场动画
+   ============================================ */
+.fade-in {
+  opacity: 0;
+  animation: fadeIn var(--anim-slow) ease-out forwards;
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in-up {
+  opacity: 0;
+  transform: translateY(30px);
+  animation: fadeInUp var(--anim-slow) ease-out forwards;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-down {
+  opacity: 0;
+  transform: translateY(-30px);
+  animation: fadeInDown var(--anim-slow) ease-out forwards;
+}
+
+@keyframes fadeInDown {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-left {
+  opacity: 0;
+  transform: translateX(-30px);
+  animation: fadeInLeft var(--anim-slow) ease-out forwards;
+}
+
+@keyframes fadeInLeft {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fade-in-right {
+  opacity: 0;
+  transform: translateX(30px);
+  animation: fadeInRight var(--anim-slow) ease-out forwards;
+}
+
+@keyframes fadeInRight {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ============================================
+   缩放动画
+   ============================================ */
+.zoom-in {
+  opacity: 0;
+  transform: scale(0.8);
+  animation: zoomIn var(--anim-slow) var(--ease-bounce) forwards;
+}
+
+@keyframes zoomIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.zoom-out {
+  opacity: 0;
+  transform: scale(1.2);
+  animation: zoomOut var(--anim-slow) var(--ease-bounce) forwards;
+}
+
+@keyframes zoomOut {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   旋转动画
+   ============================================ */
+.rotate-in {
+  opacity: 0;
+  transform: rotate(-180deg) scale(0.8);
+  animation: rotateIn var(--anim-slow) var(--ease-bounce) forwards;
+}
+
+@keyframes rotateIn {
+  to {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+}
+
+.flip-in-x {
+  opacity: 0;
+  transform: rotateX(-90deg);
+  animation: flipInX var(--anim-slow) ease-out forwards;
+}
+
+@keyframes flipInX {
+  to {
+    opacity: 1;
+    transform: rotateX(0);
+  }
+}
+
+.flip-in-y {
+  opacity: 0;
+  transform: rotateY(-90deg);
+  animation: flipInY var(--anim-slow) ease-out forwards;
+}
+
+@keyframes flipInY {
+  to {
+    opacity: 1;
+    transform: rotateY(0);
+  }
+}
+
+/* ============================================
+   弹跳动画
+   ============================================ */
+.bounce-in {
+  opacity: 0;
+  transform: scale(0.3);
+  animation: bounceIn var(--anim-slower) var(--ease-bounce) forwards;
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   悬停效果
+   ============================================ */
+.hover-grow {
+  transition: transform var(--anim-normal) var(--ease-smooth);
+}
+
+.hover-grow:hover {
+  transform: scale(1.05);
+}
+
+.hover-shrink {
+  transition: transform var(--anim-normal) var(--ease-smooth);
+}
+
+.hover-shrink:hover {
+  transform: scale(0.95);
+}
+
+.hover-rotate {
+  transition: transform var(--anim-normal) var(--ease-smooth);
+}
+
+.hover-rotate:hover {
+  transform: rotate(5deg);
+}
+
+.hover-lift {
+  transition: all var(--anim-normal) var(--ease-smooth);
+}
+
+.hover-lift:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.hover-sink {
+  transition: all var(--anim-normal) var(--ease-smooth);
+}
+
+.hover-sink:hover {
+  transform: translateY(3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* ============================================
+   按钮悬停效果
+   ============================================ */
+.btn-hover-fill {
+  position: relative;
+  overflow: hidden;
+  transition: color var(--anim-normal);
+  z-index: 1;
+}
+
+.btn-hover-fill::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--gradient-electric);
+  transition: left var(--anim-normal) var(--ease-smooth);
+  z-index: -1;
+}
+
+.btn-hover-fill:hover::before {
+  left: 0;
+}
+
+.btn-hover-fill:hover {
+  color: white;
+}
+
+/* 按钮波纹效果 */
+.btn-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-ripple::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.btn-ripple:active::after {
+  width: 300px;
+  height: 300px;
+}
+
+/* 按钮发光效果 */
+.btn-glow {
+  transition: all var(--anim-normal);
+}
+
+.btn-glow:hover {
+  box-shadow: 0 0 20px rgba(102, 126, 234, 0.6),
+              0 0 40px rgba(102, 126, 234, 0.4),
+              0 0 60px rgba(102, 126, 234, 0.2);
+}
+
+/* ============================================
+   图片悬停效果
+   ============================================ */
+.img-hover-zoom {
+  overflow: hidden;
+}
+
+.img-hover-zoom img {
+  transition: transform var(--anim-slow) var(--ease-smooth);
+}
+
+.img-hover-zoom:hover img {
+  transform: scale(1.1);
+}
+
+.img-hover-rotate {
+  overflow: hidden;
+}
+
+.img-hover-rotate img {
+  transition: transform var(--anim-slow) var(--ease-smooth);
+}
+
+.img-hover-rotate:hover img {
+  transform: scale(1.1) rotate(3deg);
+}
+
+.img-hover-blur {
+  overflow: hidden;
+}
+
+.img-hover-blur img {
+  transition: all var(--anim-slow) var(--ease-smooth);
+}
+
+.img-hover-blur:hover img {
+  filter: blur(3px);
+  transform: scale(1.1);
+}
+
+/* 图片叠加效果 */
+.img-overlay {
+  position: relative;
+  overflow: hidden;
+}
+
+.img-overlay::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
+  opacity: 0;
+  transition: opacity var(--anim-normal);
+  z-index: 1;
+}
+
+.img-overlay:hover::before {
+  opacity: 1;
+}
+
+.img-overlay-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  text-align: center;
+  opacity: 0;
+  transition: opacity var(--anim-normal);
+  z-index: 2;
+}
+
+.img-overlay:hover .img-overlay-content {
+  opacity: 1;
+}
+
+/* ============================================
+   文字动画
+   ============================================ */
+.text-glow {
+  animation: textGlow 2s ease-in-out infinite alternate;
+}
+
+@keyframes textGlow {
+  from {
+    text-shadow: 0 0 10px rgba(102, 126, 234, 0.5),
+                 0 0 20px rgba(102, 126, 234, 0.3);
+  }
+  to {
+    text-shadow: 0 0 20px rgba(102, 126, 234, 0.8),
+                 0 0 30px rgba(102, 126, 234, 0.5);
+  }
+}
+
+.text-typing {
+  overflow: hidden;
+  border-right: 2px solid;
+  white-space: nowrap;
+  animation: typing 3.5s steps(40, end),
+             blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes blink-caret {
+  from, to { border-color: transparent; }
+  50% { border-color: currentColor; }
+}
+
+.text-gradient-animate {
+  background: linear-gradient(90deg, #667eea, #764ba2, #42e695, #667eea);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradientMove 5s ease infinite;
+}
+
+@keyframes gradientMove {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* ============================================
+   卡片动画
+   ============================================ */
+.card-3d {
+  transform-style: preserve-3d;
+  transition: transform var(--anim-slow) var(--ease-smooth);
+}
+
+.card-3d:hover {
+  transform: rotateY(10deg) rotateX(10deg) translateZ(20px);
+}
+
+.card-flip {
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform var(--anim-slow);
+}
+
+.card-flip:hover {
+  transform: rotateY(180deg);
+}
+
+.card-flip-front,
+.card-flip-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.card-flip-back {
+  transform: rotateY(180deg);
+}
+
+/* ============================================
+   滚动动画
+   ============================================ */
+.scroll-reveal {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: all var(--anim-slower) var(--ease-smooth);
+}
+
+.scroll-reveal.revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.scroll-reveal-left {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: all var(--anim-slower) var(--ease-smooth);
+}
+
+.scroll-reveal-left.revealed {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.scroll-reveal-right {
+  opacity: 0;
+  transform: translateX(50px);
+  transition: all var(--anim-slower) var(--ease-smooth);
+}
+
+.scroll-reveal-right.revealed {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.scroll-reveal-scale {
+  opacity: 0;
+  transform: scale(0.8);
+  transition: all var(--anim-slower) var(--ease-smooth);
+}
+
+.scroll-reveal-scale.revealed {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ============================================
+   视差效果
+   ============================================ */
+.parallax {
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.parallax-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.parallax-layer-back {
+  transform: translateZ(-1px) scale(2);
+}
+
+.parallax-layer-base {
+  transform: translateZ(0);
+}
+
+.parallax-layer-front {
+  transform: translateZ(1px) scale(0.5);
+}
+
+/* ============================================
+   加载动画
+   ============================================ */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  background: #f0f0f0;
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+  to {
+    left: 100%;
+  }
+}
+
+/* ============================================
+   脉冲动画
+   ============================================ */
+.pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.pulse-slow {
+  animation: pulse 3s infinite;
+}
+
+.pulse-fast {
+  animation: pulse 1s infinite;
+}
+
+/* ============================================
+   抖动动画
+   ============================================ */
+.shake {
+  animation: shake 0.5s;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
+  20%, 40%, 60%, 80% { transform: translateX(10px); }
+}
+
+.shake-horizontal {
+  animation: shakeHorizontal 0.5s;
+}
+
+@keyframes shakeHorizontal {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+/* ============================================
+   浮动动画
+   ============================================ */
+.float {
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+.float-slow {
+  animation: float 5s ease-in-out infinite;
+}
+
+.float-fast {
+  animation: float 2s ease-in-out infinite;
+}
+
+/* ============================================
+   闪烁动画
+   ============================================ */
+.blink {
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.flash {
+  animation: flash 0.5s;
+}
+
+@keyframes flash {
+  0%, 50%, 100% { opacity: 1; }
+  25%, 75% { opacity: 0; }
+}
+
+/* ============================================
+   渐变背景动画
+   ============================================ */
+.bg-gradient-animate {
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  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%; }
+}
+
+/* ============================================
+   光标跟随效果
+   ============================================ */
+.cursor-follow {
+  position: fixed;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #667eea;
+  border-radius: 50%;
+  pointer-events: none;
+  transition: all 0.1s ease;
+  z-index: 9999;
+}
+
+.cursor-follow.active {
+  transform: scale(2);
+  background: rgba(102, 126, 234, 0.1);
+}
+
+/* ============================================
+   工具提示
+   ============================================ */
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%) scale(0);
+  background: #333;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: all var(--anim-normal) var(--ease-smooth);
+  pointer-events: none;
+}
+
+.tooltip::before {
+  content: '';
+  position: absolute;
+  bottom: 115%;
+  left: 50%;
+  transform: translateX(-50%) scale(0);
+  border: 6px solid transparent;
+  border-top-color: #333;
+  opacity: 0;
+  transition: all var(--anim-normal) var(--ease-smooth);
+}
+
+.tooltip:hover::after,
+.tooltip:hover::before {
+  transform: translateX(-50%) scale(1);
+  opacity: 1;
+}
+
+/* ============================================
+   交错动画
+   ============================================ */
+.stagger-children > * {
+  opacity: 0;
+  transform: translateY(20px);
+  animation: staggerIn var(--anim-slow) var(--ease-smooth) forwards;
+}
+
+.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
+.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
+.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
+.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
+.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
+.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
+.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
+.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }
+
+@keyframes staggerIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================
+   模糊背景
+   ============================================ */
+.blur-background {
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.glass-morphism {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+/* ============================================
+   响应式动画
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
\ No newline at end of file
diff --git a/web_frontend/web_result/css/styles.css b/web_frontend/web_result/css/styles.css
new file mode 100644
index 00000000..5837176f
--- /dev/null
+++ b/web_frontend/web_result/css/styles.css
@@ -0,0 +1,454 @@
+/* 2024长三角国际新能源汽车与智能交通产业博览会 - 全局样式 */
+
+/* 根变量定义 */
+:root {
+  /* 主题色彩系统 */
+  --primary-gradient-start: #10b981;
+  --primary-gradient-end: #3b82f6;
+  --secondary-gradient-start: #8b5cf6;
+  --secondary-gradient-end: #ec4899;
+  --accent-gradient-start: #f59e0b;
+  --accent-gradient-end: #ef4444;
+  
+  /* 中性色 */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  
+  /* 间距系统 */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 3rem;
+  --spacing-2xl: 4rem;
+  
+  /* 动画时长 */
+  --transition-fast: 150ms;
+  --transition-base: 300ms;
+  --transition-slow: 500ms;
+  --transition-slower: 700ms;
+  
+  /* 阴影 */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  
+  /* 圆角 */
+  --radius-sm: 0.375rem;
+  --radius-base: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+}
+
+/* 全局重置和基础样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
+  line-height: 1.6;
+  color: var(--gray-800);
+  background-color: var(--gray-50);
+}
+
+/* 渐变背景动画 */
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.gradient-bg {
+  background: linear-gradient(-45deg, 
+    var(--primary-gradient-start), 
+    var(--primary-gradient-end), 
+    var(--secondary-gradient-start), 
+    var(--secondary-gradient-end));
+  background-size: 400% 400%;
+  animation: gradientShift 15s ease infinite;
+}
+
+.gradient-primary {
+  background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
+}
+
+.gradient-secondary {
+  background: linear-gradient(135deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
+}
+
+.gradient-accent {
+  background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end));
+}
+
+/* 导航栏样式 */
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-base);
+  transition: all var(--transition-base) ease;
+}
+
+.navbar.scrolled {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: var(--shadow-lg);
+}
+
+.nav-link {
+  position: relative;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--gray-700);
+  text-decoration: none;
+  transition: color var(--transition-fast) ease;
+  overflow: hidden;
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
+  transform: translateX(-50%);
+  transition: width var(--transition-base) ease;
+}
+
+.nav-link:hover::after,
+.nav-link.active::after {
+  width: 100%;
+}
+
+/* 卡片动画效果 */
+@keyframes cardFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+.card {
+  background: white;
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-base);
+  transition: all var(--transition-base) ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--transition-base) ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-xl);
+}
+
+.card:hover::before {
+  transform: scaleX(1);
+}
+
+/* 按钮样式 */
+.btn {
+  display: inline-block;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-full);
+  font-weight: 600;
+  text-decoration: none;
+  transition: all var(--transition-base) ease;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
+  color: white;
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
+}
+
+.btn-secondary {
+  background: white;
+  color: var(--gray-700);
+  border: 2px solid var(--gray-200);
+}
+
+.btn-secondary:hover {
+  background: var(--gray-50);
+  border-color: var(--primary-gradient-start);
+  color: var(--primary-gradient-start);
+}
+
+/* 波纹效果 */
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  animation: ripple 0.6s ease-out;
+  pointer-events: none;
+}
+
+/* 加载动画 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.spinner {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--gray-200);
+  border-top-color: var(--primary-gradient-start);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* 数字滚动动画 */
+@keyframes countUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.count-up {
+  animation: countUp var(--transition-slow) ease-out;
+}
+
+/* 淡入动画 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+  animation: fadeIn var(--transition-slower) ease-out;
+}
+
+/* 滑入动画 */
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-50px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(50px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.slide-in-left {
+  animation: slideInLeft var(--transition-slow) ease-out;
+}
+
+.slide-in-right {
+  animation: slideInRight var(--transition-slow) ease-out;
+}
+
+/* 脉冲动画 */
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.9; }
+}
+
+.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* 光晕效果 */
+@keyframes glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); }
+  50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.8); }
+}
+
+.glow {
+  animation: glow 2s ease-in-out infinite;
+}
+
+/* 时间线样式 */
+.timeline {
+  position: relative;
+  padding-left: var(--spacing-xl);
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 15px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: linear-gradient(180deg, var(--primary-gradient-start), var(--primary-gradient-end));
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: var(--spacing-xl);
+}
+
+.timeline-item::before {
+  content: '';
+  position: absolute;
+  left: -25px;
+  top: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-gradient-start);
+  border: 3px solid white;
+  box-shadow: var(--shadow-base);
+}
+
+/* 网格布局动画 */
+.grid-item {
+  opacity: 0;
+  transform: scale(0.9);
+  animation: gridFadeIn var(--transition-slow) ease-out forwards;
+}
+
+@keyframes gridFadeIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.grid-item:nth-child(1) { animation-delay: 0.1s; }
+.grid-item:nth-child(2) { animation-delay: 0.2s; }
+.grid-item:nth-child(3) { animation-delay: 0.3s; }
+.grid-item:nth-child(4) { animation-delay: 0.4s; }
+.grid-item:nth-child(5) { animation-delay: 0.5s; }
+.grid-item:nth-child(6) { animation-delay: 0.6s; }
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  :root {
+    font-size: 14px;
+  }
+  
+  .card {
+    padding: var(--spacing-md);
+  }
+  
+  .timeline {
+    padding-left: var(--spacing-lg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* 打印样式 */
+@media print {
+  .navbar,
+  .btn,
+  .no-print {
+    display: none !important;
+  }
+  
+  body {
+    font-size: 12pt;
+    color: black;
+    background: white;
+  }
+  
+  .card {
+    box-shadow: none;
+    border: 1px solid #ddd;
+    page-break-inside: avoid;
+  }
+}
+
+/* 辅助类 */
+.text-gradient {
+  background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hover-scale {
+  transition: transform var(--transition-base) ease;
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+.hover-lift {
+  transition: transform var(--transition-base) ease;
+}
+
+.hover-lift:hover {
+  transform: translateY(-5px);
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+}
\ No newline at end of file
diff --git a/web_frontend/web_result/index.html b/web_frontend/web_result/index.html
index 58990fdd..34a33831 100644
--- a/web_frontend/web_result/index.html
+++ b/web_frontend/web_result/index.html
@@ -4,106 +4,248 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>2024长三角国际新能源汽车与智能交通产业博览会</title>
+    
+    <!-- 预加载关键资源 -->
+    <link rel="preload" href="css/styles.css" as="style">
+    <link rel="preload" href="css/animations.css" as="style">
+    
+    <!-- 样式表 -->
+    <link rel="stylesheet" href="css/styles.css">
+    <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">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/main.css">
+    
+    <!-- 字体 -->
+    <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">
+    
+    <!-- Font Awesome 图标 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         * {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         }
+        
         .hero-gradient {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, 
+                rgba(16, 185, 129, 0.1) 0%, 
+                rgba(59, 130, 246, 0.1) 50%, 
+                rgba(139, 92, 246, 0.1) 100%);
         }
-        .card-hover {
-            transition: all 0.3s ease;
-        }
-        .card-hover:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-        }
-        .nav-link {
+        
+        .image-shine {
             position: relative;
-            transition: color 0.3s ease;
+            overflow: hidden;
         }
-        .nav-link::after {
+        
+        .image-shine::before {
             content: '';
             position: absolute;
-            bottom: -2px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: #667eea;
-            transition: width 0.3s ease;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                45deg,
+                transparent 30%,
+                rgba(255, 255, 255, 0.3) 50%,
+                transparent 70%
+            );
+            transform: rotate(45deg);
+            transition: all 0.6s;
+            opacity: 0;
         }
-        .nav-link:hover::after,
-        .nav-link.active::after {
-            width: 100%;
+        
+        .image-shine:hover::before {
+            animation: shine 0.6s ease-in-out;
         }
-        .fade-in {
-            animation: fadeIn 0.8s ease-in;
+        
+        @keyframes shine {
+            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
+            50% { opacity: 1; }
+            100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
         }
+        
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        
+        @keyframes floating {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+        
+        /* 确保页面加载时body不能滚动 */
+        body.loading {
+            overflow: hidden;
+        }
+        
+        /* 图片加载优化 */
+        img {
+            background-color: #f3f4f6;
+            transition: opacity 0.3s ease;
+        }
+        
+        img.image-loaded {
+            opacity: 1;
+            animation: fadeIn 0.5s ease;
+        }
+        
+        img.image-error {
+            opacity: 0.5;
+            filter: grayscale(100%);
+        }
+        
         @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
     </style>
 </head>
-<body class="bg-gray-50">
+<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>
+
     <!-- Navigation -->
-    <nav class="fixed top-0 w-full bg-white shadow-md z-50">
+    <nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300" id="navbar">
         <div class="container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                    <svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
-                    </svg>
-                    <span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
+                <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">
+                        <i class="fas fa-charging-station text-white"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-lg font-bold">NEVIT 2024</h1>
+                        <p class="text-xs text-gray-500">新能源汽车产业博览会</p>
+                    </div>
                 </div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="index.html" class="nav-link active text-gray-700 hover:text-purple-600">首页</a>
-                    <a href="pages/overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
-                    <a href="pages/exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
-                    <a href="pages/marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
-                    <a href="pages/operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
-                    <a href="pages/budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
-                    <a href="pages/risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
+                    <a href="index.html" class="nav-link active text-gray-700 hover:text-emerald-500 transition-colors">
+                        <i class="fas fa-home mr-2"></i>首页
+                    </a>
+                    <a href="pages/overview.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
+                        <i class="fas fa-info-circle mr-2"></i>展会概览
+                    </a>
+                    <a href="pages/exhibition.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
+                        <i class="fas fa-th-large mr-2"></i>展览内容
+                    </a>
+                    <a href="pages/marketing.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
+                        <i class="fas fa-bullhorn mr-2"></i>营销推广
+                    </a>
+                    <a href="pages/operation.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
+                        <i class="fas fa-cogs mr-2"></i>运营服务
+                    </a>
+                    <a href="pages/budget.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
+                        <i class="fas fa-chart-pie mr-2"></i>预算分析
+                    </a>
+                    <a href="pages/risk.html" class="nav-link text-gray-700 hover:text-emerald-500 transition-colors">
+                        <i class="fas fa-shield-alt mr-2"></i>风险评估
+                    </a>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button class="md:hidden p-2" id="mobileMenuBtn">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
                 </div>
-                <button class="md:hidden">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-                    </svg>
-                </button>
             </div>
         </div>
     </nav>
 
     <!-- Hero Section -->
-    <section class="hero-gradient text-white pt-24 pb-20">
-        <div class="container mx-auto px-6">
-            <div class="fade-in">
-                <h1 class="text-5xl md:text-6xl font-bold mb-6">
-                    智行未来，绿动长三角
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden hero-gradient py-32">
+        <!-- 背景图片 -->
+        <div class="absolute inset-0 z-0">
+            <div class="absolute inset-0 bg-gradient-to-br from-purple-100 via-blue-50 to-emerald-50"></div>
+            <div class="absolute inset-0 opacity-10" style="background-image: url('../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
+            <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/60 to-white/90"></div>
+        </div>
+        
+        <!-- 浮动装饰元素 -->
+        <div class="absolute top-20 left-10 w-20 h-20 bg-emerald-400 rounded-full opacity-20 floating"></div>
+        <div class="absolute bottom-20 right-10 w-32 h-32 bg-blue-400 rounded-full opacity-20 floating" style="animation-delay: 1s;"></div>
+        <div class="absolute top-1/2 left-20 w-16 h-16 bg-purple-400 rounded-full opacity-20 floating" style="animation-delay: 2s;"></div>
+        
+        <div class="relative z-10 container mx-auto px-6 text-center py-12">
+            <div class="fade-in-up">
+                <!-- 标签 -->
+                <div class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full mb-6 shadow-lg">
+                    <span class="animate-pulse w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
+                    <span class="text-sm font-semibold text-gray-700">2024年6月15-17日 · 苏州国际博览中心</span>
+                </div>
+                
+                <h1 class="text-5xl md:text-7xl font-black mb-6">
+                    <span class="block text-gradient-animate">2024 长三角国际</span>
+                    <span class="block text-gray-800 mt-2">新能源汽车与智能交通</span>
+                    <span class="block text-4xl md:text-5xl text-gray-600 mt-2">产业博览会</span>
                 </h1>
-                <h2 class="text-2xl md:text-3xl mb-8 opacity-90">
-                    2024长三角国际新能源汽车与智能交通产业博览会
-                </h2>
-                <div class="flex flex-wrap gap-4 mb-12">
-                    <div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
-                        <span class="font-semibold">📅 时间：</span>2024年9月12日-15日
+                
+                <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
+                    <i class="fas fa-quote-left text-emerald-500 mr-2"></i>
+                    引领绿色出行新时代 · 共创智能交通新未来
+                    <i class="fas fa-quote-right text-emerald-500 ml-2"></i>
+                </p>
+                <!-- 核心信息展示 -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 max-w-5xl mx-auto">
+                    <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-purple-200 hover:border-purple-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-200 shadow-2xl">
+                        <div class="flex flex-col items-center">
+                            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
+                                <i class="fas fa-calendar-alt text-3xl text-white"></i>
+                            </div>
+                            <p class="text-gray-600 text-sm font-medium mb-2">展会时间</p>
+                            <p class="text-gray-900 font-bold text-2xl text-center">2024年9月</p>
+                            <p class="text-gray-800 font-bold text-xl">12-15日</p>
+                        </div>
                     </div>
-                    <div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
-                        <span class="font-semibold">📍 地点：</span>国家会展中心（上海）
+                    
+                    <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-blue-200 hover:border-blue-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-400 shadow-2xl">
+                        <div class="flex flex-col items-center">
+                            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
+                                <i class="fas fa-map-marked-alt text-3xl text-white"></i>
+                            </div>
+                            <p class="text-gray-600 text-sm font-medium mb-2">展会地点</p>
+                            <p class="text-gray-900 font-bold text-2xl text-center">国家会展中心</p>
+                            <p class="text-gray-800 font-bold text-xl">上海</p>
+                        </div>
                     </div>
-                    <div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
-                        <span class="font-semibold">🏢 规模：</span>50,000平方米
+                    
+                    <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 border-2 border-green-200 hover:border-green-400 transition-all duration-300 transform hover:scale-105 animate-fadeInUp animation-delay-600 shadow-2xl">
+                        <div class="flex flex-col items-center">
+                            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-3 shadow-lg">
+                                <i class="fas fa-expand-arrows-alt text-3xl text-white"></i>
+                            </div>
+                            <p class="text-gray-600 text-sm font-medium mb-2">展览规模</p>
+                            <p class="text-gray-900 font-bold text-3xl">50,000</p>
+                            <p class="text-gray-800 font-bold text-lg">平方米</p>
+                        </div>
                     </div>
                 </div>
-                <div class="flex gap-4">
-                    <a href="pages/overview.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
-                        了解详情
+                
+                <!-- CTA按钮组 -->
+                <div class="flex flex-col md:flex-row gap-6 justify-center items-center animate-fadeInUp animation-delay-800">
+                    <a href="pages/overview.html" class="group relative overflow-hidden bg-white text-purple-700 px-12 py-5 rounded-full font-bold text-xl shadow-2xl hover:shadow-white/30 transition-all duration-300 transform hover:scale-110">
+                        <span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+                        <span class="relative z-10 flex items-center group-hover:text-white">
+                            <i class="fas fa-sparkles mr-3 text-2xl animate-pulse"></i>
+                            了解详情
+                            <i class="fas fa-arrow-right ml-3 group-hover:translate-x-2 transition-transform"></i>
+                        </span>
                     </a>
-                    <a href="#highlights" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
-                        展会亮点
+                    <a href="#highlights" class="group relative overflow-hidden bg-gradient-to-r from-purple-600 to-pink-600 text-white px-12 py-5 rounded-full font-bold text-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-110 shadow-2xl">
+                        <span class="relative z-10 flex items-center">
+                            <i class="fas fa-star mr-3 text-2xl text-yellow-300"></i>
+                            展会亮点
+                            <i class="fas fa-chevron-down ml-3 animate-bounce"></i>
+                        </span>
                     </a>
                 </div>
             </div>
@@ -111,72 +253,124 @@
     </section>
 
     <!-- Key Stats Section -->
-    <section class="py-16 bg-white">
-        <div class="container mx-auto px-6">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div class="text-center fade-in">
-                    <div class="text-4xl font-bold text-purple-600 mb-2">350+</div>
-                    <div class="text-gray-600">参展企业</div>
+    <section class="py-20 -mt-20 relative z-20 bg-gradient-to-br from-white via-gray-50 to-white">
+        <!-- 背景装饰 -->
+        <div class="absolute inset-0 opacity-5" style="background-image: url('../data/会展策划/image/Whisk_9e8c1f44ac.jpg'); background-size: cover; background-position: center;"></div>
+        
+        <div class="container mx-auto px-6 relative z-10" title="核心数据展示区">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
+                <div class="text-center group animate-fadeInUp animation-delay-200 transform hover:scale-105 transition-all duration-300">
+                    <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-purple-500/30 group-hover:rotate-3 transition-all">
+                        <i class="fas fa-building text-4xl text-white"></i>
+                    </div>
+                    <div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 mb-2">
+                        <span class="counter" data-target="350">0</span>+
+                    </div>
+                    <div class="text-gray-700 font-semibold text-lg">参展企业</div>
                 </div>
-                <div class="text-center fade-in">
-                    <div class="text-4xl font-bold text-purple-600 mb-2">50,000+</div>
-                    <div class="text-gray-600">预计观众</div>
+                <div class="text-center group animate-fadeInUp animation-delay-400 transform hover:scale-105 transition-all duration-300">
+                    <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-blue-500/30 group-hover:-rotate-3 transition-all">
+                        <i class="fas fa-users text-4xl text-white"></i>
+                    </div>
+                    <div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600 mb-2">
+                        <span class="counter" data-target="50000">0</span>+
+                    </div>
+                    <div class="text-gray-700 font-semibold text-lg">预计观众</div>
                 </div>
-                <div class="text-center fade-in">
-                    <div class="text-4xl font-bold text-purple-600 mb-2">10亿+</div>
-                    <div class="text-gray-600">预计成交额</div>
+                <div class="text-center group animate-fadeInUp animation-delay-600 transform hover:scale-105 transition-all duration-300">
+                    <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-green-500/30 group-hover:rotate-3 transition-all">
+                        <i class="fas fa-hand-holding-usd text-4xl text-white"></i>
+                    </div>
+                    <div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-600 mb-2">
+                        <span class="counter" data-target="10">0</span>亿+
+                    </div>
+                    <div class="text-gray-700 font-semibold text-lg">预计成交额</div>
                 </div>
-                <div class="text-center fade-in">
-                    <div class="text-4xl font-bold text-purple-600 mb-2">20+</div>
-                    <div class="text-gray-600">专业论坛</div>
+                <div class="text-center group animate-fadeInUp animation-delay-800 transform hover:scale-105 transition-all duration-300">
+                    <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center shadow-2xl group-hover:shadow-orange-500/30 group-hover:-rotate-3 transition-all">
+                        <i class="fas fa-microphone-alt text-4xl text-white"></i>
+                    </div>
+                    <div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-red-600 mb-2">
+                        <span class="counter" data-target="20">0</span>+
+                    </div>
+                    <div class="text-gray-700 font-semibold text-lg">专业论坛</div>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Highlights Section -->
-    <section id="highlights" class="py-20 bg-gray-50">
-        <div class="container mx-auto px-6">
-            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">展会亮点</h2>
+    <section id="highlights" class="py-20 relative overflow-hidden">
+        <!-- 背景图片层 - 降低透明度 -->
+        <div class="absolute inset-0 opacity-20" style="background-image: url('../data/会展策划/image/Whisk_27184afa6e.jpg'); background-size: cover; background-position: center; background-attachment: fixed;"></div>
+        
+        <!-- 强化遮罩层 - 确保主体内容清晰 -->
+        <div class="absolute inset-0 bg-white/85"></div>
+        <div class="absolute inset-0 bg-gradient-to-br from-gray-50/95 to-purple-50/95"></div>
+        <div class="absolute inset-0 opacity-10">
+            <div class="absolute top-20 left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
+            <div class="absolute top-40 right-20 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
+            <div class="absolute -bottom-8 left-40 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
+        </div>
+        <div class="container mx-auto px-6 relative z-10" title="展会亮点展示区">
+            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">展会亮点</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Card 1 -->
-                <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
-                    <div class="h-48 bg-gradient-to-br from-blue-500 to-cyan-600"></div>
+                <div class="card-hover bg-white/90 backdrop-blur rounded-xl shadow-xl overflow-hidden group animate-fadeInUp animation-delay-200">
+                    <div class="h-48 relative overflow-hidden">
+                        <img src="../data/会展策划/image/3.小米汽车.jpg" alt="小米汽车" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                        <div class="absolute bottom-4 left-4 text-white">
+                            <div class="bg-blue-500 px-3 py-1 rounded-full text-xs font-semibold inline-block mb-2">热门展区</div>
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-3">全产业链展示</h3>
+                        <h3 class="text-xl font-bold mb-3 group-hover:text-purple-600 transition-colors">全产业链展示</h3>
                         <p class="text-gray-600 mb-4">
                             涵盖整车制造、核心零部件、充电设施、智能网联等全产业链环节，打造一站式采购平台。
                         </p>
-                        <a href="pages/exhibition.html" class="text-purple-600 font-semibold hover:text-purple-800">
-                            了解更多 →
+                        <a href="pages/exhibition.html" class="text-purple-600 font-semibold hover:text-purple-800 flex items-center group/link">
+                            了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover/link:translate-x-2"></i>
                         </a>
                     </div>
                 </div>
 
                 <!-- Card 2 -->
-                <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
-                    <div class="h-48 bg-gradient-to-br from-green-500 to-emerald-600"></div>
+                <div class="card-hover bg-white/90 backdrop-blur rounded-xl shadow-xl overflow-hidden group animate-fadeInUp animation-delay-400">
+                    <div class="h-48 relative overflow-hidden">
+                        <img src="../data/会展策划/image/2.试驾小景.jpg" alt="试驾体验" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                        <div class="absolute bottom-4 left-4 text-white">
+                            <div class="bg-emerald-500 px-3 py-1 rounded-full text-xs font-semibold inline-block mb-2">互动体验</div>
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-3">创新技术体验</h3>
+                        <h3 class="text-xl font-bold mb-3 group-hover:text-emerald-600 transition-colors">创新技术体验</h3>
                         <p class="text-gray-600 mb-4">
                             设置自动驾驶体验区、智能交通演示区，让观众亲身体验最新科技成果。
                         </p>
-                        <a href="pages/operation.html" class="text-purple-600 font-semibold hover:text-purple-800">
-                            了解更多 →
+                        <a href="pages/operation.html" class="text-emerald-600 font-semibold hover:text-emerald-800 flex items-center group/link">
+                            了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover/link:translate-x-2"></i>
                         </a>
                     </div>
                 </div>
 
                 <!-- Card 3 -->
-                <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
-                    <div class="h-48 bg-gradient-to-br from-purple-500 to-pink-600"></div>
+                <div class="card-hover bg-white/90 backdrop-blur rounded-xl shadow-xl overflow-hidden group animate-fadeInUp animation-delay-600">
+                    <div class="h-48 relative overflow-hidden">
+                        <img src="../data/会展策划/image/展会内部参观.jpg" alt="论坛峰会" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                        <div class="absolute bottom-4 left-4 text-white">
+                            <div class="bg-purple-500 px-3 py-1 rounded-full text-xs font-semibold inline-block mb-2">主题论坛</div>
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-3">高端论坛峰会</h3>
+                        <h3 class="text-xl font-bold mb-3 group-hover:text-purple-600 transition-colors">高端论坛峰会</h3>
                         <p class="text-gray-600 mb-4">
                             汇聚行业领袖、专家学者，探讨产业发展趋势，发布权威研究报告。
                         </p>
-                        <a href="pages/marketing.html" class="text-purple-600 font-semibold hover:text-purple-800">
-                            了解更多 →
+                        <a href="pages/marketing.html" class="text-purple-600 font-semibold hover:text-purple-800 flex items-center group/link">
+                            了解更多 <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover/link:translate-x-2"></i>
                         </a>
                     </div>
                 </div>
@@ -185,96 +379,197 @@
     </section>
 
     <!-- Exhibition Areas -->
-    <section class="py-20 bg-white">
+    <section class="py-20 bg-gradient-to-br from-white via-indigo-50 to-purple-50">
         <div class="container mx-auto px-6">
-            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">展区规划</h2>
+            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">展区规划</h2>
+            <p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">50,000平方米超大展览空间，打造沉浸式体验</p>
+            
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
-                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
-                            <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
-                        </svg>
+                <div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-purple-200 rounded-2xl hover:border-purple-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-300">
+                    <div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
+                        <i class="fas fa-car text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2 text-gray-800">整车展示区</h3>
+                    <p class="text-purple-600 font-bold text-xl mb-1">20,000m²</p>
+                    <p class="text-gray-500 text-sm">100+品牌车型</p>
+                    <div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="inline-block bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-xs">核心展区</span>
                     </div>
-                    <h3 class="text-lg font-semibold mb-2">整车展示区</h3>
-                    <p class="text-gray-600 text-sm">20,000平方米</p>
                 </div>
-                <div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
-                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
-                        </svg>
+                
+                <div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-emerald-200 rounded-2xl hover:border-emerald-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-400">
+                    <div class="w-20 h-20 bg-gradient-to-br from-emerald-400 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
+                        <i class="fas fa-microchip text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2 text-gray-800">核心零部件区</h3>
+                    <p class="text-emerald-600 font-bold text-xl mb-1">15,000m²</p>
+                    <p class="text-gray-500 text-sm">500+供应商</p>
+                    <div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="inline-block bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs">技术展示</span>
                     </div>
-                    <h3 class="text-lg font-semibold mb-2">核心零部件区</h3>
-                    <p class="text-gray-600 text-sm">15,000平方米</p>
                 </div>
-                <div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
-                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/>
-                        </svg>
+                
+                <div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-indigo-200 rounded-2xl hover:border-indigo-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-500">
+                    <div class="w-20 h-20 bg-gradient-to-br from-indigo-400 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
+                        <i class="fas fa-network-wired text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2 text-gray-800">智能交通区</h3>
+                    <p class="text-indigo-600 font-bold text-xl mb-1">10,000m²</p>
+                    <p class="text-gray-500 text-sm">50+解决方案</p>
+                    <div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="inline-block bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs">创新科技</span>
                     </div>
-                    <h3 class="text-lg font-semibold mb-2">智能交通区</h3>
-                    <p class="text-gray-600 text-sm">10,000平方米</p>
                 </div>
-                <div class="text-center p-6 border-2 border-purple-200 rounded-lg hover:border-purple-500 transition">
-                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
-                        </svg>
+                
+                <div class="group text-center p-6 bg-white/80 backdrop-blur border-2 border-pink-200 rounded-2xl hover:border-pink-500 hover:shadow-2xl transform transition-all duration-300 hover:-translate-y-2 animate-fadeInUp animation-delay-600">
+                    <div class="w-20 h-20 bg-gradient-to-br from-pink-400 to-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:rotate-6 transition-transform duration-300">
+                        <i class="fas fa-gamepad text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2 text-gray-800">体验互动区</h3>
+                    <p class="text-pink-600 font-bold text-xl mb-1">5,000m²</p>
+                    <p class="text-gray-500 text-sm">20+互动项目</p>
+                    <div class="mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="inline-block bg-pink-100 text-pink-700 px-3 py-1 rounded-full text-xs">沉浸体验</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 展馆布置图 -->
+            <div class="mt-12 animate-fadeInUp animation-delay-700">
+                <div class="bg-white/90 backdrop-blur rounded-2xl shadow-xl overflow-hidden">
+                    <img src="../data/会展策划/image/展馆布置图.jpeg" alt="展馆布置图" class="w-full h-auto hover:scale-105 transition-transform duration-700">
+                    <div class="p-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
+                        <p class="text-center font-semibold"><i class="fas fa-map-marked-alt mr-2"></i>展馆3D全景布置图 - 点击查看详情</p>
                     </div>
-                    <h3 class="text-lg font-semibold mb-2">体验互动区</h3>
-                    <p class="text-gray-600 text-sm">5,000平方米</p>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- CTA Section -->
-    <section class="py-20 bg-gradient-to-r from-purple-600 to-pink-600 text-white">
-        <div class="container mx-auto px-6 text-center">
-            <h2 class="text-3xl md:text-4xl font-bold mb-6">立即参与，共创绿色出行未来</h2>
-            <p class="text-xl mb-8 opacity-90">加入我们，共同推动新能源汽车产业发展</p>
-            <div class="flex justify-center gap-4">
-                <a href="pages/exhibition.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
-                    参展申请
-                </a>
-                <a href="pages/marketing.html" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
-                    观众预登记
-                </a>
+    <!-- Gallery Section -->
+    <section class="py-20 bg-gradient-to-br from-gray-900 to-purple-900 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-10">
+            <div class="absolute top-0 left-0 w-full h-full bg-[url('../data/会展策划/image/展会内部参观.jpg')] bg-cover bg-center bg-fixed"></div>
+        </div>
+        <div class="container mx-auto px-6 relative z-10" title="精彩瞬间展示区">
+            <h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12 animate-fadeInUp">精彩瞬间</h2>
+            <div class="grid md:grid-cols-3 gap-6 mb-8">
+                <div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200">
+                    <img src="../data/会展策划/image/展会内部参观.jpg" alt="展会内部" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                            <h3 class="text-xl font-bold mb-2">展馆内部参观</h3>
+                            <p class="text-sm">宽敞明亮的展示空间，科技感十足</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400">
+                    <img src="../data/会展策划/image/签到.jpg" alt="签到处" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                            <h3 class="text-xl font-bold mb-2">智能签到系统</h3>
+                            <p class="text-sm">快速便捷的入场体验</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="group relative overflow-hidden rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600">
+                    <img src="../data/会展策划/image/3.小米汽车.jpg" alt="展品展示" class="w-full h-64 object-cover transform transition-transform duration-700 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                            <h3 class="text-xl font-bold mb-2">明星展品</h3>
+                            <p class="text-sm">最新款新能源汽车亮相</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 更多图片展示 -->
+            <div class="grid md:grid-cols-4 gap-4">
+                <div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-800">
+                    <img src="../data/会展策划/image/Whisk_03282ab7e5.jpg" alt="展品1" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
+                    <div class="absolute inset-0 bg-gradient-to-t from-purple-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-900">
+                    <img src="../data/会展策划/image/Whisk_15f65339bb.jpg" alt="展品2" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
+                    <div class="absolute inset-0 bg-gradient-to-t from-indigo-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1000">
+                    <img src="../data/会展策划/image/Whisk_192cdc54bc.jpg" alt="展品3" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
+                    <div class="absolute inset-0 bg-gradient-to-t from-blue-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl shadow-xl animate-fadeInUp animation-delay-1100">
+                    <img src="../data/会展策划/image/Whisk_1c05424f7f.jpg" alt="展品4" class="w-full h-48 object-cover transform transition-all duration-500 group-hover:scale-110 group-hover:rotate-1">
+                    <div class="absolute inset-0 bg-gradient-to-t from-cyan-600/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </div>
             </div>
         </div>
     </section>
 
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
-        <div class="container mx-auto px-6">
+    <footer class="bg-gradient-to-b from-gray-900 to-black text-white py-16 relative overflow-hidden">
+        <!-- 背景装饰 -->
+        <div class="absolute inset-0 opacity-10">
+            <div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500 rounded-full filter blur-3xl"></div>
+            <div class="absolute top-0 right-0 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10" title="页脚信息区">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">关于展会</h3>
-                    <p class="text-gray-400 text-sm">
-                        长三角地区最具影响力的新能源汽车与智能交通产业盛会
+                <div class="animate-fadeInUp">
+                    <div class="flex items-center mb-4">
+                        <i class="fas fa-car-side text-2xl text-purple-400 mr-2"></i>
+                        <h3 class="text-lg font-semibold">关于展会</h3>
+                    </div>
+                    <p class="text-gray-400 text-sm leading-relaxed">
+                        长三角地区最具影响力的新能源汽车与智能交通产业盛会，汇聚全球顶尖企业与技术
                     </p>
+                    <div class="mt-4 flex space-x-3">
+                        <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition">
+                            <i class="fab fa-weixin text-sm"></i>
+                        </a>
+                        <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
+                            <i class="fab fa-weibo text-sm"></i>
+                        </a>
+                        <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
+                            <i class="fab fa-linkedin text-sm"></i>
+                        </a>
+                    </div>
                 </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
+                <div class="animate-fadeInUp animation-delay-200">
+                    <h3 class="text-lg font-semibold mb-4">
+                        <i class="fas fa-link text-purple-400 mr-2"></i>快速链接
+                    </h3>
                     <ul class="space-y-2 text-sm text-gray-400">
-                        <li><a href="pages/overview.html" class="hover:text-white">策划概述</a></li>
-                        <li><a href="pages/exhibition.html" class="hover:text-white">展会介绍</a></li>
-                        <li><a href="pages/marketing.html" class="hover:text-white">营销方案</a></li>
-                        <li><a href="pages/operation.html" class="hover:text-white">现场运营</a></li>
+                        <li><a href="pages/overview.html" class="hover:text-purple-400 transition">
+                            <i class="fas fa-chevron-right text-xs mr-1"></i>策划概述
+                        </a></li>
+                        <li><a href="pages/exhibition.html" class="hover:text-purple-400 transition">
+                            <i class="fas fa-chevron-right text-xs mr-1"></i>展会介绍
+                        </a></li>
+                        <li><a href="pages/marketing.html" class="hover:text-purple-400 transition">
+                            <i class="fas fa-chevron-right text-xs mr-1"></i>营销方案
+                        </a></li>
+                        <li><a href="pages/operation.html" class="hover:text-purple-400 transition">
+                            <i class="fas fa-chevron-right text-xs mr-1"></i>现场运营
+                        </a></li>
                     </ul>
                 </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">联系方式</h3>
+                <div class="animate-fadeInUp animation-delay-400">
+                    <h3 class="text-lg font-semibold mb-4">
+                        <i class="fas fa-phone-alt text-purple-400 mr-2"></i>联系方式
+                    </h3>
                     <ul class="space-y-2 text-sm text-gray-400">
-                        <li>📍 上海市青浦区崧泽大道333号</li>
-                        <li>📞 021-12345678</li>
-                        <li>✉️ info@greenmobility2024.com</li>
+                        <li><i class="fas fa-map-marker-alt text-purple-400 mr-2"></i>上海市青浦区崧泽大道333号</li>
+                        <li><i class="fas fa-phone text-purple-400 mr-2"></i>021-12345678</li>
+                        <li><i class="fas fa-envelope text-purple-400 mr-2"></i>info@greenmobility2024.com</li>
                     </ul>
                 </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
+                <div class="animate-fadeInUp animation-delay-600">
+                    <h3 class="text-lg font-semibold mb-4">
+                        <i class="fas fa-qrcode text-purple-400 mr-2"></i>关注我们
+                    </h3>
                     <div class="flex space-x-4">
                         <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
                             <span>微信</span>
diff --git a/web_frontend/web_result/js/main.js b/web_frontend/web_result/js/main.js
new file mode 100644
index 00000000..62b624a0
--- /dev/null
+++ b/web_frontend/web_result/js/main.js
@@ -0,0 +1,709 @@
+// 2024长三角国际新能源汽车与智能交通产业博览会 - 交互脚本
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 隐藏页面加载器
+    hidePageLoader();
+    
+    initNavbar();
+    initAnimations();
+    initCounters();
+    initScrollEffects();
+    initRippleEffect();
+    initLazyLoading();
+    initFormValidation();
+    initCharts();
+    initTimeline();
+    initInteractiveElements();
+    handleImageErrors();
+});
+
+// 隐藏页面加载器
+function hidePageLoader() {
+    const loader = document.getElementById('pageLoader');
+    if (loader) {
+        // 添加淡出动画
+        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);
+    } else {
+        // 如果没有找到加载器，也要确保恢复滚动
+        document.body.style.overflow = 'auto';
+        document.body.classList.remove('loading');
+    }
+}
+
+// 如果页面加载超过3秒，强制隐藏加载器
+window.addEventListener('load', function() {
+    setTimeout(() => {
+        hidePageLoader();
+    }, 3000);
+});
+
+// 导航栏交互
+function initNavbar() {
+    const navbar = document.querySelector('.navbar');
+    const navLinks = document.querySelectorAll('.nav-link');
+    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+    const mobileMenu = document.querySelector('.mobile-menu');
+    
+    // 滚动时改变导航栏样式
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 100) {
+            navbar?.classList.add('scrolled');
+        } else {
+            navbar?.classList.remove('scrolled');
+        }
+    });
+    
+    // 高亮当前页面链接
+    const currentPath = window.location.pathname;
+    navLinks.forEach(link => {
+        if (link.getAttribute('href') === currentPath) {
+            link.classList.add('active');
+        }
+    });
+    
+    // 移动端菜单切换
+    mobileMenuBtn?.addEventListener('click', () => {
+        mobileMenu?.classList.toggle('open');
+        mobileMenuBtn.classList.toggle('active');
+    });
+    
+    // 平滑滚动到锚点
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+}
+
+// 动画初始化
+function initAnimations() {
+    // Intersection Observer for fade-in animations
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-in');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    
+    // 观察所有需要动画的元素
+    document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .grid-item').forEach(el => {
+        observer.observe(el);
+    });
+}
+
+// 数字计数器动画
+function initCounters() {
+    const counters = document.querySelectorAll('.counter');
+    const speed = 200; // 动画速度
+    
+    const countUp = (counter) => {
+        const target = +counter.getAttribute('data-target');
+        const increment = target / speed;
+        
+        const updateCount = () => {
+            const count = +counter.innerText.replace(/[^0-9]/g, '');
+            
+            if (count < target) {
+                counter.innerText = Math.ceil(count + increment).toLocaleString();
+                setTimeout(updateCount, 1);
+            } else {
+                counter.innerText = target.toLocaleString();
+                
+                // 添加单位
+                const unit = counter.getAttribute('data-unit');
+                if (unit) {
+                    counter.innerText += unit;
+                }
+            }
+        };
+        
+        updateCount();
+    };
+    
+    // 使用 Intersection Observer 触发计数
+    const counterObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                countUp(entry.target);
+                counterObserver.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    counters.forEach(counter => {
+        counter.innerText = '0';
+        counterObserver.observe(counter);
+    });
+}
+
+// 滚动效果
+function initScrollEffects() {
+    let lastScrollTop = 0;
+    const header = document.querySelector('header');
+    
+    window.addEventListener('scroll', () => {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+        // 隐藏/显示导航栏
+        if (scrollTop > lastScrollTop && scrollTop > 300) {
+            header?.classList.add('hide');
+        } else {
+            header?.classList.remove('hide');
+        }
+        
+        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+        
+        // 视差效果
+        const parallaxElements = document.querySelectorAll('.parallax');
+        parallaxElements.forEach(el => {
+            const speed = el.getAttribute('data-speed') || 0.5;
+            const yPos = -(scrollTop * speed);
+            el.style.transform = `translateY(${yPos}px)`;
+        });
+        
+        // 进度条
+        const progressBar = document.querySelector('.progress-bar');
+        if (progressBar) {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            progressBar.style.width = scrolled + '%';
+        }
+    });
+}
+
+// 波纹效果
+function initRippleEffect() {
+    document.querySelectorAll('.btn, .card').forEach(element => {
+        element.addEventListener('click', function(e) {
+            const ripple = document.createElement('span');
+            ripple.classList.add('ripple');
+            
+            const rect = this.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            
+            ripple.style.width = ripple.style.height = size + 'px';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            
+            this.appendChild(ripple);
+            
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        });
+    });
+}
+
+// 懒加载
+function initLazyLoading() {
+    const images = document.querySelectorAll('img[data-src]');
+    
+    const imageObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const img = entry.target;
+                img.src = img.dataset.src;
+                img.removeAttribute('data-src');
+                imageObserver.unobserve(img);
+                
+                // 添加加载完成动画
+                img.addEventListener('load', () => {
+                    img.classList.add('loaded');
+                });
+            }
+        });
+    }, {
+        rootMargin: '50px 0px'
+    });
+    
+    images.forEach(img => imageObserver.observe(img));
+}
+
+// 表单验证
+function initFormValidation() {
+    const forms = document.querySelectorAll('form');
+    
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            let isValid = true;
+            const inputs = form.querySelectorAll('input[required], textarea[required]');
+            
+            inputs.forEach(input => {
+                if (!input.value.trim()) {
+                    isValid = false;
+                    input.classList.add('error');
+                    showError(input, '此字段为必填项');
+                } else {
+                    input.classList.remove('error');
+                    clearError(input);
+                }
+                
+                // 邮箱验证
+                if (input.type === 'email' && input.value) {
+                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                    if (!emailRegex.test(input.value)) {
+                        isValid = false;
+                        input.classList.add('error');
+                        showError(input, '请输入有效的邮箱地址');
+                    }
+                }
+                
+                // 电话验证
+                if (input.type === 'tel' && input.value) {
+                    const phoneRegex = /^1[3-9]\d{9}$/;
+                    if (!phoneRegex.test(input.value)) {
+                        isValid = false;
+                        input.classList.add('error');
+                        showError(input, '请输入有效的手机号码');
+                    }
+                }
+            });
+            
+            if (isValid) {
+                // 显示成功消息
+                showSuccess('表单提交成功！');
+                form.reset();
+            }
+        });
+        
+        // 实时验证
+        form.querySelectorAll('input, textarea').forEach(input => {
+            input.addEventListener('blur', function() {
+                validateInput(this);
+            });
+            
+            input.addEventListener('input', function() {
+                if (this.classList.contains('error')) {
+                    validateInput(this);
+                }
+            });
+        });
+    });
+}
+
+// 显示错误信息
+function showError(input, message) {
+    const errorEl = input.nextElementSibling;
+    if (errorEl && errorEl.classList.contains('error-message')) {
+        errorEl.textContent = message;
+    } else {
+        const error = document.createElement('span');
+        error.classList.add('error-message');
+        error.textContent = message;
+        input.parentNode.insertBefore(error, input.nextSibling);
+    }
+}
+
+// 清除错误信息
+function clearError(input) {
+    const errorEl = input.nextElementSibling;
+    if (errorEl && errorEl.classList.contains('error-message')) {
+        errorEl.remove();
+    }
+}
+
+// 验证输入
+function validateInput(input) {
+    if (input.hasAttribute('required') && !input.value.trim()) {
+        input.classList.add('error');
+        showError(input, '此字段为必填项');
+        return false;
+    }
+    
+    input.classList.remove('error');
+    clearError(input);
+    return true;
+}
+
+// 显示成功消息
+function showSuccess(message) {
+    const toast = document.createElement('div');
+    toast.classList.add('toast', 'success');
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.classList.add('show');
+    }, 100);
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => {
+            toast.remove();
+        }, 300);
+    }, 3000);
+}
+
+// 初始化图表
+function initCharts() {
+    // 预算分配饼图
+    const budgetChart = document.getElementById('budgetChart');
+    if (budgetChart) {
+        const data = [
+            { label: '场地租赁', value: 35, color: '#10b981' },
+            { label: '营销推广', value: 25, color: '#3b82f6' },
+            { label: '运营服务', value: 20, color: '#8b5cf6' },
+            { label: '人员成本', value: 15, color: '#f59e0b' },
+            { label: '其他费用', value: 5, color: '#ef4444' }
+        ];
+        
+        drawPieChart(budgetChart, data);
+    }
+    
+    // 参展商类别分布
+    const exhibitorChart = document.getElementById('exhibitorChart');
+    if (exhibitorChart) {
+        const data = [
+            { label: '整车制造', value: 40 },
+            { label: '零部件', value: 30 },
+            { label: '充电设施', value: 15 },
+            { label: '智能驾驶', value: 10 },
+            { label: '其他', value: 5 }
+        ];
+        
+        drawBarChart(exhibitorChart, data);
+    }
+}
+
+// 绘制饼图
+function drawPieChart(canvas, data) {
+    const ctx = canvas.getContext('2d');
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const radius = Math.min(centerX, centerY) - 20;
+    
+    let currentAngle = -Math.PI / 2;
+    const total = data.reduce((sum, item) => sum + item.value, 0);
+    
+    data.forEach(item => {
+        const sliceAngle = (item.value / total) * 2 * Math.PI;
+        
+        // 绘制扇形
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle);
+        ctx.lineTo(centerX, centerY);
+        ctx.fillStyle = item.color;
+        ctx.fill();
+        
+        // 绘制标签
+        const labelX = centerX + Math.cos(currentAngle + sliceAngle / 2) * (radius * 0.7);
+        const labelY = centerY + Math.sin(currentAngle + sliceAngle / 2) * (radius * 0.7);
+        
+        ctx.fillStyle = '#fff';
+        ctx.font = '14px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(item.value + '%', labelX, labelY);
+        
+        currentAngle += sliceAngle;
+    });
+}
+
+// 绘制柱状图
+function drawBarChart(canvas, data) {
+    const ctx = canvas.getContext('2d');
+    const barWidth = canvas.width / (data.length * 2);
+    const maxValue = Math.max(...data.map(item => item.value));
+    const chartHeight = canvas.height - 40;
+    
+    data.forEach((item, index) => {
+        const barHeight = (item.value / maxValue) * chartHeight;
+        const x = (index * 2 + 0.5) * barWidth;
+        const y = canvas.height - barHeight - 20;
+        
+        // 绘制柱子
+        const gradient = ctx.createLinearGradient(x, y, x, y + barHeight);
+        gradient.addColorStop(0, '#10b981');
+        gradient.addColorStop(1, '#3b82f6');
+        
+        ctx.fillStyle = gradient;
+        ctx.fillRect(x, y, barWidth, barHeight);
+        
+        // 绘制数值
+        ctx.fillStyle = '#333';
+        ctx.font = '12px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(item.value + '%', x + barWidth / 2, y - 5);
+    });
+}
+
+// 初始化时间线
+function initTimeline() {
+    const timelineItems = document.querySelectorAll('.timeline-item');
+    
+    const timelineObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('active');
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    timelineItems.forEach(item => {
+        timelineObserver.observe(item);
+    });
+}
+
+// 交互元素初始化
+function initInteractiveElements() {
+    // 标签页切换
+    const tabs = document.querySelectorAll('.tab');
+    const tabContents = document.querySelectorAll('.tab-content');
+    
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const target = tab.dataset.tab;
+            
+            // 切换标签状态
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            // 切换内容显示
+            tabContents.forEach(content => {
+                if (content.id === target) {
+                    content.classList.add('active');
+                    content.style.display = 'block';
+                } else {
+                    content.classList.remove('active');
+                    content.style.display = 'none';
+                }
+            });
+        });
+    });
+    
+    // 手风琴效果
+    const accordionHeaders = document.querySelectorAll('.accordion-header');
+    
+    accordionHeaders.forEach(header => {
+        header.addEventListener('click', () => {
+            const content = header.nextElementSibling;
+            const isOpen = header.classList.contains('active');
+            
+            // 关闭其他项
+            accordionHeaders.forEach(h => {
+                h.classList.remove('active');
+                h.nextElementSibling.style.maxHeight = null;
+            });
+            
+            // 切换当前项
+            if (!isOpen) {
+                header.classList.add('active');
+                content.style.maxHeight = content.scrollHeight + 'px';
+            }
+        });
+    });
+    
+    // 模态框
+    const modalTriggers = document.querySelectorAll('[data-modal]');
+    const modals = document.querySelectorAll('.modal');
+    const modalCloses = document.querySelectorAll('.modal-close');
+    
+    modalTriggers.forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            const modalId = trigger.dataset.modal;
+            const modal = document.getElementById(modalId);
+            if (modal) {
+                modal.classList.add('open');
+                document.body.style.overflow = 'hidden';
+            }
+        });
+    });
+    
+    modalCloses.forEach(close => {
+        close.addEventListener('click', () => {
+            const modal = close.closest('.modal');
+            modal.classList.remove('open');
+            document.body.style.overflow = '';
+        });
+    });
+    
+    // 点击背景关闭模态框
+    modals.forEach(modal => {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.classList.remove('open');
+                document.body.style.overflow = '';
+            }
+        });
+    });
+    
+    // 工具提示
+    const tooltips = document.querySelectorAll('[data-tooltip]');
+    
+    tooltips.forEach(element => {
+        const tooltip = document.createElement('div');
+        tooltip.classList.add('tooltip');
+        tooltip.textContent = element.dataset.tooltip;
+        
+        element.addEventListener('mouseenter', () => {
+            document.body.appendChild(tooltip);
+            const rect = element.getBoundingClientRect();
+            tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px';
+            tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';
+            tooltip.classList.add('show');
+        });
+        
+        element.addEventListener('mouseleave', () => {
+            tooltip.classList.remove('show');
+            setTimeout(() => {
+                tooltip.remove();
+            }, 300);
+        });
+    });
+}
+
+// 复制到剪贴板
+function copyToClipboard(text) {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+    showSuccess('已复制到剪贴板');
+}
+
+// 分享功能
+function shareContent(platform) {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent(document.title);
+    let shareUrl = '';
+    
+    switch(platform) {
+        case 'wechat':
+            // 生成微信分享二维码
+            generateQRCode(window.location.href);
+            break;
+        case 'weibo':
+            shareUrl = `https://service.weibo.com/share/share.php?url=${url}&title=${title}`;
+            break;
+        case 'linkedin':
+            shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
+            break;
+        case 'twitter':
+            shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
+            break;
+    }
+    
+    if (shareUrl) {
+        window.open(shareUrl, '_blank', 'width=600,height=400');
+    }
+}
+
+// 生成二维码
+function generateQRCode(text) {
+    const modal = document.createElement('div');
+    modal.classList.add('qr-modal');
+    modal.innerHTML = `
+        <div class="qr-content">
+            <h3>微信扫码分享</h3>
+            <div id="qrcode"></div>
+            <button class="btn btn-secondary" onclick="this.parentElement.parentElement.remove()">关闭</button>
+        </div>
+    `;
+    document.body.appendChild(modal);
+    
+    // 这里可以集成实际的二维码生成库
+    document.getElementById('qrcode').innerHTML = '二维码生成区域';
+}
+
+// 主题切换
+function initThemeToggle() {
+    const themeToggle = document.getElementById('themeToggle');
+    const currentTheme = localStorage.getItem('theme') || 'light';
+    
+    document.documentElement.setAttribute('data-theme', currentTheme);
+    
+    themeToggle?.addEventListener('click', () => {
+        const theme = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+    });
+}
+
+// 导出为 PDF
+function exportToPDF() {
+    window.print();
+}
+
+// 性能监控
+function initPerformanceMonitoring() {
+    // 页面加载时间
+    window.addEventListener('load', () => {
+        const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
+        console.log(`页面加载时间: ${loadTime}ms`);
+        
+        // 发送到分析服务
+        if (window.gtag) {
+            gtag('event', 'page_load_time', {
+                value: loadTime,
+                page_path: window.location.pathname
+            });
+        }
+    });
+    
+    // 监控长任务
+    if ('PerformanceObserver' in window) {
+        const observer = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+                console.log('Long Task detected:', entry);
+            }
+        });
+        
+        observer.observe({ entryTypes: ['longtask'] });
+    }
+}
+
+// 处理图片加载错误
+function handleImageErrors() {
+    const images = document.querySelectorAll('img');
+    const defaultImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZTJlOGYwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzk0YTNiOCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWbvueJh+WKoOi9veS4rTwvdGV4dD48L3N2Zz4=';
+    
+    images.forEach(img => {
+        // 添加错误处理
+        img.addEventListener('error', function() {
+            console.warn('图片加载失败:', this.src);
+            // 设置默认占位图
+            this.src = defaultImage;
+            this.alt = '图片加载失败';
+            this.classList.add('image-error');
+        });
+        
+        // 添加加载成功处理
+        img.addEventListener('load', function() {
+            this.classList.add('image-loaded');
+        });
+    });
+}
+
+// 初始化性能监控
+initPerformanceMonitoring();
+initThemeToggle();
\ No newline at end of file
diff --git a/web_frontend/web_result/pages/budget.html b/web_frontend/web_result/pages/budget.html
new file mode 100644
index 00000000..7ee81f33
--- /dev/null
+++ b/web_frontend/web_result/pages/budget.html
@@ -0,0 +1,636 @@
+<!DOCTYPE html>
+<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">
+    <style>
+        * {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+        .nav-link {
+            position: relative;
+            transition: color 0.3s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: #667eea;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after,
+        .nav-link.active::after {
+            width: 100%;
+        }
+        .chart-bar {
+            animation: growBar 1s ease-out forwards;
+        }
+        @keyframes growBar {
+            from { width: 0; }
+        }
+        .counter {
+            animation: countUp 2s ease-out forwards;
+        }
+        @keyframes countUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .pie-chart {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: conic-gradient(
+                #667eea 0deg 126deg,
+                #10b981 126deg 198deg,
+                #f59e0b 198deg 234deg,
+                #ef4444 234deg 270deg,
+                #8b5cf6 270deg 306deg,
+                #ec4899 306deg 360deg
+            );
+            position: relative;
+        }
+        .roi-indicator {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.05); opacity: 0.9; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full bg-white shadow-md z-50">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
+                    </svg>
+                    <span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
+                    <a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
+                    <a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
+                    <a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
+                    <a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
+                    <a href="budget.html" class="nav-link active text-gray-700 hover:text-purple-600">预算分析</a>
+                    <a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Page Header -->
+    <section class="bg-gradient-to-r from-green-600 to-emerald-600 text-white pt-24 pb-12">
+        <div class="container mx-auto px-6">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">预算与收益分析</h1>
+            <p class="text-xl opacity-90">科学规划预算，实现投资价值最大化</p>
+        </div>
+    </section>
+
+    <!-- Budget Overview -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">预算总览</h2>
+                <p class="text-gray-600">合理配置资源，确保展会成功举办</p>
+            </div>
+            
+            <!-- Key Metrics -->
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
+                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 text-center counter">
+                    <div class="text-3xl font-bold text-blue-600 mb-2">900万</div>
+                    <div class="text-gray-600">总支出预算</div>
+                    <div class="mt-2 text-xs text-gray-500">占预期收入75%</div>
+                </div>
+                <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 text-center counter" style="animation-delay: 0.2s">
+                    <div class="text-3xl font-bold text-green-600 mb-2">1200万</div>
+                    <div class="text-gray-600">预期总收入</div>
+                    <div class="mt-2 text-xs text-gray-500">同比增长20%</div>
+                </div>
+                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 text-center counter" style="animation-delay: 0.4s">
+                    <div class="text-3xl font-bold text-purple-600 mb-2">300万</div>
+                    <div class="text-gray-600">预期净利润</div>
+                    <div class="mt-2 text-xs text-gray-500">利润率25%</div>
+                </div>
+                <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 text-center counter roi-indicator" style="animation-delay: 0.6s">
+                    <div class="text-3xl font-bold text-orange-600 mb-2">33.3%</div>
+                    <div class="text-gray-600">投资回报率</div>
+                    <div class="mt-2 text-xs text-gray-500">行业领先水平</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Expenditure Budget -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">支出预算明细</h2>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Budget Breakdown Chart -->
+                <div>
+                    <div class="bg-white rounded-2xl shadow-lg p-8">
+                        <h3 class="text-xl font-bold mb-6">预算分配图</h3>
+                        <div class="flex justify-center mb-6">
+                            <div class="pie-chart">
+                                <div class="absolute inset-4 bg-white rounded-full flex items-center justify-center">
+                                    <div class="text-center">
+                                        <div class="text-2xl font-bold">900万</div>
+                                        <div class="text-xs text-gray-500">总预算</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3 text-sm">
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-purple-600 rounded-full mr-2"></div>
+                                <span>场地费用 33.3%</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-green-600 rounded-full mr-2"></div>
+                                <span>营销推广 22.2%</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-yellow-600 rounded-full mr-2"></div>
+                                <span>人员成本 16.7%</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-red-600 rounded-full mr-2"></div>
+                                <span>活动执行 11.1%</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-purple-600 rounded-full mr-2"></div>
+                                <span>运营保障 8.9%</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-pink-600 rounded-full mr-2"></div>
+                                <span>应急储备 7.8%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Detailed Budget List -->
+                <div>
+                    <div class="bg-white rounded-2xl shadow-lg p-8">
+                        <h3 class="text-xl font-bold mb-6">详细预算清单</h3>
+                        <div class="space-y-4">
+                            <!-- 场地费用 -->
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="font-semibold text-purple-600">场地费用</span>
+                                    <span class="font-bold">300万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-3">
+                                    <div class="bg-purple-600 h-3 rounded-full chart-bar" style="width: 100%"></div>
+                                </div>
+                                <div class="mt-2 text-xs text-gray-600 space-y-1">
+                                    <div class="flex justify-between">
+                                        <span>展馆租赁</span>
+                                        <span>200万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>搭建装修</span>
+                                        <span>80万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>设备租赁</span>
+                                        <span>20万</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- 营销推广 -->
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="font-semibold text-green-600">营销推广</span>
+                                    <span class="font-bold">200万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-3">
+                                    <div class="bg-green-600 h-3 rounded-full chart-bar" style="width: 66.7%; animation-delay: 0.2s"></div>
+                                </div>
+                                <div class="mt-2 text-xs text-gray-600 space-y-1">
+                                    <div class="flex justify-between">
+                                        <span>线上推广</span>
+                                        <span>80万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>线下推广</span>
+                                        <span>60万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>媒体合作</span>
+                                        <span>40万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>精准邀请</span>
+                                        <span>20万</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- 人员成本 -->
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="font-semibold text-yellow-600">人员成本</span>
+                                    <span class="font-bold">150万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-3">
+                                    <div class="bg-yellow-600 h-3 rounded-full chart-bar" style="width: 50%; animation-delay: 0.4s"></div>
+                                </div>
+                                <div class="mt-2 text-xs text-gray-600 space-y-1">
+                                    <div class="flex justify-between">
+                                        <span>项目团队</span>
+                                        <span>80万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>临时人员</span>
+                                        <span>40万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>专家顾问</span>
+                                        <span>30万</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- 活动执行 -->
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="font-semibold text-red-600">活动执行</span>
+                                    <span class="font-bold">100万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-3">
+                                    <div class="bg-red-600 h-3 rounded-full chart-bar" style="width: 33.3%; animation-delay: 0.6s"></div>
+                                </div>
+                                <div class="mt-2 text-xs text-gray-600 space-y-1">
+                                    <div class="flex justify-between">
+                                        <span>开幕典礼</span>
+                                        <span>30万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>论坛峰会</span>
+                                        <span>40万</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span>互动活动</span>
+                                        <span>30万</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Revenue Budget -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">收入预算规划</h2>
+            
+            <div class="max-w-5xl mx-auto">
+                <!-- Revenue Sources -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+                    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white text-center">
+                        <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">展位收入</h3>
+                        <div class="text-3xl font-bold mb-1">700万</div>
+                        <div class="text-blue-100 text-sm">占比 58.3%</div>
+                    </div>
+
+                    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white text-center">
+                        <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">赞助收入</h3>
+                        <div class="text-3xl font-bold mb-1">300万</div>
+                        <div class="text-green-100 text-sm">占比 25%</div>
+                    </div>
+
+                    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white text-center">
+                        <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">广告收入</h3>
+                        <div class="text-3xl font-bold mb-1">100万</div>
+                        <div class="text-purple-100 text-sm">占比 8.3%</div>
+                    </div>
+
+                    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white text-center">
+                        <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">其他收入</h3>
+                        <div class="text-3xl font-bold mb-1">100万</div>
+                        <div class="text-orange-100 text-sm">占比 8.3%</div>
+                    </div>
+                </div>
+
+                <!-- Revenue Details -->
+                <div class="bg-gray-50 rounded-2xl p-8">
+                    <h3 class="text-2xl font-bold mb-6">收入来源详解</h3>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <!-- Exhibition Booth Revenue -->
+                        <div class="bg-white rounded-xl p-6">
+                            <h4 class="text-lg font-bold mb-4 text-blue-600">展位收入明细</h4>
+                            <div class="space-y-3">
+                                <div class="flex justify-between py-2 border-b">
+                                    <span class="text-gray-600">标准展位（9㎡）</span>
+                                    <div class="text-right">
+                                        <div class="font-semibold">1200个</div>
+                                        <div class="text-xs text-gray-500">5000元/个</div>
+                                    </div>
+                                </div>
+                                <div class="flex justify-between py-2 border-b">
+                                    <span class="text-gray-600">特装展位</span>
+                                    <div class="text-right">
+                                        <div class="font-semibold">20,000㎡</div>
+                                        <div class="text-xs text-gray-500">500元/㎡</div>
+                                    </div>
+                                </div>
+                                <div class="flex justify-between py-2">
+                                    <span class="text-gray-600">室外展位</span>
+                                    <div class="text-right">
+                                        <div class="font-semibold">5,000㎡</div>
+                                        <div class="text-xs text-gray-500">300元/㎡</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Sponsorship Revenue -->
+                        <div class="bg-white rounded-xl p-6">
+                            <h4 class="text-lg font-bold mb-4 text-green-600">赞助收入构成</h4>
+                            <div class="space-y-3">
+                                <div class="flex justify-between py-2 border-b">
+                                    <span class="text-gray-600">冠名赞助</span>
+                                    <div class="text-right">
+                                        <div class="font-semibold">1家</div>
+                                        <div class="text-xs text-gray-500">100万元</div>
+                                    </div>
+                                </div>
+                                <div class="flex justify-between py-2 border-b">
+                                    <span class="text-gray-600">战略合作</span>
+                                    <div class="text-right">
+                                        <div class="font-semibold">3家</div>
+                                        <div class="text-xs text-gray-500">50万元/家</div>
+                                    </div>
+                                </div>
+                                <div class="flex justify-between py-2">
+                                    <span class="text-gray-600">行业赞助</span>
+                                    <div class="text-right">
+                                        <div class="font-semibold">10家</div>
+                                        <div class="text-xs text-gray-500">5万元/家</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ROI Analysis -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">投资回报分析</h2>
+            
+            <div class="max-w-6xl mx-auto">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <!-- Direct Benefits -->
+                    <div class="bg-white rounded-xl shadow-lg p-6">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
+                                <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                                    <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <h3 class="text-xl font-bold">直接收益</h3>
+                        </div>
+                        <div class="space-y-3">
+                            <div class="bg-green-50 rounded-lg p-4">
+                                <div class="flex justify-between mb-2">
+                                    <span class="text-gray-600">展会净利润</span>
+                                    <span class="font-bold text-green-600">300万</span>
+                                </div>
+                                <div class="text-xs text-gray-500">占总投入33.3%</div>
+                            </div>
+                            <div class="bg-green-50 rounded-lg p-4">
+                                <div class="flex justify-between mb-2">
+                                    <span class="text-gray-600">现场成交额</span>
+                                    <span class="font-bold text-green-600">10亿+</span>
+                                </div>
+                                <div class="text-xs text-gray-500">带动产业发展</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Indirect Benefits -->
+                    <div class="bg-white rounded-xl shadow-lg p-6">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
+                                <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <h3 class="text-xl font-bold">间接收益</h3>
+                        </div>
+                        <div class="space-y-3">
+                            <div class="bg-blue-50 rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">品牌价值提升</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 媒体曝光1亿+次</li>
+                                    <li>• 行业影响力TOP3</li>
+                                    <li>• 品牌认知度+50%</li>
+                                </ul>
+                            </div>
+                            <div class="bg-blue-50 rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">长期合作机会</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 战略合作20+项</li>
+                                    <li>• 客户留存率85%</li>
+                                    <li>• 复购意向90%</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Social Benefits -->
+                    <div class="bg-white rounded-xl shadow-lg p-6">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
+                                <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
+                                </svg>
+                            </div>
+                            <h3 class="text-xl font-bold">社会效益</h3>
+                        </div>
+                        <div class="space-y-3">
+                            <div class="bg-purple-50 rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">产业带动效应</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 带动相关产业30亿</li>
+                                    <li>• 创造就业1000+</li>
+                                    <li>• 税收贡献2000万</li>
+                                </ul>
+                            </div>
+                            <div class="bg-purple-50 rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">行业推动作用</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 技术成果50+项</li>
+                                    <li>• 行业白皮书2份</li>
+                                    <li>• 标准制定参与</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ROI Summary -->
+                <div class="mt-12 bg-gradient-to-r from-green-600 to-emerald-600 rounded-2xl p-8 text-white">
+                    <h3 class="text-2xl font-bold mb-6 text-center">综合投资回报</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
+                        <div>
+                            <div class="text-3xl font-bold mb-2">1:1.33</div>
+                            <div class="text-green-100">投入产出比</div>
+                        </div>
+                        <div>
+                            <div class="text-3xl font-bold mb-2">6个月</div>
+                            <div class="text-green-100">投资回收期</div>
+                        </div>
+                        <div>
+                            <div class="text-3xl font-bold mb-2">1500万</div>
+                            <div class="text-green-100">综合价值</div>
+                        </div>
+                        <div>
+                            <div class="text-3xl font-bold mb-2">A+</div>
+                            <div class="text-green-100">投资评级</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Cost Control -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">成本控制措施</h2>
+            
+            <div class="max-w-4xl mx-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div class="bg-gray-50 rounded-xl p-6">
+                        <h3 class="text-lg font-bold mb-4 text-blue-600">预算管控</h3>
+                        <ul class="space-y-3">
+                            <li class="flex items-start">
+                                <svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                                </svg>
+                                <div>
+                                    <p class="font-semibold">分级审批制度</p>
+                                    <p class="text-sm text-gray-600">10万以下部门审批，10万以上管理层审批</p>
+                                </div>
+                            </li>
+                            <li class="flex items-start">
+                                <svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                                </svg>
+                                <div>
+                                    <p class="font-semibold">实时监控系统</p>
+                                    <p class="text-sm text-gray-600">每周预算执行报告，偏差预警</p>
+                                </div>
+                            </li>
+                            <li class="flex items-start">
+                                <svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                                </svg>
+                                <div>
+                                    <p class="font-semibold">成本责任制</p>
+                                    <p class="text-sm text-gray-600">各部门成本KPI考核</p>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="bg-gray-50 rounded-xl p-6">
+                        <h3 class="text-lg font-bold mb-4 text-purple-600">优化措施</h3>
+                        <ul class="space-y-3">
+                            <li class="flex items-start">
+                                <svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                                </svg>
+                                <div>
+                                    <p class="font-semibold">供应商竞标</p>
+                                    <p class="text-sm text-gray-600">3家以上比价，优选性价比</p>
+                                </div>
+                            </li>
+                            <li class="flex items-start">
+                                <svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                                </svg>
+                                <div>
+                                    <p class="font-semibold">资源共享</p>
+                                    <p class="text-sm text-gray-600">与合作伙伴资源互换</p>
+                                </div>
+                            </li>
+                            <li class="flex items-start">
+                                <svg class="w-5 h-5 text-green-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                                </svg>
+                                <div>
+                                    <p class="font-semibold">数字化管理</p>
+                                    <p class="text-sm text-gray-600">减少人工成本，提高效率</p>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 bg-gradient-to-r from-green-600 to-emerald-600 text-white">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl font-bold mb-6">科学预算，确保展会成功</h2>
+            <p class="text-xl mb-8 opacity-90">了解风险管控，保障展会顺利进行</p>
+            <a href="risk.html" class="inline-block bg-white text-green-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+                查看风险评估 →
+            </a>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="text-center text-sm text-gray-400">
+                <p>&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+</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 03efe68a..29ef4426 100644
--- a/web_frontend/web_result/pages/exhibition.html
+++ b/web_frontend/web_result/pages/exhibition.html
@@ -4,11 +4,50 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- 字体 -->
+    <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">
     <style>
         * {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+        
+        /* 页面加载动画 */
+        .page-enter {
+            animation: pageEnter 0.8s ease-out;
+        }
+        
+        @keyframes pageEnter {
+            from { 
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to { 
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        /* 玻璃态效果 */
+        .glass-card {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .glass-card:hover {
+            background: rgba(255, 255, 255, 0.95);
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
         }
         .nav-link {
             position: relative;
@@ -70,30 +109,72 @@
     <nav class="fixed top-0 w-full bg-white shadow-md z-50">
         <div class="container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                    <svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
-                    </svg>
+                <div class="flex items-center group">
+                    <div class="relative mr-3">
+                        <i class="fas fa-car-side text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
+                        <i class="fas fa-bolt text-xs text-green-500 absolute -top-1 -right-1 animate-pulse"></i>
+                    </div>
                     <span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
                 </div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
-                    <a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
-                    <a href="exhibition.html" class="nav-link active text-gray-700 hover:text-purple-600">展会介绍</a>
-                    <a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
-                    <a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
-                    <a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
-                    <a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
+                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-home mr-1"></i>首页
+                    </a>
+                    <a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-file-alt mr-1"></i>策划概述
+                    </a>
+                    <a href="exhibition.html" class="nav-link active text-purple-600 font-semibold">
+                        <i class="fas fa-building mr-1"></i>展会介绍
+                    </a>
+                    <a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-bullhorn mr-1"></i>营销方案
+                    </a>
+                    <a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-cogs mr-1"></i>现场运营
+                    </a>
+                    <a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-calculator mr-1"></i>预算分析
+                    </a>
+                    <a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-shield-alt mr-1"></i>风险评估
+                    </a>
                 </div>
             </div>
         </div>
     </nav>
 
     <!-- Page Header -->
-    <section class="bg-gradient-to-r from-blue-600 to-green-600 text-white pt-24 pb-12">
-        <div class="container mx-auto px-6">
-            <h1 class="text-4xl md:text-5xl font-bold mb-4">展会介绍与预期效果</h1>
-            <p class="text-xl opacity-90">深入了解展会规模、展品范围、参展商与观众构成</p>
+    <section class="relative pt-24 pb-16 overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <!-- 背景装饰 -->
+        <div class="absolute inset-0">
+            <div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
+            <div class="absolute bottom-0 right-0 w-96 h-96 bg-purple-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10 page-enter">
+            <div class="flex items-center text-white/80 mb-4">
+                <a href="../index.html" class="hover:text-white transition">首页</a>
+                <i class="fas fa-chevron-right mx-2 text-xs"></i>
+                <span>展会介绍</span>
+            </div>
+            <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 animate-fadeInUp">
+                展会介绍与预期效果
+            </h1>
+            <p class="text-xl text-white/90 animate-fadeInUp animation-delay-200">
+                <i class="fas fa-chart-line mr-2"></i>
+                深入了解展会规模、展品范围、参展商与观众构成
+            </p>
+            <div class="mt-8 flex flex-wrap gap-4 animate-fadeInUp animation-delay-400">
+                <div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
+                    <i class="fas fa-calendar mr-2"></i>2024年9月12-15日
+                </div>
+                <div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
+                    <i class="fas fa-map-marker-alt mr-2"></i>国家会展中心（上海）
+                </div>
+                <div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
+                    <i class="fas fa-users mr-2"></i>预计10万+参观者
+                </div>
+            </div>
         </div>
     </section>
 
@@ -108,29 +189,23 @@
             </div>
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="text-center scale-in">
-                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                        </svg>
+                <div class="text-center group animate-fadeInUp animation-delay-200">
+                    <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
+                        <i class="fas fa-award text-3xl text-blue-600"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-2">专业化</h3>
                     <p class="text-gray-600">聚焦新能源汽车全产业链，提供专业展示交流平台</p>
                 </div>
-                <div class="text-center scale-in" style="animation-delay: 0.1s">
-                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
-                        </svg>
+                <div class="text-center group animate-fadeInUp animation-delay-400">
+                    <div class="w-20 h-20 bg-gradient-to-br from-green-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
+                        <i class="fas fa-globe-asia text-3xl text-green-600"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-2">国际化</h3>
                     <p class="text-gray-600">汇聚全球领先企业，促进国际技术交流与合作</p>
                 </div>
-                <div class="text-center scale-in" style="animation-delay: 0.2s">
-                    <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-10 h-10 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
-                        </svg>
+                <div class="text-center group animate-fadeInUp animation-delay-600">
+                    <div class="w-20 h-20 bg-gradient-to-br from-purple-100 to-purple-200 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform shadow-lg">
+                        <i class="fas fa-star text-3xl text-purple-600"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-2">品质化</h3>
                     <p class="text-gray-600">高端展会服务，打造行业标杆展会品牌</p>
@@ -140,36 +215,38 @@
     </section>
 
     <!-- Venue Information -->
-    <section class="py-16 bg-gray-50">
-        <div class="container mx-auto px-6">
-            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展会场地</h2>
+    <section class="py-16 bg-gray-50 relative overflow-hidden">
+        <!-- 背景图片 -->
+        <div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/博览会.jpg'); background-size: cover; background-position: center;"></div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
+                <i class="fas fa-map-marked-alt mr-2 text-purple-600"></i>
+                展会场地
+            </h2>
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
-                <div class="map-container rounded-2xl p-8 text-white relative">
-                    <h3 class="text-2xl font-bold mb-4">国家会展中心（上海）</h3>
+                <div class="map-container rounded-2xl p-8 text-white relative glass-card hover:scale-[1.02] transition-all duration-300">
+                    <h3 class="text-2xl font-bold mb-4 animate-fadeInLeft">
+                        <i class="fas fa-building mr-2"></i>
+                        国家会展中心（上海）
+                    </h3>
                     <div class="space-y-3 relative z-10">
-                        <div class="flex items-start">
-                            <svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
-                            </svg>
+                        <div class="flex items-start animate-fadeInLeft animation-delay-200">
+                            <i class="fas fa-map-marker-alt text-xl mr-3 flex-shrink-0 mt-1 animate-pulse"></i>
                             <div>
                                 <p class="font-semibold">详细地址</p>
                                 <p class="opacity-90">上海市青浦区崧泽大道333号</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
-                                <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
-                            </svg>
+                        <div class="flex items-start animate-fadeInLeft animation-delay-400">
+                            <i class="fas fa-subway text-xl mr-3 flex-shrink-0 mt-1"></i>
                             <div>
                                 <p class="font-semibold">交通便利</p>
                                 <p class="opacity-90">地铁2号线直达，多条公交线路，充足停车位</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <svg class="w-6 h-6 mr-3 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
-                            </svg>
+                        <div class="flex items-start animate-fadeInLeft animation-delay-600">
+                            <i class="fas fa-expand-arrows-alt text-xl mr-3 flex-shrink-0 mt-1"></i>
                             <div>
                                 <p class="font-semibold">场馆规模</p>
                                 <p class="opacity-90">展览面积50万平方米，亚洲最大会展综合体</p>
@@ -178,39 +255,42 @@
                     </div>
                 </div>
                 
-                <div class="bg-white rounded-2xl shadow-lg p-8">
-                    <h3 class="text-2xl font-bold text-gray-800 mb-6">场馆优势</h3>
+                <div class="bg-white rounded-2xl shadow-lg p-8 glass-card hover:scale-[1.02] transition-all duration-300">
+                    <h3 class="text-2xl font-bold text-gray-800 mb-6 animate-fadeInRight">
+                        <i class="fas fa-trophy mr-2 text-yellow-500"></i>
+                        场馆优势
+                    </h3>
                     <div class="space-y-4">
-                        <div class="flex items-center p-4 bg-blue-50 rounded-lg">
-                            <div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
-                                01
+                        <div class="flex items-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors animate-fadeInRight animation-delay-200">
+                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                                <i class="fas fa-medal text-xl"></i>
                             </div>
                             <div>
                                 <h4 class="font-semibold">世界级展馆设施</h4>
                                 <p class="text-sm text-gray-600">配备先进的展览设施和智能化管理系统</p>
                             </div>
                         </div>
-                        <div class="flex items-center p-4 bg-green-50 rounded-lg">
-                            <div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center mr-4">
-                                02
+                        <div class="flex items-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors animate-fadeInRight animation-delay-400">
+                            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                                <i class="fas fa-concierge-bell text-xl"></i>
                             </div>
                             <div>
                                 <h4 class="font-semibold">完善的配套服务</h4>
                                 <p class="text-sm text-gray-600">酒店、餐饮、商务中心一应俱全</p>
                             </div>
                         </div>
-                        <div class="flex items-center p-4 bg-purple-50 rounded-lg">
-                            <div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
-                                03
+                        <div class="flex items-center p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors animate-fadeInRight animation-delay-600">
+                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                                <i class="fas fa-hand-holding-heart text-xl"></i>
                             </div>
                             <div>
                                 <h4 class="font-semibold">丰富的办展经验</h4>
                                 <p class="text-sm text-gray-600">成功举办进博会等大型国际展会</p>
                             </div>
                         </div>
-                        <div class="flex items-center p-4 bg-orange-50 rounded-lg">
-                            <div class="w-12 h-12 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
-                                04
+                        <div class="flex items-center p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors animate-fadeInRight animation-delay-800">
+                            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                                <i class="fas fa-leaf text-xl"></i>
                             </div>
                             <div>
                                 <h4 class="font-semibold">绿色环保理念</h4>
@@ -224,18 +304,24 @@
     </section>
 
     <!-- Exhibition Areas Detail -->
-    <section class="py-16 bg-white">
+    <section class="py-16 bg-white relative">
         <div class="container mx-auto px-6">
-            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展品范围</h2>
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
+                <i class="fas fa-th-large mr-2 text-blue-600"></i>
+                展品范围
+            </h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                 <!-- 整车展区 -->
-                <div class="exhibition-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6">
+                <div class="exhibition-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 animate-fadeInUp animation-delay-200">
+                    <div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-blue-400 to-blue-600">
+                        <img src="../../data/会展策划/image/3.小米汽车.jpg" alt="整车展示" class="w-full h-full object-cover opacity-60">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <i class="fas fa-car-side text-5xl text-white"></i>
+                        </div>
+                    </div>
                     <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-4">
-                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
-                                <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
-                            </svg>
+                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                            <i class="fas fa-car text-xl"></i>
                         </div>
                         <h3 class="text-xl font-bold">整车展区</h3>
                     </div>
@@ -263,12 +349,16 @@
                 </div>
 
                 <!-- 核心零部件展区 -->
-                <div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6">
+                <div class="exhibition-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 animate-fadeInUp animation-delay-400">
+                    <div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-green-400 to-green-600">
+                        <img src="../../data/会展策划/image/Whisk_8236005bb2.jpg" alt="核心零部件" class="w-full h-full object-cover opacity-60">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <i class="fas fa-battery-full text-5xl text-white"></i>
+                        </div>
+                    </div>
                     <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center mr-4">
-                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
-                            </svg>
+                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                            <i class="fas fa-bolt text-xl"></i>
                         </div>
                         <h3 class="text-xl font-bold">核心零部件展区</h3>
                     </div>
@@ -296,12 +386,16 @@
                 </div>
 
                 <!-- 智能交通展区 -->
-                <div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6">
+                <div class="exhibition-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 animate-fadeInUp animation-delay-600">
+                    <div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-purple-400 to-purple-600">
+                        <img src="../../data/会展策划/image/Whisk_5c4b912ea7.jpg" alt="智能交通" class="w-full h-full object-cover opacity-60">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <i class="fas fa-network-wired text-5xl text-white"></i>
+                        </div>
+                    </div>
                     <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-4">
-                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"/>
-                            </svg>
+                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                            <i class="fas fa-microchip text-xl"></i>
                         </div>
                         <h3 class="text-xl font-bold">智能交通展区</h3>
                     </div>
@@ -329,12 +423,16 @@
                 </div>
 
                 <!-- 配套服务展区 -->
-                <div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6">
+                <div class="exhibition-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-6 animate-fadeInUp animation-delay-800">
+                    <div class="relative overflow-hidden rounded-xl mb-4 h-32 bg-gradient-to-r from-orange-400 to-orange-600">
+                        <img src="../../data/会展策划/image/Whisk_2a9b622636.jpg" alt="配套服务" class="w-full h-full object-cover opacity-60">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <i class="fas fa-charging-station text-5xl text-white"></i>
+                        </div>
+                    </div>
                     <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-4">
-                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
-                            </svg>
+                        <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-lg flex items-center justify-center mr-4 shadow-lg">
+                            <i class="fas fa-tools text-xl"></i>
                         </div>
                         <h3 class="text-xl font-bold">配套服务展区</h3>
                     </div>
@@ -643,5 +741,83 @@
             </div>
         </div>
     </footer>
+
+    <!-- JavaScript -->
+    <script src="../js/main.js"></script>
+    <script>
+        // 页面加载动画
+        document.addEventListener('DOMContentLoaded', function() {
+            // 添加页面进入动画
+            document.body.classList.add('page-enter');
+            
+            // 图片懒加载
+            const images = document.querySelectorAll('img');
+            images.forEach(img => {
+                img.addEventListener('load', function() {
+                    this.classList.add('image-loaded');
+                });
+                img.addEventListener('error', function() {
+                    this.classList.add('image-error');
+                    this.src = '../data/会展策划/image/博览会.jpg'; // 备用图片
+                });
+            });
+            
+            // 滚动动画触发
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -100px 0px'
+            };
+            
+            const observer = new IntersectionObserver(function(entries) {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            }, observerOptions);
+            
+            // 观察所有带动画的元素
+            document.querySelectorAll('.animate-fadeInUp, .animate-fadeInLeft, .animate-fadeInRight').forEach(el => {
+                observer.observe(el);
+            });
+            
+            // 数字动画
+            function animateNumbers() {
+                const numbers = [
+                    { el: document.querySelector('.economic-number'), target: 10, suffix: '亿+' },
+                    { el: document.querySelector('.social-number'), target: 1, suffix: '亿+次' },
+                    { el: document.querySelector('.brand-number'), target: 90, suffix: '%+' }
+                ];
+                
+                numbers.forEach(item => {
+                    if (item.el) {
+                        let current = 0;
+                        const increment = item.target / 50;
+                        const timer = setInterval(() => {
+                            current += increment;
+                            if (current >= item.target) {
+                                current = item.target;
+                                clearInterval(timer);
+                            }
+                            item.el.textContent = Math.floor(current) + item.suffix;
+                        }, 30);
+                    }
+                });
+            }
+            
+            // 触发数字动画
+            const resultsSection = document.querySelector('#expected-results');
+            if (resultsSection) {
+                const resultsObserver = new IntersectionObserver(function(entries) {
+                    if (entries[0].isIntersecting) {
+                        animateNumbers();
+                        resultsObserver.disconnect();
+                    }
+                });
+                resultsObserver.observe(resultsSection);
+            }
+        });
+    </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
new file mode 100644
index 00000000..5434e1b2
--- /dev/null
+++ b/web_frontend/web_result/pages/marketing.html
@@ -0,0 +1,805 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
+    
+    <!-- 字体 -->
+    <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">
+    <style>
+        * {
+            font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+        
+        /* 玻璃态效果 */
+        .glass-card {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        
+        /* 3D翻转卡片 */
+        .flip-card {
+            perspective: 1000px;
+        }
+        
+        .flip-card-inner {
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        
+        .flip-card:hover .flip-card-inner {
+            transform: rotateY(180deg);
+        }
+        
+        .flip-card-front, .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+        }
+        
+        .flip-card-back {
+            transform: rotateY(180deg);
+        }
+        .nav-link {
+            position: relative;
+            transition: color 0.3s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: #667eea;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after,
+        .nav-link.active::after {
+            width: 100%;
+        }
+        .strategy-card {
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .strategy-card::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.6s ease;
+        }
+        .strategy-card:hover::before {
+            left: 100%;
+        }
+        .strategy-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+        }
+        .progress-bar {
+            animation: progressFill 2s ease-out forwards;
+        }
+        @keyframes progressFill {
+            from { width: 0%; }
+        }
+        .pulse-dot {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.2); opacity: 0.7; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full bg-white shadow-md z-50">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center group">
+                    <div class="relative mr-3">
+                        <i class="fas fa-car-side text-2xl text-purple-600 group-hover:scale-110 transition-transform"></i>
+                        <i class="fas fa-bolt text-xs text-green-500 absolute -top-1 -right-1 animate-pulse"></i>
+                    </div>
+                    <span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-home mr-1"></i>首页
+                    </a>
+                    <a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-file-alt mr-1"></i>策划概述
+                    </a>
+                    <a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-building mr-1"></i>展会介绍
+                    </a>
+                    <a href="marketing.html" class="nav-link active text-purple-600 font-semibold">
+                        <i class="fas fa-bullhorn mr-1"></i>营销方案
+                    </a>
+                    <a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-cogs mr-1"></i>现场运营
+                    </a>
+                    <a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-calculator mr-1"></i>预算分析
+                    </a>
+                    <a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">
+                        <i class="fas fa-shield-alt mr-1"></i>风险评估
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Page Header -->
+    <section class="relative pt-24 pb-16 overflow-hidden" style="background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);">
+        <!-- 背景装饰 -->
+        <div class="absolute inset-0">
+            <div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full filter blur-3xl animate-pulse"></div>
+            <div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-300/20 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div>
+            <!-- 背景图片 -->
+            <div class="absolute inset-0 opacity-10" style="background-image: url('../../data/会展策划/image/Whisk_1c05424f7f.jpg'); background-size: cover; background-position: center;"></div>
+        </div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="flex items-center text-white/80 mb-4 animate-fadeInUp">
+                <a href="../index.html" class="hover:text-white transition">首页</a>
+                <i class="fas fa-chevron-right mx-2 text-xs"></i>
+                <span>营销方案</span>
+            </div>
+            <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 animate-fadeInUp animation-delay-200">
+                <i class="fas fa-rocket mr-3"></i>
+                营销推广方案
+            </h1>
+            <p class="text-xl text-white/90 animate-fadeInUp animation-delay-400">
+                全方位、多渠道、精准化的营销策略
+            </p>
+            <div class="mt-8 flex flex-wrap gap-4 animate-fadeInUp animation-delay-600">
+                <div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
+                    <i class="fas fa-users mr-2"></i>目标观众: 10万+
+                </div>
+                <div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
+                    <i class="fas fa-chart-line mr-2"></i>预期转化: 30%
+                </div>
+                <div class="bg-white/20 backdrop-blur px-4 py-2 rounded-full text-sm">
+                    <i class="fas fa-globe mr-2"></i>覆盖范围: 全国
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Marketing Strategy Timeline -->
+    <section class="py-16 bg-white relative overflow-hidden">
+        <!-- 背景装饰 -->
+        <div class="absolute inset-0 opacity-5" style="background-image: url('../../data/会展策划/image/Whisk_4aabd94ef3.jpg'); background-size: cover; background-position: center;"></div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12 animate-fadeInUp">
+                <i class="fas fa-calendar-alt mr-2 text-purple-600"></i>
+                整体推广策略
+            </h2>
+            <div class="max-w-5xl mx-auto">
+                <div class="relative">
+                    <!-- Timeline Line -->
+                    <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-purple-600 to-pink-600"></div>
+                    
+                    <!-- Timeline Items -->
+                    <div class="space-y-12">
+                        <!-- Phase 1 -->
+                        <div class="flex items-center">
+                            <div class="w-1/2 pr-8 text-right animate-fadeInLeft">
+                                <h3 class="text-xl font-bold text-purple-600">
+                                    <i class="fas fa-fire mr-1"></i>预热期
+                                </h3>
+                                <p class="text-gray-600 mt-1">展前6个月</p>
+                                <div class="mt-3 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 text-left glass-card hover:scale-105 transition-transform">
+                                    <ul class="text-sm text-gray-700 space-y-1">
+                                        <li><i class="fas fa-check-circle text-purple-500 mr-1"></i> 品牌造势，建立认知</li>
+                                        <li><i class="fas fa-check-circle text-purple-500 mr-1"></i> 话题营销，引发关注</li>
+                                        <li><i class="fas fa-check-circle text-purple-500 mr-1"></i> KOL合作，扩大影响</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="relative flex items-center justify-center">
+                                <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 z-10 shadow-lg pulse-dot">
+                                    <i class="fas fa-flag text-lg"></i>
+                                </div>
+                            </div>
+                            <div class="w-1/2 pl-8"></div>
+                        </div>
+
+                        <!-- Phase 2 -->
+                        <div class="flex items-center">
+                            <div class="w-1/2 pr-8"></div>
+                            <div class="relative flex items-center justify-center">
+                                <div class="w-12 h-12 bg-white border-4 border-pink-600 rounded-full flex items-center justify-center z-10">
+                                    <span class="text-pink-600 font-bold">2</span>
+                                </div>
+                            </div>
+                            <div class="w-1/2 pl-8">
+                                <h3 class="text-xl font-bold text-pink-600">推广期</h3>
+                                <p class="text-gray-600 mt-1">展前3个月</p>
+                                <div class="mt-3 bg-pink-50 rounded-lg p-4">
+                                    <ul class="text-sm text-gray-700 space-y-1">
+                                        <li>• 精准投放，定向推广</li>
+                                        <li>• 观众组织，团体邀请</li>
+                                        <li>• 媒体合作，深度报道</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Phase 3 -->
+                        <div class="flex items-center">
+                            <div class="w-1/2 pr-8 text-right">
+                                <h3 class="text-xl font-bold text-blue-600">冲刺期</h3>
+                                <p class="text-gray-600 mt-1">展前1个月</p>
+                                <div class="mt-3 bg-blue-50 rounded-lg p-4 text-left">
+                                    <ul class="text-sm text-gray-700 space-y-1">
+                                        <li>• 密集宣传，全面覆盖</li>
+                                        <li>• 氛围营造，期待感拉满</li>
+                                        <li>• 最后召集，确保参与</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="relative flex items-center justify-center">
+                                <div class="w-12 h-12 bg-white border-4 border-blue-600 rounded-full flex items-center justify-center z-10">
+                                    <span class="text-blue-600 font-bold">3</span>
+                                </div>
+                            </div>
+                            <div class="w-1/2 pl-8"></div>
+                        </div>
+
+                        <!-- Phase 4 -->
+                        <div class="flex items-center">
+                            <div class="w-1/2 pr-8"></div>
+                            <div class="relative flex items-center justify-center">
+                                <div class="w-12 h-12 bg-white border-4 border-green-600 rounded-full flex items-center justify-center z-10">
+                                    <span class="text-green-600 font-bold">4</span>
+                                </div>
+                            </div>
+                            <div class="w-1/2 pl-8">
+                                <h3 class="text-xl font-bold text-green-600">展期</h3>
+                                <p class="text-gray-600 mt-1">9月12-15日</p>
+                                <div class="mt-3 bg-green-50 rounded-lg p-4">
+                                    <ul class="text-sm text-gray-700 space-y-1">
+                                        <li>• 现场互动，实时传播</li>
+                                        <li>• 媒体报道，扩大影响</li>
+                                        <li>• 直播分享，线上参与</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Phase 5 -->
+                        <div class="flex items-center">
+                            <div class="w-1/2 pr-8 text-right">
+                                <h3 class="text-xl font-bold text-orange-600">展后</h3>
+                                <p class="text-gray-600 mt-1">展后1个月</p>
+                                <div class="mt-3 bg-orange-50 rounded-lg p-4 text-left">
+                                    <ul class="text-sm text-gray-700 space-y-1">
+                                        <li>• 持续发酵，延长热度</li>
+                                        <li>• 成果展示，价值传递</li>
+                                        <li>• 下届预热，维系关系</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="relative flex items-center justify-center">
+                                <div class="w-12 h-12 bg-white border-4 border-orange-600 rounded-full flex items-center justify-center z-10">
+                                    <span class="text-orange-600 font-bold">5</span>
+                                </div>
+                            </div>
+                            <div class="w-1/2 pl-8"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Online Marketing -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">线上推广方案</h2>
+            
+            <!-- Digital Channels Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+                <!-- Official Website -->
+                <div class="strategy-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
+                            <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold">官方网站</h3>
+                    </div>
+                    <ul class="space-y-2 text-gray-600 text-sm">
+                        <li>✓ 在线注册系统</li>
+                        <li>✓ 3D展馆导航</li>
+                        <li>✓ VR预览体验</li>
+                        <li>✓ 展商数据库</li>
+                        <li>✓ 活动预约系统</li>
+                    </ul>
+                    <div class="mt-4 pt-4 border-t">
+                        <div class="flex justify-between text-sm">
+                            <span class="text-gray-500">预计访问量</span>
+                            <span class="font-bold text-blue-600">100万+</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Social Media -->
+                <div class="strategy-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
+                            <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"/>
+                                <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold">社交媒体</h3>
+                    </div>
+                    <div class="space-y-3">
+                        <div class="bg-gray-50 rounded-lg p-3">
+                            <div class="flex items-center justify-between mb-1">
+                                <span class="text-sm font-semibold">微信</span>
+                                <span class="text-xs text-gray-500">50万粉丝</span>
+                            </div>
+                            <div class="text-xs text-gray-600">公众号推送、朋友圈广告</div>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-3">
+                            <div class="flex items-center justify-between mb-1">
+                                <span class="text-sm font-semibold">微博</span>
+                                <span class="text-xs text-gray-500">30万粉丝</span>
+                            </div>
+                            <div class="text-xs text-gray-600">#绿色出行看长三角#</div>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-3">
+                            <div class="flex items-center justify-between mb-1">
+                                <span class="text-sm font-semibold">抖音/快手</span>
+                                <span class="text-xs text-gray-500">80万粉丝</span>
+                            </div>
+                            <div class="text-xs text-gray-600">短视频、直播互动</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Digital Advertising -->
+                <div class="strategy-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
+                            <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.293a1 1 0 00-1.414 1.414L14.586 10l-1.293 1.293a1 1 0 101.414 1.414L16 11.414l1.293 1.293a1 1 0 001.414-1.414L17.414 10l1.293-1.293a1 1 0 00-1.414-1.414L16 8.586l-1.293-1.293z" clip-rule="evenodd"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold">数字广告</h3>
+                    </div>
+                    <div class="space-y-2 text-sm">
+                        <div class="flex items-center justify-between py-2 border-b">
+                            <span class="text-gray-600">搜索引擎SEM</span>
+                            <span class="font-semibold">200万预算</span>
+                        </div>
+                        <div class="flex items-center justify-between py-2 border-b">
+                            <span class="text-gray-600">信息流广告</span>
+                            <span class="font-semibold">150万预算</span>
+                        </div>
+                        <div class="flex items-center justify-between py-2">
+                            <span class="text-gray-600">垂直媒体</span>
+                            <span class="font-semibold">100万预算</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Email Marketing -->
+                <div class="strategy-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mr-4">
+                            <svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold">邮件营销</h3>
+                    </div>
+                    <div class="bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg p-4">
+                        <div class="grid grid-cols-2 gap-4 text-center">
+                            <div>
+                                <div class="text-2xl font-bold text-orange-600">10万+</div>
+                                <div class="text-xs text-gray-600">数据库联系人</div>
+                            </div>
+                            <div>
+                                <div class="text-2xl font-bold text-orange-600">2期/月</div>
+                                <div class="text-xs text-gray-600">发送频次</div>
+                            </div>
+                        </div>
+                    </div>
+                    <ul class="mt-4 space-y-1 text-xs text-gray-600">
+                        <li>• 展商推介</li>
+                        <li>• 活动预告</li>
+                        <li>• 行业资讯</li>
+                    </ul>
+                </div>
+
+                <!-- Live Streaming -->
+                <div class="strategy-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
+                            <svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold">直播营销</h3>
+                    </div>
+                    <div class="space-y-3">
+                        <div class="flex items-center">
+                            <div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
+                            <span class="text-sm">展前预热直播：5场</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
+                            <span class="text-sm">展期现场直播：全程</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-2 h-2 bg-red-600 rounded-full pulse-dot mr-2"></div>
+                            <span class="text-sm">专家访谈：20场</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- KOL Cooperation -->
+                <div class="strategy-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mr-4">
+                            <svg class="w-6 h-6 text-pink-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-xl font-bold">KOL合作</h3>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="bg-pink-50 rounded-lg p-2 text-center">
+                            <div class="text-lg font-bold text-pink-600">50+</div>
+                            <div class="text-xs text-gray-600">汽车领域KOL</div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-2 text-xs">
+                            <div class="bg-gray-50 rounded p-2 text-center">
+                                <div class="font-semibold">探店视频</div>
+                                <div class="text-gray-500">30个</div>
+                            </div>
+                            <div class="bg-gray-50 rounded p-2 text-center">
+                                <div class="font-semibold">测评内容</div>
+                                <div class="text-gray-500">50篇</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Online Campaign Performance -->
+            <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white">
+                <h3 class="text-2xl font-bold mb-6">线上推广预期效果</h3>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                    <div class="text-center">
+                        <div class="text-3xl font-bold mb-2">1亿+</div>
+                        <div class="text-blue-100">总曝光量</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl font-bold mb-2">500万+</div>
+                        <div class="text-blue-100">互动量</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl font-bold mb-2">10万+</div>
+                        <div class="text-blue-100">注册用户</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl font-bold mb-2">85%</div>
+                        <div class="text-blue-100">转化率</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Offline Marketing -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">线下推广方案</h2>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Traditional Media -->
+                <div>
+                    <h3 class="text-2xl font-bold mb-6 text-purple-600">传统媒体投放</h3>
+                    <div class="space-y-4">
+                        <div class="bg-gray-50 rounded-lg p-5">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-3">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold">平面媒体</h4>
+                                    <p class="text-sm text-gray-600">行业杂志、报纸广告</p>
+                                </div>
+                            </div>
+                            <ul class="text-sm text-gray-700 space-y-1 ml-13">
+                                <li>• 《中国汽车报》整版广告 x 3期</li>
+                                <li>• 《汽车之家》杂志封面广告</li>
+                                <li>• 《新能源汽车》专题报道</li>
+                            </ul>
+                        </div>
+
+                        <div class="bg-gray-50 rounded-lg p-5">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-green-600 text-white rounded-lg flex items-center justify-center mr-3">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold">广播电台</h4>
+                                    <p class="text-sm text-gray-600">交通广播黄金时段</p>
+                                </div>
+                            </div>
+                            <ul class="text-sm text-gray-700 space-y-1 ml-13">
+                                <li>• 上海交通广播早晚高峰广告</li>
+                                <li>• 专题访谈节目3期</li>
+                                <li>• 路况播报植入</li>
+                            </ul>
+                        </div>
+
+                        <div class="bg-gray-50 rounded-lg p-5">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-3">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2a2 2 0 100-4V6z"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold">行业活动</h4>
+                                    <p class="text-sm text-gray-600">参展推广、论坛宣传</p>
+                                </div>
+                            </div>
+                            <ul class="text-sm text-gray-700 space-y-1 ml-13">
+                                <li>• 北京车展展位推广</li>
+                                <li>• 广州车展路演活动</li>
+                                <li>• 行业峰会主题演讲</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Outdoor Advertising -->
+                <div>
+                    <h3 class="text-2xl font-bold mb-6 text-blue-600">户外广告投放</h3>
+                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6">
+                        <div class="grid grid-cols-2 gap-4 mb-6">
+                            <div class="bg-white rounded-lg p-4 text-center">
+                                <div class="text-2xl font-bold text-blue-600 mb-1">50块</div>
+                                <div class="text-sm text-gray-600">LED大屏广告</div>
+                                <div class="text-xs text-gray-500 mt-1">核心商圈覆盖</div>
+                            </div>
+                            <div class="bg-white rounded-lg p-4 text-center">
+                                <div class="text-2xl font-bold text-purple-600 mb-1">200个</div>
+                                <div class="text-sm text-gray-600">地铁灯箱</div>
+                                <div class="text-xs text-gray-500 mt-1">2/10/17号线</div>
+                            </div>
+                            <div class="bg-white rounded-lg p-4 text-center">
+                                <div class="text-2xl font-bold text-green-600 mb-1">30块</div>
+                                <div class="text-sm text-gray-600">高速广告牌</div>
+                                <div class="text-xs text-gray-500 mt-1">沪宁、沪杭高速</div>
+                            </div>
+                            <div class="bg-white rounded-lg p-4 text-center">
+                                <div class="text-2xl font-bold text-orange-600 mb-1">100辆</div>
+                                <div class="text-sm text-gray-600">公交车身</div>
+                                <div class="text-xs text-gray-500 mt-1">主要线路</div>
+                            </div>
+                        </div>
+                        
+                        <div class="bg-white rounded-lg p-4">
+                            <h4 class="font-semibold mb-3">投放策略</h4>
+                            <div class="space-y-2 text-sm">
+                                <div class="flex items-center">
+                                    <div class="w-4 h-4 bg-blue-600 rounded-full mr-2"></div>
+                                    <span>展前3个月开始投放</span>
+                                </div>
+                                <div class="flex items-center">
+                                    <div class="w-4 h-4 bg-purple-600 rounded-full mr-2"></div>
+                                    <span>重点覆盖长三角核心城市</span>
+                                </div>
+                                <div class="flex items-center">
+                                    <div class="w-4 h-4 bg-green-600 rounded-full mr-2"></div>
+                                    <span>高频次、多触点接触</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Precision Invitation -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">精准邀请方案</h2>
+            
+            <div class="max-w-4xl mx-auto">
+                <!-- Invitation Process -->
+                <div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8">
+                    <div class="bg-gradient-to-r from-green-600 to-teal-600 text-white p-6">
+                        <h3 class="text-2xl font-bold">专业观众邀请体系</h3>
+                    </div>
+                    <div class="p-6">
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div class="text-center">
+                                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                                        <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
+                                    </svg>
+                                </div>
+                                <h4 class="font-semibold mb-2">呼叫中心</h4>
+                                <p class="text-sm text-gray-600">20人专业团队</p>
+                                <p class="text-xs text-gray-500 mt-1">日均呼叫1000+</p>
+                            </div>
+                            <div class="text-center">
+                                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <h4 class="font-semibold mb-2">一对一邀请</h4>
+                                <p class="text-sm text-gray-600">VIP客户定制</p>
+                                <p class="text-xs text-gray-500 mt-1">500+重点客户</p>
+                            </div>
+                            <div class="text-center">
+                                <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <svg class="w-10 h-10 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                                        <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
+                                    </svg>
+                                </div>
+                                <h4 class="font-semibold mb-2">团体邀请</h4>
+                                <p class="text-sm text-gray-600">协会组织参观</p>
+                                <p class="text-xs text-gray-500 mt-1">50+团体</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Buyer Matching Service -->
+                <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
+                    <h3 class="text-2xl font-bold mb-6">买家匹配服务</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="bg-white/10 backdrop-blur rounded-lg p-4">
+                            <h4 class="font-semibold mb-2">会前</h4>
+                            <ul class="text-sm space-y-1 opacity-90">
+                                <li>• 在线预约系统</li>
+                                <li>• AI智能匹配</li>
+                                <li>• 需求精准对接</li>
+                            </ul>
+                        </div>
+                        <div class="bg-white/10 backdrop-blur rounded-lg p-4">
+                            <h4 class="font-semibold mb-2">展中</h4>
+                            <ul class="text-sm space-y-1 opacity-90">
+                                <li>• 商务洽谈区</li>
+                                <li>• 专场对接会</li>
+                                <li>• 现场撮合服务</li>
+                            </ul>
+                        </div>
+                        <div class="bg-white/10 backdrop-blur rounded-lg p-4">
+                            <h4 class="font-semibold mb-2">展后</h4>
+                            <ul class="text-sm space-y-1 opacity-90">
+                                <li>• 持续跟进</li>
+                                <li>• 促成交易</li>
+                                <li>• 效果评估</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Marketing Budget -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">营销预算分配</h2>
+            
+            <div class="max-w-3xl mx-auto">
+                <div class="bg-gray-50 rounded-2xl p-8">
+                    <div class="space-y-4">
+                        <div class="flex items-center">
+                            <div class="flex-1">
+                                <div class="flex justify-between mb-2">
+                                    <span class="font-semibold">线上推广</span>
+                                    <span class="text-purple-600 font-bold">80万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-4">
+                                    <div class="bg-purple-600 h-4 rounded-full progress-bar" style="width: 40%"></div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center">
+                            <div class="flex-1">
+                                <div class="flex justify-between mb-2">
+                                    <span class="font-semibold">线下推广</span>
+                                    <span class="text-blue-600 font-bold">60万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-4">
+                                    <div class="bg-blue-600 h-4 rounded-full progress-bar" style="width: 30%; animation-delay: 0.2s"></div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center">
+                            <div class="flex-1">
+                                <div class="flex justify-between mb-2">
+                                    <span class="font-semibold">媒体合作</span>
+                                    <span class="text-green-600 font-bold">40万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-4">
+                                    <div class="bg-green-600 h-4 rounded-full progress-bar" style="width: 20%; animation-delay: 0.4s"></div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center">
+                            <div class="flex-1">
+                                <div class="flex justify-between mb-2">
+                                    <span class="font-semibold">精准邀请</span>
+                                    <span class="text-orange-600 font-bold">20万</span>
+                                </div>
+                                <div class="bg-gray-200 rounded-full h-4">
+                                    <div class="bg-orange-600 h-4 rounded-full progress-bar" style="width: 10%; animation-delay: 0.6s"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-6 pt-6 border-t text-center">
+                        <div class="text-3xl font-bold text-gray-800">总预算：200万元</div>
+                        <div class="text-gray-600 mt-2">预期ROI：500%</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 bg-gradient-to-r from-pink-600 to-purple-600 text-white">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl font-bold mb-6">全方位营销，确保展会成功</h2>
+            <p class="text-xl mb-8 opacity-90">了解现场运营方案，体验展会精彩</p>
+            <a href="operation.html" class="inline-block bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+                查看现场运营 →
+            </a>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="text-center text-sm text-gray-400">
+                <p>&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+</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
new file mode 100644
index 00000000..f2d2b387
--- /dev/null
+++ b/web_frontend/web_result/pages/operation.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<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">
+    <style>
+        * {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+        .nav-link {
+            position: relative;
+            transition: color 0.3s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: #667eea;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after,
+        .nav-link.active::after {
+            width: 100%;
+        }
+        .area-card {
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .area-card:hover {
+            transform: scale(1.05);
+            z-index: 10;
+        }
+        .service-icon {
+            animation: float 3s ease-in-out infinite;
+        }
+        .service-icon:nth-child(2) { animation-delay: 0.5s; }
+        .service-icon:nth-child(3) { animation-delay: 1s; }
+        .service-icon:nth-child(4) { animation-delay: 1.5s; }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .floor-plan {
+            background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+                        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+                        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
+                        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+            background-size: 20px 20px;
+            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+        }
+        .activity-timeline {
+            position: relative;
+        }
+        .activity-timeline::before {
+            content: '';
+            position: absolute;
+            left: 20px;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: linear-gradient(to bottom, #667eea, #764ba2);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full bg-white shadow-md z-50">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
+                    </svg>
+                    <span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
+                    <a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
+                    <a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
+                    <a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
+                    <a href="operation.html" class="nav-link active text-gray-700 hover:text-purple-600">现场运营</a>
+                    <a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
+                    <a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Page Header -->
+    <section class="bg-gradient-to-r from-teal-600 to-blue-600 text-white pt-24 pb-12">
+        <div class="container mx-auto px-6">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">现场运营方案</h1>
+            <p class="text-xl opacity-90">专业化展会运营，打造卓越参展体验</p>
+        </div>
+    </section>
+
+    <!-- Exhibition Hall Layout -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展馆布局规划</h2>
+            
+            <!-- 3D Floor Plan Visualization -->
+            <div class="max-w-6xl mx-auto mb-12">
+                <div class="floor-plan rounded-2xl p-8 shadow-lg bg-white">
+                    <div class="grid grid-cols-3 gap-4">
+                        <!-- Hall A - 整车展示区 -->
+                        <div class="area-card col-span-2 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
+                            <div class="flex items-center justify-between mb-4">
+                                <h3 class="text-xl font-bold">A馆 - 整车展示区</h3>
+                                <span class="bg-white/20 px-3 py-1 rounded-full text-sm">20,000㎡</span>
+                            </div>
+                            <div class="grid grid-cols-2 gap-3 text-sm">
+                                <div class="bg-white/10 rounded p-2">特斯拉展区</div>
+                                <div class="bg-white/10 rounded p-2">比亚迪展区</div>
+                                <div class="bg-white/10 rounded p-2">蔚来展区</div>
+                                <div class="bg-white/10 rounded p-2">理想展区</div>
+                            </div>
+                        </div>
+                        
+                        <!-- Hall B - 核心零部件 -->
+                        <div class="area-card bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white">
+                            <h3 class="text-lg font-bold mb-2">B馆 - 核心零部件</h3>
+                            <span class="bg-white/20 px-3 py-1 rounded-full text-sm">15,000㎡</span>
+                            <div class="mt-3 space-y-1 text-xs">
+                                <div>• 动力电池区</div>
+                                <div>• 驱动电机区</div>
+                                <div>• 电控系统区</div>
+                            </div>
+                        </div>
+                        
+                        <!-- Hall C - 智能交通 -->
+                        <div class="area-card bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white">
+                            <h3 class="text-lg font-bold mb-2">C馆 - 智能交通</h3>
+                            <span class="bg-white/20 px-3 py-1 rounded-full text-sm">10,000㎡</span>
+                            <div class="mt-3 space-y-1 text-xs">
+                                <div>• V2X展示</div>
+                                <div>• 智慧路网</div>
+                                <div>• 自动驾驶</div>
+                            </div>
+                        </div>
+                        
+                        <!-- Outdoor Area -->
+                        <div class="area-card bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white">
+                            <h3 class="text-lg font-bold mb-2">室外 - 体验区</h3>
+                            <span class="bg-white/20 px-3 py-1 rounded-full text-sm">5,000㎡</span>
+                            <div class="mt-3 space-y-1 text-xs">
+                                <div>• 试乘试驾</div>
+                                <div>• 自动泊车</div>
+                                <div>• 充电演示</div>
+                            </div>
+                        </div>
+                        
+                        <!-- Service Area -->
+                        <div class="area-card bg-gradient-to-br from-gray-500 to-gray-600 rounded-xl p-6 text-white">
+                            <h3 class="text-lg font-bold mb-2">配套服务区</h3>
+                            <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
+                                <div class="bg-white/10 rounded p-1">会议室</div>
+                                <div class="bg-white/10 rounded p-1">商务中心</div>
+                                <div class="bg-white/10 rounded p-1">餐饮区</div>
+                                <div class="bg-white/10 rounded p-1">休息区</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Legend -->
+                    <div class="mt-6 pt-6 border-t border-gray-200">
+                        <div class="flex items-center justify-center space-x-6 text-sm">
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 bg-blue-500 rounded mr-2"></div>
+                                <span>整车展示</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 bg-green-500 rounded mr-2"></div>
+                                <span>零部件</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 bg-purple-500 rounded mr-2"></div>
+                                <span>智能交通</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 bg-orange-500 rounded mr-2"></div>
+                                <span>体验区</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Traffic Flow Design -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="bg-gray-50 rounded-xl p-6">
+                    <h3 class="text-xl font-bold mb-4 text-gray-800">参观动线设计</h3>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">1</div>
+                            <div>
+                                <p class="font-semibold">入口接待区</p>
+                                <p class="text-sm text-gray-600">快速登记、资料领取、导览服务</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">2</div>
+                            <div>
+                                <p class="font-semibold">主展示路线</p>
+                                <p class="text-sm text-gray-600">整车→零部件→智能交通，单向循环</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">3</div>
+                            <div>
+                                <p class="font-semibold">体验互动区</p>
+                                <p class="text-sm text-gray-600">试乘试驾、VR体验、技术演示</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-3">4</div>
+                            <div>
+                                <p class="font-semibold">商务洽谈区</p>
+                                <p class="text-sm text-gray-600">B2B对接、合作洽谈、签约仪式</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                
+                <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-6">
+                    <h3 class="text-xl font-bold mb-4 text-gray-800">智能导览系统</h3>
+                    <div class="space-y-4">
+                        <div class="bg-white rounded-lg p-4 shadow">
+                            <h4 class="font-semibold mb-2">AR导航</h4>
+                            <p class="text-sm text-gray-600">手机扫码即可获得AR实景导航，精准定位展位</p>
+                        </div>
+                        <div class="bg-white rounded-lg p-4 shadow">
+                            <h4 class="font-semibold mb-2">AI推荐</h4>
+                            <p class="text-sm text-gray-600">根据观众兴趣智能推荐参观路线和展商</p>
+                        </div>
+                        <div class="bg-white rounded-lg p-4 shadow">
+                            <h4 class="font-semibold mb-2">实时热力图</h4>
+                            <p class="text-sm text-gray-600">显示各展区人流密度，避开拥挤区域</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- On-site Services -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">现场服务体系</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Registration Service -->
+                <div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
+                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 2a1 1 0 00-1 1v1a1 1 0 002 0V3a1 1 0 00-1-1zM4 4h3a3 3 0 006 0h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm2.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm2.45 4a2.5 2.5 0 10-4.9 0h4.9zM12 9a1 1 0 100 2h3a1 1 0 100-2h-3zm-1 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z" clip-rule="evenodd"/>
+                        </svg>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">登记服务</h3>
+                    <ul class="text-sm text-gray-600 space-y-1">
+                        <li>• 电子签到系统</li>
+                        <li>• 人脸识别入场</li>
+                        <li>• VIP快速通道</li>
+                        <li>• 实时数据统计</li>
+                    </ul>
+                </div>
+
+                <!-- Consultation Service -->
+                <div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
+                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
+                        </svg>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">咨询服务</h3>
+                    <ul class="text-sm text-gray-600 space-y-1">
+                        <li>• 多语言服务台</li>
+                        <li>• AI机器人导览</li>
+                        <li>• 专业咨询顾问</li>
+                        <li>• 24小时热线</li>
+                    </ul>
+                </div>
+
+                <!-- Business Service -->
+                <div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
+                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"/>
+                            <path d="M3 5a2 2 0 012-2 1 1 0 000 2H5a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-5.5a1 1 0 00-.5.5v10z"/>
+                        </svg>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">商务服务</h3>
+                    <ul class="text-sm text-gray-600 space-y-1">
+                        <li>• 会议室租赁</li>
+                        <li>• 同声传译</li>
+                        <li>• 商务对接</li>
+                        <li>• 文印服务</li>
+                    </ul>
+                </div>
+
+                <!-- Logistics Service -->
+                <div class="bg-white rounded-xl shadow-lg p-6 text-center service-icon">
+                    <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg class="w-8 h-8 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
+                        </svg>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">后勤保障</h3>
+                    <ul class="text-sm text-gray-600 space-y-1">
+                        <li>• 餐饮服务</li>
+                        <li>• 医疗急救</li>
+                        <li>• 安保服务</li>
+                        <li>• 清洁维护</li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Service Standards -->
+            <div class="mt-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white">
+                <h3 class="text-2xl font-bold mb-6 text-center">服务标准承诺</h3>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
+                    <div>
+                        <div class="text-3xl font-bold mb-2">< 3分钟</div>
+                        <div class="text-blue-100">平均排队时间</div>
+                    </div>
+                    <div>
+                        <div class="text-3xl font-bold mb-2">< 5分钟</div>
+                        <div class="text-blue-100">问题响应时间</div>
+                    </div>
+                    <div>
+                        <div class="text-3xl font-bold mb-2">100%</div>
+                        <div class="text-blue-100">服务覆盖率</div>
+                    </div>
+                    <div>
+                        <div class="text-3xl font-bold mb-2">95%+</div>
+                        <div class="text-blue-100">满意度目标</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Activity Schedule -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">活动安排</h2>
+            
+            <div class="max-w-4xl mx-auto">
+                <!-- Opening Ceremony -->
+                <div class="mb-8">
+                    <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
+                        <h3 class="text-2xl font-bold mb-4">开幕典礼</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <p class="mb-2"><strong>时间：</strong>9月12日 09:00-10:00</p>
+                                <p class="mb-2"><strong>地点：</strong>主会场</p>
+                                <p><strong>规模：</strong>1000人</p>
+                            </div>
+                            <div>
+                                <p class="font-semibold mb-2">流程安排：</p>
+                                <ul class="text-sm space-y-1 opacity-90">
+                                    <li>• 领导致辞</li>
+                                    <li>• 启动仪式</li>
+                                    <li>• 战略签约</li>
+                                    <li>• 媒体采访</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Forums Timeline -->
+                <div class="activity-timeline">
+                    <h3 class="text-2xl font-bold mb-8 text-gray-800">主题论坛</h3>
+                    
+                    <div class="space-y-6">
+                        <!-- Forum 1 -->
+                        <div class="flex items-start ml-12">
+                            <div class="w-10 h-10 bg-white border-4 border-blue-600 rounded-full flex items-center justify-center -ml-5 mt-1">
+                                <span class="text-xs font-bold">1</span>
+                            </div>
+                            <div class="ml-6 flex-1">
+                                <div class="bg-blue-50 rounded-lg p-5">
+                                    <h4 class="font-bold text-lg mb-2">新能源汽车产业发展论坛</h4>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                                        <div>
+                                            <p class="text-gray-600">时间：9月12日 10:00-12:00</p>
+                                            <p class="text-gray-600">规模：500人</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-gray-600">嘉宾：行业领袖10位</p>
+                                            <p class="text-gray-600">主题：产业趋势与机遇</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Forum 2 -->
+                        <div class="flex items-start ml-12">
+                            <div class="w-10 h-10 bg-white border-4 border-green-600 rounded-full flex items-center justify-center -ml-5 mt-1">
+                                <span class="text-xs font-bold">2</span>
+                            </div>
+                            <div class="ml-6 flex-1">
+                                <div class="bg-green-50 rounded-lg p-5">
+                                    <h4 class="font-bold text-lg mb-2">智能网联技术创新峰会</h4>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                                        <div>
+                                            <p class="text-gray-600">时间：9月13日 09:30-11:30</p>
+                                            <p class="text-gray-600">规模：400人</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-gray-600">嘉宾：技术专家8位</p>
+                                            <p class="text-gray-600">主题：自动驾驶与V2X</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Forum 3 -->
+                        <div class="flex items-start ml-12">
+                            <div class="w-10 h-10 bg-white border-4 border-purple-600 rounded-full flex items-center justify-center -ml-5 mt-1">
+                                <span class="text-xs font-bold">3</span>
+                            </div>
+                            <div class="ml-6 flex-1">
+                                <div class="bg-purple-50 rounded-lg p-5">
+                                    <h4 class="font-bold text-lg mb-2">充电基础设施建设研讨会</h4>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                                        <div>
+                                            <p class="text-gray-600">时间：9月13日 14:00-16:00</p>
+                                            <p class="text-gray-600">规模：300人</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-gray-600">嘉宾：运营商代表6位</p>
+                                            <p class="text-gray-600">主题：充电网络建设</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Forum 4 -->
+                        <div class="flex items-start ml-12">
+                            <div class="w-10 h-10 bg-white border-4 border-orange-600 rounded-full flex items-center justify-center -ml-5 mt-1">
+                                <span class="text-xs font-bold">4</span>
+                            </div>
+                            <div class="ml-6 flex-1">
+                                <div class="bg-orange-50 rounded-lg p-5">
+                                    <h4 class="font-bold text-lg mb-2">产业投资论坛</h4>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                                        <div>
+                                            <p class="text-gray-600">时间：9月15日 09:00-11:00</p>
+                                            <p class="text-gray-600">规模：200人</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-gray-600">嘉宾：投资机构15家</p>
+                                            <p class="text-gray-600">主题：资本与产业融合</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Interactive Experience -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">互动体验活动</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Test Drive -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="h-48 bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
+                        <svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
+                            <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-3">试乘试驾体验</h3>
+                        <p class="text-gray-600 mb-4">专业赛道，30+车型，专业教练指导</p>
+                        <ul class="text-sm text-gray-500 space-y-2">
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                                每日500个体验名额
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                                3公里专业测试赛道
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                                自动驾驶体验专区
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- VR Experience -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="h-48 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
+                        <svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
+                            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-3">VR虚拟体验</h3>
+                        <p class="text-gray-600 mb-4">沉浸式体验未来出行场景</p>
+                        <ul class="text-sm text-gray-500 space-y-2">
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
+                                未来城市驾驶模拟
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
+                                智能工厂虚拟参观
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
+                                新能源技术可视化
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Innovation Contest -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="h-48 bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
+                        <svg class="w-20 h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
+                        </svg>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-3">创新科技大赛</h3>
+                        <p class="text-gray-600 mb-4">青少年科技创新竞赛活动</p>
+                        <ul class="text-sm text-gray-500 space-y-2">
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
+                                智能小车编程赛
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
+                                新能源创意设计
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
+                                总奖金10万元
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Exhibition Design -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">展陈设计理念</h2>
+            
+            <div class="max-w-5xl mx-auto">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <!-- Design Concept -->
+                    <div class="lg:col-span-2">
+                        <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-8">
+                            <h3 class="text-2xl font-bold mb-6">设计核心理念</h3>
+                            <div class="space-y-4">
+                                <div class="flex items-start">
+                                    <div class="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center flex-shrink-0 mr-4">
+                                        <span class="font-bold">科技</span>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-semibold mb-1">科技感设计</h4>
+                                        <p class="text-sm text-gray-600">运用LED大屏、全息投影、互动装置，营造未来科技氛围</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-start">
+                                    <div class="w-12 h-12 bg-green-600 text-white rounded-lg flex items-center justify-center flex-shrink-0 mr-4">
+                                        <span class="font-bold">环保</span>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-semibold mb-1">绿色环保</h4>
+                                        <p class="text-sm text-gray-600">采用可回收材料，节能照明系统，体现绿色展会理念</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-start">
+                                    <div class="w-12 h-12 bg-purple-600 text-white rounded-lg flex items-center justify-center flex-shrink-0 mr-4">
+                                        <span class="font-bold">未来</span>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-semibold mb-1">未来感呈现</h4>
+                                        <p class="text-sm text-gray-600">流线型设计，动态灯光，展现新能源汽车的未来愿景</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Design Elements -->
+                    <div>
+                        <div class="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-6 text-white">
+                            <h3 class="text-xl font-bold mb-4">视觉元素</h3>
+                            <div class="space-y-3">
+                                <div>
+                                    <h4 class="font-semibold mb-1">主色调</h4>
+                                    <div class="flex space-x-2">
+                                        <div class="w-8 h-8 bg-blue-500 rounded"></div>
+                                        <div class="w-8 h-8 bg-green-500 rounded"></div>
+                                        <div class="w-8 h-8 bg-purple-500 rounded"></div>
+                                        <div class="w-8 h-8 bg-gray-300 rounded"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">字体系统</h4>
+                                    <p class="text-sm opacity-90">思源黑体 / Helvetica</p>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">图形语言</h4>
+                                    <p class="text-sm opacity-90">几何图形、流线元素</p>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">灯光设计</h4>
+                                    <p class="text-sm opacity-90">动态LED、氛围照明</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Space Layout -->
+                <div class="mt-8 bg-white rounded-2xl shadow-lg p-8">
+                    <h3 class="text-2xl font-bold mb-6">空间布局原则</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="text-center">
+                            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                                <svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <h4 class="font-semibold mb-2">流线型布局</h4>
+                            <p class="text-sm text-gray-600">顺畅的参观动线，避免人流交叉</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                                <svg class="w-10 h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <h4 class="font-semibold mb-2">体验式设计</h4>
+                            <p class="text-sm text-gray-600">注重互动体验，增强参与感</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                                <svg class="w-10 h-10 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
+                                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <h4 class="font-semibold mb-2">视觉聚焦</h4>
+                            <p class="text-sm text-gray-600">重点展品突出展示，层次分明</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 bg-gradient-to-r from-teal-600 to-blue-600 text-white">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl font-bold mb-6">专业运营，保障展会成功</h2>
+            <p class="text-xl mb-8 opacity-90">了解展会预算规划与投资回报</p>
+            <a href="budget.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+                查看预算分析 →
+            </a>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="text-center text-sm text-gray-400">
+                <p>&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+</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 790ba1a3..3c89d9fa 100644
--- a/web_frontend/web_result/pages/overview.html
+++ b/web_frontend/web_result/pages/overview.html
@@ -4,29 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <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">
     <style>
         * {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        }
-        .nav-link {
-            position: relative;
-            transition: color 0.3s ease;
-        }
-        .nav-link::after {
-            content: '';
-            position: absolute;
-            bottom: -2px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: #667eea;
-            transition: width 0.3s ease;
-        }
-        .nav-link:hover::after,
-        .nav-link.active::after {
-            width: 100%;
+            font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         }
         .timeline-item {
             position: relative;
@@ -39,7 +24,7 @@
             top: 40px;
             height: calc(100% - 40px);
             width: 2px;
-            background: #e5e7eb;
+            background: linear-gradient(to bottom, #667eea, #a78bfa);
         }
         .timeline-item:last-child::before {
             display: none;
@@ -53,61 +38,153 @@
             border-radius: 50%;
             background: white;
             border: 3px solid #667eea;
+            box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1);
+            animation: pulse 2s infinite;
         }
-        .slide-in-left {
-            animation: slideInLeft 0.6s ease-out;
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1); }
+            50% { box-shadow: 0 0 0 12px rgba(102, 126, 234, 0); }
+            100% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.1); }
         }
-        .slide-in-right {
-            animation: slideInRight 0.6s ease-out;
+        .gradient-text {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
-        @keyframes slideInLeft {
-            from { transform: translateX(-50px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
+        .stat-card {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            position: relative;
+            overflow: hidden;
         }
-        @keyframes slideInRight {
-            from { transform: translateX(50px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            animation: rotate 20s linear infinite;
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
         }
     </style>
 </head>
 <body class="bg-gray-50">
     <!-- Navigation -->
-    <nav class="fixed top-0 w-full bg-white shadow-md z-50">
+    <nav class="fixed top-0 w-full glass-morphism shadow-md z-50 transition-all duration-300">
         <div class="container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                    <svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
-                    </svg>
-                    <span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
+                <div class="flex items-center animate-fadeInLeft">
+                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-lg flex items-center justify-center mr-3">
+                        <i class="fas fa-charging-station text-white"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-lg font-bold">NEVIT 2024</h1>
+                        <p class="text-xs text-gray-500">新能源汽车产业博览会</p>
+                    </div>
                 </div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
-                    <a href="overview.html" class="nav-link active text-gray-700 hover:text-purple-600">策划概述</a>
-                    <a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
-                    <a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
-                    <a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
-                    <a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
-                    <a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600">风险评估</a>
+                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
+                        <i class="fas fa-home mr-2"></i>首页
+                    </a>
+                    <a href="overview.html" class="nav-link active text-purple-600 font-semibold">
+                        <i class="fas fa-info-circle mr-2"></i>策划概述
+                    </a>
+                    <a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
+                        <i class="fas fa-th-large mr-2"></i>展会介绍
+                    </a>
+                    <a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
+                        <i class="fas fa-bullhorn mr-2"></i>营销方案
+                    </a>
+                    <a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
+                        <i class="fas fa-cogs mr-2"></i>现场运营
+                    </a>
+                    <a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
+                        <i class="fas fa-chart-pie mr-2"></i>预算分析
+                    </a>
+                    <a href="risk.html" class="nav-link text-gray-700 hover:text-purple-600 transition-colors">
+                        <i class="fas fa-shield-alt mr-2"></i>风险评估
+                    </a>
                 </div>
             </div>
         </div>
     </nav>
 
     <!-- Page Header -->
-    <section class="bg-gradient-to-r from-purple-600 to-blue-600 text-white pt-24 pb-12">
-        <div class="container mx-auto px-6">
-            <h1 class="text-4xl md:text-5xl font-bold mb-4">策划概述</h1>
-            <p class="text-xl opacity-90">全面了解展会策划背景、目标与核心价值</p>
+    <section class="relative bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 text-white pt-24 pb-16 overflow-hidden">
+        <div class="absolute inset-0">
+            <img src="../../data/会展策划/image/博览会.jpg" alt="博览会背景" class="w-full h-full object-cover opacity-20">
+            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-purple-900/50"></div>
+        </div>
+        <div class="absolute top-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-3xl animate-float"></div>
+        <div class="absolute bottom-10 right-10 w-40 h-40 bg-blue-400/20 rounded-full blur-3xl animate-float animation-delay-2000"></div>
+        
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="animate-fadeInUp">
+                <div class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur rounded-full mb-6">
+                    <span class="animate-pulse w-2 h-2 bg-white rounded-full mr-2"></span>
+                    <span class="text-sm font-semibold">全方位展会规划</span>
+                </div>
+                <h1 class="text-5xl md:text-6xl font-bold mb-4">
+                    <span class="block">策划概述</span>
+                </h1>
+                <p class="text-xl opacity-90 max-w-3xl">
+                    <i class="fas fa-quote-left mr-2"></i>
+                    全面了解展会策划背景、目标与核心价值，打造长三角地区最具影响力的新能源汽车产业盛会
+                    <i class="fas fa-quote-right ml-2"></i>
+                </p>
+            </div>
         </div>
     </section>
 
+    <!-- Key Stats -->
+    <section class="py-12 -mt-8 relative z-20">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-200">
+                    <div class="relative z-10">
+                        <i class="fas fa-industry text-3xl mb-3 opacity-80"></i>
+                        <div class="text-3xl font-bold mb-1">3000+</div>
+                        <div class="text-sm opacity-90">产业链企业</div>
+                    </div>
+                </div>
+                <div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-400">
+                    <div class="relative z-10">
+                        <i class="fas fa-coins text-3xl mb-3 opacity-80"></i>
+                        <div class="text-3xl font-bold mb-1">8000亿</div>
+                        <div class="text-sm opacity-90">2023年产值</div>
+                    </div>
+                </div>
+                <div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-600">
+                    <div class="relative z-10">
+                        <i class="fas fa-car text-3xl mb-3 opacity-80"></i>
+                        <div class="text-3xl font-bold mb-1">900万+</div>
+                        <div class="text-sm opacity-90">年产销量</div>
+                    </div>
+                </div>
+                <div class="stat-card text-white p-6 rounded-2xl shadow-2xl animate-fadeInUp animation-delay-800">
+                    <div class="relative z-10">
+                        <i class="fas fa-percentage text-3xl mb-3 opacity-80"></i>
+                        <div class="text-3xl font-bold mb-1">40%</div>
+                        <div class="text-sm opacity-90">全国占比</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
     <!-- Background Section -->
     <section class="py-16 bg-white">
         <div class="container mx-auto px-6">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-                <div class="slide-in-left">
-                    <h2 class="text-3xl font-bold text-gray-800 mb-6">策划背景</h2>
+                <div class="animate-fadeInLeft">
+                    <h2 class="text-3xl font-bold text-gray-800 mb-6">
+                        <i class="fas fa-globe-asia mr-3 text-purple-600"></i>策划背景
+                    </h2>
                     <div class="space-y-4 text-gray-600">
                         <p>
                             在全球碳中和目标的大背景下，新能源汽车产业正经历前所未有的发展机遇。中国作为全球最大的新能源汽车市场，2023年产销量均突破900万辆，同比增长超过35%。
@@ -126,33 +203,36 @@
                         </div>
                     </div>
                 </div>
-                <div class="slide-in-right">
-                    <div class="bg-gradient-to-br from-purple-100 to-blue-100 rounded-2xl p-8">
-                        <h3 class="text-2xl font-bold text-gray-800 mb-4">产业发展机遇</h3>
-                        <div class="space-y-3">
-                            <div class="flex items-start">
-                                <div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">1</div>
+                <div class="animate-fadeInRight">
+                    <div class="bg-gradient-to-br from-purple-100 to-blue-100 rounded-2xl p-8 relative overflow-hidden">
+                        <div class="absolute top-0 right-0 w-32 h-32 bg-purple-200/30 rounded-full blur-2xl"></div>
+                        <h3 class="text-2xl font-bold text-gray-800 mb-4 relative z-10">
+                            <i class="fas fa-rocket mr-2 text-purple-600"></i>产业发展机遇
+                        </h3>
+                        <div class="space-y-3 relative z-10">
+                            <div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
+                                <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">1</div>
                                 <div class="ml-3">
                                     <h4 class="font-semibold">政策支持力度空前</h4>
                                     <p class="text-sm text-gray-600">国家及地方政府出台多项扶持政策，推动产业快速发展</p>
                                 </div>
                             </div>
-                            <div class="flex items-start">
-                                <div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">2</div>
+                            <div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
+                                <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">2</div>
                                 <div class="ml-3">
                                     <h4 class="font-semibold">技术创新加速突破</h4>
                                     <p class="text-sm text-gray-600">电池技术、自动驾驶、车联网等关键技术不断革新</p>
                                 </div>
                             </div>
-                            <div class="flex items-start">
-                                <div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">3</div>
+                            <div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
+                                <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">3</div>
                                 <div class="ml-3">
                                     <h4 class="font-semibold">市场需求持续增长</h4>
                                     <p class="text-sm text-gray-600">消费者对新能源汽车接受度不断提高，市场潜力巨大</p>
                                 </div>
                             </div>
-                            <div class="flex items-start">
-                                <div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1">4</div>
+                            <div class="flex items-start group hover:transform hover:translate-x-2 transition-all duration-300">
+                                <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:scale-110 transition-transform">4</div>
                                 <div class="ml-3">
                                     <h4 class="font-semibold">产业链日趋完善</h4>
                                     <p class="text-sm text-gray-600">从研发到制造，从销售到服务，产业生态系统不断成熟</p>
@@ -166,18 +246,21 @@
     </section>
 
     <!-- Objectives Section -->
-    <section class="py-16 bg-gray-50">
-        <div class="container mx-auto px-6">
-            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">策划目标</h2>
+    <section class="py-16 bg-gradient-to-br from-gray-50 via-purple-50 to-indigo-50 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-5">
+            <img src="../../data/会展策划/image/展馆布置图.jpeg" alt="展馆布置" class="w-full h-full object-cover">
+        </div>
+        <div class="container mx-auto px-6 relative z-10">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
+                <i class="fas fa-bullseye mr-3 text-purple-600"></i>策划目标
+            </h2>
+            <p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">明确的目标引领，打造专业高效的展会平台</p>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
-                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-                        <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
-                            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-2v10H6V5z" clip-rule="evenodd"/>
-                        </svg>
+                <div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-300">
+                    <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
+                        <i class="fas fa-award text-white text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">品牌建设</h3>
+                    <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-blue-600 transition-colors">品牌建设</h3>
                     <p class="text-gray-600">打造长三角地区新能源汽车与智能交通领域第一展会品牌，成为行业风向标</p>
                     <div class="mt-4 pt-4 border-t">
                         <ul class="text-sm text-gray-500 space-y-1">
@@ -188,14 +271,11 @@
                     </div>
                 </div>
 
-                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
-                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-                        <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
-                        </svg>
+                <div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-400">
+                    <div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-green-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
+                        <i class="fas fa-chart-line text-white text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">商业价值</h3>
+                    <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-emerald-600 transition-colors">商业价值</h3>
                     <p class="text-gray-600">吸引300家优质展商参展，促进产业链上下游合作，实现商业价值最大化</p>
                     <div class="mt-4 pt-4 border-t">
                         <ul class="text-sm text-gray-500 space-y-1">
@@ -206,13 +286,11 @@
                     </div>
                 </div>
 
-                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
-                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-                        <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
-                        </svg>
+                <div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-500">
+                    <div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
+                        <i class="fas fa-users text-white text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">行业推动</h3>
+                    <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-purple-600 transition-colors">行业推动</h3>
                     <p class="text-gray-600">促进技术创新和产业升级，推动新能源汽车产业高质量发展</p>
                     <div class="mt-4 pt-4 border-t">
                         <ul class="text-sm text-gray-500 space-y-1">
@@ -223,13 +301,11 @@
                     </div>
                 </div>
 
-                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
-                    <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
-                        <svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
-                        </svg>
+                <div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group animate-fadeInUp animation-delay-600">
+                    <div class="w-16 h-16 bg-gradient-to-br from-orange-400 to-pink-600 rounded-2xl flex items-center justify-center mb-4 group-hover:rotate-6 transition-transform">
+                        <i class="fas fa-leaf text-white text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">社会责任</h3>
+                    <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-orange-600 transition-colors">社会责任</h3>
                     <p class="text-gray-600">推广绿色出行理念，助力碳中和目标实现，促进可持续发展</p>
                     <div class="mt-4 pt-4 border-t">
                         <ul class="text-sm text-gray-500 space-y-1">
@@ -306,12 +382,19 @@
     </section>
 
     <!-- Market Analysis -->
-    <section class="py-16 bg-gray-50">
-        <div class="container mx-auto px-6">
-            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">市场分析</h2>
+    <section class="py-16 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
+        <div class="absolute top-0 right-0 w-96 h-96 bg-purple-200/20 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-200/20 rounded-full blur-3xl"></div>
+        <div class="container mx-auto px-6 relative z-10">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-4 animate-fadeInUp">
+                <i class="fas fa-chart-bar mr-3 text-purple-600"></i>市场分析
+            </h2>
+            <p class="text-center text-gray-600 mb-12 animate-fadeInUp animation-delay-200">深入洞察产业发展趋势，精准把握市场机遇</p>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-white rounded-xl shadow-lg p-6">
-                    <h3 class="text-xl font-bold mb-4 text-purple-600">市场规模</h3>
+                <div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-300">
+                    <h3 class="text-xl font-bold mb-4 text-purple-600">
+                        <i class="fas fa-expand-arrows-alt mr-2"></i>市场规模
+                    </h3>
                     <div class="space-y-3">
                         <div class="flex justify-between items-center py-2 border-b">
                             <span class="text-gray-600">2023年销量</span>
@@ -332,8 +415,10 @@
                     </div>
                 </div>
 
-                <div class="bg-white rounded-xl shadow-lg p-6">
-                    <h3 class="text-xl font-bold mb-4 text-purple-600">产业链分布</h3>
+                <div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-400">
+                    <h3 class="text-xl font-bold mb-4 text-indigo-600">
+                        <i class="fas fa-sitemap mr-2"></i>产业链分布
+                    </h3>
                     <div class="space-y-3">
                         <div class="flex items-center">
                             <div class="w-24 text-sm text-gray-600">整车制造</div>
@@ -366,8 +451,10 @@
                     </div>
                 </div>
 
-                <div class="bg-white rounded-xl shadow-lg p-6">
-                    <h3 class="text-xl font-bold mb-4 text-purple-600">展会需求调研</h3>
+                <div class="bg-white/90 backdrop-blur rounded-xl shadow-xl p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 animate-fadeInUp animation-delay-500">
+                    <h3 class="text-xl font-bold mb-4 text-emerald-600">
+                        <i class="fas fa-poll mr-2"></i>展会需求调研
+                    </h3>
                     <div class="space-y-3">
                         <div class="bg-green-50 rounded-lg p-3">
                             <div class="flex items-center justify-between mb-1">
diff --git a/web_frontend/web_result/pages/risk.html b/web_frontend/web_result/pages/risk.html
new file mode 100644
index 00000000..0aca87c5
--- /dev/null
+++ b/web_frontend/web_result/pages/risk.html
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<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">
+    <style>
+        * {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+        .nav-link {
+            position: relative;
+            transition: color 0.3s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: #667eea;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after,
+        .nav-link.active::after {
+            width: 100%;
+        }
+        .risk-card {
+            transition: all 0.3s ease;
+        }
+        .risk-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+        }
+        .risk-level-high {
+            border-left: 4px solid #ef4444;
+        }
+        .risk-level-medium {
+            border-left: 4px solid #f59e0b;
+        }
+        .risk-level-low {
+            border-left: 4px solid #10b981;
+        }
+        .radar-chart {
+            width: 300px;
+            height: 300px;
+            position: relative;
+        }
+        .radar-chart::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: conic-gradient(from 0deg, #ef4444 0deg 72deg, #f59e0b 72deg 144deg, #3b82f6 144deg 216deg, #10b981 216deg 288deg, #8b5cf6 288deg 360deg);
+            border-radius: 50%;
+            opacity: 0.3;
+            animation: rotate 20s linear infinite;
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        .alert-pulse {
+            animation: alertPulse 2s infinite;
+        }
+        @keyframes alertPulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full bg-white shadow-md z-50">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <svg class="w-8 h-8 mr-3 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/>
+                    </svg>
+                    <span class="text-xl font-bold text-gray-800">Green Mobility 2024</span>
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="../index.html" class="nav-link text-gray-700 hover:text-purple-600">首页</a>
+                    <a href="overview.html" class="nav-link text-gray-700 hover:text-purple-600">策划概述</a>
+                    <a href="exhibition.html" class="nav-link text-gray-700 hover:text-purple-600">展会介绍</a>
+                    <a href="marketing.html" class="nav-link text-gray-700 hover:text-purple-600">营销方案</a>
+                    <a href="operation.html" class="nav-link text-gray-700 hover:text-purple-600">现场运营</a>
+                    <a href="budget.html" class="nav-link text-gray-700 hover:text-purple-600">预算分析</a>
+                    <a href="risk.html" class="nav-link active text-gray-700 hover:text-purple-600">风险评估</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Page Header -->
+    <section class="bg-gradient-to-r from-red-600 to-orange-600 text-white pt-24 pb-12">
+        <div class="container mx-auto px-6">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">风险评估与应急预案</h1>
+            <p class="text-xl opacity-90">全面识别风险，制定应对策略，确保展会安全顺利</p>
+        </div>
+    </section>
+
+    <!-- Risk Overview -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">风险评估总览</h2>
+                <p class="text-gray-600">识别潜在风险，评估影响程度，制定防控措施</p>
+            </div>
+            
+            <!-- Risk Level Distribution -->
+            <div class="max-w-4xl mx-auto mb-12">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-red-50 border-2 border-red-200 rounded-xl p-6 text-center">
+                        <div class="w-16 h-16 bg-red-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
+                            <span class="text-2xl font-bold">3</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-red-600 mb-1">高风险</h3>
+                        <p class="text-sm text-gray-600">需重点关注防控</p>
+                    </div>
+                    <div class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-6 text-center">
+                        <div class="w-16 h-16 bg-yellow-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
+                            <span class="text-2xl font-bold">5</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-yellow-600 mb-1">中风险</h3>
+                        <p class="text-sm text-gray-600">制定应对措施</p>
+                    </div>
+                    <div class="bg-green-50 border-2 border-green-200 rounded-xl p-6 text-center">
+                        <div class="w-16 h-16 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
+                            <span class="text-2xl font-bold">4</span>
+                        </div>
+                        <h3 class="text-lg font-bold text-green-600 mb-1">低风险</h3>
+                        <p class="text-sm text-gray-600">常规监控管理</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Risk Matrix -->
+            <div class="max-w-5xl mx-auto">
+                <div class="bg-gray-50 rounded-2xl p-8">
+                    <h3 class="text-2xl font-bold mb-6 text-center">风险矩阵分析</h3>
+                    <div class="grid grid-cols-3 gap-4">
+                        <div class="text-center">
+                            <div class="font-semibold text-gray-700 mb-2">低概率</div>
+                            <div class="space-y-2">
+                                <div class="bg-yellow-100 rounded p-2 text-sm">疫情反复</div>
+                                <div class="bg-green-100 rounded p-2 text-sm">技术故障</div>
+                            </div>
+                        </div>
+                        <div class="text-center">
+                            <div class="font-semibold text-gray-700 mb-2">中概率</div>
+                            <div class="space-y-2">
+                                <div class="bg-yellow-100 rounded p-2 text-sm">参展商不足</div>
+                                <div class="bg-orange-100 rounded p-2 text-sm">恶劣天气</div>
+                            </div>
+                        </div>
+                        <div class="text-center">
+                            <div class="font-semibold text-gray-700 mb-2">高概率</div>
+                            <div class="space-y-2">
+                                <div class="bg-red-100 rounded p-2 text-sm">市场竞争</div>
+                                <div class="bg-yellow-100 rounded p-2 text-sm">观众流量</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-6 pt-6 border-t flex justify-center space-x-8 text-sm">
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 bg-green-200 rounded mr-2"></div>
+                            <span>低影响</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 bg-yellow-200 rounded mr-2"></div>
+                            <span>中影响</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 bg-red-200 rounded mr-2"></div>
+                            <span>高影响</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Market Risk -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">市场风险分析</h2>
+            
+            <div class="max-w-6xl mx-auto">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <!-- Risk Factors -->
+                    <div>
+                        <div class="bg-white rounded-xl shadow-lg p-6 risk-card risk-level-high">
+                            <div class="flex items-center mb-4">
+                                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
+                                    <svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-bold">行业政策变化</h3>
+                                    <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">高风险</span>
+                                </div>
+                            </div>
+                            <div class="space-y-3">
+                                <div class="bg-gray-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">风险描述</h4>
+                                    <p class="text-sm text-gray-600">新能源汽车补贴政策调整，可能影响企业参展意愿</p>
+                                </div>
+                                <div class="bg-blue-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">应对措施</h4>
+                                    <ul class="text-sm text-gray-600 space-y-1">
+                                        <li>• 密切关注政策动向</li>
+                                        <li>• 调整展会定位和宣传策略</li>
+                                        <li>• 增加政策解读论坛</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="bg-white rounded-xl shadow-lg p-6 risk-card risk-level-medium">
+                            <div class="flex items-center mb-4">
+                                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
+                                    <svg class="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-bold">市场竞争加剧</h3>
+                                    <span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded">中风险</span>
+                                </div>
+                            </div>
+                            <div class="space-y-3">
+                                <div class="bg-gray-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">风险描述</h4>
+                                    <p class="text-sm text-gray-600">同期其他展会竞争，分流参展商和观众资源</p>
+                                </div>
+                                <div class="bg-blue-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">应对措施</h4>
+                                    <ul class="text-sm text-gray-600 space-y-1">
+                                        <li>• 差异化定位，突出特色</li>
+                                        <li>• 提升展会品质和服务</li>
+                                        <li>• 加强营销推广力度</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Operational Risk -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">运营风险管控</h2>
+            
+            <div class="max-w-6xl mx-auto">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Exhibitor Risk -->
+                    <div class="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue-500 transition">
+                        <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
+                                <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h-.5a1 1 0 000-2H8a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2h-5.5z" clip-rule="evenodd"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-lg font-bold text-center mb-3">参展商管理风险</h3>
+                        <div class="space-y-2 text-sm">
+                            <div class="flex justify-between py-2 border-b">
+                                <span class="text-gray-600">招展不足</span>
+                                <span class="text-yellow-600 font-semibold">中</span>
+                            </div>
+                            <div class="flex justify-between py-2 border-b">
+                                <span class="text-gray-600">临时退展</span>
+                                <span class="text-green-600 font-semibold">低</span>
+                            </div>
+                            <div class="flex justify-between py-2">
+                                <span class="text-gray-600">款项拖欠</span>
+                                <span class="text-yellow-600 font-semibold">中</span>
+                            </div>
+                        </div>
+                        <div class="mt-4 pt-4 border-t">
+                            <p class="text-xs text-gray-500">预防措施：签订合同、收取定金、建立黑名单</p>
+                        </div>
+                    </div>
+
+                    <!-- Audience Risk -->
+                    <div class="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-green-500 transition">
+                        <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-7 h-7 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-lg font-bold text-center mb-3">观众组织风险</h3>
+                        <div class="space-y-2 text-sm">
+                            <div class="flex justify-between py-2 border-b">
+                                <span class="text-gray-600">人数不足</span>
+                                <span class="text-yellow-600 font-semibold">中</span>
+                            </div>
+                            <div class="flex justify-between py-2 border-b">
+                                <span class="text-gray-600">质量不高</span>
+                                <span class="text-green-600 font-semibold">低</span>
+                            </div>
+                            <div class="flex justify-between py-2">
+                                <span class="text-gray-600">现场拥堵</span>
+                                <span class="text-yellow-600 font-semibold">中</span>
+                            </div>
+                        </div>
+                        <div class="mt-4 pt-4 border-t">
+                            <p class="text-xs text-gray-500">预防措施：多渠道推广、预登记系统、分时入场</p>
+                        </div>
+                    </div>
+
+                    <!-- Service Risk -->
+                    <div class="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-purple-500 transition">
+                        <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-7 h-7 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-lg font-bold text-center mb-3">服务质量风险</h3>
+                        <div class="space-y-2 text-sm">
+                            <div class="flex justify-between py-2 border-b">
+                                <span class="text-gray-600">服务投诉</span>
+                                <span class="text-green-600 font-semibold">低</span>
+                            </div>
+                            <div class="flex justify-between py-2 border-b">
+                                <span class="text-gray-600">设备故障</span>
+                                <span class="text-yellow-600 font-semibold">中</span>
+                            </div>
+                            <div class="flex justify-between py-2">
+                                <span class="text-gray-600">人员不足</span>
+                                <span class="text-green-600 font-semibold">低</span>
+                            </div>
+                        </div>
+                        <div class="mt-4 pt-4 border-t">
+                            <p class="text-xs text-gray-500">预防措施：培训上岗、设备检修、人员储备</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Safety Risk -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">安全风险防控</h2>
+            
+            <div class="max-w-5xl mx-auto">
+                <div class="bg-white rounded-2xl shadow-lg p-8">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                        <!-- Fire Safety -->
+                        <div class="border-2 border-red-200 rounded-xl p-6 alert-pulse">
+                            <div class="flex items-center mb-4">
+                                <div class="w-10 h-10 bg-red-500 text-white rounded-lg flex items-center justify-center mr-3">
+                                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <h3 class="text-lg font-bold">消防安全</h3>
+                            </div>
+                            <div class="space-y-3">
+                                <div class="bg-red-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">重点防控</h4>
+                                    <ul class="text-xs text-gray-600 space-y-1">
+                                        <li>• 展台搭建材料防火等级</li>
+                                        <li>• 电气线路安全检查</li>
+                                        <li>• 消防通道保持畅通</li>
+                                    </ul>
+                                </div>
+                                <div class="bg-gray-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">应急措施</h4>
+                                    <ul class="text-xs text-gray-600 space-y-1">
+                                        <li>• 消防器材配备齐全</li>
+                                        <li>• 专业消防队伍值守</li>
+                                        <li>• 定期消防演练</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Personnel Safety -->
+                        <div class="border-2 border-blue-200 rounded-xl p-6">
+                            <div class="flex items-center mb-4">
+                                <div class="w-10 h-10 bg-blue-500 text-white rounded-lg flex items-center justify-center mr-3">
+                                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <h3 class="text-lg font-bold">人员安全</h3>
+                            </div>
+                            <div class="space-y-3">
+                                <div class="bg-blue-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">安保措施</h4>
+                                    <ul class="text-xs text-gray-600 space-y-1">
+                                        <li>• 专业安保团队100人</li>
+                                        <li>• 安检设备全覆盖</li>
+                                        <li>• 实名制入场管理</li>
+                                    </ul>
+                                </div>
+                                <div class="bg-gray-50 rounded-lg p-3">
+                                    <h4 class="font-semibold text-sm mb-1">应急处置</h4>
+                                    <ul class="text-xs text-gray-600 space-y-1">
+                                        <li>• 医疗急救点5个</li>
+                                        <li>• 应急疏散预案</li>
+                                        <li>• 警务室现场值守</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Emergency Contact -->
+                    <div class="mt-8 bg-gradient-to-r from-red-50 to-orange-50 rounded-xl p-6">
+                        <h3 class="text-lg font-bold mb-4 text-red-600">应急联系方式</h3>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                            <div>
+                                <p class="font-semibold">消防急救</p>
+                                <p class="text-red-600 text-lg">119</p>
+                            </div>
+                            <div>
+                                <p class="font-semibold">医疗急救</p>
+                                <p class="text-red-600 text-lg">120</p>
+                            </div>
+                            <div>
+                                <p class="font-semibold">公安报警</p>
+                                <p class="text-red-600 text-lg">110</p>
+                            </div>
+                            <div>
+                                <p class="font-semibold">现场指挥</p>
+                                <p class="text-red-600 text-lg">138****8888</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Force Majeure -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">不可抗力应对</h2>
+            
+            <div class="max-w-5xl mx-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <!-- Pandemic Response -->
+                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8">
+                        <div class="flex items-center mb-6">
+                            <div class="w-12 h-12 bg-purple-600 text-white rounded-full flex items-center justify-center mr-4">
+                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                                    <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
+                                </svg>
+                            </div>
+                            <h3 class="text-xl font-bold">疫情防控预案</h3>
+                        </div>
+                        <div class="space-y-4">
+                            <div class="bg-white rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">预防措施</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 健康码查验系统</li>
+                                    <li>• 体温检测设备</li>
+                                    <li>• 场馆定时消毒</li>
+                                    <li>• 人流密度控制</li>
+                                </ul>
+                            </div>
+                            <div class="bg-white rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">应急方案</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 线上线下融合办展</li>
+                                    <li>• VR云展厅备选</li>
+                                    <li>• 延期/取消保险</li>
+                                    <li>• 退款机制完善</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Weather Response -->
+                    <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-8">
+                        <div class="flex items-center mb-6">
+                            <div class="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">
+                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M5.05 3.636a1 1 0 010 1.414 7 7 0 000 9.9 1 1 0 11-1.414 1.414 9 9 0 010-12.728 1 1 0 011.414 0zm9.9 0a1 1 0 011.414 0 9 9 0 010 12.728 1 1 0 11-1.414-1.414 7 7 0 000-9.9 1 1 0 010-1.414zM7.879 6.464a1 1 0 010 1.414 3 3 0 000 4.243 1 1 0 11-1.415 1.414 5 5 0 010-7.07 1 1 0 011.415 0zm4.242 0a1 1 0 011.415 0 5 5 0 010 7.072 1 1 0 01-1.415-1.415 3 3 0 000-4.242 1 1 0 010-1.415zM10 9a1 1 0 011 1v.01a1 1 0 11-2 0V10a1 1 0 011-1z" clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <h3 class="text-xl font-bold">恶劣天气应对</h3>
+                        </div>
+                        <div class="space-y-4">
+                            <div class="bg-white rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">监测预警</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 天气预报实时监控</li>
+                                    <li>• 气象部门联动</li>
+                                    <li>• 提前72小时预警</li>
+                                    <li>• 多渠道信息发布</li>
+                                </ul>
+                            </div>
+                            <div class="bg-white rounded-lg p-4">
+                                <h4 class="font-semibold mb-2">应对措施</h4>
+                                <ul class="text-sm text-gray-600 space-y-1">
+                                    <li>• 室外活动调整方案</li>
+                                    <li>• 交通疏导预案</li>
+                                    <li>• 展品保护措施</li>
+                                    <li>• 参展商损失补偿</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Emergency Plan Summary -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">应急预案体系</h2>
+            
+            <div class="max-w-6xl mx-auto">
+                <div class="bg-white rounded-2xl shadow-lg p-8">
+                    <!-- Emergency Command Structure -->
+                    <div class="mb-8">
+                        <h3 class="text-2xl font-bold mb-6 text-center">应急指挥体系</h3>
+                        <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-6">
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
+                                <div>
+                                    <div class="w-20 h-20 bg-red-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
+                                        <span class="text-2xl font-bold">总</span>
+                                    </div>
+                                    <h4 class="font-bold mb-2">总指挥</h4>
+                                    <p class="text-sm text-gray-600">统筹全局决策</p>
+                                </div>
+                                <div>
+                                    <div class="w-20 h-20 bg-orange-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
+                                        <span class="text-2xl font-bold">副</span>
+                                    </div>
+                                    <h4 class="font-bold mb-2">副总指挥</h4>
+                                    <p class="text-sm text-gray-600">协调各部门行动</p>
+                                </div>
+                                <div>
+                                    <div class="w-20 h-20 bg-yellow-500 text-white rounded-full flex items-center justify-center mx-auto mb-3">
+                                        <span class="text-2xl font-bold">组</span>
+                                    </div>
+                                    <h4 class="font-bold mb-2">应急小组</h4>
+                                    <p class="text-sm text-gray-600">具体执行处置</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Response Procedures -->
+                    <div>
+                        <h3 class="text-xl font-bold mb-4">应急响应流程</h3>
+                        <div class="space-y-3">
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">1</div>
+                                <div class="flex-1 bg-blue-50 rounded-lg p-3">
+                                    <h4 class="font-semibold">事件发生</h4>
+                                    <p class="text-sm text-gray-600">现场人员立即上报，启动应急响应</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">2</div>
+                                <div class="flex-1 bg-green-50 rounded-lg p-3">
+                                    <h4 class="font-semibold">评估判断</h4>
+                                    <p class="text-sm text-gray-600">快速评估事件等级，确定响应级别</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-yellow-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">3</div>
+                                <div class="flex-1 bg-yellow-50 rounded-lg p-3">
+                                    <h4 class="font-semibold">应急处置</h4>
+                                    <p class="text-sm text-gray-600">按预案执行处置，保障人员安全</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mr-4">4</div>
+                                <div class="flex-1 bg-purple-50 rounded-lg p-3">
+                                    <h4 class="font-semibold">善后恢复</h4>
+                                    <p class="text-sm text-gray-600">事件处理完毕，恢复正常运营</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Risk Summary -->
+    <section class="py-16 bg-gradient-to-r from-red-600 to-orange-600 text-white">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl font-bold mb-6">全面防控，确保安全</h2>
+            <p class="text-xl mb-8 opacity-90">建立完善的风险防控体系，为展会成功保驾护航</p>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
+                <div class="bg-white/10 backdrop-blur rounded-lg p-4">
+                    <div class="text-2xl font-bold mb-1">12项</div>
+                    <div class="text-sm opacity-90">风险识别</div>
+                </div>
+                <div class="bg-white/10 backdrop-blur rounded-lg p-4">
+                    <div class="text-2xl font-bold mb-1">48条</div>
+                    <div class="text-sm opacity-90">防控措施</div>
+                </div>
+                <div class="bg-white/10 backdrop-blur rounded-lg p-4">
+                    <div class="text-2xl font-bold mb-1">100%</div>
+                    <div class="text-sm opacity-90">预案覆盖</div>
+                </div>
+                <div class="bg-white/10 backdrop-blur rounded-lg p-4">
+                    <div class="text-2xl font-bold mb-1">24H</div>
+                    <div class="text-sm opacity-90">应急响应</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="text-center text-sm text-gray-400">
+                <p>&copy; 2024 长三角国际新能源汽车与智能交通产业博览会. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
\ No newline at end of file