no message

EMERGENCY_RESCUE_RENAME.md

@@ -0,0 +1,83 @@
+# 应急救援组件命名更新
+
+## ✅ 已完成重命名
+
+### 文件重命名对照表
+
+| 原文件名 | 新文件名 | 说明 |
+|----------|----------|------|
+| `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. 灾后评估
+
+所有功能和样式应保持不变。

ROUTE_UPDATE.md

@@ -0,0 +1,82 @@
+# 应急救援路由更新
+
+## ✅ 路由路径修改
+
+### 路由对照表
+
+| 类型 | 原路径 | 新路径 | 说明 |
+|------|--------|--------|------|
+| **访问路径** | `/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

@@ -0,0 +1,241 @@
+# 解决方案页面重构完成报告
+
+## ✅ 完成内容
+
+### 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

@@ -0,0 +1,112 @@
+# 解决方案路由修复说明
+
+## 问题原因
+之前 `/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/assets/css/rag-solutions.css

@@ -0,0 +1,228 @@
+/**
+ * RAG 解决方案页面样式
+ * Rag Solutions Styles
+ */
+
+/* 内容区块 */
+.content-block {
+  padding: 20px 0;
+  margin: 40px 0;
+}
+
+.content-block h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 30px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #474747;
+}
+
+.content-block h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.content-block h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.content-block h5 {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  margin: 15px 0 8px;
+}
+
+.content-block p {
+  font-size: 14px;
+  line-height: 1.8;
+  color: #666;
+}
+
+.content-block .lead {
+  font-size: 16px;
+  font-weight: 300;
+  color: #444;
+  margin-bottom: 25px;
+}
+
+/* 特性列表 */
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 20px 0;
+}
+
+.feature-list li {
+  font-size: 14px;
+  line-height: 2.2;
+  color: #555;
+}
+
+.feature-list li i {
+  color: #1e73be;
+  margin-right: 10px;
+}
+
+.feature-list li strong {
+  color: #333;
+}
+
+/* 场景卡片 */
+.scenario-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.scenario-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-5px);
+}
+
+.scenario-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  background: #f5f5f5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scenario-icon i {
+  font-size: 24px;
+  color: #1e73be;
+}
+
+.scenario-card h4 {
+  color: #1e73be;
+  margin-bottom: 12px;
+}
+
+.scenario-card p {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #666;
+  margin: 0;
+}
+
+/* 流程步骤 */
+.process-step {
+  padding: 20px;
+  text-align: center;
+}
+
+.process-step .step-number {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 15px;
+  background: #1e73be;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.process-step h5 {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  margin: 15px 0 8px;
+}
+
+.process-step p {
+  font-size: 13px;
+  color: #666;
+  margin: 0;
+}
+
+/* 交付物卡片 */
+.deliverable-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.deliverable-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-3px);
+}
+
+.deliverable-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  background: #f5f5f5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.deliverable-icon i {
+  font-size: 24px;
+  color: #1e73be;
+}
+
+.deliverable-card h5 {
+  color: #333;
+  margin: 15px 0 5px;
+}
+
+.deliverable-card p {
+  font-size: 12px;
+  color: #999;
+  margin: 0;
+}
+
+/* 信息框 */
+.info-box {
+  background: #f8f9fa;
+  border-left: 4px solid #1e73be;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.info-box h4 {
+  color: #1e73be;
+  margin-bottom: 10px;
+}
+
+.info-box p {
+  margin: 0;
+}
+
+.info-box strong {
+  color: #1e73be;
+  font-weight: 600;
+}
+
+/* 系统架构图 */
+.system-architecture {
+  margin: 30px 0;
+}
+
+.system-architecture img {
+  max-width: 100%;
+  height: auto;
+}

src/assets/css/solutions-common.css

@@ -19,10 +19,11 @@
 }
 
 .content-block h3 {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: var(--font-weight-semibold);
   color: var(--text-primary);
   margin-bottom: 20px;
+  text-align: center;
 }
 
 .content-block h4 {

src/components/Header.vue

@@ -87,6 +87,8 @@
 </template>
 
 <script>
+import { navConfig } from '@/config/nav-config'
+
 export default {
   name: "Header",
   data() {
@@ -94,29 +96,7 @@ export default {
       navIndex: sessionStorage.getItem('navIndex') || 0,
       menuName: "首页",
       menuClass: "glyphicon glyphicon-menu-down",
-      navList: [
-        { name: "首页", path: "/", children: [] },
-        {
-          name: "行业无人机",
-          path: "/products",
-          children: [
-            { name: "行业应用无人机", path: "/products/djiAircraft" },
-            { name: "无人机负载", path: "/products/payloads" },
-            { name: "软件与服务", path: "/products/software" },
-            { name: "软件定制开发", path: "/products/develop" }
-          ]
-        },
-        {
-          name: "AI应用定制",
-          path: "/solutions",
-          children: [
-            { name : "RAG", path : "/solutions/rag"},
-
-          ]
-        },
-        { name: "公司动态", path: "/news", children: [] },
-        { name: "公司介绍", path: "/info", children: [] }
-      ]
+      navList: navConfig
     };
   },
   methods: {

src/config/nav-config.js

@@ -0,0 +1,144 @@
+/**
+ * 导航配置
+ * Navigation Configuration
+ * 
+ * 统一的路由和导航配置，确保 Router 和 Header 保持一致
+ */
+
+export const navConfig = [
+  {
+    name: "首页",
+    path: "/home",
+    children: []
+  },
+  {
+    name: "产品",
+    path: "/products",
+    children: [
+      { name: "行业应用无人机", path: "/products/djiAircraft" },
+      { name: "无人机负载", path: "/products/payloads" },
+      { name: "软件与服务", path: "/products/software" },
+      { name: "软件定制开发", path: "/products/develop" }
+    ]
+  },
+  {
+    name: "解决方案",
+    path: "/solutions",
+    children: []
+  },
+  { name: "公司动态", path: "/news", children: [] },
+  { name: "公司介绍", path: "/info", children: [] },
+  { name: "加入我们", path: "/joinus", children: [] },
+  { name: "联系我们", path: "/contactus", children: [] }
+]
+
+// 导出路由配置辅助函数
+export function createRoutes() {
+  return [
+    {
+      path: '*',
+      redirect: '/'
+    },
+    {
+      path: '/',
+      component: resolve => require(['@/view/PageView'], resolve),
+      children: [
+        {
+          path: '/',
+          redirect: '/home'
+        },
+        {
+          path: '/home',
+          name: 'home',
+          component: resolve => require(['@/view/HomePage'], resolve),
+          meta: { title: '首页' }
+        },
+        {
+          path: '/products',
+          component: resolve => require(['@/view/Products/index'], resolve),
+          meta: { title: '产品' },
+          children: [
+            {
+              path: '/products',
+              redirect: '/products/djiAircraft'
+            },
+            {
+              path: '/products/djiAircraft',
+              name: 'djiAircraft',
+              component: resolve => require(['@/view/Products/DjiAircraft'], resolve),
+              meta: { title: '行业应用无人机' }
+            },
+            {
+              path: '/products/payloads',
+              name: 'payloads',
+              component: resolve => require(['@/view/Products/Payloads'], resolve),
+              meta: { title: '无人机负载' }
+            },
+            {
+              path: '/products/software',
+              name: 'software',
+              component: resolve => require(['@/view/Products/Software'], resolve),
+              meta: { title: '软件与服务' }
+            },
+            {
+              path: '/products/develop',
+              name: 'develop',
+              component: resolve => require(['@/view/Products/Develop'], resolve),
+              meta: { title: '软件定制开发' }
+            }
+          ]
+        },
+        {
+          path: '/solutions',
+          name: 'solutions',
+          component: resolve => require(['@/view/Solutions/index'], resolve),
+          meta: { title: '解决方案' }
+        },
+        {
+          path: '/solutions/surveying',
+          name: 'solutionsSurveying',
+          component: resolve => require(['@/view/Solutions/Surveying'], resolve),
+          meta: { title: '基础测绘解决方案' }
+        },
+        {
+          path: '/solutions/building',
+          name: 'solutionsBuilding',
+          component: resolve => require(['@/view/Solutions/Building'], resolve),
+          meta: { title: '建筑工程解决方案' }
+        },
+        {
+          path: '/solutions/safety',
+          name: 'solutionsSafety',
+          component: resolve => require(['@/view/Solutions/Safety'], resolve),
+          meta: { title: '安全生产解决方案' }
+        },
+        {
+          path: '/solutions/emergency-rescue',
+          name: 'solutionsEmergencyRescue',
+          component: resolve => require(['@/view/Solutions/EmergencyRescue'], resolve),
+          meta: { title: '应急救援解决方案' }
+        },
+        {
+          path: '/news',
+          component: resolve => require(['@/view/News/index'], resolve),
+          meta: { title: '公司动态' }
+        },
+        {
+          path: '/info',
+          component: resolve => require(['@/view/Info/index'], resolve),
+          meta: { title: '公司介绍' }
+        },
+        {
+          path: '/joinus',
+          component: resolve => require(['@/view/JoinUs/index'], resolve),
+          meta: { title: '加入我们' }
+        },
+        {
+          path: '/contactus',
+          component: resolve => require(['@/view/ContactUs/index'], resolve),
+          meta: { title: '联系我们' }
+        }
+      ]
+    }
+  ]
+}

src/main.js

@@ -31,6 +31,9 @@ import './assets/css/solutions-common.css'
 /* 产品页面通用样式 (新增) */
 import './assets/css/products-common.css'
 
+/* RAG 解决方案样式 (新增) */
+import './assets/css/rag-solutions.css'
+
 /* jquery */
 import 'jquery'
 

src/router/index.js

@@ -1,143 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { createRoutes } from '@/config/nav-config'
 
 Vue.use(Router)
 
 export default new Router({
-  routes: [
-    {
-      path: '*',
-      redirect: '/'
-    }, {
-      path: '/',
-      component: resolve => require(['@/view/PageView'], resolve),
-      children: [
-        {
-          path: '/',
-          redirect: '/home'
-        }, {
-          path: '/home',
-          name: 'home',
-          component: resolve => require(['@/view/HomePage'], resolve),
-          meta: {
-            title: '首页'
-          }
-        }, {
-          path: '/products',
-          component: resolve => require(['@/view/Products/index'], resolve),
-          meta: {
-            title: '产品'
-          },
-          children: [
-            {
-              path: '/products',
-              redirect: '/products/djiAircraft'
-            },
-            {
-              path: '/products/djiAircraft',
-              name: 'djiAircraft',
-              component: resolve => require(['@/view/Products/DjiAircraft'], resolve),
-              meta: {
-                title: '行业应用无人机'
-              }
-            },
-            {
-              path: '/products/payloads',
-              name: 'payloads',
-              component: resolve => require(['@/view/Products/Payloads'], resolve),
-              meta: {
-                title: '无人机负载'
-              }
-            },
-            {
-              path: '/products/software',
-              name: 'software',
-              component: resolve => require(['@/view/Products/Software'], resolve),
-              meta: {
-                title: '软件与服务'
-              }
-            },
-            {
-              path: '/products/develop',
-              name: 'develop',
-              component: resolve => require(['@/view/Products/Develop'], resolve),
-              meta: {
-                title: '软件定制开发'
-              }
-            },
-            // {
-            //   path: '/djiDetail',
-            //   name: 'djidetail',
-            //   component: resolve => require(['@/view/Products/DjiDetail'], resolve),
-            //   meta: {
-            //     title: '设备详情'
-            //   }
-            // },
-            // {
-            //   path: '/products/consult',
-            //   name: 'consult',
-            //   component: resolve => require(['@/view/Products/Consult'], resolve),
-            //   meta: {
-            //     title: '飞行咨询服务'
-            //   }
-            // }
-          ]
-        },
-        {
-          path: '/solutions',
-          name: 'solutions',
-          component: resolve => require(['@/view/Solutions/index'], resolve),
-          meta: {
-            title: '解决方案'
-          }
-        },
-        {
-          path: '/solutions/rag',
-          name: 'solutionsRag',
-          component: resolve => require(['@/view/Solutions/Rag'], resolve),
-          meta: {
-            title: '应急救援解决方案'
-          }
-        },
-        {
-          path: '/news',
-          component: resolve => require(['@/view/News/index'], resolve),
-          meta: {
-            title: '公司动态'
-          }
-        },
-        {
-          path: '/info',
-          component: resolve => require(['@/view/Info/index'], resolve),
-          meta: {
-            title: '公司介绍'
-          }
-        },
-        {
-          path: '/joinus',
-          component: resolve => require(['@/view/JoinUs/index'], resolve),
-          meta: {
-            title: '加入我们'
-          }
-        },
-        {
-          path: '/contactus',
-          component: resolve => require(['@/view/ContactUs/index'], resolve),
-          meta: {
-            title: '联系我们'
-          }
-        },
-        {
-          path: '/detail',
-          name: 'detail',
-          component: resolve => require(['@/view/Detail'], resolve),
-          meta: {
-            title: '详情'
-          }
-        },
-      ]
-    }
-  ]
+  routes: createRoutes()
 })
-
-

src/view/Solutions/Building.vue

@@ -1,63 +1,139 @@
 <template>
   <div id="Building">
-    <div class="container-fuild text-center">
-      <div id="main" class="container-fuild text-center">
-
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <h4 class="center-block main-title">
-            建筑工程应用
-          </h4>
-          <p>无人机前期采集数据分析填挖方量，计算工程量信息，数据及时共‍享；</p>
-          <p>无人机通过高空视角对人员进行安全巡视，对重点区域及机械等进行安全巡‍检；</p>
-          <p>基于三维点云或三维模型做测量，真实客观可重复，拟合地形点云数量百倍以‍上；</p>
-          <p>工程进度可通过全景图、正射影像、三维模型等多种形式直观展‍示。</p>
+    <div class="banner container-fuild text-center">建筑工程解决方案</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="item.id==id?'active':''"
+              v-for="(item,index) in navList"
+              :key="index"
+            >
+              <a :href="'#'+item.id">{{ item.title }}</a>
+            </li>
+          </ul>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/buil1.png">
-        </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/buil2.png" style="margin-bottom: 40px">
-        </div>
-
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/buil3.png">
-        </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/buil4.png" style="margin-bottom: 40px">
-        </div>
-
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/buil5.png">
-        </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/buil6.png" style="margin-bottom: 40px">
+        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" id="components">
+          <div
+            :id="item.id"
+            v-for="(item,index) in navList"
+            :key="index"
+          >
+            <component :is="item.component"/>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
+
 <script>
+import {WOW} from "wowjs";
+import BuildingIntro from './BuildingIntro.vue';
+import BuildingFeatures from './BuildingFeatures.vue';
+import BuildingApplication from './BuildingApplication.vue';
 
 export default {
-  name: 'Building',
+  name: "Building",
   data() {
-    return {}
+    return {
+      id: "section-1",
+      navList: [
+        {
+          id: "section-1",
+          title: "1.技术概述",
+          component: BuildingIntro,
+        },
+        {
+          id: "section-2",
+          title: "2.核心优势",
+          component: BuildingFeatures,
+        },
+        {
+          id: "section-3",
+          title: "3.应用场景",
+          component: BuildingApplication,
+        },
+      ],
+    };
   },
   mounted() {
-  },
-}
+    this.id = this.$route.params.id || "section-1";
+    
+    this.$nextTick(() => {
+      const element = document.getElementById(this.id);
+      if (element) {
+        const top = element.offsetTop;
+        window.scrollTo({ top: top + 100, behavior: 'smooth' });
+      }
+    });
+
+    var wow = new WOW();
+    wow.init();
+  }
+};
 </script>
+
 <style scoped>
-#Building {
-  margin: 24px 24px 0 24px;
-  width: 100%;
+.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;
 }
 
-#main p {
-  margin: 20px 0 30px;
-  font-family: var(--font-family-base);
-  font-weight: var(--font-weight-light);
-  font-size: 14px;
+ul.nav-tabs {
+  width: 120px;
+  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);
 }
-</style>
 
+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: 8px 16px;
+  border-radius: 0;
+  color: #333;
+  text-decoration: none;
+  display: block;
+}
+
+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;
+}
+</style>

src/view/Solutions/BuildingApplication.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="BuildingApplication" class="content-block">
+    <h2>应用场景</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机技术已深入建筑工程各个环节，为行业数字化转型提供强大助力。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-list-alt"></i>
+          </div>
+          <h4>勘察测量</h4>
+          <p>地形测绘、工程量计算、土方平衡分析等。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-blackboard"></i>
+          </div>
+          <h4>规划设计</h4>
+          <p>方案比选、视线分析、日照分析等。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-hammer"></i>
+          </div>
+          <h4>施工管理</h4>
+          <p>进度监控、质量检查、安全巡视等。</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-wrench"></i>
+          </div>
+          <h4>竣工验收</h4>
+          <p>竣工测量、质量验收、档案归档等。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-refresh"></i>
+          </div>
+          <h4>运营维护</h4>
+          <p>设施巡检、变形监测、维修决策等。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-warning-sign"></i>
+          </div>
+          <h4>安全监测</h4>
+          <p>边坡监测、沉降观测、隐患排查等。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BuildingApplication"
+};
+</script>
+
+<style scoped>
+#BuildingApplication {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/BuildingFeatures.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="BuildingFeatures" class="content-block">
+    <h2>核心优势</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机技术在建筑工程中的应用带来显著的效率提升和成本优化。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-dashboard"></i>
+          </div>
+          <h4>效率提升</h4>
+          <p>无人机前期采集数据分析填挖方量，计算工程量信息，数据及时共享。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-eye-open"></i>
+          </div>
+          <h4>安全巡检</h4>
+          <p>无人机通过高空视角对人员进行安全巡视，对重点区域及机械等进行安全巡检。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-screenshot"></i>
+          </div>
+          <h4>精准测量</h4>
+          <p>基于三维点云或三维模型做测量，真实客观可重复，拟合地形点云数量百倍以上。</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-time"></i> 进度展示</h4>
+          <p>工程进度可通过全景图、正射影像、三维模型等多种形式直观展示，为项目管理提供科学依据。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BuildingFeatures"
+};
+</script>
+
+<style scoped>
+#BuildingFeatures {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/BuildingIntro.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="BuildingIntro" class="content-block">
+    <h2>建筑工程技术概述</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机技术在房屋建筑业和土木工程建筑业中的应用，为工程建设提供全方位的空间信息服务。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-6 wow fadeInLeft">
+        <img class="img-responsive center-block" src="@/assets/img/buil1.png" alt="建筑工程">
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-6">
+        <h3>应用领域</h3>
+        <ul class="feature-list">
+          <li><i class="glyphicon glyphicon-check"></i> <strong>房屋建筑</strong> - 住宅、商业、公共建筑等</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>土木工程</strong> - 道路、桥梁、隧道、水利等</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>基础设施</strong> - 管线、电力、通信等</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>工程监理</strong> - 进度、质量、安全监控</li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-stats"></i> 应用价值</h4>
+          <p>无人机技术贯穿建筑工程全生命周期，从前期勘察、设计规划、施工建设到运营维护，提供高效、精准、可视化的数据支持，助力工程建设数字化转型。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BuildingIntro"
+};
+</script>
+
+<style scoped>
+#BuildingIntro {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/RagCommandDispatch.vue → src/view/Solutions/EmergencyCommandDispatch.vue

@@ -65,51 +65,12 @@
 
 <script>
 export default {
-  name: "RagCommandDispatch"
+  name: "EmergencyCommandDispatch"
 };
 </script>
 
 <style scoped>
-#RagCommandDispatch {
-  padding: 20px 0;
-}
-
-#RagCommandDispatch h2 {
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 30px;
-  padding-bottom: 15px;
-  border-bottom: 2px solid #474747;
-}
-
-#RagCommandDispatch h3 {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 20px;
-}
-
-#RagCommandDispatch h4 {
-  font-size: 15px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 10px;
-}
-
-#RagCommandDispatch p {
-  font-size: 14px;
-  line-height: 1.8;
-  color: #666;
-}
-
-#RagCommandDispatch .lead {
-  font-size: 16px;
-  font-weight: 300;
-  color: #444;
-  margin-bottom: 25px;
-}
-
+/* 样式已全局定义：rag-solutions.css */
 .system-architecture {
   margin: 30px 0;
 }

src/view/Solutions/RagDisasterResponse.vue → src/view/Solutions/EmergencyDisasterResponse.vue

@@ -53,7 +53,7 @@
 
 <script>
 export default {
-  name: "RagDisasterResponse"
+  name: "EmergencyDisasterResponse"
 };
 </script>
 

src/view/Solutions/RagPostEvaluation.vue → src/view/Solutions/EmergencyPostEvaluation.vue

@@ -112,11 +112,10 @@
 
 <script>
 export default {
-  name: "RagPostEvaluation"
+  name: "EmergencyPostEvaluation"
 };
 </script>
 
 <style scoped>
-/* 使用全局样式，无需额外定义 */
-/* content-block, feature-list, process-step, deliverable-card, info-box 已在全局定义 */
+/* 样式已全局定义：rag-solutions.css */
 </style>

src/view/Solutions/Rag.vue → src/view/Solutions/EmergencyRescue.vue

@@ -32,13 +32,13 @@
 import {WOW} from "wowjs";
 
 // 导入子组件
-import DisasterResponse from './RagDisasterResponse.vue';
-import SearchRescue from './RagSearchRescue.vue';
-import CommandDispatch from './RagCommandDispatch.vue';
-import PostEvaluation from './RagPostEvaluation.vue';
+import DisasterResponse from './EmergencyDisasterResponse.vue';
+import SearchRescue from './EmergencySearchRescue.vue';
+import CommandDispatch from './EmergencyCommandDispatch.vue';
+import PostEvaluation from './EmergencyPostEvaluation.vue';
 
 export default {
-  name: "Rag",
+  name: "EmergencyRescue",
   data() {
     return {
       id: "section-1",
@@ -67,20 +67,12 @@ export default {
     };
   },
   mounted() {
-    this.id = this.$route.params.id || "section-1";
-    
-    // 滚动到指定位置
-    this.$nextTick(() => {
-      const element = document.getElementById(this.id);
-      if (element) {
-        const top = element.offsetTop;
-        window.scrollTo({ top: top + 100, behavior: 'smooth' });
-      }
-    });
-
     // 初始化 WOW 动画
     var wow = new WOW();
     wow.init();
+    
+    // 滚动到顶部
+    window.scrollTo({ top: 0, behavior: 'smooth' });
   },
   methods: {
     // 可在需要时添加滚动监听
@@ -150,12 +142,178 @@ ul.nav-tabs li:last-child a {
   border-radius: 0 0 4px 4px;
 }
 
+/* 内容区块样式 - 确保子组件内容能正确显示 */
 .content-block {
-  margin: 50px 0;
+  padding: 20px 0;
+  min-height: 500px;
 }
 
-.content-block > h2 {
-  padding: 20px 0;
-  border-bottom: 1px solid #ccc;
+.content-block h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 30px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #474747;
+}
+
+.content-block h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.content-block p {
+  font-size: 14px;
+  line-height: 1.8;
+  color: #666;
+  margin: 15px 0;
+}
+
+.content-block .lead {
+  font-size: 16px;
+  font-weight: 300;
+  color: #444;
+  margin-bottom: 25px;
+}
+
+/* 行和列 */
+.row {
+  margin: 20px 0;
+}
+
+/* 特性列表 */
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 20px 0;
+}
+
+.feature-list li {
+  font-size: 14px;
+  line-height: 2;
+  color: #555;
+  padding: 5px 0;
+}
+
+.feature-list li i {
+  color: #1e73be;
+  margin-right: 10px;
+  width: 16px;
+  display: inline-block;
+}
+
+/* 场景卡片 */
+.scenario-card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.scenario-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-5px);
+}
+
+.scenario-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  background: #f5f5f5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scenario-icon i {
+  font-size: 24px;
+  color: #1e73be;
+}
+
+.scenario-card h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.scenario-card p {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #666;
+  margin: 0;
+}
+
+/* 图片 */
+.img-responsive {
+  max-width: 100%;
+  height: auto;
+}
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* WOW 动画 */
+.wow {
+  visibility: hidden;
+}
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInRight {
+  animation-name: fadeInRight;
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  animation-name: zoomIn;
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInLeft {
+  animation-name: fadeInLeft;
 }
 </style>

src/view/Solutions/RagSearchRescue.vue → src/view/Solutions/EmergencySearchRescue.vue

@@ -75,11 +75,10 @@
 
 <script>
 export default {
-  name: "RagSearchRescue"
+  name: "EmergencySearchRescue"
 };
 </script>
 
 <style scoped>
-/* 使用全局样式，无需额外定义 */
-/* content-block, feature-list, process-step, info-box 已在全局定义 */
+/* 样式已全局定义：rag-solutions.css */
 </style>

src/view/Solutions/Index.vue

@@ -1,179 +1,233 @@
 <template>
   <div id="Solutions">
-    <div class="container text-center">
-      <h3>解决方案</h3>
-      <p style="color:#b2b2b2">无人机行业应用解决方案</p>
+    <!-- Banner -->
+    <div class="banner container-fuild text-center">
+      <h1>解决方案</h1>
+      <p>无人机行业应用解决方案</p>
     </div>
-    <div class="container">
-      <ul class="accordion-container col-md-12 hidden-xs hidden-sm">
-        <li class="accordion-item" v-for="(item, index) in largeList" :key="index"
-            :style="{backgroundImage: 'url(' + item.backgroundImage + ')'}" @click="AccordingClick(item.id)">
-          <h5 class="container text-left"> {{ item.title }}
-          </h5>
-          <p class="container text-left" > {{ item.sm_title }}
-          </p>
-        </li>
-      </ul>
-      <!--移动端-->
-      <VerticalList :items="smallList" @item-click="AccordingClick"/>
 
+    <!-- 解决方案列表 -->
+    <div class="l-container l-section">
+      <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>
   </div>
 </template>
+
 <script>
 import {WOW} from 'wowjs';
-import VerticalList from '../../components/VerticalList.vue'
-import Surveying  from './Surveying.vue'
 
 export default {
   name: 'Solutions',
-  components: {VerticalList},
   data() {
     return {
-      // 移动端显示
-      smallList: [
+      solutionsList: [
         {
-          id: 'section-1',
+          path: '/solutions/surveying',
           title: '基础测绘',
-          sm_title: '快速进行大范围二维、三维建模',
-          img: require('@/assets/img/service1.jpg'),
-          // 跳转到当前Solution 目录下的其他组件，组件名为：Solution1
-          component:Surveying
-
-        }, {
-          id: 'section-2',
-          title: '建筑工程',
-          sm_title: '房屋建筑业和土木工程建筑业应用',
-          img: require('@/assets/img/service2.jpg')
-        }, {
-          id: 'section-3',
-          title: '安全生产',
-          sm_title: '提供可见光或红外热成像数据',
-          img: require('@/assets/img/service3.jpg')
-        }, {
-          id: 'section-4',
-          title: '应急救援',
-          sm_title: '使用无人机开展辅助救援工‍作',
-          img: require('@/assets/img/service4.jpg')
+          description: '快速进行大范围二维、三维建模，生成地形数据，降低外业成本',
+          image: require('@/assets/img/service1.jpg')
         },
-        // {
-        //   id: 'section-5',
-        //   title: '自然资源调查',
-        //   sm_title: '提供可见光或多光谱数据，对植被、水域、道路等进行自动化高效分类',
-        //   img: require('@/assets/img/service4.jpg')
-        // }
-      ],
-      // web显示
-      largeList: [
         {
-          id: 'section-1',
-          backgroundImage: require('@/assets/img/service1.jpg'),
-          title: "基础测绘",
-          sm_title: '快速进行大范围二维、三维建模，生成地形数据，降低外业成本',
-        }, {
-          id: 'section-2',
-          backgroundImage: require('@/assets/img/service2.jpg'),
-          title: "建筑工程",
-          sm_title: '房屋建筑业（房建）和土木工程建筑业（基建）领域应用',
-        }, {
-          id: 'section-3',
-          backgroundImage: require('@/assets/img/service3.jpg'),
-          title: "安全生产",
-          sm_title: '提供可见光或红外热成像数据',
+          path: '/solutions/building',
+          title: '建筑工程',
+          description: '房屋建筑业（房建）和土木工程建筑业（基建）领域应用',
+          image: require('@/assets/img/service2.jpg')
         },
         {
-          id: 'section-4',
-          backgroundImage: require('@/assets/img/service4.jpg'),
-          title: "应急救援",
-          sm_title: '救援队伍使用无人机通过空中视角对灾情进行评估、研判，开展辅助救援工‍作',
+          path: '/solutions/safety',
+          title: '安全生产',
+          description: '提供可见光或红外热成像数据，全天候自动化安全巡检',
+          image: require('@/assets/img/service3.jpg')
         },
-        // {
-        //   id: 'section-5',
-        //   backgroundImage: require('@/assets/img/service1.jpg'),
-        //   title: "自然资源调查",
-        //   sm_title: '无人机可提供可见光或多光谱数据，可对植被、水域、道路等进行自动化高效分类，为资源管理提供科学可靠的信‍息。',
-        // },
+        {
+          path: '/solutions/emergency-rescue',
+          title: '应急救援',
+          description: '救援队伍使用无人机通过空中视角对灾情进行评估、研判',
+          image: require('@/assets/img/service4.jpg')
+        }
       ]
-    }
+    };
   },
   mounted() {
     var wow = new WOW();
     wow.init();
-  },
-  methods: {
-    AccordingClick(id) {
-      this.$router.push({
-        name: 'detail', // 解释：这里的name是路由的name，不是组件的name，在router/index.js中定义,我需要修改detail.vue的位置，
-        params: {
-          id: id
-        }
-      })
-    }
   }
-}
+};
 </script>
+
 <style scoped>
-.accordion-container {
+/* 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;
-  justify-content: flex-start;
-  align-items: flex-start;
-  background: white;
-
-  .accordion-item {
-    list-style: none;
-    height: 480px;
-    transition: width 0.5s;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:not(:hover) {
-      width: 25%;
-    }
-
-    &:hover {
-      width: 50%;
-
-      &::after {
-        opacity: 1;
-      }
-    }
-
-    &::after {
-      content: '';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      background-color: rgba(0, 0, 0, 0.1);
-      z-index: 1;
-      opacity: 0;
-      transition: opacity 0.5s;
-    }
-
-    h5 {
-      font-family: var(--font-family-base);
-      font-weight: var(--font-weight-medium);
-      color: #fff;
-      font-size: 18px;
-      margin-bottom: 240px;
-      z-index: 2;
-    }
-
-    p {
-      font-family: var(--font-family-base);
-      font-weight: var(--font-weight-light);
-      color: #fff;
-      font-size: 14px;
-      z-index: 2;
-    }
+  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;
+}
+
+/* 响应式 */
+@media screen and (max-width: 991px) {
+  .banner {
+    height: 150px;
+  }
+
+  .banner h1 {
+    font-size: 28px;
+  }
+
+  .solutions-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
-</style>
 
+@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/Solutions/Safety.vue

@@ -1,49 +1,139 @@
 <template>
   <div id="Safety">
-    <div class="container-fuild text-center">
-      <div id="main" class="container-fuild text-center">
-
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <h4 class="center-block main-title">
-            安全生产应用
-          </h4>
-          <p>无人机具备灵活机动的空中视角，与地面形成有效互补，为隐患排查降本增‍效；</p>
-          <p>可以开展全天候、自动化、常态化的安全生产空中巡检，巡检素材自动归档，形成巡检历史记‍录。</p>
+    <div class="banner container-fuild text-center">安全生产解决方案</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="item.id==id?'active':''"
+              v-for="(item,index) in navList"
+              :key="index"
+            >
+              <a :href="'#'+item.id">{{ item.title }}</a>
+            </li>
+          </ul>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/safe1.png">
+        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" id="components">
+          <div
+            :id="item.id"
+            v-for="(item,index) in navList"
+            :key="index"
+          >
+            <component :is="item.component"/>
+          </div>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/safe2.png" style="margin-bottom: 40px">
-        </div>
-
-
       </div>
     </div>
   </div>
 </template>
+
 <script>
+import {WOW} from "wowjs";
+import SafetyIntro from './SafetyIntro.vue';
+import SafetyFeatures from './SafetyFeatures.vue';
+import SafetyApplication from './SafetyApplication.vue';
 
 export default {
-  name: 'Safety',
+  name: "Safety",
   data() {
-    return {}
+    return {
+      id: "section-1",
+      navList: [
+        {
+          id: "section-1",
+          title: "1.技术概述",
+          component: SafetyIntro,
+        },
+        {
+          id: "section-2",
+          title: "2.核心优势",
+          component: SafetyFeatures,
+        },
+        {
+          id: "section-3",
+          title: "3.应用场景",
+          component: SafetyApplication,
+        },
+      ],
+    };
   },
   mounted() {
-  },
-}
+    this.id = this.$route.params.id || "section-1";
+    
+    this.$nextTick(() => {
+      const element = document.getElementById(this.id);
+      if (element) {
+        const top = element.offsetTop;
+        window.scrollTo({ top: top + 100, behavior: 'smooth' });
+      }
+    });
+
+    var wow = new WOW();
+    wow.init();
+  }
+};
 </script>
+
 <style scoped>
-#Safety {
-  margin: 24px 24px 0 24px;
-  width: 100%;
+.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;
 }
 
-#main p {
-  margin: 20px 0 30px;
-  font-family: var(--font-family-base);
-  font-weight: var(--font-weight-light);
-  font-size: 14px;
+ul.nav-tabs {
+  width: 120px;
+  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);
 }
-</style>
 
+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: 8px 16px;
+  border-radius: 0;
+  color: #333;
+  text-decoration: none;
+  display: block;
+}
+
+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;
+}
+</style>

src/view/Solutions/SafetyApplication.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="SafetyApplication" class="content-block">
+    <h2>应用场景</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机安全巡检已广泛应用于多个行业领域，为安全生产保驾护航。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-fire"></i>
+          </div>
+          <h4>化工园区</h4>
+          <p>储罐区、生产装置区、管廊等区域的安全巡检，有毒有害气体检测。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-flash"></i>
+          </div>
+          <h4>电力巡检</h4>
+          <p>输电线路、变电站、配电设施等电力设备的巡检和故障排查。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-road"></i>
+          </div>
+          <h4>交通设施</h4>
+          <p>高速公路、桥梁、隧道等交通基础设施的安全监测。</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-home"></i>
+          </div>
+          <h4>建筑工地</h4>
+          <p>施工现场安全巡查，高空作业监控，隐患排查。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-tint"></i>
+          </div>
+          <h4>水利设施</h4>
+          <p>水库、堤坝、灌区等水利设施的安全监测和巡查。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-tree-conifer"></i>
+          </div>
+          <h4>林业防火</h4>
+          <p>林区火情监测、防火巡护、火场侦查等。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SafetyApplication"
+};
+</script>
+
+<style scoped>
+#SafetyApplication {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/SafetyFeatures.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="SafetyFeatures" class="content-block">
+    <h2>核心优势</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">相比传统人工巡检方式，无人机巡检具有显著的安全和效率优势。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-shield"></i>
+          </div>
+          <h4>安全保障</h4>
+          <p>替代人工进行高空、高危环境巡检，减少人员涉险抵近，降低安全风险。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-dashboard"></i>
+          </div>
+          <h4>高效便捷</h4>
+          <p>快速部署，灵活机动，巡检效率是传统方式的 3-5 倍。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-eye-open"></i>
+          </div>
+          <h4>全面覆盖</h4>
+          <p>空中视角无死角，可到达人员难以抵达的区域，实现全面覆盖。</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-6 col-md-6">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-usd"></i> 成本优化</h4>
+          <p>减少人工投入和安全防护成本，降低因安全事故导致的潜在损失。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-6">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-hdd"></i> 数据管理</h4>
+          <p>巡检素材自动归档，形成巡检历史记录，支持数据追溯和趋势分析。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SafetyFeatures"
+};
+</script>
+
+<style scoped>
+#SafetyFeatures {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/SafetyIntro.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="SafetyIntro" class="content-block">
+    <h2>安全生产技术概述</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机作为空中智能巡检平台，为安全生产管理提供灵活、高效、可视化的技术手段，实现全天候、自动化、常态化的安全巡检。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-6 wow fadeInLeft">
+        <img class="img-responsive center-block" src="@/assets/img/safe1.png" alt="安全生产">
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-6">
+        <h3>核心功能</h3>
+        <ul class="feature-list">
+          <li><i class="glyphicon glyphicon-check"></i> <strong>空中巡检</strong> - 替代人工高空巡检，降低作业风险</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>隐患排查</strong> - 高空视角发现地面难以察觉的安全隐患</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>实时监控</strong> - 视频实时回传，支持远程指挥决策</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>数据归档</strong> - 巡检素材自动归档，形成历史记录</li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-stats"></i> 应用价值</h4>
+          <p>无人机具备灵活机动的空中视角，与地面形成有效互补，为隐患排查降本增效。可以开展全天候、自动化、常态化的安全生产空中巡检，巡检素材自动归档，形成巡检历史记录，为安全管理提供科学依据。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SafetyIntro"
+};
+</script>
+
+<style scoped>
+#SafetyIntro {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/Surveying.vue

@@ -1,56 +1,145 @@
 <template>
   <div id="Surveying">
-    <div class="container-fuild text-center">
-      <div id="main" class="container-fuild text-center">
-
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <h4 class="center-block main-title">
-            基础测绘应用
-          </h4>
-          <p>外业数据采集的效率是传统人工方式的 5 至 10 倍，缩短项目周期，实现快速交付，同时可实现 1:500
-            免像控测绘，满足高精度地籍测量需‍求；</p>
-          <p>可单人操作，作业便‍携。提供 DOM、DSM、实景三维模型、数字线划图等多种测绘成‍果；</p>
-          <p>无人机测绘数据可直接导入 GIS 系统，实现数据的快速更新，提高数据的精度和时效性，为城市管理提供数据支撑。</p>
+    <div class="banner container-fuild text-center">基础测绘解决方案</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="item.id==id?'active':''"
+              v-for="(item,index) in navList"
+              :key="index"
+            >
+              <a :href="'#'+item.id">{{ item.title }}</a>
+            </li>
+          </ul>
         </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/sur1.png">
-        </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/sur2.png" style="margin-bottom: 40px">
-        </div>
-
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/sur3.png">
-        </div>
-        <div class="col-sm-12 col-md-12 col-lg-12">
-          <img class="center-block img-responsive" src="@/assets/img/sur4.png" style="margin-bottom: 40px">
+        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" id="components">
+          <div
+            :id="item.id"
+            v-for="(item,index) in navList"
+            :key="index"
+          >
+            <component :is="item.component"/>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
+
 <script>
+import {WOW} from "wowjs";
+import SurveyingIntro from './SurveyingIntro.vue';
+import SurveyingFeatures from './SurveyingFeatures.vue';
+import SurveyingData from './SurveyingData.vue';
+import SurveyingApplication from './SurveyingApplication.vue';
 
 export default {
-  name: 'Surveying',
+  name: "Surveying",
   data() {
-    return {}
+    return {
+      id: "section-1",
+      navList: [
+        {
+          id: "section-1",
+          title: "1.技术概述",
+          component: SurveyingIntro,
+        },
+        {
+          id: "section-2",
+          title: "2.核心优势",
+          component: SurveyingFeatures,
+        },
+        {
+          id: "section-3",
+          title: "3.数据成果",
+          component: SurveyingData,
+        },
+        {
+          id: "section-4",
+          title: "4.应用场景",
+          component: SurveyingApplication,
+        },
+      ],
+    };
   },
   mounted() {
-  },
-}
+    this.id = this.$route.params.id || "section-1";
+    
+    this.$nextTick(() => {
+      const element = document.getElementById(this.id);
+      if (element) {
+        const top = element.offsetTop;
+        window.scrollTo({ top: top + 100, behavior: 'smooth' });
+      }
+    });
+
+    var wow = new WOW();
+    wow.init();
+  }
+};
 </script>
+
 <style scoped>
-#Surveying {
-  margin: 24px 24px 0 24px;
-  width: 100%;
+.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;
 }
 
-#main p {
-  margin: 20px 0 30px;
-  font-family: var(--font-family-base);
-  font-weight: var(--font-weight-light);
-  font-size: 14px;
+ul.nav-tabs {
+  width: 120px;
+  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;
 }
-</style>
 
+ul.nav-tabs li:first-child {
+  border-top: none;
+}
+
+ul.nav-tabs li a {
+  margin: 0;
+  padding: 8px 16px;
+  border-radius: 0;
+  color: #333;
+  text-decoration: none;
+  display: block;
+}
+
+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;
+}
+</style>

src/view/Solutions/SurveyingApplication.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="SurveyingApplication" class="content-block">
+    <h2>应用场景</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机测绘技术已广泛应用于多个领域，为各行业提供高效精准的空间数据服务。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-home"></i>
+          </div>
+          <h4>地籍测量</h4>
+          <p>快速获取宗地界址点坐标，生成地籍图，支持不动产登记和管理。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-road"></i>
+          </div>
+          <h4>地形图测绘</h4>
+          <p>生产各种比例尺地形图，为规划设计提供基础地理信息数据。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-stats"></i>
+          </div>
+          <h4>工程测量</h4>
+          <p>道路、桥梁、水利等工程项目的地形测绘和工程量计算。</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-tree-conifer"></i>
+          </div>
+          <h4>林业调查</h4>
+          <p>森林资源调查、蓄积量估算、病虫害监测等。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-tint"></i>
+          </div>
+          <h4>水利测绘</h4>
+          <p>河道地形测量、水库库容计算、洪水淹没分析等。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-th-large"></i>
+          </div>
+          <h4>城市规划</h4>
+          <p>城市地形更新、规划选址分析、三维城市建设等。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SurveyingApplication"
+};
+</script>
+
+<style scoped>
+#SurveyingApplication {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/SurveyingData.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="SurveyingData" class="content-block">
+    <h2>数据成果</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机测绘可生成多种类型的测绘成果，满足不同应用场景的需求。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
+        <div class="deliverable-card">
+          <div class="deliverable-icon">
+            <i class="glyphicon glyphicon-picture"></i>
+          </div>
+          <h5>数字正射影像 (DOM)</h5>
+          <p>高分辨率航拍影像图</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
+        <div class="deliverable-card">
+          <div class="deliverable-icon">
+            <i class="glyphicon glyphicon-th"></i>
+          </div>
+          <h5>数字表面模型 (DSM)</h5>
+          <p>包含地物的高程模型</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
+        <div class="deliverable-card">
+          <div class="deliverable-icon">
+            <i class="glyphicon glyphicon-globe"></i>
+          </div>
+          <h5>数字高程模型 (DEM)</h5>
+          <p>裸地高程数据模型</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
+        <div class="deliverable-card">
+          <div class="deliverable-icon">
+            <i class="glyphicon glyphicon-map-marker"></i>
+          </div>
+          <h5>数字线划图 (DLG)</h5>
+          <p>矢量地形要素图</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-folder-open"></i> 三维实景模型</h4>
+          <p>通过倾斜摄影测量技术，可生成高分辨率的三维实景模型，真实还原地表场景，为城市规划、智慧城市建设提供直观的三维数据基础。模型可直接导入 GIS 系统，实现数据的快速更新和高效管理。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SurveyingData"
+};
+</script>
+
+<style scoped>
+#SurveyingData {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/SurveyingFeatures.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="SurveyingFeatures" class="content-block">
+    <h2>核心优势</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">相比传统测绘方式，无人机测绘具有显著的技术和经济优势。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-time"></i>
+          </div>
+          <h4>高效快速</h4>
+          <p>外业数据采集效率是传统人工方式的 5 至 10 倍，大幅缩短项目周期。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-usd"></i>
+          </div>
+          <h4>成本降低</h4>
+          <p>减少人力投入和外业时间，综合成本降低 30%-50%。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4 wow zoomIn">
+        <div class="scenario-card">
+          <div class="scenario-icon">
+            <i class="glyphicon glyphicon-screenshot"></i>
+          </div>
+          <h4>精度可靠</h4>
+          <p>实现 1:500 免像控测绘，满足高精度地籍测量需求。</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-6 col-md-6">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-leaf"></i> 绿色环保</h4>
+          <p>无人机电动作业零排放，噪音低，对环境友好，符合可持续发展理念。</p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-6">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-user"></i> 操作便捷</h4>
+          <p>可单人操作，作业便携，自动化程度高，降低了对操作人员的技术要求。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SurveyingFeatures"
+};
+</script>
+
+<style scoped>
+#SurveyingFeatures {
+  padding: 20px 0;
+}
+</style>

src/view/Solutions/SurveyingIntro.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="SurveyingIntro" class="content-block">
+    <h2>基础测绘技术概述</h2>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <p class="lead">无人机测绘技术是传统测绘与航空摄影测量的创新结合，通过搭载高精度传感器，实现高效、精准的地形数据采集与处理。</p>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-6 wow fadeInLeft">
+        <img class="img-responsive center-block" src="@/assets/img/sur1.png" alt="基础测绘">
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-6">
+        <h3>技术特点</h3>
+        <ul class="feature-list">
+          <li><i class="glyphicon glyphicon-check"></i> <strong>高精度采集</strong> - 厘米级定位精度，满足 1:500 测绘要求</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>高效作业</strong> - 单日作业面积可达传统方法的 5-10 倍</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>灵活机动</strong> - 适应复杂地形，单人即可操作</li>
+          <li><i class="glyphicon glyphicon-check"></i> <strong>数据丰富</strong> - 同时获取影像、点云、三维模型等多源数据</li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 40px;">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="info-box">
+          <h4><i class="glyphicon glyphicon-stats"></i> 应用价值</h4>
+          <p>无人机测绘技术已广泛应用于地籍测量、地形图测绘、工程测量等领域，可生成 DOM、DSM、DEM、三维实景模型等多种测绘成果，为城市规划、国土资源管理、工程建设等提供准确的空间数据支撑。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SurveyingIntro"
+};
+</script>
+
+<style scoped>
+#SurveyingIntro {
+  padding: 20px 0;
+}
+</style>