vue3 的neo模块

zyuas-neo/package.json

@@ -9,7 +9,8 @@
     "build:skip-typecheck": "vite build",
     "preview": "vite preview",
     "type-check": "vue-tsc --noEmit",
-    "compress:images": "node scripts/compress-images.js"
+    "compress:images": "node scripts/compress-images.js",
+    "optimize:images": "node scripts/optimize-large-images.js"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",

zyuas-neo/scripts/optimize-large-images.js

@@ -0,0 +1,165 @@
+import sharp from 'sharp'
+import { readdir, stat, rename, unlink } from 'fs/promises'
+import { join, extname } from 'path'
+
+const IMAGE_DIR = 'src/assets/images'
+const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg']
+const SIZE_THRESHOLD = 500 * 1024 // 500KB
+
+// 计算文件大小（KB）
+function formatSize(bytes) {
+  return (bytes / 1024).toFixed(2) + ' KB'
+}
+
+// 压缩单个图片 - 更激进的压缩策略
+async function compressImage(fileName) {
+  const ext = extname(fileName).toLowerCase()
+  const inputPath = join(IMAGE_DIR, fileName)
+  const tempPath = join(IMAGE_DIR, 'temp_' + fileName)
+
+  try {
+    const inputStats = await stat(inputPath)
+    const inputSize = inputStats.size
+
+    // 如果文件小于 500KB，跳过
+    if (inputSize < SIZE_THRESHOLD) {
+      console.log(`⏭️  ${fileName} (${formatSize(inputSize)}) - 跳过`)
+      return null
+    }
+
+    let pipeline = sharp(inputPath)
+
+    // 首先调整尺寸（如果图片太大）
+    const metadata = await pipeline.metadata()
+    const maxWidth = 1920
+    const maxHeight = 1080
+
+    if (metadata.width > maxWidth || metadata.height > maxHeight) {
+      pipeline = pipeline.resize(maxWidth, maxHeight, {
+        fit: 'inside',
+        withoutEnlargement: true
+      })
+    }
+
+    // 根据图片类型设置更激进的压缩参数
+    if (ext === '.png') {
+      // PNG 转为 PNG 但使用更激进的设置
+      pipeline = pipeline.png({
+        compressionLevel: 9,
+        palette: true,
+        quality: 60,
+        dither: 1
+      })
+    } else if (ext === '.jpg' || ext === '.jpeg') {
+      pipeline = pipeline.jpeg({
+        quality: 70,
+        mozjpeg: true,
+        progressive: true
+      })
+    }
+
+    // 执行压缩到临时文件
+    await pipeline.toFile(tempPath)
+
+    const outputStats = await stat(tempPath)
+    const outputSize = outputStats.size
+
+    // 如果压缩后仍然很大，考虑转为 WebP
+    if (outputSize > SIZE_THRESHOLD && ext === '.png') {
+      console.log(`🔄 ${fileName} - 转为 WebP 格式`)
+      await pipeline.webp({ quality: 75 }).toFile(tempPath)
+      const webpStats = await stat(tempPath)
+      console.log(`   原始：${formatSize(inputSize)} → WebP: ${formatSize(webpStats.size)}`)
+    }
+
+    // 删除原文件并重命名临时文件
+    await unlink(inputPath)
+    await rename(tempPath, inputPath)
+
+    const finalStats = await stat(inputPath)
+    const finalSize = finalStats.size
+
+    const savings = ((inputSize - finalSize) / inputSize * 100).toFixed(1)
+
+    console.log(`✅ ${fileName}`)
+    console.log(`   原始：${formatSize(inputSize)} → 压缩后：${formatSize(finalSize)} (节省 ${savings}%)`)
+
+    return { inputSize, outputSize: finalSize, savings }
+  } catch (error) {
+    console.error(`❌ 压缩失败 ${fileName}:`, error.message)
+    // 清理临时文件（如果存在）
+    try {
+      await unlink(tempPath)
+    } catch (e) {
+      // 忽略
+    }
+    return null
+  }
+}
+
+// 主函数
+async function main() {
+  console.log('🚀 开始优化大图片（>500KB）...\n')
+
+  const files = await readdir(IMAGE_DIR)
+  const imageFiles = files.filter(file => 
+    IMAGE_EXTENSIONS.includes(extname(file).toLowerCase())
+  )
+  
+  if (imageFiles.length === 0) {
+    console.log('⚠️  未找到图片')
+    return
+  }
+
+  // 先找出所有大于 500KB 的图片
+  const largeImages = []
+  for (const file of imageFiles) {
+    const stats = await stat(join(IMAGE_DIR, file))
+    if (stats.size > SIZE_THRESHOLD) {
+      largeImages.push({ name: file, size: stats.size })
+    }
+  }
+
+  if (largeImages.length === 0) {
+    console.log('✅ 所有图片都已小于 500KB，无需进一步优化！')
+    return
+  }
+
+  console.log(`📁 找到 ${largeImages.length} 张大图片需要优化：\n`)
+  largeImages.forEach(img => {
+    console.log(`   - ${img.name}: ${formatSize(img.size)}`)
+  })
+  console.log()
+
+  let totalInput = 0
+  let totalOutput = 0
+  let successCount = 0
+
+  for (const file of imageFiles) {
+    const result = await compressImage(file)
+    if (result) {
+      totalInput += result.inputSize
+      totalOutput += result.outputSize
+      successCount++
+      console.log()
+    }
+  }
+
+  if (successCount === 0) {
+    console.log('\n✅ 没有需要优化的大图片')
+    return
+  }
+
+  const totalSavings = ((totalInput - totalOutput) / totalInput * 100).toFixed(1)
+
+  console.log('='.repeat(50))
+  console.log(`📊 优化完成！`)
+  console.log(`   成功：${successCount} 张`)
+  console.log(`   原始总大小：${formatSize(totalInput)}`)
+  console.log(`   优化后总大小：${formatSize(totalOutput)}`)
+  console.log(`   总计节省：${totalSavings}% (${formatSize(totalInput - totalOutput)})`)
+  console.log('='.repeat(50))
+}
+
+// 运行
+main().catch(console.error)

zyuas-neo/src/components/Footer.vue

@@ -1,77 +1,291 @@
 <template>
   <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h4>联系我们</h4>
-          <p>电话：400-xxx-xxxx</p>
-          <p>邮箱：info@zyuas.com</p>
-          <p>地址：上海市 xxx 区 xxx 路 xxx 号</p>
+    <!-- 背景装饰 -->
+    <div class="footer-bg">
+      <div class="gradient-orb orb-1"></div>
+      <div class="gradient-orb orb-2"></div>
+    </div>
+
+    <div class="container footer-content">
+      <div class="logo-section">
+        <div class="logo">
+          <img src="@/assets/images/logo_white.svg" alt="logo" @error="handleLogoError">
+        </div>
+        <p class="title">上海展域航空技术有限公司</p>
+        <p class="subtitle">您身边的无人机与 AI 解决方案专家</p>
+      </div>
+
+      <div class="footer-info">
+        <div class="info-item">
+          <el-icon class="info-icon"><Location /></el-icon>
+          <span>地址：上海市徐汇区漕溪路 252 号银海大楼 C-406</span>
+        </div>
+        <div class="info-item">
+          <el-icon class="info-icon"><Phone /></el-icon>
+          <span>联系电话：15086621233</span>
         </div>
-        <div class="footer-section">
-          <h4>产品服务</h4>
-          <router-link to="/products/djiAircraft">大疆行业无人机</router-link>
-          <router-link to="/products/payloads">无人机负载</router-link>
-          <router-link to="/products/software">软件与服务</router-link>
-          <router-link to="/solutions">解决方案</router-link>
+        <div class="info-item">
+          <el-icon class="info-icon"><Message /></el-icon>
+          <span>邮箱：zhanyuhangkong@163.com</span>
         </div>
-        <div class="footer-section">
-          <h4>关于我们</h4>
-          <router-link to="/info">公司介绍</router-link>
-          <router-link to="/news">公司动态</router-link>
-          <router-link to="/contactus">联系我们</router-link>
+        <div class="info-item">
+          <el-icon class="info-icon"><ChatDotRound /></el-icon>
+          <span>微信号：15086621233</span>
         </div>
       </div>
-      <div class="footer-bottom">
-        <p>&copy; {{ currentYear }} 上海展域航空技术有限公司 版权所有</p>
+
+      <div class="footer-links">
+        <router-link to="/products">产品中心</router-link>
+        <router-link to="/solutions">解决方案</router-link>
+        <router-link to="/news">公司动态</router-link>
+        <router-link to="/info">关于我们</router-link>
+      </div>
+
+      <div class="copyright">
+        <p>
+          <span>Copyright &copy; {{ currentYear }} 上海展域航空技术有限公司</span>
+        </p>
+        <p>
+          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">沪 ICP 备 2023024212 号 -1</a>
+        </p>
       </div>
     </div>
   </footer>
 </template>
 
 <script setup lang="ts">
+import { Location, Phone, Message, ChatDotRound } from '@element-plus/icons-vue'
+
 const currentYear: number = new Date().getFullYear()
+
+const handleLogoError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  target.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50"><rect fill="%23fff" width="200" height="50"/><text fill="%231e73be" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="14" font-weight="bold">ZYUAS</text></svg>'
+}
 </script>
 
-<style scoped lang="css">
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
 .footer {
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-  color: rgba(255, 255, 255, 0.8);
-  padding: 60px 0 20px;
+  position: relative;
+  width: 100%;
+  color: #fff;
+  background: linear-gradient(135deg, #0f172a 0%, #1e3c72 50%, #2a5298 100%);
+  overflow: hidden;
+  padding: $spacer-4 $spacer-2 $spacer-3;
   margin-top: auto;
 }
 
+/* 背景装饰 */
+.footer-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.gradient-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.3;
+  animation: float 8s ease-in-out infinite;
+
+  &.orb-1 {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 70%);
+    top: -100px;
+    left: -100px;
+  }
+
+  &.orb-2 {
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
+    bottom: -50px;
+    right: -50px;
+    animation-delay: 3s;
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(30px, 40px); }
+}
+
+/* 内容区域 */
 .footer-content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 40px;
-  margin-bottom: 40px;
+  position: relative;
+  z-index: 1;
+  max-width: $container-max-width;
+  margin: 0 auto;
 }
 
-.footer-section h4 {
-  font-size: 18px;
-  font-weight: 600;
-  color: #fff;
-  margin-bottom: 20px;
+/* Logo 区域 */
+.logo-section {
+  text-align: center;
+  margin-bottom: $spacer-3;
 }
 
-.footer-section p,
-.footer-section a {
-  font-size: 14px;
-  line-height: 2;
+.logo {
+  width: 200px;
+  margin: 0 auto 25px;
+  text-align: center;
+
+  img {
+    width: 100%;
+    height: auto;
+    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
+    transition: transform 0.3s ease;
+  }
+
+  &:hover img {
+    transform: scale(1.05);
+  }
+}
+
+.title {
+  font-size: $font-size-3xl;
+  font-weight: $font-weight-bold;
+  text-align: center;
+  margin: 0 0 10px;
+  letter-spacing: 2px;
+  background: linear-gradient(90deg, #fff 0%, #e0e7ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+
+  @include mobile {
+    font-size: $font-size-xl;
+  }
+}
+
+.subtitle {
+  font-size: $font-size-sm;
+  text-align: center;
   color: rgba(255, 255, 255, 0.7);
-  transition: var(--transition-base);
+  margin: 0 0 $spacer-3;
+  letter-spacing: 3px;
+}
+
+/* 信息列表 */
+.footer-info {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px 40px;
+  margin: 30px 0;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: $font-size-sm;
+  color: rgba(255, 255, 255, 0.8);
+  padding: 12px 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(30, 115, 190, 0.5);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  @include mobile {
+    width: 100%;
+    max-width: 400px;
+    justify-content: center;
+  }
 }
 
-.footer-section a:hover {
-  color: var(--primary-light);
+.info-icon {
+  font-size: 18px;
+  color: #60a5fa;
+  flex-shrink: 0;
 }
 
-.footer-bottom {
+/* 快捷链接 */
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin: 40px 0 30px;
+  padding: 20px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding-top: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+  @include mobile {
+    flex-wrap: wrap;
+    gap: 15px 25px;
+  }
+}
+
+.footer-links a {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: $font-size-sm;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+  padding: 5px 0;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #60a5fa, #3b82f6);
+    transition: all 0.3s ease;
+    transform: translateX(-50%);
+  }
+
+  &:hover {
+    color: #fff;
+
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+/* 版权信息 */
+.copyright {
   text-align: center;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.5);
+  margin-top: 30px;
+
+  p {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 8px 0;
+  }
+
+  a {
+    color: rgba(255, 255, 255, 0.6);
+    text-decoration: none;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: #60a5fa;
+    }
+  }
 }
 </style>

zyuas-neo/src/config/nav-config.ts

@@ -14,9 +14,11 @@ export const navConfig: NavItem[] = [
     children: [
       { name: "无人机解决方案", path: "/solutions" },
       { name: "无人机", path: "/products/djiAircraft" },
+      { name: "应用案例", path: "/products/djiDetail" },
       { name: "无人机负载", path: "/products/payloads" },
       { name: "软件与服务", path: "/products/software" },
-      { name: "软件定制开发", path: "/products/develop" }
+      { name: "软件定制开发", path: "/products/develop" },
+      { name: "飞行咨询服务", path: "/products/consult" }
     ]
   },
   {
@@ -29,11 +31,9 @@ export const navConfig: NavItem[] = [
   },
   { name: "公司动态", path: "/news", children: [] },
   { name: "公司介绍", path: "/info", children: [] },
-  // { name: "加入我们", path: "/joinus", children: [] },
 ]
 
 // 导航右侧按钮配置
 export const navActions: NavAction[] = [
   { name: "联系我们", path: "/contactus", type: "primary" },
-  // { name: "商城", path: "/store", type: "secondary" }
 ]

zyuas-neo/src/router/index.ts

@@ -23,6 +23,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/views/Products/DjiAircraft.vue'),
         meta: { title: '大疆行业应用无人机' }
       },
+      {
+        path: 'djiDetail',
+        name: 'DjiDetail',
+        component: () => import('@/views/Products/DjiDetail.vue'),
+        meta: { title: '应用案例' }
+      },
       {
         path: 'payloads',
         name: 'Payloads',
@@ -40,6 +46,12 @@ const routes: RouteRecordRaw[] = [
         name: 'Develop',
         component: () => import('@/views/Products/Develop.vue'),
         meta: { title: '软件定制开发' }
+      },
+      {
+        path: 'consult',
+        name: 'Consult',
+        component: () => import('@/views/Products/Consult.vue'),
+        meta: { title: '飞行咨询服务' }
       }
     ]
   },
@@ -53,25 +65,127 @@ const routes: RouteRecordRaw[] = [
     path: '/solutions/surveying',
     name: 'SolutionsSurveying',
     component: () => import('@/views/Solutions/Surveying.vue'),
-    meta: { title: '基础测绘解决方案' }
+    meta: { title: '基础测绘解决方案' },
+    redirect: '/solutions/surveying/intro',
+    children: [
+      {
+        path: 'intro',
+        name: 'SolutionsSurveyingIntro',
+        component: () => import('@/views/Solutions/SurveyingIntro.vue'),
+        meta: { title: '技术概述' }
+      },
+      {
+        path: 'features',
+        name: 'SolutionsSurveyingFeatures',
+        component: () => import('@/views/Solutions/SurveyingFeatures.vue'),
+        meta: { title: '核心优势' }
+      },
+      {
+        path: 'application',
+        name: 'SolutionsSurveyingApplication',
+        component: () => import('@/views/Solutions/SurveyingApplication.vue'),
+        meta: { title: '应用场景' }
+      },
+      {
+        path: 'data',
+        name: 'SolutionsSurveyingData',
+        component: () => import('@/views/Solutions/SurveyingData.vue'),
+        meta: { title: '数据成果' }
+      }
+    ]
   },
   {
     path: '/solutions/building',
     name: 'SolutionsBuilding',
     component: () => import('@/views/Solutions/Building.vue'),
-    meta: { title: '建筑工程解决方案' }
+    meta: { title: '建筑工程解决方案' },
+    redirect: '/solutions/building/intro',
+    children: [
+      {
+        path: 'intro',
+        name: 'SolutionsBuildingIntro',
+        component: () => import('@/views/Solutions/BuildingIntro.vue'),
+        meta: { title: '技术概述' }
+      },
+      {
+        path: 'features',
+        name: 'SolutionsBuildingFeatures',
+        component: () => import('@/views/Solutions/BuildingFeatures.vue'),
+        meta: { title: '核心优势' }
+      },
+      {
+        path: 'application',
+        name: 'SolutionsBuildingApplication',
+        component: () => import('@/views/Solutions/BuildingApplication.vue'),
+        meta: { title: '应用场景' }
+      }
+    ]
   },
   {
     path: '/solutions/safety',
     name: 'SolutionsSafety',
     component: () => import('@/views/Solutions/Safety.vue'),
-    meta: { title: '安全生产解决方案' }
+    meta: { title: '安全生产解决方案' },
+    redirect: '/solutions/safety/intro',
+    children: [
+      {
+        path: 'intro',
+        name: 'SolutionsSafetyIntro',
+        component: () => import('@/views/Solutions/SafetyIntro.vue'),
+        meta: { title: '技术概述' }
+      },
+      {
+        path: 'features',
+        name: 'SolutionsSafetyFeatures',
+        component: () => import('@/views/Solutions/SafetyFeatures.vue'),
+        meta: { title: '核心优势' }
+      },
+      {
+        path: 'application',
+        name: 'SolutionsSafetyApplication',
+        component: () => import('@/views/Solutions/SafetyApplication.vue'),
+        meta: { title: '应用场景' }
+      }
+    ]
   },
   {
     path: '/solutions/emergency-rescue',
     name: 'SolutionsEmergencyRescue',
     component: () => import('@/views/Solutions/EmergencyRescue.vue'),
-    meta: { title: '应急救援解决方案' }
+    meta: { title: '应急救援解决方案' },
+    redirect: '/solutions/emergency-rescue/disaster-response',
+    children: [
+      {
+        path: 'disaster-response',
+        name: 'SolutionsEmergencyDisasterResponse',
+        component: () => import('@/views/Solutions/EmergencyDisasterResponse.vue'),
+        meta: { title: '灾害快速响应' }
+      },
+      {
+        path: 'search-rescue',
+        name: 'SolutionsEmergencySearchRescue',
+        component: () => import('@/views/Solutions/EmergencySearchRescue.vue'),
+        meta: { title: '搜索与救援' }
+      },
+      {
+        path: 'command-dispatch',
+        name: 'SolutionsEmergencyCommandDispatch',
+        component: () => import('@/views/Solutions/EmergencyCommandDispatch.vue'),
+        meta: { title: '指挥与调度' }
+      },
+      {
+        path: 'post-evaluation',
+        name: 'SolutionsEmergencyPostEvaluation',
+        component: () => import('@/views/Solutions/EmergencyPostEvaluation.vue'),
+        meta: { title: '灾后评估与分析' }
+      },
+      {
+        path: 'accident',
+        name: 'SolutionsEmergencyAccident',
+        component: () => import('@/views/Solutions/Accident.vue'),
+        meta: { title: '应急救援应用' }
+      }
+    ]
   },
   {
     path: '/ai-development',

zyuas-neo/src/views/Products/Consult.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="products-sub-page">
+    <div class="consult-content">
+      <h2>飞行咨询服务</h2>
+      <p class="lead">提供专业的无人机飞行咨询服务，助力您的行业应用。</p>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <div class="service-card">
+            <h3><el-icon><Headset /></el-icon> 技术咨询</h3>
+            <p>提供专业的无人机技术方案咨询，根据您的需求定制最适合的解决方案。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <div class="service-card">
+            <h3><el-icon><Document /></el-icon> 政策咨询</h3>
+            <p>解读无人机相关法规政策，协助办理飞行空域申请等相关手续。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <div class="service-card">
+            <h3><el-icon><User /></el-icon> 培训服务</h3>
+            <p>提供无人机操作技能培训，帮助您快速掌握无人机应用技术。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <div class="service-card">
+            <h3><el-icon><Service /></el-icon> 售后支持</h3>
+            <p>提供全方位的售后服务支持，确保您的无人机系统稳定运行。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="contact-cta">
+            <h3>联系我们获取专业咨询</h3>
+            <p>我们的专业团队将为您提供一对一的咨询服务</p>
+            <router-link to="/contactus" class="btn-contact">
+              <el-icon><Message /></el-icon>
+              立即咨询
+            </router-link>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Headset, Document, User, Service, Message } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.products-sub-page {
+  padding: $spacer-4 0;
+  min-height: 60vh;
+}
+
+.consult-content {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.service-card {
+  padding: $spacer-3;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  height: 100%;
+  transition: $transition-bounce;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 24px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+
+.contact-cta {
+  margin-top: $spacer-4;
+  padding: $spacer-4;
+  background: $primary-gradient;
+  border-radius: $radius-xl;
+  text-align: center;
+  color: #fff;
+
+  h3 {
+    font-size: $font-size-2xl;
+    font-weight: $font-weight-bold;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-base;
+    opacity: 0.9;
+    margin-bottom: $spacer-2;
+  }
+
+  .btn-contact {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 32px;
+    background: #fff;
+    color: $primary-color;
+    border-radius: $radius-md;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    text-decoration: none;
+    transition: $transition-base;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-md;
+      color: $primary-color;
+    }
+
+    .el-icon {
+      font-size: 18px;
+    }
+  }
+}
+</style>

zyuas-neo/src/views/Products/DjiDetail.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="products-sub-page">
+    <div class="dji-detail-page">
+      <!-- Banner -->
+      <div class="banner">
+        <div class="container">
+          <h2>应用案例</h2>
+        </div>
+      </div>
+
+      <div class="container">
+        <el-row :gutter="40">
+          <!-- 侧边导航 -->
+          <el-col :xs="24" :md="4">
+            <div class="side-nav" ref="sideNavRef">
+              <div class="nav-header">应用案例</div>
+              <ul class="nav-list">
+                <li
+                  v-for="(item, index) in navList"
+                  :key="index"
+                  :class="{ active: activeSection === item.id }"
+                >
+                  <a :href="'#' + item.id" @click.prevent="scrollToSection(item.id)">
+                    {{ item.title }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </el-col>
+
+          <!-- 内容区域 -->
+          <el-col :xs="24" :md="20">
+            <div class="content-area">
+              <section id="section-1" class="content-section">
+                <h3>1. 航测测绘</h3>
+                <el-row :gutter="30" class="case-row">
+                  <el-col :xs="24" :sm="12">
+                    <div class="case-card">
+                      <img src="@/assets/images/sur1.png" alt="航测测绘案例">
+                      <div class="case-content">
+                        <h4>地形测绘</h4>
+                        <p>使用无人机进行大范围地形测绘，生成高精度 DOM、DEM 数据，为城市规划提供基础地理信息。</p>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :xs="24" :sm="12">
+                    <div class="case-card">
+                      <img src="@/assets/images/service1.jpg" alt="地籍测量案例">
+                      <div class="case-content">
+                        <h4>地籍测量</h4>
+                        <p>快速获取宗地界址点坐标，生成地籍图，支持不动产登记和管理。</p>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </section>
+
+              <section id="section-2" class="content-section">
+                <h3>2. 政企行业</h3>
+                <el-row :gutter="30" class="case-row">
+                  <el-col :xs="24" :sm="12">
+                    <div class="case-card">
+                      <img src="@/assets/images/service3.jpg" alt="政企行业案例">
+                      <div class="case-content">
+                        <h4>安全巡检</h4>
+                        <p>为化工园区、电力设施等提供空中巡检服务，提高巡检效率，降低安全风险。</p>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :xs="24" :sm="12">
+                    <div class="case-card">
+                      <img src="@/assets/images/service2.jpg" alt="城市规划案例">
+                      <div class="case-content">
+                        <h4>城市规划</h4>
+                        <p>通过倾斜摄影测量技术生成三维实景模型，为智慧城市建设提供数据基础。</p>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </section>
+
+              <section id="section-3" class="content-section">
+                <h3>3. 能源</h3>
+                <el-row :gutter="30" class="case-row">
+                  <el-col :xs="24" :sm="12">
+                    <div class="case-card">
+                      <img src="@/assets/images/api.png" alt="电力巡检案例">
+                      <div class="case-content">
+                        <h4>电力巡检</h4>
+                        <p>输电线路、变电站等电力设备的自动化巡检，快速发现故障隐患。</p>
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :xs="24" :sm="12">
+                    <div class="case-card">
+                      <img src="@/assets/images/buil1.png" alt="石油管道案例">
+                      <div class="case-content">
+                        <h4>石油管道</h4>
+                        <p>长距离石油管道的定期巡检，监测管道周边环境变化，预防安全事故。</p>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </section>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+interface NavItem {
+  id: string
+  title: string
+}
+
+const navList: NavItem[] = [
+  { id: 'section-1', title: '1. 航测测绘' },
+  { id: 'section-2', title: '2. 政企行业' },
+  { id: 'section-3', title: '3. 能源' }
+]
+
+const activeSection = ref('section-1')
+const sideNavRef = ref<HTMLElement | null>(null)
+
+const scrollToSection = (id: string) => {
+  const element = document.getElementById(id)
+  if (element) {
+    const offset = 100
+    const elementPosition = element.getBoundingClientRect().top
+    const offsetPosition = elementPosition + window.pageYOffset - offset
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: 'smooth'
+    })
+  }
+}
+
+const handleScroll = () => {
+  const sections = navList.map(item => document.getElementById(item.id))
+  const scrollPosition = window.scrollY + 150
+
+  sections.forEach((section, index) => {
+    if (section) {
+      const sectionTop = section.offsetTop
+      const sectionHeight = section.offsetHeight
+
+      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+        activeSection.value = navList[index].id
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+  handleScroll()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.products-sub-page {
+  background: $bg-lighter;
+}
+
+.dji-detail-page {
+  .banner {
+    background-image: url('@/assets/images/banner_4.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    padding: 80px 0;
+    text-align: center;
+
+    h2 {
+      font-size: $font-size-4xl;
+      font-weight: $font-weight-bold;
+      color: #fff;
+      margin: 0;
+      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .side-nav {
+    position: sticky;
+    top: 100px;
+    background: #fff;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+    overflow: hidden;
+    margin-bottom: $spacer-3;
+
+    .nav-header {
+      padding: 20px;
+      background: #474747;
+      color: #fff;
+      font-size: $font-size-lg;
+      font-weight: $font-weight-bold;
+      text-align: center;
+    }
+
+    .nav-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        border-top: 1px solid #474747;
+
+        a {
+          display: block;
+          padding: 14px 20px;
+          color: $text-regular;
+          text-decoration: none;
+          font-size: $font-size-base;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: rgba($primary-color, 0.05);
+            color: $primary-color;
+          }
+        }
+
+        &.active a {
+          background: #474747;
+          color: #fff;
+        }
+
+        &:first-child {
+          border-top: none;
+        }
+      }
+    }
+  }
+
+  .content-area {
+    .content-section {
+      margin-bottom: $spacer-4;
+      scroll-margin-top: 100px;
+
+      h3 {
+        font-size: $font-size-2xl;
+        font-weight: $font-weight-bold;
+        color: $text-primary;
+        margin-bottom: $spacer-2;
+        padding-bottom: $spacer-2;
+        border-bottom: 2px solid $primary-color;
+      }
+    }
+
+    .case-row {
+      margin-top: $spacer-2;
+    }
+
+    .case-card {
+      background: #fff;
+      border-radius: $radius-lg;
+      overflow: hidden;
+      box-shadow: $shadow-md;
+      transition: $transition-bounce;
+      height: 100%;
+
+      &:hover {
+        transform: translateY(-8px);
+        box-shadow: $shadow-lg;
+      }
+
+      img {
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
+      }
+
+      .case-content {
+        padding: 20px;
+
+        h4 {
+          font-size: $font-size-lg;
+          font-weight: $font-weight-semibold;
+          color: $text-primary;
+          margin-bottom: 12px;
+        }
+
+        p {
+          font-size: $font-size-sm;
+          line-height: 1.8;
+          color: $text-regular;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/Accident.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="accident-page">
+      <div class="container">
+        <div class="main-content">
+          <h4 class="main-title">应急救援应用</h4>
+          <p class="main-desc">使用无人机从空中对灾情进行侦查评估、灾害数据采集，高低温隐患排查、有毒有害气体检‍测；</p>
+          <p class="main-desc">无人机取代部分人工侦查，减少人员涉险抵近，为救援人员保驾护‍航。</p>
+          
+          <div class="image-container">
+            <img class="img-responsive" src="@/assets/images/acci1.png" alt="应急救援应用 1">
+          </div>
+          <div class="image-container">
+            <img class="img-responsive" src="@/assets/images/acci2.png" alt="应急救援应用 2">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 应急救援应用页面
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.accident-page {
+  .main-content {
+    text-align: center;
+  }
+
+  .main-title {
+    font-size: $font-size-2xl;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+  }
+
+  .main-desc {
+    font-size: $font-size-base;
+    color: $text-regular;
+    line-height: 1.8;
+    margin: $spacer-2 0;
+  }
+
+  .image-container {
+    margin: $spacer-3 0;
+    text-align: center;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: $radius-lg;
+      box-shadow: $shadow-md;
+    }
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/BuildingApplication.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>应用场景</h2>
+      <p class="lead">无人机技术已深入建筑工程各个环节，为行业数字化转型提供强大助力。</p>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><List /></el-icon>
+            </div>
+            <h4>勘察测量</h4>
+            <p>地形测绘、工程量计算、土方平衡分析等。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Notebook /></el-icon>
+            </div>
+            <h4>规划设计</h4>
+            <p>方案比选、视线分析、日照分析等。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Tools /></el-icon>
+            </div>
+            <h4>施工管理</h4>
+            <p>进度监控、质量检查、安全巡视等。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><CircleCheck /></el-icon>
+            </div>
+            <h4>竣工验收</h4>
+            <p>竣工测量、质量验收、档案归档等。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Refresh /></el-icon>
+            </div>
+            <h4>运营维护</h4>
+            <p>设施巡检、变形监测、维修决策等。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Warning /></el-icon>
+            </div>
+            <h4>安全监测</h4>
+            <p>边坡监测、沉降观测、隐患排查等。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { List, Notebook, Tools, CircleCheck, Refresh, Warning } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.cards-row {
+  margin-top: $spacer-3;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+  margin-bottom: $spacer-2;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 20px;
+    background: $primary-gradient;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba($primary-color, 0.3);
+
+    .el-icon {
+      color: #fff;
+      font-size: 32px;
+    }
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/BuildingFeatures.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>核心优势</h2>
+      <p class="lead">无人机技术在建筑工程中的应用带来显著的效率提升和成本优化。</p>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Odometer /></el-icon>
+            </div>
+            <h4>效率提升</h4>
+            <p>无人机前期采集数据分析填挖方量，计算工程量信息，数据及时共享。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><View /></el-icon>
+            </div>
+            <h4>安全巡检</h4>
+            <p>无人机通过高空视角对人员进行安全巡视，对重点区域及机械等进行安全巡检。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Picture /></el-icon>
+            </div>
+            <h4>精准测量</h4>
+            <p>基于三维点云或三维模型做测量，真实客观可重复，拟合地形点云数量百倍以上。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="info-box">
+            <h4><el-icon><Clock /></el-icon> 进度展示</h4>
+            <p>工程进度可通过全景图、正射影像、三维模型等多种形式直观展示，为项目管理提供科学依据。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Odometer, View, Picture, Clock } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.cards-row {
+  margin-top: $spacer-3;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 20px;
+    background: $primary-gradient;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba($primary-color, 0.3);
+
+    .el-icon {
+      color: #fff;
+      font-size: 32px;
+    }
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/BuildingIntro.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>建筑工程技术概述</h2>
+      <p class="lead">无人机技术在房屋建筑业和土木工程建筑业中的应用，为工程建设提供全方位的空间信息服务。</p>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <div class="image-wrapper">
+            <img class="img-responsive" src="@/assets/images/buil1.png" alt="建筑工程">
+          </div>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <h3>应用领域</h3>
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>房屋建筑</strong> - 住宅、商业、公共建筑等
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>土木工程</strong> - 道路、桥梁、隧道、水利等
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>基础设施</strong> - 管线、电力、通信等
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>工程监理</strong> - 进度、质量、安全监控
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="info-box">
+            <h4><el-icon><TrendCharts /></el-icon> 应用价值</h4>
+            <p>无人机技术贯穿建筑工程全生命周期，从前期勘察、设计规划、施工建设到运营维护，提供高效、精准、可视化的数据支持，助力工程建设数字化转型。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCheckFilled, TrendCharts } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.image-wrapper {
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+  }
+}
+
+h3 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  color: $text-primary;
+  margin-bottom: $spacer-2;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $text-primary;
+    }
+  }
+}
+
+.feature-icon {
+  color: $primary-color;
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/EmergencyCommandDispatch.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>指挥与调度</h2>
+      <p class="lead">构建空地一体化指挥调度系统，实现现场信息的实时共享和救援力量的科学调度。</p>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="image-wrapper">
+            <img class="img-responsive" src="@/assets/images/service3.jpg" alt="指挥调度系统">
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <h3>核心功能</h3>
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><VideoCamera /></el-icon>
+              <strong>实时视频回传</strong> - 现场高清视频实时传输至指挥中心
+            </li>
+            <li>
+              <el-icon class="feature-icon"><MapLocation /></el-icon>
+              <strong>GIS 地图集成</strong> - 无人机位置与现场画面叠加显示
+            </li>
+            <li>
+              <el-icon class="feature-icon"><Microphone /></el-icon>
+              <strong>空中喊话指挥</strong> - 远程喊话疏导和指挥
+            </li>
+            <li>
+              <el-icon class="feature-icon"><Cellphone /></el-icon>
+              <strong>多端协同</strong> - 支持 PC、移动端同步查看
+            </li>
+            <li>
+              <el-icon class="feature-icon"><DocumentCopy /></el-icon>
+              <strong>任务录制回放</strong> - 全程录像支持事后分析
+            </li>
+          </ul>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <h3>系统特点</h3>
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>低延迟传输</strong> - 端到端延迟低于 200ms
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>高并发支持</strong> - 支持多路视频同时接入
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>安全可靠</strong> - 数据加密传输，权限分级管理
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>快速部署</strong> - 便携式设备，即开即用
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <h3>应用场景</h3>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <h4>大型活动安保</h4>
+            <p>活动现场空中监控，人流密度监测，突发事件快速响应。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <h4>交通指挥疏导</h4>
+            <p>高速公路事故现场勘查，拥堵路段实时监测，交通流量分析。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <h4>联合演习指挥</h4>
+            <p>多部门协同演习，空中视角全程记录，演习效果评估。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VideoCamera, MapLocation, Microphone, Cellphone, DocumentCopy, CircleCheckFilled } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.image-wrapper {
+  text-align: center;
+  margin-bottom: $spacer-3;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+  }
+}
+
+h3 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  color: $text-primary;
+  margin: $spacer-2 0;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $text-primary;
+    }
+  }
+}
+
+.feature-icon {
+  color: $primary-color;
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.cards-row {
+  margin-top: $spacer-2;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+  margin-bottom: $spacer-2;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/EmergencyDisasterResponse.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>灾害快速响应</h2>
+      <p class="lead">在自然灾害和突发事件发生时，时间就是生命。无人机系统能够快速部署，为灾害响应提供关键的空中支持和实时情报。</p>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              快速抵达灾区现场，获取第一手资料
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              实时传输高清视频，支持远程决策
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              全天候作业能力，不受地形限制
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              降低救援人员进入危险区域的风险
+            </li>
+          </ul>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <div class="image-wrapper">
+            <img class="img-responsive" src="@/assets/images/service4.jpg" alt="灾害响应">
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <h3>应用场景</h3>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Lightning /></el-icon>
+            </div>
+            <h4>地震响应</h4>
+            <p>快速获取震中情况，评估建筑物损毁程度，为救援力量部署提供依据。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Drizzling /></el-icon>
+            </div>
+            <h4>洪涝监测</h4>
+            <p>实时监测水位变化，识别受困人员位置，规划最佳救援路线。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Warning /></el-icon>
+            </div>
+            <h4>火灾扑救</h4>
+            <p>提供火场全景视图，监测火势蔓延方向，指导灭火力量部署。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCheckFilled, Lightning, Drizzling, Warning } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.image-wrapper {
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+  }
+}
+
+h3 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  color: $text-primary;
+  margin: $spacer-2 0;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+  }
+}
+
+.feature-icon {
+  color: $primary-color;
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.cards-row {
+  margin-top: $spacer-2;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+  margin-bottom: $spacer-2;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 20px;
+    background: $primary-gradient;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba($primary-color, 0.3);
+
+    .el-icon {
+      color: #fff;
+      font-size: 32px;
+    }
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/EmergencyPostEvaluation.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>灾后评估与分析</h2>
+      <p class="lead">利用无人机航拍影像和三维建模技术，对灾害损失进行快速评估，为灾后重建提供科学依据。</p>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <h3>评估内容</h3>
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><List /></el-icon>
+              <strong>建筑物损毁评估</strong> - 识别倒塌、裂缝、倾斜等损坏情况
+            </li>
+            <li>
+              <el-icon class="feature-icon"><List /></el-icon>
+              <strong>基础设施评估</strong> - 道路、桥梁、电力设施损坏程度
+            </li>
+            <li>
+              <el-icon class="feature-icon"><List /></el-icon>
+              <strong>地质灾害评估</strong> - 滑坡、泥石流、地面塌陷范围
+            </li>
+            <li>
+              <el-icon class="feature-icon"><List /></el-icon>
+              <strong>淹没面积统计</strong> - 洪涝灾害淹没区域精确测量
+            </li>
+            <li>
+              <el-icon class="feature-icon"><List /></el-icon>
+              <strong>经济损失估算</strong> - 基于损毁数据的损失评估
+            </li>
+          </ul>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <div class="image-wrapper">
+            <img class="img-responsive" src="@/assets/images/service2.jpg" alt="灾后评估">
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <h3>技术流程</h3>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="process-row">
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">1</div>
+            <h5>数据采集</h5>
+            <p>无人机倾斜摄影获取影像</p>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">2</div>
+            <h5>三维建模</h5>
+            <p>生成实景三维模型和 DOM</p>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">3</div>
+            <h5>智能解译</h5>
+            <p>AI 识别损毁目标和范围</p>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">4</div>
+            <h5>报告生成</h5>
+            <p>自动输出评估报告和数据</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <h3>成果输出</h3>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><Picture /></el-icon>
+            </div>
+            <h5>正射影像图</h5>
+            <p>DOM 成果</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><Grid /></el-icon>
+            </div>
+            <h5>三维实景模型</h5>
+            <p>倾斜摄影模型</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><MapLocation /></el-icon>
+            </div>
+            <h5>数字线划图</h5>
+            <p>DLG 矢量数据</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><Document /></el-icon>
+            </div>
+            <h5>评估分析报告</h5>
+            <p>文字和统计数据</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="info-box">
+            <h4><el-icon><TrendCharts /></el-icon> 应用价值</h4>
+            <p>无人机灾后评估可在<strong>24 小时内</strong>完成大范围灾害数据采集和处理，相比传统人工调查效率提升<strong>10 倍以上</strong>，为灾后重建规划和资金申请提供<strong>准确、客观、可视化</strong>的数据支撑。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { List, Picture, Grid, MapLocation, Document, TrendCharts } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.image-wrapper {
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+  }
+}
+
+h3 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  color: $text-primary;
+  margin: $spacer-2 0;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $text-primary;
+    }
+  }
+}
+
+.feature-icon {
+  color: $primary-color;
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.process-row {
+  margin-top: $spacer-2;
+}
+
+.process-step {
+  text-align: center;
+  padding: $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  height: 100%;
+
+  .step-number {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto 16px;
+    background: $primary-gradient;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 20px;
+    font-weight: $font-weight-bold;
+  }
+
+  h5 {
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    color: $text-muted;
+    margin: 0;
+  }
+}
+
+.cards-row {
+  margin-top: $spacer-2;
+}
+
+.deliverable-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+  margin-bottom: $spacer-2;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto 16px;
+    background: linear-gradient(135deg, rgba($primary-color, 0.1) 0%, rgba($primary-light, 0.1) 100%);
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 28px;
+    }
+  }
+
+  h5 {
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    color: $text-muted;
+    margin: 0;
+  }
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $primary-color;
+    }
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/EmergencySearchRescue.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>搜索与救援</h2>
+      <p class="lead">无人机搭载可见光、红外热成像等负载设备，可在复杂环境下快速定位被困人员，大幅提升搜救效率。</p>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <div class="image-wrapper">
+            <img class="img-responsive" src="@/assets/images/service1.jpg" alt="搜索救援">
+          </div>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <h3>技术优势</h3>
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>红外热成像探测</strong> - 夜间或浓烟环境下精准识别人体热源
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>高清变焦相机</strong> - 远距离清晰观察，不遗漏任何细节
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>激光测距定位</strong> - 精确获取目标位置坐标
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>喊话器投放</strong> - 空中喊话安抚，投放应急物资
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <h3>作业流程</h3>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="process-row">
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">1</div>
+            <h5>区域划定</h5>
+            <p>根据失联位置确定搜索范围</p>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">2</div>
+            <h5>航线规划</h5>
+            <p>设置自动巡航路径全覆盖</p>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">3</div>
+            <h5>空中搜索</h5>
+            <p>多光谱设备协同作业</p>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <div class="process-step">
+            <div class="step-number">4</div>
+            <h5>定位救援</h5>
+            <p>实时回传坐标引导救援</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="stats-row">
+        <el-col :xs="24" :sm="12">
+          <div class="info-box">
+            <h4><el-icon><TrendCharts /></el-icon> 效率提升</h4>
+            <p>相比传统人工搜救，无人机搜救效率提升<strong>5-10 倍</strong>，覆盖面积扩大<strong>3-5 倍</strong>。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <div class="info-box">
+            <h4><el-icon><Clock /></el-icon> 响应时间</h4>
+            <p>无人机可在<strong>30 分钟内</strong>完成部署并抵达现场，黄金救援时间利用率提高<strong>60%</strong>。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCheckFilled, TrendCharts, Clock } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.image-wrapper {
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+  }
+}
+
+h3 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  color: $text-primary;
+  margin: $spacer-2 0;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $text-primary;
+    }
+  }
+}
+
+.feature-icon {
+  color: $primary-color;
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.process-row {
+  margin-top: $spacer-2;
+}
+
+.process-step {
+  text-align: center;
+  padding: $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  height: 100%;
+
+  .step-number {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto 16px;
+    background: $primary-gradient;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 20px;
+    font-weight: $font-weight-bold;
+  }
+
+  h5 {
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    color: $text-muted;
+    margin: 0;
+  }
+}
+
+.stats-row {
+  margin-top: $spacer-3;
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+  height: 100%;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $primary-color;
+    }
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/SafetyApplication.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>应用场景</h2>
+      <p class="lead">无人机安全巡检已广泛应用于多个行业领域，为安全生产保驾护航。</p>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Warning /></el-icon>
+            </div>
+            <h4>化工园区</h4>
+            <p>储罐区、生产装置区、管廊等区域的安全巡检，有毒有害气体检测。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Lightning /></el-icon>
+            </div>
+            <h4>电力巡检</h4>
+            <p>输电线路、变电站、配电设施等电力设备的巡检和故障排查。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Location /></el-icon>
+            </div>
+            <h4>交通设施</h4>
+            <p>高速公路、桥梁、隧道等交通基础设施的安全监测。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Platform /></el-icon>
+            </div>
+            <h4>建筑工地</h4>
+            <p>施工现场安全巡查，高空作业监控，隐患排查。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Drizzling /></el-icon>
+            </div>
+            <h4>水利设施</h4>
+            <p>水库、堤坝、灌区等水利设施的安全监测和巡查。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Guide /></el-icon>
+            </div>
+            <h4>林业防火</h4>
+            <p>林区火情监测、防火巡护、火场侦查等。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Warning, Lightning, Location, Platform, Drizzling, Guide } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.cards-row {
+  margin-top: $spacer-3;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+  margin-bottom: $spacer-2;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 20px;
+    background: $primary-gradient;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba($primary-color, 0.3);
+
+    .el-icon {
+      color: #fff;
+      font-size: 32px;
+    }
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/SafetyFeatures.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>核心优势</h2>
+      <p class="lead">相比传统人工巡检方式，无人机巡检具有显著的安全和效率优势。</p>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Shield /></el-icon>
+            </div>
+            <h4>安全保障</h4>
+            <p>替代人工进行高空、高危环境巡检，减少人员涉险抵近，降低安全风险。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Odometer /></el-icon>
+            </div>
+            <h4>高效便捷</h4>
+            <p>快速部署，灵活机动，巡检效率是传统方式的 3-5 倍。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><View /></el-icon>
+            </div>
+            <h4>全面覆盖</h4>
+            <p>空中视角无死角，可到达人员难以抵达的区域，实现全面覆盖。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12">
+          <div class="info-box">
+            <h4><el-icon><Money /></el-icon> 成本优化</h4>
+            <p>减少人工投入和安全防护成本，降低因安全事故导致的潜在损失。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <div class="info-box">
+            <h4><el-icon><Document /></el-icon> 数据管理</h4>
+            <p>巡检素材自动归档，形成巡检历史记录，支持数据追溯和趋势分析。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Guard, Odometer, View, Money, Document } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.cards-row {
+  margin-top: $spacer-3;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 20px;
+    background: $primary-gradient;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba($primary-color, 0.3);
+
+    .el-icon {
+      color: #fff;
+      font-size: 32px;
+    }
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+  height: 100%;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/SafetyIntro.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>安全生产技术概述</h2>
+      <p class="lead">无人机作为空中智能巡检平台，为安全生产管理提供灵活、高效、可视化的技术手段，实现全天候、自动化、常态化的安全巡检。</p>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <div class="image-wrapper">
+            <img class="img-responsive" src="@/assets/images/safe1.png" alt="安全生产">
+          </div>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <h3>核心功能</h3>
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>空中巡检</strong> - 替代人工高空巡检，降低作业风险
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>隐患排查</strong> - 高空视角发现地面难以察觉的安全隐患
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>实时监控</strong> - 视频实时回传，支持远程指挥决策
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>数据归档</strong> - 巡检素材自动归档，形成历史记录
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="info-box">
+            <h4><el-icon><TrendCharts /></el-icon> 应用价值</h4>
+            <p>无人机具备灵活机动的空中视角，与地面形成有效互补，为隐患排查降本增效。可以开展全天候、自动化、常态化的安全生产空中巡检，巡检素材自动归档，形成巡检历史记录，为安全管理提供科学依据。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCheckFilled, TrendCharts } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.image-wrapper {
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+  }
+}
+
+h3 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  color: $text-primary;
+  margin-bottom: $spacer-2;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $text-primary;
+    }
+  }
+}
+
+.feature-icon {
+  color: $primary-color;
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/SurveyingApplication.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>应用场景</h2>
+      <p class="lead">无人机测绘技术已广泛应用于多个领域，为各行业提供高效精准的空间数据服务。</p>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><OfficeBuilding /></el-icon>
+            </div>
+            <h4>地籍测量</h4>
+            <p>快速获取宗地界址点坐标，生成地籍图，支持不动产登记和管理。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Connection /></el-icon>
+            </div>
+            <h4>地形图测绘</h4>
+            <p>生产各种比例尺地形图，为规划设计提供基础地理信息数据。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><TrendCharts /></el-icon>
+            </div>
+            <h4>工程测量</h4>
+            <p>道路、桥梁、水利等工程项目的地形测绘和工程量计算。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Guide /></el-icon>
+            </div>
+            <h4>林业调查</h4>
+            <p>森林资源调查、蓄积量估算、病虫害监测等。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Drizzling /></el-icon>
+            </div>
+            <h4>水利测绘</h4>
+            <p>河道地形测量、水库库容计算、洪水淹没分析等。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Grid /></el-icon>
+            </div>
+            <h4>城市规划</h4>
+            <p>城市地形更新、规划选址分析、三维城市建设等。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { OfficeBuilding, Connection, TrendCharts, Guide, Drizzling, Grid } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.cards-row {
+  margin-top: $spacer-3;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+  margin-bottom: $spacer-2;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 20px;
+    background: $primary-gradient;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba($primary-color, 0.3);
+
+    .el-icon {
+      color: #fff;
+      font-size: 32px;
+    }
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/SurveyingData.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>数据成果</h2>
+      <p class="lead">无人机测绘可生成多种类型的测绘成果，满足不同应用场景的需求。</p>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><Picture /></el-icon>
+            </div>
+            <h5>数字正射影像 (DOM)</h5>
+            <p>高分辨率航拍影像图</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><Grid /></el-icon>
+            </div>
+            <h5>数字表面模型 (DSM)</h5>
+            <p>包含地物的高程模型</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><Position /></el-icon>
+            </div>
+            <h5>数字高程模型 (DEM)</h5>
+            <p>裸地高程数据模型</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="6">
+          <div class="deliverable-card">
+            <div class="card-icon">
+              <el-icon><MapLocation /></el-icon>
+            </div>
+            <h5>数字线划图 (DLG)</h5>
+            <p>矢量地形要素图</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="info-box">
+            <h4><el-icon><FolderOpened /></el-icon> 三维实景模型</h4>
+            <p>通过倾斜摄影测量技术，可生成高分辨率的三维实景模型，真实还原地表场景，为城市规划、智慧城市建设提供直观的三维数据基础。模型可直接导入 GIS 系统，实现数据的快速更新和高效管理。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Picture, Grid, Position, MapLocation, FolderOpened } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.cards-row {
+  margin-top: $spacer-3;
+}
+
+.deliverable-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+  margin-bottom: $spacer-2;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto 16px;
+    background: linear-gradient(135deg, rgba($primary-color, 0.1) 0%, rgba($primary-light, 0.1) 100%);
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 28px;
+    }
+  }
+
+  h5 {
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    color: $text-muted;
+    margin: 0;
+  }
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/SurveyingFeatures.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>核心优势</h2>
+      <p class="lead">相比传统测绘方式，无人机测绘具有显著的技术和经济优势。</p>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Timer /></el-icon>
+            </div>
+            <h4>高效快速</h4>
+            <p>外业数据采集效率是传统人工方式的 5 至 10 倍，大幅缩短项目周期。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Coin /></el-icon>
+            </div>
+            <h4>成本降低</h4>
+            <p>减少人力投入和外业时间，综合成本降低 30%-50%。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="4">
+          <div class="scenario-card">
+            <div class="card-icon">
+              <el-icon><Picture /></el-icon>
+            </div>
+            <h4>精度可靠</h4>
+            <p>实现 1:500 免像控测绘，满足高精度地籍测量需求。</p>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="30" class="cards-row">
+        <el-col :xs="24" :sm="12">
+          <div class="info-box">
+            <h4><el-icon><Leaf /></el-icon> 绿色环保</h4>
+            <p>无人机电动作业零排放，噪音低，对环境友好，符合可持续发展理念。</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <div class="info-box">
+            <h4><el-icon><User /></el-icon> 操作便捷</h4>
+            <p>可单人操作，作业便携，自动化程度高，降低了对操作人员的技术要求。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Timer, Coin, Picture, Van, User } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.cards-row {
+  margin-top: $spacer-3;
+}
+
+.scenario-card {
+  padding: $spacer-3 $spacer-2;
+  background: #fff;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-md;
+  text-align: center;
+  transition: $transition-bounce;
+  height: 100%;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-lg, $glow-blue;
+  }
+
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 20px;
+    background: $primary-gradient;
+    border-radius: $radius-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba($primary-color, 0.3);
+
+    .el-icon {
+      color: #fff;
+      font-size: 32px;
+    }
+  }
+
+  h4 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+  height: 100%;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .el-icon {
+      color: $primary-color;
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>

zyuas-neo/src/views/Solutions/SurveyingIntro.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="solutions-sub-page">
+    <div class="content-block">
+      <h2>基础测绘技术概述</h2>
+      <p class="lead">无人机测绘技术是传统测绘与航空摄影测量的创新结合，通过搭载高精度传感器，实现高效、精准的地形数据采集与处理。</p>
+
+      <el-row :gutter="40" class="content-row">
+        <el-col :xs="24" :md="12">
+          <div class="image-wrapper">
+            <img class="img-responsive" src="@/assets/images/sur1.png" alt="基础测绘">
+          </div>
+        </el-col>
+        <el-col :xs="24" :md="12">
+          <h3>技术特点</h3>
+          <ul class="feature-list">
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>高精度采集</strong> - 厘米级定位精度，满足 1:500 测绘要求
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>高效作业</strong> - 单日作业面积可达传统方法的 5-10 倍
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>灵活机动</strong> - 适应复杂地形，单人即可操作
+            </li>
+            <li>
+              <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
+              <strong>数据丰富</strong> - 同时获取影像、点云、三维模型等多源数据
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+
+      <el-row class="content-row">
+        <el-col :span="24">
+          <div class="info-box">
+            <h4><el-icon class="feature-icon"><DataAnalysis /></el-icon> 应用价值</h4>
+            <p>无人机测绘技术已广泛应用于地籍测量、地形图测绘、工程测量等领域，可生成 DOM、DSM、DEM、三维实景模型等多种测绘成果，为城市规划、国土资源管理、工程建设等提供准确的空间数据支撑。</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCheckFilled, DataAnalysis } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixins.scss';
+
+.solutions-sub-page {
+  padding: $spacer-4 0;
+}
+
+.content-block {
+  h2 {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    color: $text-primary;
+    margin-bottom: $spacer-2;
+    padding-bottom: $spacer-2;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .lead {
+    font-size: $font-size-lg;
+    color: $text-regular;
+    line-height: 1.8;
+    margin-bottom: $spacer-3;
+  }
+}
+
+.content-row {
+  margin-top: $spacer-3;
+}
+
+.image-wrapper {
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
+  }
+}
+
+h3 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  color: $text-primary;
+  margin-bottom: $spacer-2;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 0;
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: $text-primary;
+    }
+  }
+}
+
+.feature-icon {
+  color: $primary-color;
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.info-box {
+  padding: $spacer-3;
+  background: $bg-lighter;
+  border-radius: $radius-lg;
+  border-left: 4px solid $primary-color;
+
+  h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: $text-primary;
+    margin-bottom: 16px;
+
+    .feature-icon {
+      font-size: 20px;
+    }
+  }
+
+  p {
+    font-size: $font-size-base;
+    line-height: 1.8;
+    color: $text-regular;
+    margin: 0;
+  }
+}
+</style>