解决路由配置中的报错

web/src/components/SolutionLayout/index.vue

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
+interface Feature {
+  title: string;
+  description: string;
+}
+
+interface Scenario {
+  title: string;
+  description: string;
+}
+
+interface SolutionConfig {
+  type: 'emergency' | 'lawEnforcement' | 'publicSafety' | 'safetyProduction';
+  title: string;
+  description: string;
+  features: Feature[];
+  scenarios: Scenario[];
+}
+
+// 应急救援配置
+const emergencyConfigs: Record<string, SolutionConfig> = {
+  flood: {
+    type: 'emergency',
+    title: '洪涝灾害救援解决方案',
+    description: '为洪涝灾害提供全方位的应急救援解决方案，助力快速响应和高效救援。',
+    features: [
+      { title: '灾情侦察', description: '无人机快速侦察灾区情况，绘制实时灾情地图' },
+      { title: '搜救支持', description: '利用热成像技术辅助搜寻受困人员' },
+      { title: '物资投放', description: '向受灾区域精准投放应急物资' },
+      { title: '通信保障', description: '建立临时通信网络，保障救援指挥' }
+    ],
+    scenarios: [
+      { title: '城市内涝', description: '城市暴雨导致的内涝灾害救援' },
+      { title: '河流决堤', description: '河流决堤造成的洪涝灾害救援' },
+      { title: '山洪暴发', description: '山区突发性洪水灾害救援' }
+    ]
+  },
+  earthquake: {
+    type: 'emergency',
+    title: '地震与地质灾害救援解决方案',
+    description: '为地震等地质灾害提供专业的应急救援解决方案，实现快速响应和科学救援。',
+    features: [
+      { title: '灾情评估', description: '无人机快速评估受灾范围和程度' },
+      { title: '建筑损伤分析', description: 'AI分析建筑物损伤程度，评估二次灾害风险' },
+      { title: '搜救规划', description: '基于实时数据制定最优搜救路线' },
+      { title: '物资配送', description: '无人机向受困区域投送应急物资' }
+    ],
+    scenarios: [
+      { title: '地震救援', description: '地震灾害现场搜救及救援' },
+      { title: '滑坡救援', description: '山体滑坡灾害现场救援' },
+      { title: '塌陷救援', description: '地面塌陷事故现场救援' }
+    ]
+  },
+  forestFire: {
+    type: 'emergency',
+    title: '森林火灾救援解决方案',
+    description: '为森林火灾提供智能化应急救援解决方案，提升救援效率和安全性。',
+    features: [
+      { title: '火情监测', description: '实时监测火情发展，预测火势蔓延' },
+      { title: '救援规划', description: '智能规划最优灭火路线和方案' },
+      { title: '物资投放', description: '向火场精准投放灭火物资' },
+      { title: '人员疏散', description: '协助规划人员疏散路线' }
+    ],
+    scenarios: [
+      { title: '林区火灾', description: '森林地区火灾扑救' },
+      { title: '草原火灾', description: '草原地区火灾扑救' },
+      { title: '交界火灾', description: '林区与居民区交界处火灾处置' }
+    ]
+  },
+  mountainRescue: {
+    type: 'emergency',
+    title: '山岳搜救解决方案',
+    description: '为山岳地区遇险人员提供专业的搜救解决方案，提高搜救效率和成功率。',
+    features: [
+      { title: '区域搜索', description: '无人机快速搜索大面积区域' },
+      { title: '热成像侦测', description: '利用热成像技术定位遇险人员' },
+      { title: '地形分析', description: '3D地形分析，规划最优救援路线' },
+      { title: '通信支援', description: '建立应急通信网络，保障救援通信' }
+    ],
+    scenarios: [
+      { title: '登山救援', description: '登山遇险人员搜救' },
+      { title: '雪崩救援', description: '雪崩灾害现场搜救' },
+      { title: '峡谷救援', description: '峡谷探险遇险救援' }
+    ]
+  }
+};
+
+// 执法管理配置
+const lawEnforcementConfigs: Record<string, SolutionConfig> = {
+  patrol: {
+    type: 'lawEnforcement',
+    title: '治安巡逻解决方案',
+    description: '为公安机关提供智能化治安巡逻解决方案，提升巡逻效率和治安管理水平。',
+    features: [
+      { title: '空中巡逻', description: '无人机协助进行区域巡逻监控' },
+      { title: '异常识别', description: 'AI识别可疑人员和异常行为' },
+      { title: '快速响应', description: '发现问题快速定位和处置' },
+      { title: '数据分析', description: '治安数据分析，优化巡逻路线' }
+    ],
+    scenarios: [
+      { title: '社区巡逻', description: '居民社区治安巡逻' },
+      { title: '重点区域', description: '重点区域安保巡逻' },
+      { title: '大型活动', description: '大型活动现场安保' }
+    ]
+  },
+  traffic: {
+    type: 'lawEnforcement',
+    title: '交通治理解决方案',
+    description: '为交通管理部门提供智能化交通治理解决方案，提升交通管理效率。',
+    features: [
+      { title: '交通监控', description: '实时监控交通流量和违法行为' },
+      { title: '事故处理', description: '快速响应交通事故，协助现场处置' },
+      { title: '违章取证', description: '自动记录交通违法行为' },
+      { title: '指挥调度', description: '智能交通指挥和调度系统' }
+    ],
+    scenarios: [
+      { title: '城市道路', description: '城市道路交通管理' },
+      { title: '高速公路', description: '高速公路交通监控' },
+      { title: '事故现场', description: '交通事故现场处置' }
+    ]
+  },
+  cityManagement: {
+    type: 'lawEnforcement',
+    title: '城管巡查解决方案',
+    description: '为城市管理部门提供智能化巡查解决方案，提升城市管理效率和市容市貌监管水平。',
+    features: [
+      { title: '违建监测', description: '无人机巡查违法建筑，自动比对分析' },
+      { title: '环境监管', description: '城市环境卫生和污染源实时监控' },
+      { title: '占道管理', description: '违规占道经营和乱摆摊点智能识别' },
+      { title: '市政设施巡检', description: '市政设施完好度巡查和维护管理' }
+    ],
+    scenarios: [
+      { title: '日常巡查', description: '常态化巡查监管，及时发现城市管理问题' },
+      { title: '专项整治', description: '重点区域和专项问题集中整治行动' },
+      { title: '应急处置', description: '突发事件快速响应和现场指挥' }
+    ]
+  },
+  investigation: {
+    type: 'lawEnforcement',
+    title: '刑事侦查解决方案',
+    description: '为刑侦部门提供智能化侦查解决方案，提升破案效率和侦查能力。',
+    features: [
+      { title: '现场勘查', description: '无人机协助现场勘查取证' },
+      { title: '轨迹追踪', description: '嫌疑人轨迹分析和追踪' },
+      { title: '证据采集', description: '智能化证据采集和保全' },
+      { title: '案情分析', description: '大数据辅助案情分析' }
+    ],
+    scenarios: [
+      { title: '现场勘查', description: '案发现场勘查取证' },
+      { title: '追踪布控', description: '嫌疑人追踪布控' },
+      { title: '案情分析', description: '复杂案情分析研判' }
+    ]
+  }
+};
+
+// 公共安全配置
+const publicSafetyConfigs: Record<string, SolutionConfig> = {
+  forestry: {
+    type: 'publicSafety',
+    title: '林业安全解决方案',
+    description: '为林业部门提供智能化森林资源监管和保护解决方案。',
+    features: [
+      { title: '资源监测', description: '森林资源动态监测和评估' },
+      { title: '火情预警', description: '森林火险预警和监测' },
+      { title: '病虫害防治', description: '林业病虫害监测和防治' },
+      { title: '资源保护', description: '野生动植物资源保护' }
+    ],
+    scenarios: [
+      { title: '资源普查', description: '森林资源动态普查' },
+      { title: '火情监测', description: '森林火情实时监测' },
+      { title: '执法巡查', description: '林业执法巡查' }
+    ]
+  },
+  mapping: {
+    type: 'publicSafety',
+    title: '测绘应用解决方案',
+    description: '为测绘部门提供高精度地理信息采集和处理解决方案。',
+    features: [
+      { title: '地形测绘', description: '高精度地形图测绘' },
+      { title: '实景建模', description: '三维实景模型构建' },
+      { title: '变化监测', description: '地理要素变化监测' },
+      { title: '应急测绘', description: '突发事件应急测绘' }
+    ],
+    scenarios: [
+      { title: '地形测量', description: '地形地貌测量' },
+      { title: '工程测绘', description: '工程建设测绘' },
+      { title: '灾害测绘', description: '灾害现场测绘' }
+    ]
+  },
+  oilGas: {
+    type: 'publicSafety',
+    title: '油气管线巡检解决方案',
+    description: '为油气管线提供智能化巡检和安全监管解决方案。',
+    features: [
+      { title: '管线巡检', description: '油气管线定期巡检' },
+      { title: '泄漏检测', description: '管线泄漏实时监测' },
+      { title: '隐患排查', description: '管线安全隐患排查' },
+      { title: '应急处置', description: '管线事故应急处置' }
+    ],
+    scenarios: [
+      { title: '日常巡检', description: '管线日常巡检' },
+      { title: '应急处置', description: '管线事故处置' },
+      { title: '工程监理', description: '管线工程监理' }
+    ]
+  },
+  power: {
+    type: 'publicSafety',
+    title: '电力巡检解决方案',
+    description: '为电力部门提供智能化电力设施巡检和维护解决方案。',
+    features: [
+      { title: '线路巡检', description: '输电线路智能巡检' },
+      { title: '设备检测', description: '电力设备状态监测' },
+      { title: '故障诊断', description: '设备故障智能诊断' },
+      { title: '应急处置', description: '电力事故应急处置' }
+    ],
+    scenarios: [
+      { title: '日常巡检', description: '电力设施日常巡检' },
+      { title: '故障处理', description: '电力故障现场处理' },
+      { title: '应急抢修', description: '电力设施应急抢修' }
+    ]
+  },
+  water: {
+    type: 'publicSafety',
+    title: '水利设施监管解决方案',
+    description: '为水利部门提供智能化水利设施监管和防汛抗旱解决方案。',
+    features: [
+      { title: '设施巡检', description: '水利设施智能巡检' },
+      { title: '水情监测', description: '水文水情实时监测' },
+      { title: '灾害预警', description: '洪涝灾害预警' },
+      { title: '应急调度', description: '防汛抗旱应急调度' }
+    ],
+    scenarios: [
+      { title: '日常监管', description: '水利设施日常监管' },
+      { title: '防汛抗旱', description: '防汛抗旱应急响应' },
+      { title: '工程监理', description: '水利工程建设监理' }
+    ]
+  }
+};
+
+// 安全生产配置
+const safetyProductionConfigs: Record<string, SolutionConfig> = {
+  supervision: {
+    type: 'safetyProduction',
+    title: '安全生产监管解决方案',
+    description: '为安全生产监管部门提供智能化监管和隐患排查解决方案。',
+    features: [
+      { title: '隐患排查', description: '生产安全隐患智能排查' },
+      { title: '风险评估', description: '安全生产风险评估' },
+      { title: '应急预案', description: '安全生产应急预案管理' },
+      { title: '监管执法', description: '安全生产监管执法支持' }
+    ],
+    scenarios: [
+      { title: '日常监管', description: '企业安全生产日常监管' },
+      { title: '专项检查', description: '安全生产专项检查' },
+      { title: '事故调查', description: '生产安全事故调查' }
+    ]
+  },
+  selfInspection: {
+    type: 'safetyProduction',
+    title: '企业安全自查解决方案',
+    description: '为企业提供安全生产自查和隐患自纠自改解决方案。',
+    features: [
+      { title: '隐患自查', description: '企业安全隐患自查系统' },
+      { title: '整改跟踪', description: '隐患整改跟踪管理' },
+      { title: '风险评估', description: '企业安全风险自评' },
+      { title: '应急演练', description: '安全生产应急演练支持' }
+    ],
+    scenarios: [
+      { title: '日常自查', description: '企业安全生产日常自查' },
+      { title: '专项自查', description: '重点领域专项安全自查' },
+      { title: '整改验收', description: '隐患整改自查验收' }
+    ]
+  },
+  accidentHandling: {
+    type: 'safetyProduction',
+    title: '安全事故处置解决方案',
+    description: '为安全生产事故提供智能化应急处置和事故调查解决方案。',
+    features: [
+      { title: '事故报告', description: '安全事故快速报告系统' },
+      { title: '应急响应', description: '事故现场应急响应支持' },
+      { title: '事故调查', description: '安全事故智能调查系统' },
+      { title: '教训总结', description: '事故案例分析和经验教训总结' }
+    ],
+    scenarios: [
+      { title: '事故处置', description: '生产安全事故现场处置' },
+      { title: '应急救援', description: '重大事故应急救援' },
+      { title: '事故调查', description: '安全事故原因调查' }
+    ]
+  }
+};
+
+const route = useRoute();
+const currentPath = computed(() => route.path);
+
+const getConfig = (path: string): SolutionConfig | undefined => {
+  const pathSegments = path.split('/');
+  const lastSegment = pathSegments[pathSegments.length - 1];
+
+  if (path.includes('emergency')) {
+    return emergencyConfigs[lastSegment];
+  } else if (path.includes('law-enforcement')) {
+    return lawEnforcementConfigs[lastSegment];
+  } else if (path.includes('public-safety')) {
+    return publicSafetyConfigs[lastSegment];
+  } else if (path.includes('safety-production')) {
+    return safetyProductionConfigs[lastSegment];
+  }
+
+  return undefined;
+};
+
+const config = computed(() => getConfig(currentPath.value));
+</script>
+
+<template>
+  <div v-if="config" class="solution-layout">
+    <h1>{{ config.title }}</h1>
+    <p class="description">{{ config.description }}</p>
+
+    <section class="features">
+      <h2>核心功能</h2>
+      <ul>
+        <li v-for="feature in config.features" :key="feature.title">
+          <h3>{{ feature.title }}</h3>
+          <p>{{ feature.description }}</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="scenarios">
+      <h2>应用场景</h2>
+      <ul>
+        <li v-for="scenario in config.scenarios" :key="scenario.title">
+          <h3>{{ scenario.title }}</h3>
+          <p>{{ scenario.description }}</p>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.solution-layout {
+  padding: v.$spacing-xl;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  h1 {
+    font-size: v.$font-size-xxl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-lg;
+  }
+
+  .description {
+    font-size: v.$font-size-lg;
+    color: v.$text-secondary;
+    margin-bottom: v.$spacing-xl;
+  }
+
+  section {
+    margin-bottom: v.$spacing-xxl;
+
+    h2 {
+      font-size: v.$font-size-xl;
+      color: v.$text-primary;
+      margin-bottom: v.$spacing-lg;
+    }
+
+    ul {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      list-style: none;
+      padding: 0;
+
+      li {
+        background: v.$background-light;
+        border-radius: v.$border-radius-lg;
+        padding: v.$spacing-lg;
+        box-shadow: v.$shadow-sm;
+
+        h3 {
+          font-size: v.$font-size-lg;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          color: v.$text-secondary;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/layout/Header/index.vue

@@ -12,7 +12,7 @@ const isDocView = computed(() => route.name === 'doc')
   <header class="navbar" :class="{ 'navbar-doc': isDocView }">
     <div class="nav-content">
       <div class="nav-left">
-        <img alt="Vue logo" class="logo" src="@/assets/icons/logo.svg" width="40" height="40" />
+        <img alt="Pendulum logo" class="logo" src="@/assets/icons/logo.svg" width="40" height="40" />
       </div>
 
       <nav class="nav-links">

web/src/layout/NewHeader/index.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { navigation } from '@/router'
+import { computed, ref } from 'vue'
+
+// 计算当前是否在文档页面
+const route = useRoute()
+const isDocView = computed(() => route.name === 'doc')
 
 // 组件属性
 defineProps({
@@ -33,36 +39,6 @@ defineProps({
   },
 })
 
-// 菜单数据
-const menuItems = [
-  {
-    label: '行业',
-    children: [
-      {
-        title: '公共安全',
-        items: ['测绘', '电力', '石油与天然气', '水利', '林业'],
-      },
-      {
-        title: '应急救援',
-        items: ['洪涝灾害救援', '森林火灾救援', '地震与地质灾害救援', '山岳搜救'],
-      },
-      {
-        title: '执法',
-        items: ['侦查取证', '治安巡逻', '交通治理', '城管巡查'],
-      },
-      {
-        title: '安全生产',
-        items: ['安全生产部门监管', '企业安全生产自查', '安全生产事故处置'],
-      },
-    ],
-  },
-  { label: '产品' },
-  { label: '行业洞察' },
-  { label: '生态' },
-  { label: '数据安全' },
-  { label: '服务与支持' },
-]
-
 // 当前激活的菜单索引
 const activeIndex = ref(-1)
 
@@ -72,54 +48,46 @@ const handleMenuHover = (index: number) => {
 }
 
 // 处理菜单离开
-const handleMenuLeave = (index: number) => {
+const handleMenuLeave = () => {
   activeIndex.value = -1
 }
 </script>
 
 <template>
-  <header class="new-header">
+  <header class="new-header" :class="{ 'new-header-doc': isDocView }">
     <div class="header-container">
       <!-- Logo 区域 -->
       <div class="logo-section">
-        <img src="@/assets/icons/logo.svg" alt="Pendulum Logo" class="logo" />
-        <span class="logo-text">Pendulum 开放平台</span>
+        <RouterLink to="/">
+          <img src="@/assets/icons/logo.svg" alt="Pendulum Logo" class="logo" />
+          <span class="logo-text">Pendulum 开放平台</span>
+        </RouterLink>
       </div>
 
       <!-- 导航菜单 -->
       <nav class="nav-menu">
         <ul class="menu-list">
           <li
-            v-for="(item, index) in menuItems"
-            :key="index"
+            v-for="(item, index) in navigation"
+            :key="item.name"
             class="menu-item"
             @mouseenter="handleMenuHover(index)"
-            @mouseleave="handleMenuLeave(index)"
+            @mouseleave="handleMenuLeave"
             :class="{ active: activeIndex === index }"
           >
-            <a href="#" class="menu-link">{{ item.label }}</a>
-
-            <!-- 子菜单 -->
-            <div v-if="item.children" class="submenu" :class="{ show: activeIndex === index }">
-              <div class="submenu-container">
-                <div
-                  v-for="(group, groupIndex) in item.children"
-                  :key="groupIndex"
-                  class="submenu-group"
-                >
-                  <h3 v-if="group.title" class="submenu-title">{{ group.title }}</h3>
-                  <ul class="submenu-list">
-                    <li
-                      v-for="(subItem, subIndex) in group.items"
-                      :key="subIndex"
-                      class="submenu-item"
-                    >
-                      <a href="#" class="submenu-link">{{ subItem }}</a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
+            <RouterLink :to="item.path" class="menu-link">{{ item.title }}</RouterLink>
+            <!-- 添加二级菜单 -->
+            <ul v-if="item.children && item.children.length > 0" class="submenu">
+              <li v-for="subItem in item.children" :key="subItem.name" class="submenu-item">
+                <RouterLink :to="`${item.path}/${subItem.path}`" class="submenu-link">{{ subItem.title }}</RouterLink>
+                <!-- 添加三级菜单 -->
+                <ul v-if="subItem.children && subItem.children.length > 0" class="sub-submenu">
+                  <li v-for="subSubItem in subItem.children" :key="subSubItem.name" class="sub-submenu-item">
+                    <RouterLink :to="`${item.path}/${subItem.path}/${subSubItem.path}`" class="sub-submenu-link">{{ subSubItem.title }}</RouterLink>
+                  </li>
+                </ul>
+              </li>
+            </ul>
           </li>
         </ul>
       </nav>
@@ -127,7 +95,7 @@ const handleMenuLeave = (index: number) => {
       <!-- 右侧操作区 -->
       <div class="action-section">
         <a href="#" class="action-link">联系我们</a>
-        <a href="#" class="action-button">商城</a>
+        <a href="#" class="action-button">预览平台</a>
       </div>
     </div>
   </header>
@@ -161,6 +129,13 @@ const handleMenuLeave = (index: number) => {
   align-items: center;
   gap: v.$spacing-sm;
 
+  a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    gap: v.$spacing-sm;
+  }
+
   .logo {
     height: 42px;
     width: auto;
@@ -198,13 +173,7 @@ const handleMenuLeave = (index: number) => {
     height: 100%;
     padding: 0 v.$spacing-lg;
 
-    &:hover {
-      .menu-link {
-        color: v.$primary-color;
-      }
-    }
-
-    &.active {
+    &:hover, &.active {
       .menu-link {
         color: v.$primary-color;
       }
@@ -220,76 +189,73 @@ const handleMenuLeave = (index: number) => {
     font-size: v.$font-size-sm;
     transition: color v.$transition-fast;
   }
-}
 
-// 子菜单样式
-.submenu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  width: 100%;
-  background: v.$background-light;
-  border-radius: 0;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
-  opacity: 0;
-  visibility: hidden;
-  transition: all v.$transition-fast;
-  padding: 0;
-  border-top: 2px solid #000;
-  transform: translateY(-2px);
-  display: flex;
-  justify-content: center;
+  // 添加二级菜单样式
+  .submenu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: v.$background-light;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: v.$border-radius-md;
+    padding: v.$spacing-sm 0;
+    min-width: 200px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
 
-  &.show {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
+  .menu-item:hover .submenu {
+    display: block;
   }
-}
-.submenu-container {
-  display: flex;
-  gap: v.$spacing-xl;
-  padding: v.$spacing-lg;
-  background-color: #fff;
-  width: 100%;
-  max-width: 1200px;
-}
 
-.submenu-group {
-  min-width: 160px;
-  padding: v.$spacing-md;
-}
+  .submenu-item {
+    position: relative;
+  }
 
-.submenu-title {
-  font-size: v.$font-size-sm;
-  font-weight: v.$font-weight-bold;
-  color: v.$text-primary;
-  margin: 0 0 v.$spacing-md;
-  padding-bottom: v.$spacing-xs;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
+  .submenu-link {
+    display: block;
+    padding: v.$spacing-sm v.$spacing-lg;
+    color: v.$text-primary;
+    text-decoration: none;
+    font-size: v.$font-size-sm;
+    transition: background-color v.$transition-fast;
 
-.submenu-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
+    &:hover {
+      background-color: rgba(v.$primary-color, 0.1);
+      color: v.$primary-color;
+    }
+  }
 
-.submenu-item {
-  margin: v.$spacing-sm 0;
-}
+  // 添加三级菜单样式
+  .sub-submenu {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 100%;
+    background-color: v.$background-light;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: v.$border-radius-md;
+    padding: v.$spacing-sm 0;
+    min-width: 200px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
 
-.submenu-link {
-  display: block;
-  padding: v.$spacing-xs 0;
-  color: v.$text-secondary;
-  text-decoration: none;
-  font-size: v.$font-size-sm;
-  transition: color v.$transition-fast;
+  .submenu-item:hover .sub-submenu {
+    display: block;
+  }
 
-  &:hover {
-    color: v.$primary-color;
+  .sub-submenu-link {
+    display: block;
+    padding: v.$spacing-sm v.$spacing-lg;
+    color: v.$text-primary;
+    text-decoration: none;
+    font-size: v.$font-size-sm;
+    transition: background-color v.$transition-fast;
+
+    &:hover {
+      background-color: rgba(v.$primary-color, 0.1);
+      color: v.$primary-color;
+    }
   }
 }
 
@@ -327,4 +293,31 @@ const handleMenuLeave = (index: number) => {
     background-color: color.adjust(v.$primary-color, $lightness: -10%);
   }
 }
+
+.new-header-doc {
+  .header-container {
+    max-width: none;
+    padding: 0 v.$spacing-xl;
+  }
+}
+
+@include v.responsive(medium) {
+  .header-container {
+    padding: 0 v.$spacing-sm;
+  }
+
+  .nav-menu {
+    margin: 0 v.$spacing-md;
+  }
+
+  .menu-item {
+    padding: 0 v.$spacing-sm;
+  }
+
+  .new-header-doc {
+    .header-container {
+      padding: 0 v.$spacing-lg;
+    }
+  }
+}
 </style>

web/src/layout/NewHeader/index_bk.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import { RouterLink, useRoute } from 'vue-router'
+import { navigation } from '@/router'
+import { computed, ref } from 'vue'
+
+// 组件属性
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  dark: {
+    type: Boolean,
+    default: false,
+  },
+  bgImage: {
+    type: String,
+    default: '',
+  },
+  bgColor: {
+    type: String,
+    default: '',
+  },
+  heroSection: {
+    type: Boolean,
+    default: false,
+  },
+  centered: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 菜单数据
+const menuItems = [
+  {
+    label: '行业',
+    children: [
+      {
+        title: '公共安全',
+        items: ['测绘', '电力', '石油与天然气', '水利', '林业'],
+      },
+      {
+        title: '应急救援',
+        items: ['洪涝灾害救援', '森林火灾救援', '地震与地质灾害救援', '山岳搜救'],
+      },
+      {
+        title: '执法',
+        items: ['侦查取证', '治安巡逻', '交通治理', '城管巡查'],
+      },
+      {
+        title: '安全生产',
+        items: ['安全生产部门监管', '企业安全生产自查', '安全生产事故处置'],
+      },
+    ],
+  },
+  { label: '产品' },
+  { label: '行业洞察' },
+  { label: '生态' },
+  { label: '数据安全' },
+  { label: '服务与支持' },
+]
+
+// 当前激活的菜单索引
+const activeIndex = ref(-1)
+
+// 处理菜单悬停
+const handleMenuHover = (index: number) => {
+  activeIndex.value = index
+}
+
+// 处理菜单离开
+const handleMenuLeave = (index: number) => {
+  activeIndex.value = -1
+}
+</script>
+
+<template>
+  <header class="new-header">
+    <div class="header-container">
+      <!-- Logo 区域 -->
+      <div class="logo-section">
+        <img src="@/assets/icons/logo.svg" alt="Pendulum Logo" class="logo" />
+        <span class="logo-text">Pendulum 开放平台</span>
+      </div>
+
+      <!-- 导航菜单 -->
+      <nav class="nav-menu">
+        <ul class="menu-list">
+          <li
+            v-for="(item, index) in menuItems"
+            :key="index"
+            class="menu-item"
+            @mouseenter="handleMenuHover(index)"
+            @mouseleave="handleMenuLeave(index)"
+            :class="{ active: activeIndex === index }"
+          >
+            <a href="#" class="menu-link">{{ item.label }}</a>
+
+            <!-- 子菜单 -->
+            <div v-if="item.children" class="submenu" :class="{ show: activeIndex === index }">
+              <div class="submenu-container">
+                <div
+                  v-for="(group, groupIndex) in item.children"
+                  :key="groupIndex"
+                  class="submenu-group"
+                >
+                  <h3 v-if="group.title" class="submenu-title">{{ group.title }}</h3>
+                  <ul class="submenu-list">
+                    <li
+                      v-for="(subItem, subIndex) in group.items"
+                      :key="subIndex"
+                      class="submenu-item"
+                    >
+                      <a href="#" class="submenu-link">{{ subItem }}</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </nav>
+
+      <!-- 右侧操作区 -->
+      <div class="action-section">
+        <a href="#" class="action-link">联系我们</a>
+        <a href="#" class="action-button">预览平台</a>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+@use "sass:color";
+
+.new-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: v.$header-height;
+  background-color: v.$background-light;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  z-index: v.$z-index-fixed;
+}
+
+.header-container {
+  @include m.container;
+  @include m.flex-between;
+  height: 100%;
+}
+
+// Logo 区域样式
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: v.$spacing-sm;
+
+  .logo {
+    height: 42px;
+    width: auto;
+    transition: transform 0.3s ease;
+    transform-origin: center;
+
+    &:hover {
+      transform: scale(1.1);
+      animation-play-state: paused;
+    }
+  }
+
+  .logo-text {
+    font-size: v.$font-size-md;
+    font-weight: v.$font-weight-medium;
+    color: v.$text-primary;
+  }
+}
+
+// 导航菜单样式
+.nav-menu {
+  flex: 1;
+  margin: 0 v.$spacing-xl;
+
+  .menu-list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+  }
+
+  .menu-item {
+    position: relative;
+    height: 100%;
+    padding: 0 v.$spacing-lg;
+
+    &:hover {
+      .menu-link {
+        color: v.$primary-color;
+      }
+    }
+
+    &.active {
+      .menu-link {
+        color: v.$primary-color;
+      }
+    }
+  }
+
+  .menu-link {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: v.$text-primary;
+    text-decoration: none;
+    font-size: v.$font-size-sm;
+    transition: color v.$transition-fast;
+  }
+}
+
+// 子菜单样式
+.submenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background: v.$background-light;
+  border-radius: 0;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  visibility: hidden;
+  transition: all v.$transition-fast;
+  padding: 0;
+  border-top: 2px solid #000;
+  transform: translateY(-2px);
+  display: flex;
+  justify-content: center;
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+}
+.submenu-container {
+  display: flex;
+  gap: v.$spacing-xl;
+  padding: v.$spacing-lg;
+  background-color: #fff;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.submenu-group {
+  min-width: 160px;
+  padding: v.$spacing-md;
+}
+
+.submenu-title {
+  font-size: v.$font-size-sm;
+  font-weight: v.$font-weight-bold;
+  color: v.$text-primary;
+  margin: 0 0 v.$spacing-md;
+  padding-bottom: v.$spacing-xs;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.submenu-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.submenu-item {
+  margin: v.$spacing-sm 0;
+}
+
+.submenu-link {
+  display: block;
+  padding: v.$spacing-xs 0;
+  color: v.$text-secondary;
+  text-decoration: none;
+  font-size: v.$font-size-sm;
+  transition: color v.$transition-fast;
+
+  &:hover {
+    color: v.$primary-color;
+  }
+}
+
+// 右侧操作区样式
+.action-section {
+  display: flex;
+  align-items: center;
+  gap: v.$spacing-md;
+}
+
+.action-link {
+  color: v.$text-primary;
+  text-decoration: none;
+  font-size: v.$font-size-sm;
+  transition: color v.$transition-fast;
+
+  &:hover {
+    color: v.$primary-color;
+  }
+}
+
+.action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: v.$spacing-sm v.$spacing-lg;
+  background-color: v.$primary-color;
+  color: v.$text-color-light;
+  border-radius: v.$border-radius-md;
+  text-decoration: none;
+  font-size: v.$font-size-sm;
+  transition: background-color v.$transition-fast;
+
+  &:hover {
+    background-color: color.adjust(v.$primary-color, $lightness: -10%);
+  }
+}
+</style>

web/src/router/index.ts

@@ -4,16 +4,84 @@ import HomeView from '@/views/Home/index.vue'
 import EnterpriseView from '@/views/Enterprise/index.vue'
 import DocView from '@/views/Doc/index.vue'
 
-export interface NavItem {
-  path: string
-  name: string
-  component: any
-  title: string
-  showInNav: boolean
-  meta?: Record<string, any>
+export interface NavItem extends Omit<RouteRecordRaw, 'children'> {
+  title?: string
+  showInNav?: boolean
+  children?: NavItem[]
 }
 
-const routes: (NavItem & RouteRecordRaw)[] = [
+const enterpriseRoutes: NavItem[] = [
+  {
+    path: 'public-safety',
+    name: 'publicSafety',
+    component: () => import('@/views/Enterprise/PublicSafety/index.vue'),
+    title: '公共安全',
+    showInNav: true,
+    children: [
+      {
+        path: '',
+        redirect: { name: 'mapping' }
+      },
+      { path: 'mapping', name: 'mapping', component: () => import('@/views/Enterprise/PublicSafety/Mapping.vue'), title: '测绘', showInNav: true },
+      { path: 'power', name: 'power', component: () => import('@/views/Enterprise/PublicSafety/Power.vue'), title: '电力', showInNav: true },
+      { path: 'oil-gas', name: 'oilGas', component: () => import('@/views/Enterprise/PublicSafety/OilGas.vue'), title: '石油与天然气', showInNav: true },
+      { path: 'water', name: 'water', component: () => import('@/views/Enterprise/PublicSafety/Water.vue'), title: '水利', showInNav: true },
+      { path: 'forestry', name: 'forestry', component: () => import('@/views/Enterprise/PublicSafety/Forestry.vue'), title: '林业', showInNav: true },
+    ]
+  },
+  {
+    path: 'emergency',
+    name: 'emergency',
+    component: () => import('@/views/Enterprise/Emergency/index.vue'),
+    title: '应急救援',
+    showInNav: true,
+    children: [
+      {
+        path: '',
+        redirect: { name: 'flood' }
+      },
+      { path: 'flood', name: 'flood', component: () => import('@/views/Enterprise/Emergency/Flood.vue'), title: '洪涝灾害救援', showInNav: true },
+      { path: 'forest-fire', name: 'forestFire', component: () => import('@/views/Enterprise/Emergency/ForestFire.vue'), title: '森林火灾救援', showInNav: true },
+      { path: 'earthquake', name: 'earthquake', component: () => import('@/views/Enterprise/Emergency/Earthquake.vue'), title: '地震与地质灾害救援', showInNav: true },
+      { path: 'mountain-rescue', name: 'mountainRescue', component: () => import('@/views/Enterprise/Emergency/MountainRescue.vue'), title: '山岳搜救', showInNav: true },
+    ]
+  },
+  {
+    path: 'law-enforcement',
+    name: 'lawEnforcement',
+    component: () => import('@/views/Enterprise/LawEnforcement/index.vue'),
+    title: '执法',
+    showInNav: true,
+    children: [
+      {
+        path: '',
+        redirect: { name: 'investigation' }
+      },
+      { path: 'investigation', name: 'investigation', component: () => import('@/views/Enterprise/LawEnforcement/Investigation.vue'), title: '侦查取证', showInNav: true },
+      { path: 'patrol', name: 'patrol', component: () => import('@/views/Enterprise/LawEnforcement/Patrol.vue'), title: '治安巡逻', showInNav: true },
+      { path: 'traffic', name: 'traffic', component: () => import('@/views/Enterprise/LawEnforcement/Traffic.vue'), title: '交通治理', showInNav: true },
+      { path: 'city-management', name: 'cityManagement', component: () => import('@/views/Enterprise/LawEnforcement/CityManagement.vue'), title: '城管巡查', showInNav: true },
+    ]
+  },
+  {
+    path: 'safety-production',
+    name: 'safetyProduction',
+    component: () => import('@/views/Enterprise/SafetyProduction/index.vue'),
+    title: '安全生产',
+    showInNav: true,
+    children: [
+      {
+        path: '',
+        redirect: { name: 'supervision' }
+      },
+      { path: 'supervision', name: 'supervision', component: () => import('@/views/Enterprise/SafetyProduction/Supervision.vue'), title: '安全生产部门监管', showInNav: true },
+      { path: 'self-inspection', name: 'selfInspection', component: () => import('@/views/Enterprise/SafetyProduction/SelfInspection.vue'), title: '企业安全生产自查', showInNav: true },
+      { path: 'accident-handling', name: 'accidentHandling', component: () => import('@/views/Enterprise/SafetyProduction/AccidentHandling.vue'), title: '安全生产事故处置', showInNav: true },
+    ]
+  }
+]
+
+const routes: NavItem[] = [
   {
     path: '/',
     name: 'home',
@@ -25,14 +93,16 @@ const routes: (NavItem & RouteRecordRaw)[] = [
     path: '/enterprise',
     name: 'enterprise',
     component: EnterpriseView,
-    title: '行业案例',
-    showInNav: true
+    title: '行业',
+    showInNav: true,
+    children: enterpriseRoutes,
+    redirect: { path: '/enterprise/public-safety' }
   },
   {
     path: '/doc',
     name: 'doc',
     component: DocView,
-    title: '文档',
+    title: '文档中心',
     showInNav: true,
     meta: {
       hideFooter: true
@@ -42,10 +112,10 @@ const routes: (NavItem & RouteRecordRaw)[] = [
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
+  routes: routes as RouteRecordRaw[]
 })
 
 export default router
 
 // 导出用于导航的路由
-export const navigation = routes.filter(route => route.showInNav)
+export const navigation = routes.filter((route): route is NavItem => route.showInNav === true)

web/src/views/Enterprise/Emergency/Earthquake.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import SolutionLayout from '@/components/SolutionLayout/index.vue';
+</script>
+
+<template>
+  <SolutionLayout />
+</template>

web/src/views/Enterprise/Emergency/Flood.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import SolutionLayout from '@/components/SolutionLayout/index.vue';
+</script>
+
+<template>
+  <SolutionLayout />
+</template>

web/src/views/Enterprise/Emergency/ForestFire.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="forest-fire-view">
+    <h2>森林火灾救援解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为森林火灾提供智能化监测、预警和应急救援解决方案，助力森林资源保护和火灾快速处置。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>火情监测</strong>
+          <p>无人机巡航监测，及时发现火情</p>
+        </li>
+        <li>
+          <strong>火势分析</strong>
+          <p>实时分析火势蔓延方向和速度，辅助决策</p>
+        </li>
+        <li>
+          <strong>灭火指挥</strong>
+          <p>提供火场态势感知和指挥调度支持</p>
+        </li>
+        <li>
+          <strong>救援协同</strong>
+          <p>多方救援力量协同作战平台</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.forest-fire-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/Emergency/MountainRescue.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="mountain-rescue-view">
+    <h2>山岳搜救解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为山岳地区提供智能化搜救解决方案，提高搜救效率和成功率，保障登山爱好者和工作人员的安全。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>区域扫描</strong>
+          <p>利用无人机快速扫描大面积山区，定位目标</p>
+        </li>
+        <li>
+          <strong>热成像搜索</strong>
+          <p>在复杂地形和恶劣天气下进行热成像搜索</p>
+        </li>
+        <li>
+          <strong>通信中继</strong>
+          <p>在山区建立临时通信网络，保障搜救通信</p>
+        </li>
+        <li>
+          <strong>物资投放</strong>
+          <p>向被困人员精准投放急救物资</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.mountain-rescue-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/Emergency/index.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const subMenuItems = [
+  { path: '/enterprise/emergency/flood', title: '洪涝灾害救援' },
+  { path: '/enterprise/emergency/forest-fire', title: '森林火灾救援' },
+  { path: '/enterprise/emergency/earthquake', title: '地震与地质灾害救援' },
+  { path: '/enterprise/emergency/mountain-rescue', title: '山岳搜救' }
+]
+
+const currentPath = computed(() => route.path)
+</script>
+
+<template>
+  <div class="emergency-view">
+    <div class="header">
+      <h1>应急救援解决方案</h1>
+      <p class="description">为应急救援提供高效、精准的数字化支持</p>
+    </div>
+
+    <!-- 子菜单导航 -->
+    <nav class="sub-nav">
+      <router-link
+        v-for="item in subMenuItems"
+        :key="item.path"
+        :to="item.path"
+        class="nav-item"
+        :class="{ active: currentPath === item.path }"
+      >
+        {{ item.title }}
+      </router-link>
+    </nav>
+
+    <!-- 子路由视图 -->
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.emergency-view {
+  padding: v.$spacing-xl v.$spacing-xl * 2;
+
+  .header {
+    text-align: center;
+    margin-bottom: v.$spacing-xl * 2;
+
+    h1 {
+      font-size: v.$font-size-xxl;
+      color: v.$text-primary;
+      margin-bottom: v.$spacing-md;
+    }
+
+    .description {
+      font-size: v.$font-size-lg;
+      color: v.$text-secondary;
+    }
+  }
+
+  .sub-nav {
+    display: flex;
+    justify-content: center;
+    gap: v.$spacing-md;
+    margin-bottom: v.$spacing-xl;
+    padding: v.$spacing-md;
+    background-color: v.$background-light;
+    border-radius: v.$border-radius-lg;
+    box-shadow: v.$shadow-sm;
+
+    .nav-item {
+      padding: v.$spacing-sm v.$spacing-md;
+      color: v.$text-primary;
+      text-decoration: none;
+      border-radius: v.$border-radius-md;
+      transition: all v.$transition-fast;
+
+      &:hover {
+        background-color: rgba(v.$primary-color, 0.1);
+        color: v.$primary-color;
+      }
+
+      &.active {
+        background-color: v.$primary-color;
+        color: white;
+      }
+    }
+  }
+
+  .content {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+</style>

web/src/views/Enterprise/LawEnforcement/CityManagement.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="city-management-view">
+    <h2>城管巡查解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为城市管理部门提供智能化巡查解决方案，提升城市管理效率和市容市貌监管水平。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>违建监测</strong>
+          <p>无人机巡查违法建筑，自动比对分析</p>
+        </li>
+        <li>
+          <strong>环境监管</strong>
+          <p>城市环境卫生和污染源实时监控</p>
+        </li>
+        <li>
+          <strong>占道管理</strong>
+          <p>违规占道经营和乱摆摊点智能识别</p>
+        </li>
+        <li>
+          <strong>市政设施巡检</strong>
+          <p>市政设施完好度巡查和维护管理</p>
+        </li>
+      </ul>
+
+      <h3>应用场景</h3>
+      <ul class="scenario-list">
+        <li>
+          <strong>日常巡查</strong>
+          <p>常态化巡查监管，及时发现城市管理问题</p>
+        </li>
+        <li>
+          <strong>专项整治</strong>
+          <p>重点区域和专项问题集中整治行动</p>
+        </li>
+        <li>
+          <strong>应急处置</strong>
+          <p>突发事件快速响应和现场指挥</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.city-management-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list,
+    .scenario-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+
+    .scenario-list {
+      margin-top: v.$spacing-lg;
+
+      li {
+        background: v.$background-secondary;
+
+        strong {
+          color: v.$secondary-color;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/LawEnforcement/Investigation.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="investigation-view">
+    <h2>侦查取证解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为执法部门提供智能化侦查取证解决方案，提升执法效率和证据采集质量。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>空中侦查</strong>
+          <p>无人机高空侦查，获取现场全局态势</p>
+        </li>
+        <li>
+          <strong>证据采集</strong>
+          <p>高清影像实时记录，自动生成取证报告</p>
+        </li>
+        <li>
+          <strong>现场勘查</strong>
+          <p>利用多光谱成像技术辅助现场勘查</p>
+        </li>
+        <li>
+          <strong>数据分析</strong>
+          <p>智能分析证据关联性，辅助案情研判</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.investigation-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/LawEnforcement/Patrol.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="patrol-view">
+    <h2>治安巡逻解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为执法部门提供智能化治安巡逻解决方案，提高巡逻效率和社会治安管理水平。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>智能巡航</strong>
+          <p>无人机自主巡航，实时监控重点区域</p>
+        </li>
+        <li>
+          <strong>异常行为识别</strong>
+          <p>AI分析识别可疑行为，及时预警</p>
+        </li>
+        <li>
+          <strong>人群管控</strong>
+          <p>大型活动人群密度监测和疏导</p>
+        </li>
+        <li>
+          <strong>应急指挥</strong>
+          <p>突发事件快速响应和现场指挥</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.patrol-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/LawEnforcement/Traffic.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="traffic-view">
+    <h2>交通管理解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为交通执法部门提供智能化交通管理解决方案，提高交通监管效率和道路安全水平。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>交通监控</strong>
+          <p>无人机高空监控，实时掌握交通流量</p>
+        </li>
+        <li>
+          <strong>违章取证</strong>
+          <p>自动识别交通违法行为，记录取证</p>
+        </li>
+        <li>
+          <strong>事故勘查</strong>
+          <p>快速获取事故现场全景图像，辅助事故分析</p>
+        </li>
+        <li>
+          <strong>交通疏导</strong>
+          <p>拥堵路段实时监测和指挥疏导</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.traffic-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/LawEnforcement/index.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const subMenuItems = [
+  { path: '/enterprise/law-enforcement/investigation', title: '侦查取证' },
+  { path: '/enterprise/law-enforcement/patrol', title: '治安巡逻' },
+  { path: '/enterprise/law-enforcement/traffic', title: '交通治理' },
+  { path: '/enterprise/law-enforcement/city-management', title: '城管巡查' }
+]
+
+const currentPath = computed(() => route.path)
+</script>
+
+<template>
+  <div class="law-enforcement-view">
+    <div class="header">
+      <h1>执法解决方案</h1>
+      <p class="description">为执法部门提供智能化、数字化的解决方案</p>
+    </div>
+
+    <!-- 子菜单导航 -->
+    <nav class="sub-nav">
+      <router-link
+        v-for="item in subMenuItems"
+        :key="item.path"
+        :to="item.path"
+        class="nav-item"
+        :class="{ active: currentPath === item.path }"
+      >
+        {{ item.title }}
+      </router-link>
+    </nav>
+
+    <!-- 子路由视图 -->
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.law-enforcement-view {
+  padding: v.$spacing-xl v.$spacing-xl * 2;
+
+  .header {
+    text-align: center;
+    margin-bottom: v.$spacing-xl * 2;
+
+    h1 {
+      font-size: v.$font-size-xxl;
+      color: v.$text-primary;
+      margin-bottom: v.$spacing-md;
+    }
+
+    .description {
+      font-size: v.$font-size-lg;
+      color: v.$text-secondary;
+    }
+  }
+
+  .sub-nav {
+    display: flex;
+    justify-content: center;
+    gap: v.$spacing-md;
+    margin-bottom: v.$spacing-xl;
+    padding: v.$spacing-md;
+    background-color: v.$background-light;
+    border-radius: v.$border-radius-lg;
+    box-shadow: v.$shadow-sm;
+
+    .nav-item {
+      padding: v.$spacing-sm v.$spacing-md;
+      color: v.$text-primary;
+      text-decoration: none;
+      border-radius: v.$border-radius-md;
+      transition: all v.$transition-fast;
+
+      &:hover {
+        background-color: rgba(v.$primary-color, 0.1);
+        color: v.$primary-color;
+      }
+
+      &.active {
+        background-color: v.$primary-color;
+        color: white;
+      }
+    }
+  }
+
+  .content {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+</style>

web/src/views/Enterprise/PublicSafety/Forestry.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import SolutionLayout from '@/components/SolutionLayout/index.vue';
+</script>
+
+<template>
+  <SolutionLayout />
+</template>

web/src/views/Enterprise/PublicSafety/Mapping.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="mapping-view">
+    <h2>测绘解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>提供全方位的测绘数据采集、处理和应用解决方案，支持高精度地理信息获取和分析。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>高精度数据采集</strong>
+          <p>通过无人机实现厘米级精度的地理数据采集</p>
+        </li>
+        <li>
+          <strong>实时数据处理</strong>
+          <p>支持现场快速建模和数据处理，提供即时可用的测绘成果</p>
+        </li>
+        <li>
+          <strong>智能分析</strong>
+          <p>基于AI的地理信息分析，提供智能化的数据解读</p>
+        </li>
+        <li>
+          <strong>三维可视化</strong>
+          <p>支持测绘数据的三维展示和交互</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.mapping-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/PublicSafety/OilGas.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="oil-gas-view">
+    <h2>石油与天然气解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为石油天然气行业提供智能化巡检和监测解决方案，保障生产安全和运营效率。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>管道巡检</strong>
+          <p>无人机自动化巡检油气管道，实时发现安全隐患</p>
+        </li>
+        <li>
+          <strong>泄漏监测</strong>
+          <p>采用红外热成像等技术，及时发现管道泄漏问题</p>
+        </li>
+        <li>
+          <strong>设备监控</strong>
+          <p>对关键设备进行实时监控和状态分析</p>
+        </li>
+        <li>
+          <strong>应急响应</strong>
+          <p>快速定位事故位置，协助应急处置</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.oil-gas-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/PublicSafety/Power.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="power-view">
+    <h2>电力行业解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为电力行业提供全面的智能化解决方案，支持电网监控、设备巡检和应急处理。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>智能电网监控</strong>
+          <p>实时监测电网运行状态，提供预警和分析</p>
+        </li>
+        <li>
+          <strong>无人机巡检</strong>
+          <p>自动化巡检电力设施，提高效率和安全性</p>
+        </li>
+        <li>
+          <strong>应急处理</strong>
+          <p>快速定位故障点，协助应急抢修</p>
+        </li>
+        <li>
+          <strong>数据分析</strong>
+          <p>基于大数据的电力使用分析和预测</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.power-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/PublicSafety/Water.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="water-view">
+    <h2>水利解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为水利行业提供全面的智能化监测和管理解决方案，保障水资源安全和高效利用。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>水库监测</strong>
+          <p>实时监测水库水位、水质和周边地质状况</p>
+        </li>
+        <li>
+          <strong>河道巡检</strong>
+          <p>无人机自动化巡检河道，监测水质和违法排污</p>
+        </li>
+        <li>
+          <strong>防汛预警</strong>
+          <p>基于大数据分析的洪水预测和预警系统</p>
+        </li>
+        <li>
+          <strong>水资源调度</strong>
+          <p>智能化水资源调度管理，优化水资源利用</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.water-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/PublicSafety/index.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const subMenuItems = [
+  { path: '/enterprise/public-safety/mapping', title: '测绘' },
+  { path: '/enterprise/public-safety/power', title: '电力' },
+  { path: '/enterprise/public-safety/oil-gas', title: '石油与天然气' },
+  { path: '/enterprise/public-safety/water', title: '水利' },
+  { path: '/enterprise/public-safety/forestry', title: '林业' }
+]
+
+const currentPath = computed(() => route.path)
+</script>
+
+<template>
+  <div class="public-safety-view">
+    <div class="header">
+      <h1>公共安全解决方案</h1>
+      <p class="description">为公共安全领域提供全面的数字化解决方案</p>
+    </div>
+
+    <!-- 子菜单导航 -->
+    <nav class="sub-nav">
+      <router-link
+        v-for="item in subMenuItems"
+        :key="item.path"
+        :to="item.path"
+        class="nav-item"
+        :class="{ active: currentPath === item.path }"
+      >
+        {{ item.title }}
+      </router-link>
+    </nav>
+
+    <!-- 子路由视图 -->
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.public-safety-view {
+  padding: v.$spacing-xl v.$spacing-xl * 2;
+
+  .header {
+    text-align: center;
+    margin-bottom: v.$spacing-xl * 2;
+
+    h1 {
+      font-size: v.$font-size-xxl;
+      color: v.$text-primary;
+      margin-bottom: v.$spacing-md;
+    }
+
+    .description {
+      font-size: v.$font-size-lg;
+      color: v.$text-secondary;
+    }
+  }
+
+  .sub-nav {
+    display: flex;
+    justify-content: center;
+    gap: v.$spacing-md;
+    margin-bottom: v.$spacing-xl;
+    padding: v.$spacing-md;
+    background-color: v.$background-light;
+    border-radius: v.$border-radius-lg;
+    box-shadow: v.$shadow-sm;
+
+    .nav-item {
+      padding: v.$spacing-sm v.$spacing-md;
+      color: v.$text-primary;
+      text-decoration: none;
+      border-radius: v.$border-radius-md;
+      transition: all v.$transition-fast;
+
+      &:hover {
+        background-color: rgba(v.$primary-color, 0.1);
+        color: v.$primary-color;
+      }
+
+      &.active {
+        background-color: v.$primary-color;
+        color: white;
+      }
+    }
+  }
+
+  .content {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+</style>

web/src/views/Enterprise/SafetyProduction/AccidentHandling.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="accident-handling-view">
+    <h2>事故处理解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为企业和安全生产监管部门提供智能化事故处理解决方案，提高事故响应速度和处置效率。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>快速勘查</strong>
+          <p>无人机快速到达事故现场，全方位勘查</p>
+        </li>
+        <li>
+          <strong>现场评估</strong>
+          <p>AI辅助分析事故现场情况，评估风险等级</p>
+        </li>
+        <li>
+          <strong>救援指导</strong>
+          <p>为现场救援人员提供实时指导和支持</p>
+        </li>
+        <li>
+          <strong>事故分析</strong>
+          <p>事故后数据收集和原因分析，形成报告</p>
+        </li>
+      </ul>
+
+      <h3>应用场景</h3>
+      <ul class="scenario-list">
+        <li>
+          <strong>工业事故</strong>
+          <p>工厂爆炸、泄漏等工业事故处理</p>
+        </li>
+        <li>
+          <strong>矿山事故</strong>
+          <p>矿山塌方、瓦斯爆炸等事故处理</p>
+        </li>
+        <li>
+          <strong>交通事故</strong>
+          <p>危险品运输车辆事故处理</p>
+        </li>
+        <li>
+          <strong>建筑事故</strong>
+          <p>建筑工地坍塌等事故处理</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.accident-handling-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list,
+    .scenario-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+
+    .scenario-list {
+      margin-top: v.$spacing-lg;
+
+      li {
+        background: rgba(245, 34, 45, 0.05); /* 使用 $error-color 的淡色版本 */
+
+        strong {
+          color: v.$error-color;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/SafetyProduction/SelfInspection.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="self-inspection-view">
+    <h2>企业安全生产自查解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为企业提供智能化安全生产自查解决方案，提高企业安全管理水平和自主检查能力。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>厂区巡检</strong>
+          <p>无人机自主巡检厂区，定期排查安全隐患</p>
+        </li>
+        <li>
+          <strong>设备检测</strong>
+          <p>关键设备运行状态实时监测和异常预警</p>
+        </li>
+        <li>
+          <strong>危险区域监控</strong>
+          <p>高危区域24小时不间断监控</p>
+        </li>
+        <li>
+          <strong>自查报告</strong>
+          <p>自动生成安全自查报告，提供整改建议</p>
+        </li>
+      </ul>
+
+      <h3>应用价值</h3>
+      <ul class="value-list">
+        <li>
+          <strong>降低风险</strong>
+          <p>提前发现并消除安全隐患，降低事故风险</p>
+        </li>
+        <li>
+          <strong>提升效率</strong>
+          <p>自动化巡检替代人工检查，提高效率和覆盖面</p>
+        </li>
+        <li>
+          <strong>合规保障</strong>
+          <p>满足安全生产法规要求，避免合规风险</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.self-inspection-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list,
+    .value-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+
+    .value-list {
+      margin-top: v.$spacing-lg;
+
+      li {
+        background: v.$background-secondary;
+
+        strong {
+          color: v.$secondary-color;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/SafetyProduction/Supervision.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="supervision-view">
+    <h2>安全生产部门监管解决方案</h2>
+    <div class="content-section">
+      <h3>方案概述</h3>
+      <p>为安全生产监管部门提供智能化监管解决方案，提高监管效率和安全生产水平。</p>
+
+      <h3>核心功能</h3>
+      <ul class="feature-list">
+        <li>
+          <strong>远程巡查</strong>
+          <p>无人机远程巡查高危场所，实时监控生产状况</p>
+        </li>
+        <li>
+          <strong>隐患识别</strong>
+          <p>AI分析识别潜在安全隐患，及时预警</p>
+        </li>
+        <li>
+          <strong>应急指挥</strong>
+          <p>事故现场快速响应和远程指挥</p>
+        </li>
+        <li>
+          <strong>数据分析</strong>
+          <p>安全生产大数据分析，辅助决策</p>
+        </li>
+      </ul>
+
+      <h3>应用场景</h3>
+      <ul class="scenario-list">
+        <li>
+          <strong>危险品仓储</strong>
+          <p>危险品仓储区域的安全监管</p>
+        </li>
+        <li>
+          <strong>矿山作业</strong>
+          <p>矿山开采区域的安全巡查</p>
+        </li>
+        <li>
+          <strong>建筑工地</strong>
+          <p>大型建筑工地的安全监管</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.supervision-view {
+  padding: v.$spacing-xl;
+  background: white;
+  border-radius: v.$border-radius-lg;
+  box-shadow: v.$shadow-md;
+
+  h2 {
+    font-size: v.$font-size-xl;
+    color: v.$text-primary;
+    margin-bottom: v.$spacing-xl;
+    padding-bottom: v.$spacing-md;
+    border-bottom: 2px solid v.$primary-color;
+  }
+
+  .content-section {
+    h3 {
+      font-size: v.$font-size-lg;
+      color: v.$text-primary;
+      margin: v.$spacing-xl 0 v.$spacing-md;
+    }
+
+    p {
+      color: v.$text-secondary;
+      line-height: 1.6;
+    }
+
+    .feature-list,
+    .scenario-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: v.$spacing-lg;
+      margin-top: v.$spacing-lg;
+      padding: 0;
+      list-style: none;
+
+      li {
+        padding: v.$spacing-lg;
+        background: v.$background-light;
+        border-radius: v.$border-radius-md;
+        transition: transform v.$transition-fast;
+
+        &:hover {
+          transform: translateY(-4px);
+        }
+
+        strong {
+          display: block;
+          color: v.$primary-color;
+          margin-bottom: v.$spacing-sm;
+        }
+
+        p {
+          margin: 0;
+          font-size: v.$font-size-sm;
+        }
+      }
+    }
+
+    .scenario-list {
+      margin-top: v.$spacing-lg;
+
+      li {
+        background: v.$background-secondary;
+
+        strong {
+          color: v.$secondary-color;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/Enterprise/SafetyProduction/index.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const subMenuItems = [
+  { path: '/enterprise/safety-production/supervision', title: '安全生产部门监管' },
+  { path: '/enterprise/safety-production/self-inspection', title: '企业安全生产自查' },
+  { path: '/enterprise/safety-production/accident-handling', title: '安全生产事故处置' }
+]
+
+const currentPath = computed(() => route.path)
+</script>
+
+<template>
+  <div class="safety-production-view">
+    <div class="header">
+      <h1>安全生产解决方案</h1>
+      <p class="description">为企业和监管部门提供全面的安全生产管理解决方案</p>
+    </div>
+
+    <!-- 子菜单导航 -->
+    <nav class="sub-nav">
+      <router-link
+        v-for="item in subMenuItems"
+        :key="item.path"
+        :to="item.path"
+        class="nav-item"
+        :class="{ active: currentPath === item.path }"
+      >
+        {{ item.title }}
+      </router-link>
+    </nav>
+
+    <!-- 子路由视图 -->
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
+
+.safety-production-view {
+  padding: v.$spacing-xl v.$spacing-xl * 2;
+
+  .header {
+    text-align: center;
+    margin-bottom: v.$spacing-xl * 2;
+
+    h1 {
+      font-size: v.$font-size-xxl;
+      color: v.$text-primary;
+      margin-bottom: v.$spacing-md;
+    }
+
+    .description {
+      font-size: v.$font-size-lg;
+      color: v.$text-secondary;
+    }
+  }
+
+  .sub-nav {
+    display: flex;
+    justify-content: center;
+    gap: v.$spacing-md;
+    margin-bottom: v.$spacing-xl;
+    padding: v.$spacing-md;
+    background-color: v.$background-light;
+    border-radius: v.$border-radius-lg;
+    box-shadow: v.$shadow-sm;
+
+    .nav-item {
+      padding: v.$spacing-sm v.$spacing-md;
+      color: v.$text-primary;
+      text-decoration: none;
+      border-radius: v.$border-radius-md;
+      transition: all v.$transition-fast;
+
+      &:hover {
+        background-color: rgba(v.$primary-color, 0.1);
+        color: v.$primary-color;
+      }
+
+      &.active {
+        background-color: v.$primary-color;
+        color: white;
+      }
+    }
+  }
+
+  .content {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+</style>

web/src/views/Enterprise/index.vue

@@ -1,354 +1,30 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import Section from '@/components/Section/index.vue'
-import ProductCard from '@/components/ProductCard/index.vue'
-import SceneCard from '@/components/SceneCard/index.vue'
+import { useRoute, useRouter } from 'vue-router'
+import { onMounted } from 'vue'
 
-const products = ref([
-  {
-    title: 'DJI Mavic 3T',
-    image: 'https://www-cdn.djiits.com/cms/uploads/b504874f2cec0e33cf2a07be61b30b9d.png',
-    specs: [
-      '重量：920g',
-      '最大飞行时间（无风环境）：45 分钟',
-      '环境感知：全向双目视觉系统，辅以机身底部红外传感器',
-      '环境适应性：最高 6000 米起飞海拔，12m/s 最大抗风风速'
-    ]
-  },
-  {
-    title: '经纬 M30 系列',
-    image: 'https://www-cdn.djiits.com/cms/uploads/e2029c474f864cf7550db2ab165977a0.png',
-    specs: [
-      '重量：3770 ± 10 g',
-      '最大飞行时间：41 分钟',
-      '环境感知：前后左右上下，视觉+红外传感器，六向感知避障',
-      '环境适应性：最高 7000 米起飞海拔'
-    ]
-  }
-])
-
-const payloads = ref([
-  {
-    title: '禅思 P1（Matrice 350 RTK）',
-    image: 'https://www-cdn.djiits.com/cms/uploads/080697d90ea44b637286738534144500.png',
-    specs: [
-      '4500 万像素全画幅相机',
-      '机械全局快门 1/2000 秒',
-      '三轴云台智能摆动拍摄'
-    ]
-  },
-  {
-    title: '禅思 H20 系列（Matrice 350 RTK）',
-    image: 'https://www-cdn.djiits.com/cms/uploads/79b2f3f93536275d6dcd2058ba360cf0.png',
-    specs: [
-      '变焦可见光相机：2000 万像素，23 倍混合光学变焦',
-      '广角可见光相机：1200 万像素',
-      '红外相机：640×512@30Hz'
-    ]
-  }
-])
+const route = useRoute()
+const router = useRouter()
 
-const workflow = ref([
-  '无人机升空侦查，快速获取全局态势，助力灾情研判',
-  '大疆司空 2+经纬 M30 可快速生成 2.5D 地图，打造电子化指战底图',
-  '通过激光打点定位功能，将被困人员坐标、人数信息同步至救援力量',
-  'Matrice 350 RTK 搭载抛投模块，投递紧急物资，搜寻被困人员'
-])
-
-const relatedScenes = ref([
-  {
-    title: '森林火灾救援',
-    image: 'https://www-cdn.djiits.com/cms/uploads/forest_fire.jpg',
-    description: '利用无人机进行火情侦察、火场态势感知、救援力量部署'
-  },
-  {
-    title: '地震与地质灾害救援',
-    image: 'https://www-cdn.djiits.com/cms/uploads/earthquake.jpg',
-    description: '快速获取灾区影像，辅助灾情研判和救援决策'
-  },
-  {
-    title: '山岳搜救',
-    image: 'https://www-cdn.djiits.com/cms/uploads/mountain_rescue.jpg',
-    description: '利用无人机进行山地搜救、物资投递、通信中继等任务'
+// 如果直接访问 /enterprise，重定向到第一个子路由
+onMounted(() => {
+  if (route.path === '/enterprise' && !route.matched.some(record => record.path !== '/enterprise')) {
+    router.push('/enterprise/public-safety')
   }
-])
+})
 </script>
 
 <template>
-  <main class="enterprise-page">
-    <!-- 头部区域 -->
-    <Section
-      heroSection
-      dark
-      centered
-      bgImage="https://www-cdn.djiits.com/cms/uploads/48a967a2ed2eae5a14a505df27ccac2f.jpg"
-      title="洪涝灾害救援"
-      subtitle="洪涝灾害救援期间，标注被困人员、道路情况、作战示意图、风险警示图以及力量部署图、力量统计图、成果统计表等数据。"
-    />
-
-    <!-- 业务优势区域 -->
-    <Section title="业务优势" bgColor="#fff">
-      <div class="advantages-container">
-        <div class="advantages-header">
-          <div class="tab-title">业务痛点</div>
-          <div class="tab-title">无人机优势</div>
-        </div>
-        <div class="advantages-content">
-          <div class="pain-point">
-            <div class="icon">
-              <svg width="14" height="2" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M.75.375h11.27c.679 0 1.23.551 1.23 1.23v.02H2c-.69 0-1.25-.56-1.25-1.25Z" fill="#000" fill-opacity=".45"/>
-              </svg>
-            </div>
-            <div class="text">城市内涝突发性强，来势凶猛，点多面广，救援困难。</div>
-          </div>
-          <div class="advantage">
-            <div class="icon">
-              <svg width="15" height="15" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.637 6.598a.657.657 0 0 1 .898 0 .657.657 0 0 1 0 .898L8.121 11.91a.678.678 0 0 1-.45.176c-.159 0-.318-.061-.448-.176l-1.875-1.875a.657.657 0 0 1 0-.898.656.656 0 0 1 .898 0l1.426 1.445 3.965-3.984Z" fill="#31D158"/>
-              </svg>
-            </div>
-            <div class="text">直观研判灾情、可视化指挥、端到端信息同步，助力精准、高效救援。</div>
-          </div>
-        </div>
-      </div>
-    </Section>
-
-    <!-- 解决方案区域 -->
-    <Section title="解决方案" bgColor="#f5f5f5">
-      <div class="solution-card">
-        <div class="solution-content">
-          <h3>洪涝灾害救援解决方案</h3>
-          <p>该方案采用小型便携式无人机 DJI Mavic 3T 或经纬 M30 系列，开展灾情侦查，采用多功能无人机大疆 Matrice 350 RTK ，开展侦查、抛投、照明、通信中继等救援任务。</p>
-          <button class="contact-btn">立即咨询</button>
-        </div>
-      </div>
-
-      <!-- 产品列表 -->
-      <h3 class="subsection-title">飞行平台</h3>
-      <div class="products-grid">
-        <ProductCard
-          v-for="product in products"
-          :key="product.title"
-          :title="product.title"
-          :image="product.image"
-          :details="product.specs"
-        />
-      </div>
-
-      <h3 class="subsection-title">负载及软件</h3>
-      <div class="products-grid">
-        <ProductCard
-          v-for="payload in payloads"
-          :key="payload.title"
-          :title="payload.title"
-          :image="payload.image"
-          :details="payload.specs"
-        />
-      </div>
-
-      <h3 class="subsection-title">工作流程</h3>
-      <div class="workflow-list">
-        <ol>
-          <li v-for="(step, index) in workflow" :key="index">{{ step }}</li>
-        </ol>
-      </div>
-    </Section>
-
-    <!-- 应用案例区域 -->
-    <Section title="应用案例" bgColor="#fff">
-      <div class="case-card">
-        <div class="case-image">
-          <img src="https://stag-www-cdn.djiits.com/pre/dps/a7cb4e6bccf206279426805bd9b45452.jpg" alt="无人机协助防汛救灾">
-        </div>
-        <div class="case-content">
-          <h3>集群建模、空地协同，大疆无人机高效协助防汛救灾</h3>
-          <p>汛情发生后，大疆行业应用与合作伙伴迅速响应，在相关应急救援部门的组织领导下，使用大疆行业应用无人机与大疆司空 2 云平台空地协同作业，为救援行动的顺利展开提供了精准化数字支撑。</p>
-        </div>
-      </div>
-    </Section>
-
-    <!-- 更多应用场景 -->
-    <Section title="更多应用场景" bgColor="#f5f5f5">
-      <div class="scenes-grid">
-        <SceneCard
-          v-for="scene in relatedScenes"
-          :key="scene.title"
-          :title="scene.title"
-          :image="scene.image"
-          :description="scene.description"
-        />
-      </div>
-      <div class="more-link">
-        <a href="#">了解更多应用场景</a>
-      </div>
-    </Section>
-  </main>
+  <div class="enterprise-view">
+    <router-view></router-view>
+  </div>
 </template>
 
-<style lang="scss" scoped>
-.enterprise-page {
-  .advantages-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-
-    .advantages-header {
-      display: flex;
-      gap: 40px;
-      margin-bottom: 30px;
-
-      .tab-title {
-        font-size: 20px;
-        font-weight: bold;
-      }
-    }
-
-    .advantages-content {
-      display: flex;
-      gap: 40px;
-
-      .pain-point, .advantage {
-        display: flex;
-        align-items: flex-start;
-        gap: 12px;
-        flex: 1;
-
-        .icon {
-          margin-top: 8px;
-        }
-
-        .text {
-          font-size: 16px;
-          line-height: 1.6;
-        }
-      }
-    }
-  }
-
-  .solution-card {
-    background-image: url('https://www-cdn.djiits.com/cms/uploads/85942602c19aaa46c1429cdbf0c0d96c.jpg');
-    background-size: cover;
-    background-position: center;
-    padding: 60px;
-    margin-bottom: 40px;
-    color: white;
-
-    .solution-content {
-      max-width: 600px;
-
-      h3 {
-        font-size: 28px;
-        margin-bottom: 20px;
-      }
-
-      p {
-        font-size: 16px;
-        line-height: 1.6;
-        margin-bottom: 30px;
-      }
-
-      .contact-btn {
-        padding: 12px 24px;
-        background: white;
-        border: none;
-        border-radius: 4px;
-        font-size: 16px;
-        cursor: pointer;
-        transition: opacity 0.3s;
+<style scoped lang="scss">
+@use '@/assets/styles/variables' as v;
+@use '@/assets/styles/mixins' as m;
 
-        &:hover {
-          opacity: 0.9;
-        }
-      }
-    }
-  }
-
-  .subsection-title {
-    font-size: 24px;
-    margin: 40px 0 20px;
-  }
-
-  .products-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 30px;
-    margin-bottom: 40px;
-  }
-
-  .workflow-list {
-    background: white;
-    padding: 30px;
-    border-radius: 4px;
-
-    ol {
-      padding-left: 20px;
-
-      li {
-        margin-bottom: 12px;
-        line-height: 1.6;
-        font-size: 16px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-
-  .case-card {
-    display: flex;
-    background: #f5f5f5;
-    overflow: hidden;
-    max-width: 800px;
-    margin: 0 auto;
-
-    .case-image {
-      width: 50%;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .case-content {
-      width: 50%;
-      padding: 40px;
-
-      h3 {
-        font-size: 24px;
-        margin-bottom: 20px;
-      }
-
-      p {
-        font-size: 16px;
-        line-height: 1.6;
-        color: rgba(0, 0, 0, 0.65);
-      }
-    }
-  }
-
-  .scenes-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    margin-bottom: 40px;
-  }
-
-  .more-link {
-    text-align: center;
-
-    a {
-      color: #0070D5;
-      text-decoration: none;
-      font-size: 16px;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
+.enterprise-view {
+  padding-top: calc(v.$header-height + v.$spacing-xl);
+  min-height: calc(100vh - v.$header-height - v.$footer-height);
 }
 </style>