更新AI定制开发内容

AI_DEVELOPMENT_SETUP.md

@@ -0,0 +1,182 @@
+# AI 定制开发导航与页面创建报告
+
+## ✅ 完成内容
+
+### 1. 导航菜单更新
+
+#### 修改前
+```
+行业无人机 ▼
+  ├ 无人机解决方案
+  ├ 无人机
+  ├ 无人机负载
+  ├ 软件与服务
+  └ 软件定制开发
+公司动态
+公司介绍
+加入我们
+联系我们
+```
+
+#### 修改后
+```
+行业无人机 ▼
+  ├ 无人机解决方案
+  ├ 无人机
+  ├ 无人机负载
+  ├ 软件与服务
+  └ 软件定制开发
+AI 定制开发 ▼       ← 新增
+  ├ RAG
+  └ AI 应用开发
+公司动态
+公司介绍
+// 加入我们          ← 已注释
+联系我们
+```
+
+### 2. 新增文件
+
+#### 目录结构
+```
+src/view/AIDevelopment/
+├── Index.vue      # AI 定制开发列表页
+├── RAG.vue        # RAG 详情页
+└── AIApp.vue      # AI 应用开发详情页
+```
+
+### 3. 页面布局
+
+#### AI 定制开发列表页（Index.vue）
+- **Banner**: 150px 高度，显示"AI 定制开发"
+- **章节标题**: 带标签和副标题
+- **服务卡片**: 2 个卡片（RAG、AI 应用开发）
+- **联系咨询按钮**: 底部 CTA 按钮
+
+#### 详情页（RAG.vue、AIApp.vue）
+- **Banner**: 150px 高度，显示具体服务名称
+- **内容占位**: "页面内容开发中..."
+- **空状态**: 图标 + 标题 + 描述
+
+### 4. 路由配置
+
+```javascript
+// 主路由
+{
+  path: '/ai-development',
+  name: 'aiDevelopment',
+  component: resolve => require(['@/view/AIDevelopment/Index'], resolve),
+  meta: { title: 'AI 定制开发' }
+}
+
+// 子路由
+{
+  path: '/ai-development/rag',
+  name: 'aiDevelopmentRAG',
+  component: resolve => require(['@/view/AIDevelopment/RAG'], resolve),
+  meta: { title: 'RAG 检索增强生成' }
+}
+
+{
+  path: '/ai-development/app',
+  name: 'aiDevelopmentApp',
+  component: resolve => require(['@/view/AIDevelopment/AIApp'], resolve),
+  meta: { title: 'AI 应用开发' }
+}
+```
+
+### 5. 导航配置
+
+```javascript
+{
+  name: "AI 定制开发",
+  path: "/ai-development",
+  children: [
+    { name: "RAG", path: "/ai-development/rag" },
+    { name: "AI 应用开发", path: "/ai-development/app" }
+  ]
+}
+```
+
+### 6. 访问路径
+
+| 页面 | 路径 | 说明 |
+|------|------|------|
+| AI 定制开发列表 | `/ai-development` | 显示 2 个服务卡片 |
+| RAG 详情 | `/ai-development/rag` | RAG 技术详情页（占位） |
+| AI 应用开发详情 | `/ai-development/app` | AI 应用开发详情页（占位） |
+
+### 7. 页面特点
+
+#### 列表页（Index.vue）
+- ✅ 响应式网格布局（桌面自适应，平板 2 列，手机 1 列）
+- ✅ 卡片悬停效果（上浮、图片放大、遮罩显示）
+- ✅ 联系咨询按钮
+- ✅ WOW.js 动画支持
+
+#### 详情页（RAG.vue、AIApp.vue）
+- ✅ 统一的 Banner 样式
+- ✅ 空状态占位界面
+- ✅ 居中布局，视觉友好
+- ✅ WOW.js 动画支持
+
+### 8. 文件修改
+
+| 文件 | 修改内容 |
+|------|----------|
+| `src/config/nav-config.js` | 添加 AI 定制开发导航和路由，注释加入我们 |
+| `src/view/AIDevelopment/Index.vue` | 新建列表页 |
+| `src/view/AIDevelopment/RAG.vue` | 新建 RAG 详情页 |
+| `src/view/AIDevelopment/AIApp.vue` | 新建 AI 应用开发详情页 |
+
+### 9. 测试步骤
+
+1. **导航菜单测试**
+   - ✅ 悬停"AI 定制开发"显示下拉菜单
+   - ✅ 显示 2 个菜单项（RAG、AI 应用开发）
+   - ✅ 点击菜单项正确跳转
+
+2. **列表页测试**
+   - ✅ 访问 `/ai-development` 显示列表
+   - ✅ 显示 2 个服务卡片
+   - ✅ 点击卡片跳转到对应详情页
+
+3. **详情页测试**
+   - ✅ 访问 `/ai-development/rag` 显示 RAG 页面
+   - ✅ 访问 `/ai-development/app` 显示 AI 应用开发页面
+   - ✅ 显示"页面内容开发中..."占位提示
+
+### 10. 后续开发建议
+
+#### 内容填充
+1. RAG 详情页：
+   - 技术概述
+   - 核心优势
+   - 应用场景
+   - 案例展示
+
+2. AI 应用开发详情页：
+   - 开发流程
+   - 技术栈
+   - 服务领域
+   - 成功案例
+
+#### 功能增强
+1. 添加咨询表单
+2. 添加相关案例链接
+3. 添加技术文档下载
+4. 添加在线客服入口
+
+## 📊 完成状态
+
+| 任务 | 状态 |
+|------|------|
+| 导航菜单添加 | ✅ 完成 |
+| 注释加入我们 | ✅ 完成 |
+| 列表页创建 | ✅ 完成 |
+| RAG 详情页 | ✅ 完成（占位） |
+| AI 应用开发详情页 | ✅ 完成（占位） |
+| 路由配置 | ✅ 完成 |
+| 响应式布局 | ✅ 完成 |
+
+所有任务已完成，页面结构已搭建，等待内容填充！

EMERGENCY_RESCUE_RENAME.md

@@ -1,83 +0,0 @@
-# 应急救援组件命名更新
-
-## ✅ 已完成重命名
-
-### 文件重命名对照表
-
-| 原文件名 | 新文件名 | 说明 |
-|----------|----------|------|
-| `Rag.vue` | `EmergencyRescue.vue` | 应急救援主页面 |
-| `RagDisasterResponse.vue` | `EmergencyDisasterResponse.vue` | 灾害响应 |
-| `RagSearchRescue.vue` | `EmergencySearchRescue.vue` | 搜索救援 |
-| `RagCommandDispatch.vue` | `EmergencyCommandDispatch.vue` | 指挥调度 |
-| `RagPostEvaluation.vue` | `EmergencyPostEvaluation.vue` | 灾后评估 |
-
-### 组件 Name 更新
-
-| 组件 | 原 name | 新 name |
-|------|---------|---------|
-| 主页面 | `Rag` | `EmergencyRescue` |
-| 灾害响应 | `RagDisasterResponse` | `EmergencyDisasterResponse` |
-| 搜索救援 | `RagSearchRescue` | `EmergencySearchRescue` |
-| 指挥调度 | `RagCommandDispatch` | `EmergencyCommandDispatch` |
-| 灾后评估 | `RagPostEvaluation` | `EmergencyPostEvaluation` |
-
-### 路由配置更新
-
-```javascript
-// src/config/nav-config.js
-{
-  path: '/solutions/rag',
-  name: 'solutionsRag',  // 路由 name 保持不变
-  component: resolve => require(['@/view/Solutions/EmergencyRescue'], resolve),
-  meta: { title: '应急救援解决方案' }
-}
-```
-
-## 命名说明
-
-### Emergency（应急）
-- **含义**: 紧急情况、突发事件
-- **适用**: 应急救援、应急管理、应急响应等场景
-
-### Rescue（救援）
-- **含义**: 营救、救助、解救
-- **适用**: 搜救行动、救援行动等
-
-### 组合含义
-- **EmergencyRescue**: 应急救援（主页面）
-- **EmergencyDisasterResponse**: 应急灾害响应
-- **EmergencySearchRescue**: 应急搜索救援
-- **EmergencyCommandDispatch**: 应急指挥调度
-- **EmergencyPostEvaluation**: 应急灾后评估
-
-## 访问路径
-
-| 页面 | 路径 | 组件 |
-|------|------|------|
-| 应急救援 | `/solutions/rag` | EmergencyRescue.vue |
-| 灾害响应 | `/solutions/rag#section-1` | EmergencyDisasterResponse.vue |
-| 搜索救援 | `/solutions/rag#section-2` | EmergencySearchRescue.vue |
-| 指挥调度 | `/solutions/rag#section-3` | EmergencyCommandDispatch.vue |
-| 灾后评估 | `/solutions/rag#section-4` | EmergencyPostEvaluation.vue |
-
-## 修改文件清单
-
-| 文件 | 修改内容 |
-|------|----------|
-| `src/view/Solutions/Rag.vue` | 重命名为 EmergencyRescue.vue |
-| `src/view/Solutions/RagDisasterResponse.vue` | 重命名为 EmergencyDisasterResponse.vue |
-| `src/view/Solutions/RagSearchRescue.vue` | 重命名为 EmergencySearchRescue.vue |
-| `src/view/Solutions/RagCommandDispatch.vue` | 重命名为 EmergencyCommandDispatch.vue |
-| `src/view/Solutions/RagPostEvaluation.vue` | 重命名为 EmergencyPostEvaluation.vue |
-| `src/config/nav-config.js` | 更新组件引用路径 |
-
-## 测试
-
-访问 `http://localhost:8888/#/solutions/rag` 应该正常显示应急救援解决方案页面，包含 4 个部分：
-1. 灾害响应
-2. 搜索救援
-3. 指挥调度
-4. 灾后评估
-
-所有功能和样式应保持不变。

NAVIGATION_UPDATE.md

@@ -0,0 +1,127 @@
+# 导航菜单更新报告
+
+## ✅ 已完成更新
+
+### 1. 导航结构变更
+
+#### 修改前
+```
+行业无人机 ▼
+  ├ 行业应用无人机
+  ├ 无人机负载
+  ├ 软件与服务
+  └ 软件定制开发
+```
+
+#### 修改后
+```
+行业无人机 ▼
+  ├ 行业应用无人机
+  ├ 无人机负载
+  ├ 软件与服务
+  ├ 软件定制开发
+  └ 无人机解决方案 ← 新增
+```
+
+### 2. 配置修改
+
+#### nav-config.js
+```javascript
+{
+  name: "行业无人机",
+  path: "/products",
+  children: [
+    { name: "行业应用无人机", path: "/products/djiAircraft" },
+    { name: "无人机负载", path: "/products/payloads" },
+    { name: "软件与服务", path: "/products/software" },
+    { name: "软件定制开发", path: "/products/develop" },
+    { name: "无人机解决方案", path: "/solutions" }  // 新增
+  ]
+}
+```
+
+### 3. 路由配置
+
+#### Products 路由
+```javascript
+{
+  path: '/products',
+  component: resolve => require(['@/view/Products/index'], resolve),
+  meta: { title: '产品' },
+  redirect: '/products/djiAircraft',  // 默认重定向
+  children: [...]
+}
+```
+
+#### Solutions 路由
+```javascript
+{
+  path: '/solutions',
+  name: 'solutions',
+  component: resolve => require(['@/view/Solutions/index'], resolve),
+  meta: { title: '解决方案' }
+}
+```
+
+### 4. 跳转路径
+
+| 菜单项 | 路径 | 说明 |
+|--------|------|------|
+| 行业应用无人机 | `/products/djiAircraft` | 行业无人机列表页 |
+| 无人机负载 | `/products/payloads` | 负载产品页 |
+| 软件与服务 | `/products/software` | 软件产品页 |
+| 软件定制开发 | `/products/develop` | 开发服务页 |
+| **无人机解决方案** | `/solutions` | **解决方案列表页** ← 新增 |
+
+### 5. Router 和 Header 一致性
+
+✅ **已确保一致**
+
+- Header 导航从 `navConfig` 读取
+- Router 从 `createRoutes()` 生成
+- 两者共用同一配置源，保证完全一致
+
+### 6. 用户访问流程
+
+#### 方式一：通过导航菜单
+1. 悬停"行业无人机"菜单
+2. 显示下拉菜单
+3. 点击"无人机解决方案"
+4. 跳转到 `/solutions` 页面
+5. 显示解决方案列表（4 个卡片）
+
+#### 方式二：通过首页
+1. 访问首页
+2. 滚动到"解决方案"区域
+3. 点击任意解决方案卡片 → 详情页
+4. 或点击"查看更多解决方案" → 列表页
+
+### 7. 测试步骤
+
+1. **导航菜单测试**
+   - ✅ 悬停"行业无人机"显示下拉菜单
+   - ✅ 显示 5 个菜单项（含新增）
+   - ✅ 点击"无人机解决方案"跳转到 `/solutions`
+   - ✅ 页面自动滚动到顶部
+
+2. **Router 同步测试**
+   - ✅ Header 显示与路由配置一致
+   - ✅ 所有菜单项都能正确跳转
+   - ✅ 路由切换时页面正常加载
+
+3. **响应式测试**
+   - ✅ 桌面端显示下拉菜单
+   - ✅ 移动端显示汉堡菜单
+
+### 8. 文件修改
+
+| 文件 | 修改内容 |
+|------|----------|
+| `src/config/nav-config.js` | 添加"无人机解决方案"菜单项，优化路由结构 |
+
+### 9. 优势
+
+1. **统一配置** - Header 和 Router 共用配置源
+2. **易于维护** - 修改一处，全局生效
+3. **用户友好** - 多个入口访问解决方案页面
+4. **结构清晰** - 导航层次分明，易于理解

ROUTE_UPDATE.md

@@ -1,82 +0,0 @@
-# 应急救援路由更新
-
-## ✅ 路由路径修改
-
-### 路由对照表
-
-| 类型 | 原路径 | 新路径 | 说明 |
-|------|--------|--------|------|
-| **访问路径** | `/solutions/rag` | `/solutions/emergency-rescue` | URL 路径 |
-| **路由 name** | `solutionsRag` | `solutionsEmergencyRescue` | 路由名称 |
-| **组件** | `Rag.vue` | `EmergencyRescue.vue` | 组件文件 |
-
-### 完整路由配置
-
-```javascript
-// src/config/nav-config.js
-{
-  path: '/solutions/emergency-rescue',
-  name: 'solutionsEmergencyRescue',
-  component: resolve => require(['@/view/Solutions/EmergencyRescue'], resolve),
-  meta: { title: '应急救援解决方案' }
-}
-```
-
-### 列表页面链接
-
-```javascript
-// src/view/Solutions/Index.vue
-{
-  path: '/solutions/emergency-rescue',
-  title: '应急救援',
-  description: '救援队伍使用无人机通过空中视角对灾情进行评估、研判',
-  image: require('@/assets/img/service4.jpg')
-}
-```
-
-## 访问路径
-
-| 页面 | 新路径 | 锚点 |
-|------|--------|------|
-| 应急救援主页 | `/solutions/emergency-rescue` | - |
-| 灾害响应 | `/solutions/emergency-rescue` | `#section-1` |
-| 搜索救援 | `/solutions/emergency-rescue` | `#section-2` |
-| 指挥调度 | `/solutions/emergency-rescue` | `#section-3` |
-| 灾后评估 | `/solutions/emergency-rescue` | `#section-4` |
-
-## 修改文件
-
-| 文件 | 修改内容 |
-|------|----------|
-| `src/config/nav-config.js` | 路由路径和 name |
-| `src/view/Solutions/Index.vue` | 解决方案卡片链接 |
-
-## 新的完整路由结构
-
-```javascript
-/solutions                      // 解决方案列表
-/solutions/surveying            // 基础测绘
-/solutions/building             // 建筑工程
-/solutions/safety               // 安全生产
-/solutions/emergency-rescue     // 应急救援（新）
-```
-
-## 测试
-
-1. 访问 `http://localhost:8888/#/solutions` 
-   - ✅ 显示解决方案列表
-   - ✅ 点击"应急救援"卡片
-
-2. 访问 `http://localhost:8888/#/solutions/emergency-rescue`
-   - ✅ 显示应急救援解决方案页面
-   - ✅ 左侧导航显示 4 个章节
-   - ✅ 右侧内容正常显示
-
-3. 点击左侧导航
-   - ✅ 滚动到对应章节
-
-## 备注
-
-- `/solutions/rag` 路径已预留，可用于其他业务
-- 新路径 `/solutions/emergency-rescue` 语义更清晰
-- 所有链接和路由已同步更新

SOLUTIONS_REFACTOR_REPORT.md

@@ -1,241 +0,0 @@
-# 解决方案页面重构完成报告
-
-## ✅ 完成内容
-
-### 1. 新增文件
-
-#### 配置文件
-- `src/config/nav-config.js` - 统一的导航和路由配置
-
-#### Solutions 主页面
-- `src/view/Solutions/Index.vue` - 解决方案列表页（卡片式布局）
-
-#### 基础测绘解决方案
-- `src/view/Solutions/Surveying.vue` - 主页面
-- `src/view/Solutions/SurveyingIntro.vue` - 技术概述
-- `src/view/Solutions/SurveyingFeatures.vue` - 核心优势
-- `src/view/Solutions/SurveyingData.vue` - 数据成果
-- `src/view/Solutions/SurveyingApplication.vue` - 应用场景
-
-#### 建筑工程解决方案
-- `src/view/Solutions/Building.vue` - 主页面
-- `src/view/Solutions/BuildingIntro.vue` - 技术概述
-- `src/view/Solutions/BuildingFeatures.vue` - 核心优势
-- `src/view/Solutions/BuildingApplication.vue` - 应用场景
-
-#### 安全生产解决方案
-- `src/view/Solutions/Safety.vue` - 主页面
-- `src/view/Solutions/SafetyIntro.vue` - 技术概述
-- `src/view/Solutions/SafetyFeatures.vue` - 核心优势
-- `src/view/Solutions/SafetyApplication.vue` - 应用场景
-
-#### 应急救援解决方案（已存在）
-- `src/view/Solutions/Rag.vue` - 主页面
-- `src/view/Solutions/RagDisasterResponse.vue` - 灾害响应
-- `src/view/Solutions/RagSearchRescue.vue` - 搜索救援
-- `src/view/Solutions/RagCommandDispatch.vue` - 指挥调度
-- `src/view/Solutions/RagPostEvaluation.vue` - 灾后评估
-
----
-
-## 📊 路由结构
-
-### 新的路由配置
-```javascript
-/solutions (解决方案列表页)
-  ├── /solutions/surveying (基础测绘)
-  │   ├── 1.技术概述
-  │   ├── 2.核心优势
-  │   ├── 3.数据成果
-  │   └── 4.应用场景
-  │
-  ├── /solutions/building (建筑工程)
-  │   ├── 1.技术概述
-  │   ├── 2.核心优势
-  │   └── 3.应用场景
-  │
-  ├── /solutions/safety (安全生产)
-  │   ├── 1.技术概述
-  │   ├── 2.核心优势
-  │   └── 3.应用场景
-  │
-  └── /solutions/rag (应急救援)
-      ├── 1.灾害响应
-      ├── 2.搜索救援
-      ├── 3.指挥调度
-      └── 4.灾后评估
-```
-
-### Header 导航菜单
-```
-首页
-产品 ▼
-  ├ 行业应用无人机
-  ├ 无人机负载
-  ├ 软件与服务
-  └ 软件定制开发
-解决方案 ▼
-  ├ 基础测绘
-  ├ 建筑工程
-  ├ 安全生产
-  └ 应急救援
-公司动态
-公司介绍
-加入我们
-联系我们
-```
-
----
-
-## 🎨 UI 设计特点
-
-### Solutions Index 页面
-- **Banner**: 200px 高度，居中标题
-- **章节标题**: 带标签和副标题
-- **解决方案卡片**: 网格布局，悬停放大效果
-- **图片悬停**: 缩放效果 + 蓝色遮罩 + 链接图标
-
-### 二级页面（Surveying/Building/Safety/Rag）
-- **Banner**: 150px 高度，显示方案名称
-- **左侧导航**: 固定宽度的垂直标签页
-- **右侧内容**: 动态加载子组件
-- **滚动定位**: 自动滚动到锚点位置
-
-### 通用组件样式
-- `.content-block` - 内容区块
-- `.feature-list` - 特性列表
-- `.scenario-card` - 场景卡片
-- `.info-box` - 信息框
-- `.deliverable-card` - 交付物卡片
-
----
-
-## 🔧 技术实现
-
-### 1. 统一配置管理
-```javascript
-// src/config/nav-config.js
-export const navConfig = [...]  // 导航配置
-export function createRoutes() {...}  // 路由配置生成
-```
-
-### 2. Router 配置
-```javascript
-// src/router/index.js
-import { createRoutes } from '@/config/nav-config'
-export default new Router({
-  routes: createRoutes()
-})
-```
-
-### 3. Header 导航
-```javascript
-// src/components/Header.vue
-import { navConfig } from '@/config/nav-config'
-export default {
-  data() {
-    return {
-      navList: navConfig  // 直接使用配置
-    }
-  }
-}
-```
-
-### 4. 动态组件加载
-```javascript
-// 各解决方案主页面
-data() {
-  return {
-    navList: [
-      { id: "section-1", title: "1.技术概述", component: XxxIntro },
-      ...
-    ]
-  }
-}
-```
-
----
-
-## 📋 修改的文件
-
-| 文件 | 修改内容 |
-|------|----------|
-| `src/router/index.js` | 使用统一配置生成路由 |
-| `src/components/Header.vue` | 导入 navConfig，更新导航菜单 |
-| `src/view/Solutions/Index.vue` | 重写为解决方案列表页 |
-| `src/view/Solutions/Surveying.vue` | 重写为二级页面结构 |
-| `src/view/Solutions/Building.vue` | 重写为二级页面结构 |
-| `src/view/Solutions/Safety.vue` | 重写为二级页面结构 |
-
----
-
-## 🎯 优化效果
-
-### 用户体验
-- ✅ 统一的页面结构和交互方式
-- ✅ 清晰的层级导航
-- ✅ 左侧导航 + 右侧内容的经典布局
-- ✅ 自动滚动定位，平滑过渡
-
-### 代码质量
-- ✅ 统一配置管理，避免多处维护
-- ✅ 组件化开发，高度复用
-- ✅ 结构清晰，易于扩展
-- ✅ 符合 Vue 最佳实践
-
-### 可维护性
-- ✅ 新增解决方案只需添加对应组件
-- ✅ 导航和路由自动同步
-- ✅ 修改一处，全局生效
-- ✅ 降低出错风险
-
----
-
-## 🚀 下一步建议
-
-### 内容完善
-1. 为每个解决方案添加更多专业内容
-2. 添加更多高清图片
-3. 添加案例展示
-4. 添加视频介绍
-
-### 功能增强
-1. 添加解决方案对比功能
-2. 添加在线咨询入口
-3. 添加资料下载
-4. 添加相关产品展示
-
-### 性能优化
-1. 图片懒加载
-2. 组件按需加载
-3. 添加加载动画
-4. SEO 优化
-
----
-
-## 📖 使用说明
-
-### 访问方式
-- 解决方案列表：`http://localhost:8888/#/solutions`
-- 基础测绘：`http://localhost:8888/#/solutions/surveying`
-- 建筑工程：`http://localhost:8888/#/solutions/building`
-- 安全生产：`http://localhost:8888/#/solutions/safety`
-- 应急救援：`http://localhost:8888/#/solutions/rag`
-
-### 添加新解决方案
-1. 在 `nav-config.js` 中添加路由配置
-2. 创建解决方案主页面（参考 Surveying.vue）
-3. 创建子组件（参考 SurveyingIntro.vue 等）
-4. Header 导航自动更新
-
----
-
-## ✨ 总结
-
-已完成解决方案页面的全面重构，实现了：
-- ✅ 统一的二级页面结构
-- ✅ 导航和路由配置统一管理
-- ✅ 符合现代 UI 设计规范的视觉效果
-- ✅ 良好的用户体验和可维护性
-
-所有解决方案页面现在都采用一致的设计风格，与 Rag 页面保持一致，易于浏览和使用。

SOLUTIONS_ROUTE_FIX.md

@@ -1,112 +0,0 @@
-# 解决方案路由修复说明
-
-## 问题原因
-之前 `/solutions` 路由配置了 `redirect: '/solutions/surveying'`，导致访问 `/solutions` 时总是重定向到第一个子路由，列表页面无法显示。
-
-## 修复方案
-
-### 1. 修改路由配置
-将解决方案路由从父子结构改为扁平结构：
-
-```javascript
-// 之前（错误）
-{
-  path: '/solutions',
-  component: resolve => require(['@/view/Solutions/index'], resolve),
-  redirect: '/solutions/surveying',
-  children: [
-    { path: 'surveying', component: ... },
-    { path: 'building', component: ... },
-    { path: 'safety', component: ... },
-    { path: 'rag', component: ... }
-  ]
-}
-
-// 现在（正确）
-{
-  path: '/solutions',
-  component: resolve => require(['@/view/Solutions/index'], resolve),
-  meta: { title: '解决方案' }
-},
-{
-  path: '/solutions/surveying',
-  component: resolve => require(['@/view/Solutions/Surveying'], resolve),
-  meta: { title: '基础测绘解决方案' }
-},
-{
-  path: '/solutions/building',
-  component: resolve => require(['@/view/Solutions/Building'], resolve),
-  meta: { title: '建筑工程解决方案' }
-},
-{
-  path: '/solutions/safety',
-  component: resolve => require(['@/view/Solutions/Safety'], resolve),
-  meta: { title: '安全生产解决方案' }
-},
-{
-  path: '/solutions/rag',
-  component: resolve => require(['@/view/Solutions/Rag'], resolve),
-  meta: { title: '应急救援解决方案' }
-}
-```
-
-### 2. 更新 Header 导航
-移除解决方案的子菜单配置：
-
-```javascript
-{
-  name: "解决方案",
-  path: "/solutions",
-  children: []  // 空数组，无子菜单
-}
-```
-
-## 访问路径
-
-| 页面 | 路径 | 说明 |
-|------|------|------|
-| 解决方案列表 | `/#/solutions` | 显示 4 个解决方案卡片 |
-| 基础测绘 | `/#/solutions/surveying` | 左侧导航 + 右侧内容 |
-| 建筑工程 | `/#/solutions/building` | 左侧导航 + 右侧内容 |
-| 安全生产 | `/#/solutions/safety` | 左侧导航 + 右侧内容 |
-| 应急救援 | `/#/solutions/rag` | 左侧导航 + 右侧内容 |
-
-## Header 导航结构
-
-```
-首页
-产品 ▼
-  ├ 行业应用无人机
-  ├ 无人机负载
-  ├ 软件与服务
-  └ 软件定制开发
-解决方案（无子菜单）
-公司动态
-公司介绍
-加入我们
-联系我们
-```
-
-## 文件修改
-
-| 文件 | 修改内容 |
-|------|----------|
-| `src/config/nav-config.js` | 修改路由结构为扁平化，移除 solutions 的 redirect 和 children |
-| `src/components/Header.vue` | 自动同步 navConfig，解决方案无子菜单 |
-
-## 测试步骤
-
-1. 访问 `http://localhost:8888/#/solutions`
-   - ✅ 应显示解决方案列表页面
-   - ✅ 显示 4 个解决方案卡片
-
-2. 点击"基础测绘"卡片
-   - ✅ 应跳转到 `/solutions/surveying`
-   - ✅ 显示左侧导航和右侧内容
-
-3. 点击"应急救援"卡片
-   - ✅ 应跳转到 `/solutions/rag`
-   - ✅ 显示左侧导航和右侧内容（4 个章节）
-
-4. 点击 Header 导航的"解决方案"
-   - ✅ 应跳转到 `/solutions`（列表页）

src/config/nav-config.js

@@ -1,34 +1,33 @@
 /**
  * 导航配置
  * Navigation Configuration
- * 
+ *
  * 统一的路由和导航配置，确保 Router 和 Header 保持一致
  */
 
 export const navConfig = [
   {
-    name: "首页",
-    path: "/home",
-    children: []
-  },
-  {
-    name: "产品",
+    name: "行业无人机",
     path: "/products",
     children: [
-      { name: "行业应用无人机", path: "/products/djiAircraft" },
+      { name: "无人机解决方案", path: "/solutions" },
+      { name: "无人机", path: "/products/djiAircraft" },
       { name: "无人机负载", path: "/products/payloads" },
       { name: "软件与服务", path: "/products/software" },
       { name: "软件定制开发", path: "/products/develop" }
     ]
   },
   {
-    name: "解决方案",
-    path: "/solutions",
-    children: []
+    name: "AI 定制开发",
+    path: "/ai-development",
+    children: [
+      { name: "RAG", path: "/ai-development/rag" },
+      { name: "AI 应用开发", path: "/ai-development/app" }
+    ]
   },
   { name: "公司动态", path: "/news", children: [] },
   { name: "公司介绍", path: "/info", children: [] },
-  { name: "加入我们", path: "/joinus", children: [] },
+  // { name: "加入我们", path: "/joinus", children: [] },
   { name: "联系我们", path: "/contactus", children: [] }
 ]
 
@@ -57,16 +56,13 @@ export function createRoutes() {
           path: '/products',
           component: resolve => require(['@/view/Products/index'], resolve),
           meta: { title: '产品' },
+          redirect: '/solutions',
           children: [
             {
-              path: '/products',
-              redirect: '/products/djiAircraft'
-            },
-            {
-              path: '/products/djiAircraft',
+              path: 'djiAircraft',
               name: 'djiAircraft',
               component: resolve => require(['@/view/Products/DjiAircraft'], resolve),
-              meta: { title: '行业应用无人机' }
+              meta: { title: '无人机' }
             },
             {
               path: '/products/payloads',
@@ -118,6 +114,24 @@ export function createRoutes() {
           component: resolve => require(['@/view/Solutions/EmergencyRescue'], resolve),
           meta: { title: '应急救援解决方案' }
         },
+        {
+          path: '/ai-development',
+          name: 'aiDevelopment',
+          component: resolve => require(['@/view/AIDevelopment/Index'], resolve),
+          meta: { title: 'AI 定制开发' }
+        },
+        {
+          path: '/ai-development/rag',
+          name: 'aiDevelopmentRAG',
+          component: resolve => require(['@/view/AIDevelopment/RAG'], resolve),
+          meta: { title: 'RAG 检索增强生成' }
+        },
+        {
+          path: '/ai-development/app',
+          name: 'aiDevelopmentApp',
+          component: resolve => require(['@/view/AIDevelopment/AIApp'], resolve),
+          meta: { title: 'AI 应用开发' }
+        },
         {
           path: '/news',
           component: resolve => require(['@/view/News/index'], resolve),

src/router/index.js

@@ -4,6 +4,17 @@ import { createRoutes } from '@/config/nav-config'
 
 Vue.use(Router)
 
-export default new Router({
-  routes: createRoutes()
+const router = new Router({
+  routes: createRoutes(),
+  scrollBehavior(to, from, savedPosition) {
+    // 如果页面有缓存，恢复滚动位置
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      // 否则滚动到顶部
+      return { x: 0, y: 0 }
+    }
+  }
 })
+
+export default router

src/view/AIDevelopment/AIApp.vue

@@ -0,0 +1,1491 @@
+<template>
+  <div id="AIAgent">
+    <div class="banner container-fuild text-center">AI 智能体定制开发</div>
+    <div class="container">
+      <div class="row">
+        <!-- 左侧导航 -->
+        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" id="myScrollspy">
+          <ul class="nav nav-tabs nav-stacked center-block" id="myNav">
+            <li :class="activeSection === 'overview' ? 'active' : ''">
+              <a href="#overview" @click.prevent="scrollToSection('overview')">什么是 AI 智能体</a>
+            </li>
+            <li :class="activeSection === 'architecture' ? 'active' : ''">
+              <a href="#architecture" @click.prevent="scrollToSection('architecture')">技术架构</a>
+            </li>
+            <li :class="activeSection === 'workflow' ? 'active' : ''">
+              <a href="#workflow" @click.prevent="scrollToSection('workflow')">工作流</a>
+            </li>
+            <li :class="activeSection === 'integration' ? 'active' : ''">
+              <a href="#integration" @click.prevent="scrollToSection('integration')">多模态融合</a>
+            </li>
+            <li :class="activeSection === 'scenarios' ? 'active' : ''">
+              <a href="#scenarios" @click.prevent="scrollToSection('scenarios')">应用场景</a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 右侧内容 -->
+        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
+          <!-- 什么是 AI 智能体 -->
+          <section id="overview" class="content-section">
+            <h2>什么是 AI 智能体？</h2>
+            <p class="lead">
+              AI 智能体（AI Agent）是一种能够感知环境、自主决策并执行任务的智能系统，它结合了大语言模型的理解能力、RAG 的知识检索能力，以及与传统设备（如摄像头、传感器）的交互能力。
+            </p>
+            
+            <div class="comparison-table">
+              <div class="row">
+                <div class="col-xs-12 col-sm-4 col-md-4">
+                  <div class="comparison-card">
+                    <h3><i class="glyphicon glyphicon-comment"></i></h3>
+                    <h4>传统大模型</h4>
+                    <ul>
+                      <li>被动回答问题</li>
+                      <li>仅基于训练数据</li>
+                      <li>无法感知实时环境</li>
+                      <li>无自主执行能力</li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-4 col-md-4">
+                  <div class="comparison-card highlighted">
+                    <h3><i class="glyphicon glyphicon-user"></i></h3>
+                    <h4>AI 智能体</h4>
+                    <ul>
+                      <li>主动感知和决策</li>
+                      <li>结合实时数据和知识库</li>
+                      <li>可连接摄像头等传感器</li>
+                      <li>可自主执行任务和调用工具</li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-4 col-md-4">
+                  <div class="comparison-card">
+                    <h3><i class="glyphicon glyphicon-eye-open"></i></h3>
+                    <h4>RAG + 视觉融合</h4>
+                    <ul>
+                      <li>视觉信息理解</li>
+                      <li>结合知识库检索</li>
+                      <li>多模态信息融合</li>
+                      <li>智能决策与响应</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="tech-highlight">
+              <h4>AI 智能体的核心能力</h4>
+              <div class="row">
+                <div class="col-xs-12 col-sm-6 col-md-3">
+                  <div class="capability-card">
+                    <div class="capability-icon">
+                      <i class="glyphicon glyphicon-eye-open"></i>
+                    </div>
+                    <h5>感知能力</h5>
+                    <p>通过摄像头、传感器等设备感知物理世界</p>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3">
+                  <div class="capability-card">
+                    <div class="capability-icon">
+                      <i class="glyphicon glyphicon-brain"></i>
+                    </div>
+                    <h5>理解能力</h5>
+                    <p>理解视觉、语言等多模态信息</p>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3">
+                  <div class="capability-card">
+                    <div class="capability-icon">
+                      <i class="glyphicon glyphicon-search"></i>
+                    </div>
+                    <h5>检索能力</h5>
+                    <p>从知识库中检索相关信息辅助决策</p>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3">
+                  <div class="capability-card">
+                    <div class="capability-icon">
+                      <i class="glyphicon glyphicon-play"></i>
+                    </div>
+                    <h5>执行能力</h5>
+                    <p>调用工具、API 或控制设备执行任务</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- 技术架构 -->
+          <section id="architecture" class="content-section">
+            <h2>技术架构</h2>
+            <p class="lead">AI 智能体系统由多个核心模块协同工作，形成完整的感知 - 理解 - 决策 - 执行闭环。</p>
+            
+            <div class="architecture-diagram">
+              <div class="arch-layer perception">
+                <div class="layer-title">感知层</div>
+                <div class="arch-row">
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-camera"></i>
+                    <h4>摄像头</h4>
+                    <p>视频流/图像采集</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-signal"></i>
+                    <h4>传感器</h4>
+                    <p>温湿度/压力/运动</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-microphone"></i>
+                    <h4>音频设备</h4>
+                    <p>语音输入/输出</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-globe"></i>
+                    <h4>网络数据</h4>
+                    <p>API/数据库接入</p>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="arch-arrow">↓</div>
+              
+              <div class="arch-layer processing">
+                <div class="layer-title">处理层</div>
+                <div class="arch-row">
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-film"></i>
+                    <h4>视觉分析</h4>
+                    <p>目标检测/行为识别</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-text-background"></i>
+                    <h4>语音识别</h4>
+                    <p>ASR/语音情感分析</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-th-large"></i>
+                    <h4>多模态融合</h4>
+                    <p>信息整合与对齐</p>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="arch-arrow">↓</div>
+              
+              <div class="arch-layer cognition">
+                <div class="layer-title">认知层</div>
+                <div class="arch-row">
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-search"></i>
+                    <h4>RAG 检索</h4>
+                    <p>知识库查询与增强</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-brain"></i>
+                    <h4>大语言模型</h4>
+                    <p>理解推理与决策</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-tasks"></i>
+                    <h4>任务规划</h4>
+                    <p>分解目标与调度</p>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="arch-arrow">↓</div>
+              
+              <div class="arch-layer action">
+                <div class="layer-title">执行层</div>
+                <div class="arch-row">
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-comment"></i>
+                    <h4>自然语言生成</h4>
+                    <p>文本/语音回复</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-wrench"></i>
+                    <h4>工具调用</h4>
+                    <p>API/函数执行</p>
+                  </div>
+                  <div class="arch-item">
+                    <i class="glyphicon glyphicon-flash"></i>
+                    <h4>设备控制</h4>
+                    <p>IoT 设备联动</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row mt-4">
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <div class="tech-card">
+                  <div class="tech-icon">
+                    <i class="glyphicon glyphicon-log-in"></i>
+                  </div>
+                  <h4>多源输入</h4>
+                  <p>支持视频流、图像、语音、文本、传感器数据等多种输入形式。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <div class="tech-card">
+                  <div class="tech-icon">
+                    <i class="glyphicon glyphicon-transfer"></i>
+                  </div>
+                  <h4>智能处理</h4>
+                  <p>视觉分析、语音识别、RAG 检索、大模型推理协同工作。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <div class="tech-card">
+                  <div class="tech-icon">
+                    <i class="glyphicon glyphicon-export"></i>
+                  </div>
+                  <h4>多元输出</h4>
+                  <p>文本回复、语音播报、设备控制、告警通知等多种响应方式。</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- RAG+ 摄像头工作流 -->
+          <section id="workflow" class="content-section">
+            <h2>RAG + 摄像头融合工作流</h2>
+            <p class="lead">以 RAG 与传统摄像头结合为例，展示 AI 智能体如何实现从视觉感知到智能响应的完整流程。</p>
+            
+            <div class="workflow-container">
+              <div class="workflow-header">
+                <h3>典型场景：智能安防监控</h3>
+                <p>通过摄像头实时监控，结合知识库进行异常行为识别和智能响应</p>
+              </div>
+
+              <div class="workflow-steps">
+                <!-- 步骤 1 -->
+                <div class="workflow-step">
+                  <div class="step-header">
+                    <div class="step-number">1</div>
+                    <h4>视频流采集</h4>
+                  </div>
+                  <div class="step-content">
+                    <div class="step-detail">
+                      <h5><i class="glyphicon glyphicon-facetime-video"></i> 摄像头输入</h5>
+                      <ul>
+                        <li>7×24 小时实时监控视频流</li>
+                        <li>多摄像头画面同步接入</li>
+                        <li>支持 RTSP/ONVIF等协议</li>
+                      </ul>
+                    </div>
+                    <div class="step-visual">
+                      <i class="glyphicon glyphicon-camera"></i>
+                      <span>实时视频流</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 步骤 2 -->
+                <div class="workflow-step">
+                  <div class="step-header">
+                    <div class="step-number">2</div>
+                    <h4>视觉信息提取</h4>
+                  </div>
+                  <div class="step-content">
+                    <div class="step-detail">
+                      <h5><i class="glyphicon glyphicon-eye-open"></i> AI 视觉分析</h5>
+                      <ul>
+                        <li>人员检测与追踪</li>
+                        <li>行为识别（徘徊、闯入、跌倒等）</li>
+                        <li>物体识别（包裹、车辆等）</li>
+                        <li>时间戳与位置信息标注</li>
+                      </ul>
+                    </div>
+                    <div class="step-visual">
+                      <i class="glyphicon glyphicon-screenshot"></i>
+                      <span>结构化信息</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 步骤 3 -->
+                <div class="workflow-step">
+                  <div class="step-header">
+                    <div class="step-number">3</div>
+                    <h4>RAG 知识检索</h4>
+                  </div>
+                  <div class="step-content">
+                    <div class="step-detail">
+                      <h5><i class="glyphicon glyphicon-search"></i> 知识库匹配</h5>
+                      <ul>
+                        <li>检索安防规则库（如禁入区域、时段限制）</li>
+                        <li>匹配历史事件记录</li>
+                        <li>查询应急预案和处置流程</li>
+                        <li>获取相关人员信息和联系方式</li>
+                      </ul>
+                    </div>
+                    <div class="step-visual">
+                      <i class="glyphicon glyphicon-database"></i>
+                      <span>知识增强</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 步骤 4 -->
+                <div class="workflow-step">
+                  <div class="step-header">
+                    <div class="step-number">4</div>
+                    <h4>智能决策</h4>
+                  </div>
+                  <div class="step-content">
+                    <div class="step-detail">
+                      <h5><i class="glyphicon glyphicon-brain"></i> 大模型推理</h5>
+                      <ul>
+                        <li>综合视觉信息和检索结果</li>
+                        <li>判断是否构成安全事件</li>
+                        <li>评估事件等级和风险程度</li>
+                        <li>生成处置建议和响应策略</li>
+                      </ul>
+                    </div>
+                    <div class="step-visual">
+                      <i class="glyphicon glyphicon-tasks"></i>
+                      <span>决策输出</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 步骤 5 -->
+                <div class="workflow-step">
+                  <div class="step-header">
+                    <div class="step-number">5</div>
+                    <h4>智能响应</h4>
+                  </div>
+                  <div class="step-content">
+                    <div class="step-detail">
+                      <h5><i class="glyphicon glyphicon-play"></i> 多模态执行</h5>
+                      <ul>
+                        <li>生成告警通知（文字 + 语音）</li>
+                        <li>推送给安保人员 APP/短信</li>
+                        <li>联动门禁/广播等设备</li>
+                        <li>记录事件日志并归档</li>
+                      </ul>
+                    </div>
+                    <div class="step-visual">
+                      <i class="glyphicon glyphicon-bell"></i>
+                      <span>执行响应</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="workflow-summary">
+              <h4>工作流特点</h4>
+              <div class="row">
+                <div class="col-xs-12 col-sm-3 col-md-3">
+                  <div class="summary-item">
+                    <div class="summary-icon">
+                      <i class="glyphicon glyphicon-refresh"></i>
+                    </div>
+                    <h5>实时性</h5>
+                    <p>秒级响应，从感知到执行全流程自动化</p>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-3 col-md-3">
+                  <div class="summary-item">
+                    <div class="summary-icon">
+                      <i class="glyphicon glyphicon-link"></i>
+                    </div>
+                    <h5>可追溯</h5>
+                    <p>每个决策都有知识依据，可审计可解释</p>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-3 col-md-3">
+                  <div class="summary-item">
+                    <div class="summary-icon">
+                      <i class="glyphicon glyphicon-adjust"></i>
+                    </div>
+                    <h5>可扩展</h5>
+                    <p>支持添加新的传感器类型和知识库</p>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-3 col-md-3">
+                  <div class="summary-item">
+                    <div class="summary-icon">
+                      <i class="glyphicon glyphicon-ok"></i>
+                    </div>
+                    <h5>准确性</h5>
+                    <p>RAG 增强减少误判，提高决策质量</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- 多模态融合 -->
+          <section id="integration" class="content-section">
+            <h2>多模态融合能力</h2>
+            <p class="lead">AI 智能体支持多种感知设备的接入和信息融合，实现更全面的环境理解和智能决策。</p>
+            
+            <div class="integration-grid">
+              <div class="integration-card">
+                <div class="integration-icon">
+                  <i class="glyphicon glyphicon-camera"></i>
+                </div>
+                <h3>视觉系统</h3>
+                <ul class="integration-list">
+                  <li><strong>摄像头:</strong> 实时监控、录像回放</li>
+                  <li><strong>目标检测:</strong> 人/车/物识别</li>
+                  <li><strong>行为分析:</strong> 异常行为识别</li>
+                  <li><strong>人脸识别:</strong> 身份验证与追踪</li>
+                </ul>
+              </div>
+
+              <div class="integration-card">
+                <div class="integration-icon">
+                  <i class="glyphicon glyphicon-signal"></i>
+                </div>
+                <h3>传感器网络</h3>
+                <ul class="integration-list">
+                  <li><strong>环境传感器:</strong> 温湿度/空气质量</li>
+                  <li><strong>运动传感器:</strong> 红外/微波探测</li>
+                  <li><strong>压力传感器:</strong> 重量/压力监测</li>
+                  <li><strong>气体传感器:</strong> 烟雾/有害气体</li>
+                </ul>
+              </div>
+
+              <div class="integration-card">
+                <div class="integration-icon">
+                  <i class="glyphicon glyphicon-volume-up"></i>
+                </div>
+                <h3>音频系统</h3>
+                <ul class="integration-list">
+                  <li><strong>语音识别:</strong> 语音指令理解</li>
+                  <li><strong>声纹识别:</strong> 说话人识别</li>
+                  <li><strong>异常声音:</strong> 玻璃破碎/呼救</li>
+                  <li><strong>语音合成:</strong> 智能语音播报</li>
+                </ul>
+              </div>
+
+              <div class="integration-card">
+                <div class="integration-icon">
+                  <i class="glyphicon glyphicon-dashboard"></i>
+                </div>
+                <h3>业务系统</h3>
+                <ul class="integration-list">
+                  <li><strong>知识库:</strong> 企业文档/规则库</li>
+                  <li><strong>数据库:</strong> 业务数据查询</li>
+                  <li><strong>API 接口:</strong> 第三方服务集成</li>
+                  <li><strong>工单系统:</strong> 自动创建与跟踪</li>
+                </ul>
+              </div>
+            </div>
+
+            <div class="fusion-diagram">
+              <h3>信息融合流程</h3>
+              <div class="fusion-steps">
+                <div class="fusion-step">
+                  <div class="fusion-number">1</div>
+                  <h5>数据采集</h5>
+                  <p>多源异构数据同步采集</p>
+                </div>
+                <div class="fusion-arrow">→</div>
+                <div class="fusion-step">
+                  <div class="fusion-number">2</div>
+                  <h5>特征提取</h5>
+                  <p>提取各模态关键特征</p>
+                </div>
+                <div class="fusion-arrow">→</div>
+                <div class="fusion-step">
+                  <div class="fusion-number">3</div>
+                  <h5>特征对齐</h5>
+                  <p>时间/空间维度对齐</p>
+                </div>
+                <div class="fusion-arrow">→</div>
+                <div class="fusion-step">
+                  <div class="fusion-number">4</div>
+                  <h5>融合决策</h5>
+                  <p>多模态信息融合推理</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- 应用场景 -->
+          <section id="scenarios" class="content-section">
+            <h2>应用场景</h2>
+            <p class="lead">AI 智能体已广泛应用于多个行业领域，为企业智能化升级提供强大动力。</p>
+            
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon security">
+                    <i class="glyphicon glyphicon-lock"></i>
+                  </div>
+                  <h3>智慧安防</h3>
+                  <p>实时监控、异常行为识别、入侵检测、智能告警、应急预案联动。</p>
+                  <div class="scenario-tags">
+                    <span>摄像头</span>
+                    <span>RAG</span>
+                    <span>告警</span>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon factory">
+                    <i class="glyphicon glyphicon-cog"></i>
+                  </div>
+                  <h3>工业质检</h3>
+                  <p>产品缺陷检测、生产流程监控、质量数据分析、异常预警。</p>
+                  <div class="scenario-tags">
+                    <span>工业相机</span>
+                    <span>视觉分析</span>
+                    <span>知识库</span>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon healthcare">
+                    <i class="glyphicon glyphicon-heart"></i>
+                  </div>
+                  <h3>智慧医疗</h3>
+                  <p>病患监护、异常行为检测、医疗知识库查询、辅助诊断。</p>
+                  <div class="scenario-tags">
+                    <span>监控设备</span>
+                    <span>传感器</span>
+                    <span>医学知识库</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon retail">
+                    <i class="glyphicon glyphicon-shopping-cart"></i>
+                  </div>
+                  <h3>智慧零售</h3>
+                  <p>客流分析、行为追踪、商品识别、智能推荐、库存管理。</p>
+                  <div class="scenario-tags">
+                    <span>摄像头</span>
+                    <span>商品库</span>
+                    <span>数据分析</span>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon logistics">
+                    <i class="glyphicon glyphicon-plane"></i>
+                  </div>
+                  <h3>智慧物流</h3>
+                  <p>包裹分拣、路径优化、异常检测、仓储管理、配送调度。</p>
+                  <div class="scenario-tags">
+                    <span>视觉系统</span>
+                    <span>传感器</span>
+                    <span>调度系统</span>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon office">
+                    <i class="glyphicon glyphicon-briefcase"></i>
+                  </div>
+                  <h3>智慧办公</h3>
+                  <p>会议记录、访客管理、环境监测、能源管理、安全巡检。</p>
+                  <div class="scenario-tags">
+                    <span>摄像头</span>
+                    <span>环境传感器</span>
+                    <span>知识库</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="cta-section">
+              <h3>开启您的 AI 智能体之旅</h3>
+              <p>联系我们，定制专属于您的 AI 智能体解决方案</p>
+              <a href="#/contactus" class="btn-cta">
+                立即咨询
+                <i class="glyphicon glyphicon-chevron-right"></i>
+              </a>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {WOW} from "wowjs";
+
+export default {
+  name: "AIAgent",
+  data() {
+    return {
+      activeSection: 'overview'
+    };
+  },
+  mounted() {
+    var wow = new WOW();
+    wow.init();
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    scrollToSection(sectionId) {
+      this.activeSection = sectionId;
+      const element = document.getElementById(sectionId);
+      if (element) {
+        const offset = 100;
+        const elementPosition = element.getBoundingClientRect().top;
+        const offsetPosition = offset + elementPosition + window.pageYOffset;
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: "smooth"
+        });
+      }
+    },
+    handleScroll() {
+      const sections = ['overview', 'architecture', 'workflow', 'integration', 'scenarios'];
+      const scrollPosition = window.scrollY + 150;
+      for (const section of sections) {
+        const element = document.getElementById(section);
+        if (element) {
+          const offsetTop = element.offsetTop;
+          const offsetHeight = element.offsetHeight;
+          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
+            this.activeSection = section;
+            break;
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url("../../assets/img/banner_4.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+
+/* 左侧导航 */
+#myScrollspy {
+  position: sticky;
+  top: 100px;
+}
+
+ul.nav-tabs {
+  width: 140px;
+  margin-top: 24px;
+  border-radius: 4px;
+  background: #fff;
+  z-index: 99999;
+  border: 1px solid #474747;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
+}
+
+ul.nav-tabs li {
+  text-align: center;
+  margin: 0;
+  border-top: 1px solid #474747;
+}
+
+ul.nav-tabs li:first-child {
+  border-top: none;
+}
+
+ul.nav-tabs li a {
+  margin: 0;
+  padding: 10px 16px;
+  border-radius: 0;
+  color: #333;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
+
+ul.nav-tabs li a:hover {
+  color: #fff;
+  background: #474747;
+}
+
+ul.nav-tabs li.active a,
+ul.nav-tabs li.active a:hover {
+  color: #fff;
+  background: #474747;
+  border: 1px solid #474747;
+}
+
+/* 内容区域 */
+.content-section {
+  padding: 40px 0;
+  margin-bottom: 40px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.content-section:last-child {
+  border-bottom: none;
+}
+
+.content-section h2 {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #667eea;
+}
+
+.content-section .lead {
+  font-size: 16px;
+  font-weight: 300;
+  color: #444;
+  margin-bottom: 30px;
+  line-height: 1.8;
+}
+
+/* 对比卡片 */
+.comparison-table {
+  margin: 30px 0;
+}
+
+.comparison-card {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 25px;
+  text-align: center;
+  height: 100%;
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.comparison-card.highlighted {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  transform: scale(1.05);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+.comparison-card h3 {
+  font-size: 36px;
+  margin-bottom: 15px;
+}
+
+.comparison-card.highlighted h3,
+.comparison-card.highlighted h4,
+.comparison-card.highlighted li {
+  color: #fff;
+}
+
+.comparison-card h4 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.comparison-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+}
+
+.comparison-card li {
+  font-size: 14px;
+  color: #666;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+
+.comparison-card li:last-child {
+  border-bottom: none;
+}
+
+/* 技术亮点 */
+.tech-highlight {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 30px;
+  margin-top: 30px;
+}
+
+.tech-highlight h4 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.capability-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.capability-icon {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.capability-icon i {
+  color: #fff;
+  font-size: 20px;
+}
+
+.capability-card h5 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.capability-card p {
+  font-size: 13px;
+  color: #666;
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* 技术架构图 */
+.architecture-diagram {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 40px 20px;
+  margin: 30px 0;
+}
+
+.arch-layer {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 15px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.layer-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  text-align: center;
+  padding: 8px 20px;
+  border-radius: 20px;
+  display: inline-block;
+  margin-bottom: 15px;
+}
+
+.arch-layer.perception .layer-title { background: #4CAF50; }
+.arch-layer.processing .layer-title { background: #2196F3; }
+.arch-layer.cognition .layer-title { background: #667eea; }
+.arch-layer.action .layer-title { background: #FF9800; }
+
+.arch-row {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.arch-item {
+  background: #f8f9fa;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 15px;
+  width: 140px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.arch-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  border-color: #667eea;
+}
+
+.arch-item i {
+  font-size: 28px;
+  color: #667eea;
+  margin-bottom: 8px;
+}
+
+.arch-item h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin: 8px 0 4px;
+}
+
+.arch-item p {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+}
+
+.arch-arrow {
+  font-size: 20px;
+  color: #667eea;
+  text-align: center;
+  margin: 10px 0;
+}
+
+/* 技术卡片 */
+.tech-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.tech-card:hover {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-5px);
+}
+
+.tech-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tech-icon i {
+  color: #fff;
+  font-size: 24px;
+}
+
+.tech-card h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.tech-card p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666;
+  margin: 0;
+}
+
+/* 工作流 */
+.workflow-container {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 30px;
+  margin: 30px 0;
+}
+
+.workflow-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.workflow-header h3 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.workflow-header p {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.workflow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.workflow-step {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 15px 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.step-number {
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 600;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.step-header h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0;
+}
+
+.step-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  gap: 20px;
+}
+
+.step-detail {
+  flex: 1;
+}
+
+.step-detail h5 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.step-detail h5 i {
+  color: #667eea;
+  margin-right: 8px;
+}
+
+.step-detail ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.step-detail li {
+  font-size: 13px;
+  color: #666;
+  padding: 4px 0;
+  padding-left: 15px;
+  position: relative;
+}
+
+.step-detail li::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: #667eea;
+}
+
+.step-visual {
+  width: 120px;
+  height: 80px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.step-visual i {
+  font-size: 28px;
+  margin-bottom: 5px;
+}
+
+.step-visual span {
+  font-size: 12px;
+}
+
+/* 工作流总结 */
+.workflow-summary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 30px;
+  margin-top: 30px;
+}
+
+.workflow-summary h4 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.summary-item {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.summary-icon {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.summary-icon i {
+  color: #fff;
+  font-size: 20px;
+}
+
+.summary-item h5 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.summary-item p {
+  font-size: 13px;
+  color: #666;
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* 融合网格 */
+.integration-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin: 30px 0;
+}
+
+.integration-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  transition: all 0.3s ease;
+}
+
+.integration-card:hover {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-5px);
+  border-color: #667eea;
+}
+
+.integration-icon {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+
+.integration-icon i {
+  color: #fff;
+  font-size: 20px;
+}
+
+.integration-card h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.integration-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.integration-list li {
+  font-size: 13px;
+  color: #666;
+  padding: 6px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.integration-list li:last-child {
+  border-bottom: none;
+}
+
+.integration-list li strong {
+  color: #333;
+}
+
+/* 融合流程图 */
+.fusion-diagram {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 30px;
+  margin-top: 30px;
+}
+
+.fusion-diagram h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.fusion-steps {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.fusion-step {
+  background: #fff;
+  border: 2px solid #667eea;
+  border-radius: 8px;
+  padding: 15px;
+  width: 120px;
+  text-align: center;
+}
+
+.fusion-number {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+  margin: 0 auto 10px;
+}
+
+.fusion-step h5 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.fusion-step p {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+}
+
+.fusion-arrow {
+  font-size: 20px;
+  color: #667eea;
+  font-weight: bold;
+}
+
+/* 场景卡片 */
+.scenario-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+}
+
+.scenario-card:hover {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-5px);
+}
+
+.scenario-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scenario-icon.security { background: linear-gradient(135deg, #f44336 0%, #e91e63 100%); }
+.scenario-icon.factory { background: linear-gradient(135deg, #2196F3 0%, #03A9F4 100%); }
+.scenario-icon.healthcare { background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%); }
+.scenario-icon.retail { background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%); }
+.scenario-icon.logistics { background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%); }
+.scenario-icon.office { background: linear-gradient(135deg, #00BCD4 0%, #03A9F4 100%); }
+
+.scenario-icon i {
+  color: #fff;
+  font-size: 24px;
+}
+
+.scenario-card h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.scenario-card p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.scenario-tags {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.scenario-tags span {
+  font-size: 12px;
+  color: #667eea;
+  background: rgba(102, 126, 234, 0.1);
+  padding: 4px 10px;
+  border-radius: 12px;
+}
+
+/* CTA 区域 */
+.cta-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 40px;
+  margin-top: 40px;
+  text-align: center;
+}
+
+.cta-section h3 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.cta-section > p {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 25px;
+}
+
+.btn-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 40px;
+  background: #fff;
+  color: #667eea;
+  border: none;
+  border-radius: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn-cta:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.btn-cta i {
+  font-size: 14px;
+}
+
+/* 响应式 */
+@media screen and (max-width: 991px) {
+  #myScrollspy {
+    position: static;
+  }
+
+  ul.nav-tabs {
+    width: 100%;
+    margin-top: 0;
+  }
+
+  .comparison-card.highlighted {
+    transform: scale(1);
+  }
+
+  .step-content {
+    flex-direction: column;
+  }
+
+  .step-visual {
+    width: 100%;
+  }
+
+  .fusion-steps {
+    flex-direction: column;
+  }
+
+  .fusion-arrow {
+    transform: rotate(90deg);
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .banner {
+    height: 120px;
+    font-size: 24px;
+  }
+
+  .content-section h2 {
+    font-size: 24px;
+  }
+
+  .arch-row {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .arch-item {
+    width: 100%;
+    max-width: 200px;
+  }
+}
+</style>

src/view/AIDevelopment/Index.vue

@@ -0,0 +1,255 @@
+<template>
+  <div id="AIDevelopment">
+    <!-- Banner -->
+    <div class="banner container-fuild text-center">
+      <h1>AI 定制开发</h1>
+      <p>人工智能应用定制开发服务</p>
+    </div>
+
+    <!-- AI 定制开发列表 -->
+    <div class="l-container l-section">
+      <div class="section-header">
+        <div class="section-tag">
+          <span class="tag-dot"></span>
+          <span>AI DEVELOPMENT</span>
+        </div>
+        <h2 class="section-title">AI 定制开发服务</h2>
+        <p class="section-subtitle">Professional AI Development Services</p>
+      </div>
+
+      <div class="solutions-grid">
+        <router-link
+          v-for="(item, index) in developmentList"
+          :key="index"
+          :to="item.path"
+          class="solution-card"
+        >
+          <div class="solution-image">
+            <img :src="item.image" :alt="item.title">
+            <div class="solution-overlay">
+              <i class="solution-icon glyphicon glyphicon-link"></i>
+            </div>
+          </div>
+          <div class="solution-content">
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.description }}</p>
+          </div>
+        </router-link>
+      </div>
+
+      <div class="text-center">
+        <a href="#/" class="btn-view-all">
+          联系咨询
+          <i class="glyphicon glyphicon-chevron-right"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {WOW} from 'wowjs';
+
+export default {
+  name: 'AIDevelopment',
+  data() {
+    return {
+      developmentList: [
+        {
+          path: '/ai-development/rag',
+          title: 'RAG',
+          description: '检索增强生成技术，结合大语言模型与外部知识库',
+          image: require('@/assets/img/rag1.png')
+        },
+        {
+          path: '/ai-development/app',
+          title: 'AI 应用开发',
+          description: '基于 AI 大模型的行业应用定制开发',
+          image: require('@/assets/img/ai-dev1.png')
+        }
+      ]
+    };
+  },
+  mounted() {
+    var wow = new WOW();
+    wow.init();
+  }
+};
+</script>
+
+<style scoped>
+/* Banner */
+.banner {
+  color: #fff;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-image: url("../../assets/img/banner_4.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+
+.banner h1 {
+  font-size: 36px;
+  font-weight: var(--font-weight-bold);
+  margin: 0 0 10px;
+  letter-spacing: 2px;
+}
+
+.banner p {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+/* 解决方案网格 */
+.solutions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.solution-card {
+  display: block;
+  background: #fff;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  transition: var(--transition-bounce);
+  text-decoration: none;
+  color: inherit;
+}
+
+.solution-card:hover {
+  transform: translateY(-10px);
+  box-shadow: var(--shadow-lg), var(--glow-blue);
+}
+
+.solution-image {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+}
+
+.solution-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.solution-card:hover .solution-image img {
+  transform: scale(1.1);
+}
+
+.solution-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(30, 115, 190, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.solution-card:hover .solution-overlay {
+  opacity: 1;
+}
+
+.solution-icon {
+  color: #fff;
+  font-size: 32px;
+}
+
+.solution-content {
+  padding: 25px;
+}
+
+.solution-content h3 {
+  font-size: 20px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0 0 12px;
+}
+
+.solution-content p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-tertiary);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.btn-view-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 32px;
+  background: var(--primary-gradient);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 15px;
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--transition-base);
+  margin-top: 20px;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-view-all:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-view-all i {
+  font-size: 12px;
+}
+
+/* 响应式 */
+@media screen and (max-width: 991px) {
+  .banner {
+    height: 150px;
+  }
+
+  .banner h1 {
+    font-size: 28px;
+  }
+
+  .solutions-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .banner {
+    height: 120px;
+  }
+
+  .banner h1 {
+    font-size: 24px;
+  }
+
+  .banner p {
+    font-size: 14px;
+  }
+
+  .solutions-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/view/AIDevelopment/RAG.vue

@@ -0,0 +1,1055 @@
+<template>
+  <div id="RAG">
+    <div class="banner container-fuild text-center">RAG 检索增强生成</div>
+    <div class="container">
+      <div class="row">
+        <!-- 左侧导航 -->
+        <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" id="myScrollspy">
+          <ul class="nav nav-tabs nav-stacked center-block" id="myNav">
+            <li :class="activeSection === 'overview' ? 'active' : ''">
+              <a href="#overview" @click.prevent="scrollToSection('overview')">技术概述</a>
+            </li>
+            <li :class="activeSection === 'architecture' ? 'active' : ''">
+              <a href="#architecture" @click.prevent="scrollToSection('architecture')">技术架构</a>
+            </li>
+            <li :class="activeSection === 'advantages' ? 'active' : ''">
+              <a href="#advantages" @click.prevent="scrollToSection('advantages')">核心优势</a>
+            </li>
+            <li :class="activeSection === 'workflow' ? 'active' : ''">
+              <a href="#workflow" @click.prevent="scrollToSection('workflow')">工作流程</a>
+            </li>
+            <li :class="activeSection === 'scenarios' ? 'active' : ''">
+              <a href="#scenarios" @click.prevent="scrollToSection('scenarios')">应用场景</a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 右侧内容 -->
+        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
+          <!-- 技术概述 -->
+          <section id="overview" class="content-section">
+            <h2>什么是 RAG？</h2>
+            <p class="lead">
+              RAG（Retrieval-Augmented Generation，检索增强生成）是一种将大语言模型与外部知识库相结合的人工智能技术架构。
+            </p>
+            
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="info-card">
+                  <h3><i class="glyphicon glyphicon-search"></i> 检索（Retrieval）</h3>
+                  <p>从外部知识库中检索与用户问题相关的文档、数据或知识片段，为生成提供准确的上下文信息。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="info-card">
+                  <h3><i class="glyphicon glyphicon-modal-window"></i> 增强（Augmented）</h3>
+                  <p>将检索到的信息与用户问题整合，形成更丰富的输入上下文，增强大语言模型的理解能力。</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <div class="info-card full-width">
+                  <h3><i class="glyphicon glyphicon-comment"></i> 生成（Generation）</h3>
+                  <p>大语言模型基于增强后的上下文，生成准确、相关、有依据的回答，有效减少幻觉问题。</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="tech-highlight">
+              <h4>为什么需要 RAG？</h4>
+              <ul class="feature-list">
+                <li>
+                  <i class="glyphicon glyphicon-alert"></i>
+                  <div>
+                    <strong>解决大模型幻觉问题</strong>
+                    <p>传统大语言模型可能生成看似合理但实际错误的信息，RAG 通过检索真实数据来减少这类问题。</p>
+                  </div>
+                </li>
+                <li>
+                  <i class="glyphicon glyphicon-time"></i>
+                  <div>
+                    <strong>获取最新信息</strong>
+                    <p>大模型训练数据有截止时间，RAG 可以检索最新的外部信息，提供时效性答案。</p>
+                  </div>
+                </li>
+                <li>
+                  <i class="glyphicon glyphicon-lock"></i>
+                  <div>
+                    <strong>利用私有知识</strong>
+                    <p>企业可以将内部文档、数据作为知识库，让大模型基于私有知识生成专业回答。</p>
+                  </div>
+                </li>
+                <li>
+                  <i class="glyphicon glyphicon-book"></i>
+                  <div>
+                    <strong>提供可追溯依据</strong>
+                    <p>RAG 可以标注回答的信息来源，提高可信度和可验证性。</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </section>
+
+          <!-- 技术架构 -->
+          <section id="architecture" class="content-section">
+            <h2>技术架构</h2>
+            <p class="lead">RAG 系统由多个核心组件协同工作，形成完整的知识检索与生成流程。</p>
+            
+            <div class="architecture-diagram">
+              <div class="arch-row">
+                <div class="arch-item user">
+                  <i class="glyphicon glyphicon-user"></i>
+                  <h4>用户提问</h4>
+                  <p>用户输入自然语言问题</p>
+                </div>
+              </div>
+              <div class="arch-arrow">↓</div>
+              <div class="arch-row">
+                <div class="arch-item retrieval">
+                  <i class="glyphicon glyphicon-search"></i>
+                  <h4>检索模块</h4>
+                  <p>向量检索 + 关键词检索</p>
+                </div>
+                <div class="arch-item knowledge">
+                  <i class="glyphicon glyphicon-database"></i>
+                  <h4>知识库</h4>
+                  <p>文档/数据库/API</p>
+                </div>
+              </div>
+              <div class="arch-arrow">↓</div>
+              <div class="arch-row">
+                <div class="arch-item augmentation">
+                  <i class="glyphicon glyphicon-transfer"></i>
+                  <h4>增强处理</h4>
+                  <p>上下文整合 + Prompt 构建</p>
+                </div>
+              </div>
+              <div class="arch-arrow">↓</div>
+              <div class="arch-row">
+                <div class="arch-item generation">
+                  <i class="glyphicon glyphicon-comment"></i>
+                  <h4>大语言模型</h4>
+                  <p>基于上下文生成回答</p>
+                </div>
+              </div>
+              <div class="arch-arrow">↓</div>
+              <div class="arch-row">
+                <div class="arch-item output">
+                  <i class="glyphicon glyphicon-ok"></i>
+                  <h4>输出回答</h4>
+                  <p>带依据的准确回答</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row mt-4">
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <div class="tech-card">
+                  <div class="tech-icon">
+                    <i class="glyphicon glyphicon-text-background"></i>
+                  </div>
+                  <h4>文档处理</h4>
+                  <p>支持 PDF、Word、Excel、TXT 等多种文档格式的解析与处理。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <div class="tech-card">
+                  <div class="tech-icon">
+                    <i class="glyphicon glyphicon-th-large"></i>
+                  </div>
+                  <h4>向量嵌入</h4>
+                  <p>将文本转换为向量表示，支持语义相似度计算和高效检索。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-4 col-md-4">
+                <div class="tech-card">
+                  <div class="tech-icon">
+                    <i class="glyphicon glyphicon-refresh"></i>
+                  </div>
+                  <h4>实时更新</h4>
+                  <p>知识库支持动态更新，确保检索信息的时效性和准确性。</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- 核心优势 -->
+          <section id="advantages" class="content-section">
+            <h2>核心优势</h2>
+            <p class="lead">相比传统大语言模型，RAG 技术在多个维度具有显著优势。</p>
+            
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="advantage-card">
+                  <div class="advantage-icon">
+                    <i class="glyphicon glyphicon-bullseye"></i>
+                  </div>
+                  <h3>准确性提升</h3>
+                  <p>基于检索到的真实信息生成回答，大幅减少幻觉和错误信息的产生，提高回答的准确性和可靠性。</p>
+                  <div class="stat-bar">
+                    <div class="stat-label">准确性提升</div>
+                    <div class="stat-progress" style="width: 85%;">85%</div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="advantage-card">
+                  <div class="advantage-icon">
+                    <i class="glyphicon glyphicon-bookmark"></i>
+                  </div>
+                  <h3>知识可追溯</h3>
+                  <p>每个回答都可以标注信息来源，用户可以追溯答案的出处，提高透明度和可信度。</p>
+                  <div class="stat-bar">
+                    <div class="stat-label">可追溯性</div>
+                    <div class="stat-progress" style="width: 95%;">95%</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="advantage-card">
+                  <div class="advantage-icon">
+                    <i class="glyphicon glyphicon-flash"></i>
+                  </div>
+                  <h3>响应速度快</h3>
+                  <p>相比微调大模型，RAG 无需重新训练，部署快速，检索和生成过程高效，响应时间短。</p>
+                  <div class="stat-bar">
+                    <div class="stat-label">响应速度</div>
+                    <div class="stat-progress" style="width: 90%;">90%</div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="advantage-card">
+                  <div class="advantage-icon">
+                    <i class="glyphicon glyphicon-usd"></i>
+                  </div>
+                  <h3>成本效益高</h3>
+                  <p>无需昂贵的大模型训练成本，利用现有大模型 API 即可构建，运维成本低，性价比高。</p>
+                  <div class="stat-bar">
+                    <div class="stat-label">成本节省</div>
+                    <div class="stat-progress" style="width: 70%;">70%</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="advantage-card">
+                  <div class="advantage-icon">
+                    <i class="glyphicon glyphicon-duplicate"></i>
+                  </div>
+                  <h3>灵活可扩展</h3>
+                  <p>知识库可随时更新扩展，支持多种数据源接入，适应不同业务场景和需求变化。</p>
+                  <div class="stat-bar">
+                    <div class="stat-label">扩展性</div>
+                    <div class="stat-progress" style="width: 90%;">90%</div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <div class="advantage-card">
+                  <div class="advantage-icon">
+                    <i class="glyphicon glyphicon-user"></i>
+                  </div>
+                  <h3>领域专业化</h3>
+                  <p>通过接入特定领域的专业知识库，快速构建垂直领域的专业问答系统。</p>
+                  <div class="stat-bar">
+                    <div class="stat-label">专业度</div>
+                    <div class="stat-progress" style="width: 88%;">88%</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- 工作流程 -->
+          <section id="workflow" class="content-section">
+            <h2>工作流程</h2>
+            <p class="lead">RAG 系统的工作流程包含多个关键步骤，确保从问题到回答的准确转换。</p>
+            
+            <div class="timeline">
+              <div class="timeline-item">
+                <div class="timeline-marker">1</div>
+                <div class="timeline-content">
+                  <h3>用户提问</h3>
+                  <p>用户通过自然语言输入问题，系统接收并理解用户意图。</p>
+                  <ul class="step-list">
+                    <li>接收用户输入的自然语言问题</li>
+                    <li>进行问题理解和意图识别</li>
+                    <li>提取关键信息和查询要素</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="timeline-item">
+                <div class="timeline-marker">2</div>
+                <div class="timeline-content">
+                  <h3>查询转换</h3>
+                  <p>将用户问题转换为适合检索的查询格式，包括向量化和关键词提取。</p>
+                  <ul class="step-list">
+                    <li>使用嵌入模型将问题转换为向量</li>
+                    <li>提取关键词用于混合检索</li>
+                    <li>生成多个查询变体提高召回率</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="timeline-item">
+                <div class="timeline-marker">3</div>
+                <div class="timeline-content">
+                  <h3>知识检索</h3>
+                  <p>从知识库中检索与问题相关的文档片段，采用多种检索策略。</p>
+                  <ul class="step-list">
+                    <li>向量检索：基于语义相似度检索</li>
+                    <li>关键词检索：基于 BM25 等传统算法</li>
+                    <li>混合检索：结合多种策略提高准确率</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="timeline-item">
+                <div class="timeline-marker">4</div>
+                <div class="timeline-content">
+                  <h3>结果重排序</h3>
+                  <p>对检索到的文档片段进行相关性排序，选择最相关的信息。</p>
+                  <ul class="step-list">
+                    <li>计算每个片段与问题的相关度分数</li>
+                    <li>去除重复和冗余信息</li>
+                    <li>选择 Top-K 个最相关片段</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="timeline-item">
+                <div class="timeline-marker">5</div>
+                <div class="timeline-content">
+                  <h3>上下文构建</h3>
+                  <p>将检索到的信息与用户问题整合，构建适合大模型的 Prompt。</p>
+                  <ul class="step-list">
+                    <li>组织检索片段的顺序和格式</li>
+                    <li>添加系统指令和约束条件</li>
+                    <li>构建完整的 Prompt 上下文</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="timeline-item">
+                <div class="timeline-marker">6</div>
+                <div class="timeline-content">
+                  <h3>答案生成</h3>
+                  <p>大语言模型基于构建的上下文生成最终回答。</p>
+                  <ul class="step-list">
+                    <li>大模型理解 Prompt 并生成回答</li>
+                    <li>标注引用来源和依据</li>
+                    <li>格式化输出最终答案</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- 应用场景 -->
+          <section id="scenarios" class="content-section">
+            <h2>应用场景</h2>
+            <p class="lead">RAG 技术已广泛应用于多个领域，为企业智能化转型提供强大支持。</p>
+            
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-headphones"></i>
+                  </div>
+                  <h3>智能客服</h3>
+                  <p>基于企业知识库构建智能客服系统，准确回答客户咨询，支持产品查询、售后支持等场景。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-briefcase"></i>
+                  </div>
+                  <h3>企业知识助手</h3>
+                  <p>整合企业内部文档、制度、流程，为员工提供快速准确的知识查询和问题解答服务。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-education"></i>
+                  </div>
+                  <h3>教育培训</h3>
+                  <p>构建学科知识问答系统，基于教材和教辅资料为学生提供个性化的学习辅导和答疑。</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-heart"></i>
+                  </div>
+                  <h3>医疗健康</h3>
+                  <p>基于医学文献和临床指南，为医护人员提供疾病诊断、治疗方案等专业参考信息。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-scale"></i>
+                  </div>
+                  <h3>法律咨询</h3>
+                  <p>整合法律法规、案例文书，为法律从业者提供法条查询、案例分析等专业支持。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-wrench"></i>
+                  </div>
+                  <h3>技术支持</h3>
+                  <p>基于产品文档和技术手册，为用户提供设备操作、故障排查等技术指导服务。</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-stats"></i>
+                  </div>
+                  <h3>数据分析</h3>
+                  <p>结合业务数据库，支持自然语言查询和数据分析，降低数据使用门槛。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-globe"></i>
+                  </div>
+                  <h3>行业资讯</h3>
+                  <p>整合行业新闻、研究报告，为用户提供及时的资讯查询和趋势分析服务。</p>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <div class="scenario-card">
+                  <div class="scenario-icon">
+                    <i class="glyphicon glyphicon-book"></i>
+                  </div>
+                  <h3>内容创作</h3>
+                  <p>基于素材库和参考资料，辅助进行文章撰写、报告生成等内容创作工作。</p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {WOW} from "wowjs";
+
+export default {
+  name: "RAG",
+  data() {
+    return {
+      activeSection: 'overview'
+    };
+  },
+  mounted() {
+    var wow = new WOW();
+    wow.init();
+    
+    // 监听滚动，更新激活的导航项
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    scrollToSection(sectionId) {
+      this.activeSection = sectionId;
+      const element = document.getElementById(sectionId);
+      if (element) {
+        const offset = 100;
+        const elementPosition = element.getBoundingClientRect().top;
+        const offsetPosition = offset + elementPosition + window.pageYOffset;
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: "smooth"
+        });
+      }
+    },
+    handleScroll() {
+      const sections = ['overview', 'architecture', 'advantages', 'workflow', 'scenarios'];
+      const scrollPosition = window.scrollY + 150;
+
+      for (const section of sections) {
+        const element = document.getElementById(section);
+        if (element) {
+          const offsetTop = element.offsetTop;
+          const offsetHeight = element.offsetHeight;
+
+          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
+            this.activeSection = section;
+            break;
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url("../../assets/img/banner_4.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+
+/* 左侧导航 */
+#myScrollspy {
+  position: sticky;
+  top: 100px;
+}
+
+ul.nav-tabs {
+  width: 140px;
+  margin-top: 24px;
+  border-radius: 4px;
+  background: #fff;
+  z-index: 99999;
+  border: 1px solid #474747;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
+}
+
+ul.nav-tabs li {
+  text-align: center;
+  margin: 0;
+  border-top: 1px solid #474747;
+}
+
+ul.nav-tabs li:first-child {
+  border-top: none;
+}
+
+ul.nav-tabs li a {
+  margin: 0;
+  padding: 10px 16px;
+  border-radius: 0;
+  color: #333;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
+
+ul.nav-tabs li a:hover {
+  color: #fff;
+  background: #474747;
+}
+
+ul.nav-tabs li.active a,
+ul.nav-tabs li.active a:hover {
+  color: #fff;
+  background: #474747;
+  border: 1px solid #474747;
+}
+
+ul.nav-tabs li:first-child a {
+  border-radius: 4px 4px 0 0;
+}
+
+ul.nav-tabs li:last-child a {
+  border-radius: 0 0 4px 4px;
+}
+
+/* 内容区域 */
+.content-section {
+  padding: 40px 0;
+  margin-bottom: 40px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.content-section:last-child {
+  border-bottom: none;
+}
+
+.content-section h2 {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #1e73be;
+}
+
+.content-section .lead {
+  font-size: 16px;
+  font-weight: 300;
+  color: #444;
+  margin-bottom: 30px;
+  line-height: 1.8;
+}
+
+.content-section p {
+  font-size: 14px;
+  line-height: 1.8;
+  color: #666;
+  margin: 15px 0;
+}
+
+/* 信息卡片 */
+.info-card {
+  background: #f8f9fa;
+  border-left: 4px solid #1e73be;
+  padding: 25px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+
+.info-card.full-width {
+  border-left: none;
+  border-top: 4px solid #1e73be;
+}
+
+.info-card h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.info-card h3 i {
+  color: #1e73be;
+  margin-right: 10px;
+}
+
+.info-card p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666;
+  margin: 0;
+}
+
+/* 技术亮点 */
+.tech-highlight {
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+  border-radius: 12px;
+  padding: 30px;
+  margin-top: 30px;
+}
+
+.tech-highlight h4 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 25px;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.feature-list li {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 25px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.feature-list li:last-child {
+  margin-bottom: 0;
+}
+
+.feature-list li i {
+  font-size: 24px;
+  color: #1e73be;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.feature-list li strong {
+  display: block;
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.feature-list li p {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 技术架构图 */
+.architecture-diagram {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 40px 20px;
+  margin: 30px 0;
+  text-align: center;
+}
+
+.arch-row {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin: 20px 0;
+}
+
+.arch-item {
+  background: #fff;
+  border: 2px solid #1e73be;
+  border-radius: 12px;
+  padding: 20px;
+  width: 180px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.arch-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(30, 115, 190, 0.2);
+}
+
+.arch-item i {
+  font-size: 36px;
+  color: #1e73be;
+  margin-bottom: 10px;
+}
+
+.arch-item h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 10px 0 5px;
+}
+
+.arch-item p {
+  font-size: 13px;
+  color: #666;
+  margin: 0;
+}
+
+.arch-arrow {
+  font-size: 24px;
+  color: #1e73be;
+  margin: 10px 0;
+}
+
+/* 技术卡片 */
+.tech-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.tech-card:hover {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-5px);
+}
+
+.tech-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tech-icon i {
+  color: #fff;
+  font-size: 24px;
+}
+
+.tech-card h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.tech-card p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666;
+  margin: 0;
+}
+
+/* 优势卡片 */
+.advantage-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.advantage-icon {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+
+.advantage-icon i {
+  color: #fff;
+  font-size: 20px;
+}
+
+.advantage-card h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.advantage-card p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.stat-bar {
+  margin-top: 15px;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.stat-progress {
+  height: 8px;
+  background: linear-gradient(90deg, #1e73be, #3b82f6);
+  border-radius: 4px;
+  color: #fff;
+  font-size: 11px;
+  padding: 0 8px;
+  line-height: 20px;
+  text-align: right;
+  margin-top: 5px;
+}
+
+/* 时间线 */
+.timeline {
+  position: relative;
+  padding: 20px 0;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 40px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #1e73be;
+}
+
+.timeline-item {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 40px;
+  position: relative;
+}
+
+.timeline-item:last-child {
+  margin-bottom: 0;
+}
+
+.timeline-marker {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 18px;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.timeline-content {
+  flex: 1;
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.timeline-content h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.timeline-content p {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.step-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.step-list li {
+  font-size: 13px;
+  color: #666;
+  padding: 5px 0;
+  padding-left: 20px;
+  position: relative;
+}
+
+.step-list li::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: #1e73be;
+  font-weight: bold;
+}
+
+/* 场景卡片 */
+.scenario-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.scenario-card:hover {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-5px);
+}
+
+.scenario-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scenario-icon i {
+  color: #fff;
+  font-size: 24px;
+}
+
+.scenario-card h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.scenario-card p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #666;
+  margin: 0;
+}
+
+/* 响应式 */
+@media screen and (max-width: 991px) {
+  #myScrollspy {
+    position: static;
+  }
+
+  ul.nav-tabs {
+    width: 100%;
+    margin-top: 0;
+  }
+
+  .arch-row {
+    flex-wrap: wrap;
+  }
+
+  .arch-item {
+    width: 140px;
+    padding: 15px;
+  }
+
+  .timeline::before {
+    left: 20px;
+  }
+
+  .timeline-marker {
+    width: 30px;
+    height: 30px;
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .banner {
+    height: 120px;
+    font-size: 24px;
+  }
+
+  .content-section h2 {
+    font-size: 24px;
+  }
+
+  .feature-list li {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .feature-list li i {
+    margin: 0 auto 10px;
+  }
+
+  .arch-item {
+    width: 100%;
+  }
+}
+</style>

src/view/HomePage.vue

@@ -23,6 +23,47 @@
       </div>
     </div>
 
+    <!-- 解决方案列表索引 -->
+    <div id="solutionsIndex" class="l-container-fluid l-section">
+      <div class="container">
+        <div class="section-header">
+          <div class="section-tag">
+            <span class="tag-dot"></span>
+            <span>SOLUTIONS</span>
+          </div>
+          <h2 class="section-title">无人机行业解决方案</h2>
+          <p class="section-subtitle">Professional Solutions</p>
+        </div>
+
+        <div class="solutions-grid">
+          <router-link
+            v-for="(item, index) in solutionsList"
+            :key="index"
+            :to="item.path"
+            class="solution-card"
+          >
+            <div class="solution-image">
+              <img :src="item.image" :alt="item.title">
+              <div class="solution-overlay">
+                <i class="solution-icon glyphicon glyphicon-link"></i>
+              </div>
+            </div>
+            <div class="solution-content">
+              <h3>{{ item.title }}</h3>
+              <p>{{ item.description }}</p>
+            </div>
+          </router-link>
+        </div>
+
+        <div class="text-center">
+          <a href="#/solutions" class="btn-view-all">
+            查看更多解决方案
+            <i class="glyphicon glyphicon-chevron-right"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+
     <!-- DJI Dock -->
     <div id="djiDock" class="l-container-fluid l-section">
       <div class="container">
@@ -202,6 +243,34 @@ export default {
         }
       ],
 
+      // 解决方案列表
+      solutionsList: [
+        {
+          path: '/solutions/surveying',
+          title: '基础测绘',
+          description: '快速进行大范围二维、三维建模，生成地形数据，降低外业成本',
+          image: require('@/assets/img/service1.jpg')
+        },
+        {
+          path: '/solutions/building',
+          title: '建筑工程',
+          description: '房屋建筑业（房建）和土木工程建筑业（基建）领域应用',
+          image: require('@/assets/img/service2.jpg')
+        },
+        {
+          path: '/solutions/safety',
+          title: '安全生产',
+          description: '提供可见光或红外热成像数据，全天候自动化安全巡检',
+          image: require('@/assets/img/service3.jpg')
+        },
+        {
+          path: '/solutions/emergency-rescue',
+          title: '应急救援',
+          description: '救援队伍使用无人机通过空中视角对灾情进行评估、研判',
+          image: require('@/assets/img/service4.jpg')
+        }
+      ],
+
       serverList: [
         {
           logo: require("@/assets/img/tel.png"),
@@ -385,6 +454,143 @@ export default {
   transform: scale(1.1);
 }
 
+/* ===== 解决方案列表索引 ===== */
+#solutionsIndex {
+  background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
+  padding: 80px 0;
+}
+
+#solutionsIndex .section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+#solutionsIndex .section-title {
+  font-size: 36px;
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  margin: 16px 0 8px;
+}
+
+#solutionsIndex .section-subtitle {
+  font-size: 16px;
+  color: var(--text-muted);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 1px;
+}
+
+#solutionsIndex .solutions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+#solutionsIndex .solution-card {
+  display: block;
+  background: #fff;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  transition: var(--transition-bounce);
+  text-decoration: none;
+  color: inherit;
+}
+
+#solutionsIndex .solution-card:hover {
+  transform: translateY(-10px);
+  box-shadow: var(--shadow-lg), var(--glow-blue);
+}
+
+#solutionsIndex .solution-image {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+}
+
+#solutionsIndex .solution-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+#solutionsIndex .solution-card:hover .solution-image img {
+  transform: scale(1.1);
+}
+
+#solutionsIndex .solution-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(30, 115, 190, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+#solutionsIndex .solution-card:hover .solution-overlay {
+  opacity: 1;
+}
+
+#solutionsIndex .solution-icon {
+  color: #fff;
+  font-size: 32px;
+}
+
+#solutionsIndex .solution-content {
+  padding: 25px;
+}
+
+#solutionsIndex .solution-content h3 {
+  font-size: 20px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0 0 12px;
+}
+
+#solutionsIndex .solution-content p {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-tertiary);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+#solutionsIndex .btn-view-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 32px;
+  background: var(--primary-gradient);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 15px;
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--transition-base);
+  margin-top: 20px;
+  box-shadow: var(--shadow-sm);
+}
+
+#solutionsIndex .btn-view-all:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md);
+}
+
+#solutionsIndex .btn-view-all i {
+  font-size: 12px;
+}
+
 /* ===== DJI Dock - 现代化布局 ===== */
 #djiDock {
   padding: 100px 0;
@@ -783,7 +989,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: 
+  background:
     radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
     radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
 }
@@ -860,6 +1066,19 @@ export default {
 
 /* 平板端 */
 @media screen and (max-width: 996px) {
+  #solutionsIndex {
+    padding: 60px 0;
+  }
+
+  #solutionsIndex .section-title {
+    font-size: 28px;
+  }
+
+  #solutionsIndex .solutions-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+  }
+
   #djiDock .dock-grid {
     grid-template-columns: 1fr;
     gap: 40px;
@@ -893,6 +1112,27 @@ export default {
 
 /* 手机端 */
 @media screen and (max-width: 768px) {
+  #solutionsIndex {
+    padding: 40px 0;
+  }
+
+  #solutionsIndex .section-title {
+    font-size: 24px;
+  }
+
+  #solutionsIndex .section-subtitle {
+    font-size: 14px;
+  }
+
+  #solutionsIndex .solutions-grid {
+    grid-template-columns: 1fr;
+  }
+
+  #solutionsIndex .btn-view-all {
+    padding: 12px 24px;
+    font-size: 14px;
+  }
+
   #swiper .banner-swiper .swiper-slide-title .slide-content {
     padding: 20px;
     margin: 0 20px;

src/view/Solutions/Index.vue

@@ -2,8 +2,7 @@
   <div id="Solutions">
     <!-- Banner -->
     <div class="banner container-fuild text-center">
-      <h1>解决方案</h1>
-      <p>无人机行业应用解决方案</p>
+      <h1>行业应用解决方案</h1>
     </div>
 
     <!-- 解决方案列表 -->
@@ -13,7 +12,7 @@
           <span class="tag-dot"></span>
           <span>SOLUTIONS</span>
         </div>
-        <h2 class="section-title">我们的解决方案</h2>
+        <h2 class="section-title">我们提供的无人机解决方案</h2>
         <p class="section-subtitle">Professional Solutions</p>
       </div>