From 61602a736b53abf935e017e3814044d35aa6051d Mon Sep 17 00:00:00 2001
From: yiqiuyang <yiqiuyang@noreply.gitcode.com>
Date: Sun, 17 May 2026 23:25:42 +0800
Subject: [PATCH] 1

---
 src/home.vue                                |  14 +-
 src/router/index.js                         | 151 ++--
 src/utils/rem.js                            | 122 ++-
 src/utils/responsive.js                     |  43 ++
 src/views/about/mobile.vue                  | 522 +++++++++++++
 src/views/homepage/mobile.vue               | 341 +++++++++
 src/views/layout/mobile/index.vue           | 367 ++++++++++
 src/views/link/mobile.vue                   | 376 ++++++++++
 src/views/news/mobile.vue                   | 283 +++++++
 src/views/product/detail/mobile.vue         | 774 ++++++++++++++++++++
 src/views/product/hardwareSystem/mobile.vue | 372 ++++++++++
 src/views/product/softwareSystem/mobile.vue | 291 ++++++++
 12 files changed, 3578 insertions(+), 78 deletions(-)
 create mode 100644 src/utils/responsive.js
 create mode 100644 src/views/about/mobile.vue
 create mode 100644 src/views/homepage/mobile.vue
 create mode 100644 src/views/layout/mobile/index.vue
 create mode 100644 src/views/link/mobile.vue
 create mode 100644 src/views/news/mobile.vue
 create mode 100644 src/views/product/detail/mobile.vue
 create mode 100644 src/views/product/hardwareSystem/mobile.vue
 create mode 100644 src/views/product/softwareSystem/mobile.vue

diff --git a/src/home.vue b/src/home.vue
index a89fc84..f4a0840 100644
--- a/src/home.vue
+++ b/src/home.vue
@@ -1,9 +1,15 @@
 <script setup>
 import Header from './views/layout/pc/header/index.vue'
 import Footer from './views/layout/pc/footer/index.vue'
-import {onMounted, ref, watch} from 'vue'
+import MobileLayout from './views/layout/mobile/index.vue'
+import {onMounted, ref, watch, computed} from 'vue'
 import {visit} from '@/api/index'
 import axios from 'axios'
+import {useResponsive} from '@/utils/responsive'
+
+const {isMobile, windowWidth} = useResponsive()
+
+console.log('isMobile===>', isMobile.value)
 
 const referrer = ref(document.referrer || '')
 const ipUrl = ref('')
@@ -50,7 +56,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="app">
+  <!-- APP端布局 -->
+  <MobileLayout v-if="isMobile" />
+
+  <!-- PC端布局（保持不变） -->
+  <div v-else id="app">
     <Header id="header" />
     <router-view id="main" v-slot="{Component, title}">
       <keep-alive include="New">
diff --git a/src/router/index.js b/src/router/index.js
index 1a1f7c9..da055aa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,82 @@
 import {createWebHashHistory, createRouter} from 'vue-router'
+import {isMobile} from '@/utils/responsive'
 
-import HomeView from '@/views/homepage/index.vue'
+// 动态加载首页组件
+const HomeView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/homepage/mobile.vue').then(resolve)
+    } else {
+      import('@/views/homepage/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载新闻中心组件
+const NewsView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/news/mobile.vue').then(resolve)
+    } else {
+      import('@/views/news/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载联系我们组件
+const LinkView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/link/mobile.vue').then(resolve)
+    } else {
+      import('@/views/link/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载关于我们组件
+const AboutView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/about/mobile.vue').then(resolve)
+    } else {
+      import('@/views/about/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载硬件系统组件
+const HardwareSystemView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/product/hardwareSystem/mobile.vue').then(resolve)
+    } else {
+      import('@/views/product/hardwareSystem.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载软件系统组件
+const SoftwareSystemView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/product/softwareSystem/mobile.vue').then(resolve)
+    } else {
+      import('@/views/product/softwareSystem.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载产品详情组件
+const ProductDetailView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/product/detail/mobile.vue').then(resolve)
+    } else {
+      import('@/views/product/detail.vue').then(resolve)
+    }
+  })
+}
 
 const routes = [
   // ============================================  首页  ============================================
@@ -10,7 +86,7 @@ const routes = [
   {
     path: '/product/hardwareSystem',
     name: 'HardwareSystem',
-    component: () => import('@/views/product/hardwareSystem.vue'),
+    component: HardwareSystemView,
     meta: {
       title: '低空监管体系',
     },
@@ -18,7 +94,7 @@ const routes = [
   {
     path: '/product/softwareSystem',
     name: 'SoftwareSystem',
-    component: () => import('@/views/product/softwareSystem.vue'),
+    component: SoftwareSystemView,
     meta: {
       title: '低空远程识别设备',
     },
@@ -26,76 +102,39 @@ const routes = [
   {
     path: '/product/detail',
     name: 'ProductDetail',
-    component: () => import('@/views/product/detail.vue'),
+    component: ProductDetailView,
     meta: {
       title: '产品详情',
     },
   },
 
-  // ============================================  服务与支撑  ============================================
-  {
-    path: '/services',
-    name: 'Services',
-    component: () => import('@/views/services/index.vue'),
-    meta: {
-      title: '服务与支撑',
-    },
-  },
-
   // ============================================  新闻中心  ============================================
   {
     path: '/news',
     name: 'News',
-    component: () => import('@/views/news/index.vue'),
+    component: NewsView,
     meta: {
       title: '新闻中心',
     },
   },
-  {
-    path: '/news/detail',
-    name: 'NewsDetail',
-    component: () => import('@/views/news/detail.vue'),
-    meta: {
-      title: '新闻详情',
-    },
-  },
-
-  // ============================================  关于我们  ============================================
-  {
-    path: '/about',
-    name: 'About',
-    component: () => import('@/views/about/index.vue'),
-    meta: {
-      title: '关于我们',
-    },
-  },
 
   // ============================================  联系我们  ============================================
   {
     path: '/link',
     name: 'Link',
-    component: () => import('@/views/link/index.vue'),
+    component: LinkView,
     meta: {
       title: '联系我们',
     },
   },
 
-  // ============================================  下载中心  ============================================
+  // ============================================  关于我们  ============================================
   {
-    path: '/download',
-    name: 'Download',
-    component: () => import('@/views/download/index.vue'),
+    path: '/about',
+    name: 'About',
+    component: AboutView,
     meta: {
-      title: '下载中心',
-    },
-  },
-  // ============================================  管理页面  ============================================
-  {
-    path: '/manager',
-    name: 'Manager',
-    component: () => import('@/views/manager/index.vue'),
-    meta: {
-      title: '管理中心',
+      title: '关于我们',
     },
   },
 ]
@@ -105,20 +144,4 @@ const router = createRouter({
   routes,
 })
 
-// router.beforeEach(async (to, from, next) => {
-//   const {useNavStore} = await import('@/store/nav.js')
-//   const navStore = useNavStore()
-//   navStore.setLoad(true)
-//   next()
-// })
-
-router.afterEach((to, from) => {
-  // 只有路径变化时才滚动到顶部
-  if (to.path !== from.path) {
-    requestAnimationFrame(() => {
-      window.scrollTo({top: 0, behavior: 'instant'})
-    })
-  }
-})
-
 export default router
diff --git a/src/utils/rem.js b/src/utils/rem.js
index 8d54d31..1f99ed5 100644
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@@ -1,38 +1,136 @@
 // rem等比适配配置
 // 基准大小
 const baseSize = 16
-// 设计稿宽度
-const designWidth = 1920
+// PC端设计稿宽度
+const pcDesignWidth = 1920
+// 移动端设计稿宽度
+const mobileDesignWidth = 375
 // 最大缩放比例
 const maxScale = 2
+// 移动端断点（与 responsive.js 保持一致）
+const MOBILE_BREAKPOINT = 1000
+
+// 判断是否为移动端
+function isMobile() {
+  const result = window.innerWidth < MOBILE_BREAKPOINT
+  console.log('📱 [rem.js] isMobile() 检测:', {
+    windowWidth: window.innerWidth,
+    breakpoint: MOBILE_BREAKPOINT,
+    isMobile: result,
+    timestamp: new Date().toLocaleTimeString()
+  })
+  return result
+}
 
 // 设置 rem 函数
 function setRem() {
-  // 当前页面宽度相对于设计稿宽度的缩放比例
-  const scale = document.documentElement.clientWidth / designWidth
-  // 设置页面根节点字体大小（最高放大比例为maxScale）
-  document.documentElement.style.fontSize = baseSize * Math.min(scale, maxScale) + 'px'
+  const clientWidth = document.documentElement.clientWidth
+  const mobile = isMobile()
+  
+  let designWidth, scale, minScale, finalFontSize
+
+  if (mobile) {
+    // 移动端：基于 375px 设计稿
+    designWidth = mobileDesignWidth
+    // 为了避免字体过小，限制最小缩放比例
+    minScale = 0.85
+    scale = Math.max(clientWidth / designWidth, minScale)
+    
+    console.log('📱 [rem.js] 移动端模式 setRem():', {
+      clientWidth: `${clientWidth}px`,
+      designWidth: `${designWidth}px (移动端)`,
+      rawScale: (clientWidth / designWidth).toFixed(4),
+      minScale: minScale,
+      finalScale: scale.toFixed(4),
+      baseSize: `${baseSize}px`,
+      calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
+      timestamp: new Date().toLocaleTimeString()
+    })
+  } else {
+    // PC端：基于 1920px 设计稿
+    designWidth = pcDesignWidth
+    scale = Math.min(clientWidth / designWidth, maxScale)
+
+    console.log('💻 [rem.js] PC端模式 setRem():', {
+      clientWidth: `${clientWidth}px`,
+      designWidth: `${designWidth}px (PC端)`,
+      rawScale: (clientWidth / designWidth).toFixed(4),
+      maxScale: maxScale,
+      finalScale: scale.toFixed(4),
+      baseSize: `${baseSize}px`,
+      calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
+      timestamp: new Date().toLocaleTimeString()
+    })
+  }
+
+  // 设置页面根节点字体大小
+  finalFontSize = baseSize * scale
+  document.documentElement.style.fontSize = finalFontSize + 'px'
+  
+  console.log('✅ [rem.js] 最终设置:', {
+    'document.documentElement.style.fontSize': `${finalFontSize.toFixed(2)}px`,
+    '实际计算值': `1rem = ${finalFontSize.toFixed(2)}px`,
+    '示例换算': `10rem = ${(10 * finalFontSize).toFixed(2)}px, 20rem = ${(20 * finalFontSize).toFixed(2)}px`
+  })
 }
 
 // 根据设计稿尺寸计算实际尺寸
 export function fontSize(res) {
   const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
   if (!clientWidth) return res
-  const scale = clientWidth / designWidth
-  return res * Math.min(scale, maxScale)
+
+  let designWidth
+  const mobile = isMobile()
+  
+  if (mobile) {
+    designWidth = mobileDesignWidth
+  } else {
+    designWidth = pcDesignWidth
+  }
+
+  const rawScale = clientWidth / designWidth
+  const finalScale = mobile ? Math.max(rawScale, 0.85) : Math.min(rawScale, maxScale)
+  const result = res * finalScale
+  
+  console.log('📐 [rem.js] fontSize() 计算:', {
+    input: `${res}px`,
+    clientWidth: `${clientWidth}px`,
+    mode: mobile ? '移动端' : 'PC端',
+    designWidth: `${designWidth}px`,
+    rawScale: rawScale.toFixed(4),
+    finalScale: finalScale.toFixed(4),
+    output: `${result.toFixed(2)}px`
+  })
+
+  return result
 }
 
 // 初始化rem配置
 export function initRem() {
+  console.log('🚀 [rem.js] initRem() 初始化:', {
+    baseSize: `${baseSize}px`,
+    pcDesignWidth: `${pcDesignWidth}px`,
+    mobileDesignWidth: `${mobileDesignWidth}px`,
+    MOBILE_BREAKPOINT: `${MOBILE_BREAKPOINT}px`,
+    maxScale: maxScale,
+    currentWindowWidth: `${window.innerWidth}px`,
+    currentMode: window.innerWidth < MOBILE_BREAKPOINT ? '📱 移动端' : '💻 PC端'
+  })
+  
   setRem()
+  
   // 改变窗口大小时重新设置 rem
-  window.addEventListener('resize', setRem)
+  window.addEventListener('resize', () => {
+    console.log('🔄 [rem.js] 窗口resize事件触发:', {
+      newWidth: `${window.innerWidth}px`,
+      timestamp: new Date().toLocaleTimeString()
+    })
+    setRem()
+  })
 }
 
 // 移除rem监听（可选，用于清理）
 export function removeRemListener() {
+  console.log('❌ [rem.js] removeRemListener() 移除监听')
   window.removeEventListener('resize', setRem)
 }
-
-// 自动初始化（如果需要在导入时自动初始化）
-// initRem()
diff --git a/src/utils/responsive.js b/src/utils/responsive.js
new file mode 100644
index 0000000..a2195fc
--- /dev/null
+++ b/src/utils/responsive.js
@@ -0,0 +1,43 @@
+import {ref, onMounted, onUnmounted, computed} from 'vue'
+
+const MOBILE_BREAKPOINT = 1000
+
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
+
+console.log('windowWidth===>', windowWidth.value)
+
+const isMobile = computed(() => windowWidth.value < MOBILE_BREAKPOINT)
+
+function updateWindowSize() {
+  if (typeof window !== 'undefined') {
+    windowWidth.value = window.innerWidth
+  }
+}
+
+let listenersCount = 0
+
+export function useResponsive() {
+  onMounted(() => {
+    if (listenersCount === 0) {
+      updateWindowSize()
+      window.addEventListener('resize', updateWindowSize)
+    }
+    listenersCount++
+  })
+
+  onUnmounted(() => {
+    listenersCount--
+    if (listenersCount <= 0) {
+      listenersCount = 0
+      window.removeEventListener('resize', updateWindowSize)
+    }
+  })
+
+  return {
+    isMobile,
+    windowWidth,
+    MOBILE_BREAKPOINT,
+  }
+}
+
+export {isMobile, windowWidth, MOBILE_BREAKPOINT}
diff --git a/src/views/about/mobile.vue b/src/views/about/mobile.vue
new file mode 100644
index 0000000..749153c
--- /dev/null
+++ b/src/views/about/mobile.vue
@@ -0,0 +1,522 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+
+const loading = ref(true)
+
+// 公司介绍
+const companyInfo = {
+  name: '燃谷科技',
+  fullName: '燃谷科技（南京）有限公司',
+  founded: '2023年',
+  location: '南京鼓楼万谷硅巷',
+  introduction:
+    '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。',
+}
+
+// 核心优势
+const advantages = [
+  {
+    icon: 'DataAnalysis',
+    title: '低空大数据',
+    desc: '海量数据采集与分析能力',
+    color: '#1890ff',
+  },
+  {
+    icon: 'Connection',
+    title: '低空物联网',
+    desc: '全方位设备连接与管理',
+    color: '#52c41a',
+  },
+  {
+    icon: 'Cpu',
+    title: '智能算法引擎',
+    desc: 'AI驱动的智能决策系统',
+    color: '#fa8c16',
+  },
+  {
+    icon: 'Monitor',
+    title: '空间计算模型',
+    desc: '高精度空间数据处理',
+    color: '#722ed1',
+  },
+]
+
+// 资质证书
+const certificates = [
+  {id: 1, name: '营业执照', image: '/static/images/main/1.png'},
+  {id: 2, name: 'ISO9001认证', image: '/static/images/main/2.png'},
+  {id: 3, name: '高新技术企业', image: '/static/images/main/3.png'},
+  {id: 4, name: '软件著作权', image: '/static/images/main/4.png'},
+  {id: 5, name: '专利证书1', image: '/static/images/main/5.png'},
+  {id: 6, name: '专利证书2', image: '/static/images/main/6.png'},
+  {id: 7, name: '专利证书3', image: '/static/images/main/7.png'},
+  {id: 8, name: '专利证书4', image: '/static/images/main/8.png'},
+  {id: 9, name: '专利证书5', image: '/static/images/main/9.png'},
+  {id: 10, name: '荣誉证书1', image: '/static/images/main/10.png'},
+  {id: 11, name: '荣誉证书2', image: '/static/images/main/11.png'},
+  {id: 12, name: '荣誉证书3', image: '/static/images/main/12.png'},
+]
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+})
+</script>
+
+<template>
+  <div class="mobile-about" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">关于我们</h1>
+      <p class="page-subtitle">了解燃谷科技</p>
+    </div>
+
+    <!-- 公司简介 -->
+    <div class="intro-section">
+      <div class="company-card">
+        <!-- Logo区域 -->
+        <div class="logo-area">
+          <img src="/static/images/main/rangu.png" alt="燃谷科技" class="company-logo" />
+        </div>
+
+        <!-- 公司信息 -->
+        <div class="info-area">
+          <h2 class="company-name">{{ companyInfo.fullName }}</h2>
+
+          <div class="info-tags">
+            <span class="tag">📅 {{ companyInfo.founded }}成立</span>
+            <span class="tag">📍 {{ companyInfo.location }}</span>
+          </div>
+
+          <div class="company-intro">
+            <p>{{ companyInfo.introduction }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 核心优势 -->
+    <div class="advantages-section">
+      <div class="section-header">
+        <h3 class="section-title">核心优势</h3>
+        <p class="section-desc">四大核心技术组件</p>
+      </div>
+
+      <div class="advantages-grid">
+        <div
+          v-for="(item, index) in advantages"
+          :key="index"
+          class="advantage-card"
+          :style="{borderLeftColor: item.color}"
+        >
+          <div class="advantage-icon" :style="{backgroundColor: item.color + '15'}">
+            <el-icon :size="24" :style="{color: item.color}">
+              <component :is="item.icon" />
+            </el-icon>
+          </div>
+          <div class="advantage-content">
+            <h4 class="advantage-title">{{ item.title }}</h4>
+            <p class="advantage-desc">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 资质证书 -->
+    <div class="certificate-section">
+      <div class="section-header">
+        <h3 class="section-title">资质证书</h3>
+        <p class="section-desc">权威认证 · 实力见证</p>
+      </div>
+
+      <div class="certificate-grid">
+        <div
+          v-for="cert in certificates"
+          :key="cert.id"
+          class="certificate-item"
+          @click="$viewer.api({images: [cert.image]})"
+        >
+          <img :src="cert.image" :alt="cert.name" class="certificate-img" />
+          <div class="certificate-name">{{ cert.name }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 企业文化 -->
+    <div class="culture-section">
+      <div class="section-header">
+        <h3 class="section-title">企业文化</h3>
+        <p class="section-desc">创新 · 质量 · 合作</p>
+      </div>
+
+      <div class="culture-cards">
+        <div class="culture-card innovation">
+          <div class="culture-icon">💡</div>
+          <h4>创新</h4>
+          <p>持续技术创新<br />引领行业发展</p>
+        </div>
+
+        <div class="culture-card quality">
+          <div class="culture-icon">⭐</div>
+          <h4>质量</h4>
+          <p>精益求精<br />追求卓越品质</p>
+        </div>
+
+        <div class="culture-card cooperation">
+          <div class="culture-icon">🤝</div>
+          <h4>合作</h4>
+          <p>开放共赢<br />携手共创未来</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部CTA -->
+    <div class="cta-section">
+      <div class="cta-content">
+        <h3>携手共进，共创低空经济新未来</h3>
+        <p>期待与您的合作交流</p>
+        <el-button type="primary" round size="large" @click="$router.push('/link')">
+          联系我们
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {DataAnalysis, Connection, Cpu, Monitor} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-about {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  // 公司简介
+  .intro-section {
+    padding: 16px;
+
+    .company-card {
+      background-color: #ffffff;
+      border-radius: 12px; /* no */
+      overflow: hidden;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+
+      .logo-area {
+        width: 100%;
+        height: 200px; /* no */
+        background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px; /* no */
+
+        .company-logo {
+          max-width: 80%;
+          max-height: 160px; /* no */
+          object-fit: contain;
+        }
+      }
+
+      .info-area {
+        padding: 20px; /* no */
+
+        .company-name {
+          font-size: 20px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 12px 0;
+          text-align: center;
+        }
+
+        .info-tags {
+          display: flex;
+          justify-content: center;
+          gap: 10px; /* no */
+          margin-bottom: 16px; /* no */
+          flex-wrap: wrap;
+
+          .tag {
+            display: inline-block;
+            padding: 4px 12px; /* no */
+            background-color: #f5f7fa;
+            color: #666666;
+            font-size: 12px;
+            border-radius: 14px; /* no */
+          }
+        }
+
+        .company-intro {
+          p {
+            font-size: 14px;
+            line-height: 1.8;
+            color: #555555;
+            text-indent: 2em;
+            margin: 0;
+            text-align: justify;
+          }
+        }
+      }
+    }
+  }
+
+  // 核心优势
+  .advantages-section {
+    padding: 0 16px 16px;
+
+    .section-header {
+      margin-bottom: 16px; /* no */
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 6px 0;
+      }
+
+      .section-desc {
+        font-size: 13px;
+        color: #999999;
+        margin: 0;
+      }
+    }
+
+    .advantages-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px; /* no */
+
+      .advantage-card {
+        background-color: #ffffff;
+        border-radius: 10px; /* no */
+        padding: 16px; /* no */
+        border-left: 3px solid;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: scale(0.97);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .advantage-icon {
+          width: 48px; /* no */
+          height: 48px; /* no */
+          border-radius: 10px; /* no */
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 10px; /* no */
+        }
+
+        .advantage-content {
+          .advantage-title {
+            font-size: 15px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin: 0 0 6px 0;
+          }
+
+          .advantage-desc {
+            font-size: 12px;
+            color: #666666;
+            margin: 0;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+  }
+
+  // 资质证书
+  .certificate-section {
+    padding: 0 16px 16px;
+
+    .section-header {
+      margin-bottom: 16px; /* no */
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 6px 0;
+      }
+
+      .section-desc {
+        font-size: 13px;
+        color: #999999;
+        margin: 0;
+      }
+    }
+
+    .certificate-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px; /* no */
+
+      .certificate-item {
+        background-color: #ffffff;
+        border-radius: 8px; /* no */
+        overflow: hidden;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* no */
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: scale(0.95);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* no */
+        }
+
+        .certificate-img {
+          width: 100%;
+          height: 200px; /* no */
+          object-fit: contain;
+          background-color: #fafafa;
+          padding: 8px; /* no */
+          box-sizing: border-box;
+        }
+
+        .certificate-name {
+          padding: 8px; /* no */
+          font-size: 11px;
+          color: #666666;
+          text-align: center;
+          background-color: #fafafa;
+        }
+      }
+    }
+  }
+
+  // 企业文化
+  .culture-section {
+    padding: 0 16px 16px;
+
+    .section-header {
+      margin-bottom: 16px; /* no */
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 6px 0;
+      }
+
+      .section-desc {
+        font-size: 13px;
+        color: #999999;
+        margin: 0;
+      }
+    }
+
+    .culture-cards {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px; /* no */
+
+      .culture-card {
+        background-color: #ffffff;
+        border-radius: 10px; /* no */
+        padding: 16px 12px; /* no */
+        text-align: center;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .culture-icon {
+          font-size: 32px;
+          margin-bottom: 8px; /* no */
+        }
+
+        h4 {
+          font-size: 15px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 6px 0;
+        }
+
+        p {
+          font-size: 11px;
+          color: #666666;
+          line-height: 1.6;
+          margin: 0;
+        }
+
+        &.innovation {
+          border-top: 3px solid #1890ff;
+        }
+
+        &.quality {
+          border-top: 3px solid #faad14;
+        }
+
+        &.cooperation {
+          border-top: 3px solid #52c41a;
+        }
+      }
+    }
+  }
+
+  // 底部CTA
+  .cta-section {
+    margin: 16px; /* no */
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    border-radius: 12px; /* no */
+    padding: 32px 20px; /* no */
+    text-align: center;
+
+    .cta-content {
+      h3 {
+        font-size: 18px;
+        font-weight: 600;
+        color: #ffffff;
+        margin: 0 0 10px 0;
+        line-height: 1.4;
+      }
+
+      p {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.7);
+        margin: 0 0 20px 0;
+      }
+
+      .el-button {
+        width: 180px; /* no */
+        height: 44px; /* no */
+        font-size: 15px;
+        background-color: #ffffff !important;
+        color: #081314 !important;
+        border: none !important;
+
+        &:active {
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/homepage/mobile.vue b/src/views/homepage/mobile.vue
new file mode 100644
index 0000000..ac11fab
--- /dev/null
+++ b/src/views/homepage/mobile.vue
@@ -0,0 +1,341 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+
+const router = useRouter()
+const videoLoaded = ref(true)
+const list = [...window.softwareSystemList, ...window.hardwareSystemList]
+
+onMounted(() => {
+  console.log('当前是手机端===>',)
+})
+
+function onVideoLoaded() {
+  videoLoaded.value = false
+}
+
+function toUrl(item) {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-homepage" v-loading="videoLoaded">
+    <!-- Banner区域 -->
+    <div class="banner-section">
+      <video autoplay muted loop @loadeddata="onVideoLoaded" class="banner-video">
+        <source src="/static/video/display.mp4" type="video/mp4" />
+      </video>
+      <div class="banner-overlay">
+        <h1 class="banner-title">低空智能监管解决方案</h1>
+        <p class="banner-subtitle">专业 · 创新 · 可靠</p>
+      </div>
+    </div>
+
+    <!-- 产品体系 -->
+    <div class="product-section">
+      <div class="section-header">
+        <h2 class="section-title">产品体系</h2>
+        <p class="section-desc">全方位低空监管产品矩阵</p>
+      </div>
+
+      <div class="product-grid">
+        <div
+          v-for="(item, index) in list"
+          :key="index"
+          class="product-card"
+          @click="toUrl(item)"
+        >
+          <div class="card-image">
+            <img
+              :src="`./static/images/${item.imgUrl}`"
+              :alt="item.title"
+              :class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'"
+            />
+          </div>
+          <div class="card-info">
+            <h3 class="card-title">{{ item.title }}</h3>
+            <p class="card-desc">{{ item.desc || '点击查看详情' }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 特色优势 -->
+    <div class="feature-section">
+      <div class="section-header">
+        <h2 class="section-title">核心优势</h2>
+        <p class="section-desc">技术领先，服务至上</p>
+      </div>
+
+      <div class="feature-grid">
+        <div class="feature-card" v-for="i in 4" :key="i">
+          <div class="feature-icon">
+            <el-icon :size="32"><icon-svg :name="'feature' + i" /></el-icon>
+          </div>
+          <h3 class="feature-title">优势 {{ i }}</h3>
+          <p class="feature-desc">专业的技术团队为您提供优质服务</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mobile-homepage {
+  min-height: 100%;
+  background-color: #f0f2f5;
+
+  // Banner区域
+  .banner-section {
+    position: relative;
+    width: 100%;
+    height: 50vh;
+    min-height: 400px;
+    overflow: hidden;
+
+    .banner-video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .banner-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.3),
+        rgba(0, 0, 0, 0.6)
+      );
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      text-align: center;
+
+      .banner-title {
+        font-size: 28px;
+        font-weight: 700;
+        color: #ffffff;
+        margin-bottom: 12px;
+        line-height: 1.3;
+      }
+
+      .banner-subtitle {
+        font-size: 16px;
+        color: #ffffffd9;
+        margin-bottom: 24px;
+        letter-spacing: 2px;
+      }
+    }
+  }
+
+  // 通用区块标题
+  .section-header {
+    text-align: center;
+    padding: 40px 20px 30px;
+
+    .section-title {
+      font-size: 24px;
+      font-weight: 700;
+      color: #262626;
+      margin-bottom: 8px;
+      position: relative;
+      display: inline-block;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 3px;
+        background: linear-gradient(to right, #1890ff, #096dd9);
+        border-radius: 2px;
+      }
+    }
+
+    .section-desc {
+      font-size: 14px;
+      color: #8c8c8c;
+      margin-top: 16px;
+    }
+  }
+
+  // 产品体系
+  .product-section {
+    background-color: #ffffff;
+    margin: 16px;
+    border-radius: 12px;
+    padding-bottom: 30px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .product-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+      padding: 0 20px;
+
+      .product-card {
+        background: #fafafa;
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 1px solid #f0f0f0;
+
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        }
+
+        .card-image {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: linear-gradient(135deg, #e6f7ff, #bae7ff);
+          padding: 20px;
+
+          img {
+            max-width: 90%;
+            max-height: 100%;
+            object-fit: contain;
+          }
+
+          .m-img {
+            width: 70%;
+          }
+
+          .r-img {
+            width: 85%;
+          }
+        }
+
+        .card-info {
+          padding: 16px;
+
+          .card-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #262626;
+            margin-bottom: 6px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .card-desc {
+            font-size: 13px;
+            color: #8c8c8c;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+  }
+
+  // 特色优势
+  .feature-section {
+    background-color: #ffffff;
+    margin: 16px;
+    border-radius: 12px;
+    padding-bottom: 30px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      padding: 0 20px;
+
+      .feature-card {
+        padding: 20px 16px;
+        background: linear-gradient(135deg, #f0f5ff, #e6f7ff);
+        border-radius: 8px;
+        text-align: center;
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: scale(0.98);
+        }
+
+        .feature-icon {
+          width: 56px;
+          height: 56px;
+          margin: 0 auto 12px;
+          background: linear-gradient(135deg, #1890ff, #096dd9);
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #ffffff;
+          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+        }
+
+        .feature-title {
+          font-size: 15px;
+          font-weight: 600;
+          color: #262626;
+          margin-bottom: 6px;
+        }
+
+        .feature-desc {
+          font-size: 12px;
+          color: #8c8c8c;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+}
+
+// 响应式优化
+@media (max-width: 480px) {
+  .mobile-homepage {
+    .banner-section {
+      height: 45vh;
+      min-height: 350px;
+
+      .banner-overlay {
+        .banner-title {
+          font-size: 22px;
+        }
+
+        .banner-subtitle {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .section-header {
+      .section-title {
+        font-size: 20px;
+      }
+    }
+
+    .product-section {
+      .product-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .feature-section {
+      .feature-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/layout/mobile/index.vue b/src/views/layout/mobile/index.vue
new file mode 100644
index 0000000..a512043
--- /dev/null
+++ b/src/views/layout/mobile/index.vue
@@ -0,0 +1,367 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter, useRoute} from 'vue-router'
+import {useNavStore} from '@/store/nav'
+import {storeToRefs} from 'pinia'
+import {
+  HomeFilled,
+  Grid,
+  Monitor,
+  Cpu,
+  Document,
+  InfoFilled,
+  Phone,
+  Service,
+  Download,
+  Expand,
+  Fold
+} from '@element-plus/icons-vue'
+
+const router = useRouter()
+const route = useRoute()
+const navStore = useNavStore()
+const {navIndex} = storeToRefs(navStore)
+
+const isCollapse = ref(true)
+const navList = ref([])
+const activeIndex = ref('/')
+
+// 图标映射表 - 使用Element Plus内置图标
+const iconMap = {
+  '首页': 'HomeFilled',
+  '解决方案': 'Grid',
+  '空域感知矩阵': 'Monitor',
+  '低空智控中枢': 'Cpu',
+  '新闻中心': 'Document',
+  '关于我们': 'InfoFilled',
+  '联系我们': 'Phone',
+  '服务与支撑': 'Service',
+  '下载中心': 'Download',
+}
+
+// 获取菜单项对应的图标组件
+const getIconComponent = (label) => {
+  const iconName = iconMap[label] || 'Grid'
+  const iconComponents = {
+    HomeFilled,
+    Grid,
+    Monitor,
+    Cpu,
+    Document,
+    InfoFilled,
+    Phone,
+    Service,
+    Download,
+  }
+  return iconComponents[iconName] || Grid
+}
+
+const handleSelect = (key) => {
+  navStore.changeNavIndex(key)
+  router.push(key)
+}
+
+const toggleMenu = () => {
+  isCollapse.value = !isCollapse.value
+
+  // 派发侧边栏状态变化事件，让其他组件（如详情页底部栏）能够响应
+  window.dispatchEvent(new CustomEvent('sidebar-toggle', {
+    detail: {
+      collapsed: isCollapse.value
+    }
+  }))
+}
+
+onMounted(() => {
+  navList.value = window.nav?.header || []
+  activeIndex.value = route.path
+})
+</script>
+
+<template>
+  <div class="app-layout">
+    <div class="sidebar" :class="{collapse: isCollapse}">
+      <div class="logo" :class="{collapse: isCollapse}">
+        <img src="/static/images/header/logo.png" alt="logo" />
+        <span v-show="!isCollapse" class="logo-text">燃谷科技</span>
+      </div>
+
+      <el-menu
+        :default-active="activeIndex"
+        :collapse="isCollapse"
+        class="sidebar-menu"
+        @select="handleSelect"
+        background-color="#081314"
+        text-color="#999999"
+        active-text-color="#FFFFFF"
+        :collapse-transition="true"
+      >
+        <template v-for="nav in navList" :key="nav.id">
+          <el-sub-menu
+            v-if="nav.hasChildren || nav?.children?.length > 0"
+            :index="nav.url"
+          >
+            <template #title>
+              <el-icon :size="18">
+                <component :is="getIconComponent(nav.label)" />
+              </el-icon>
+              <span>{{ nav.label }}</span>
+            </template>
+            <el-menu-item
+              v-for="child in nav.children"
+              :key="child.id"
+              :index="child.url"
+            >
+              <el-icon :size="18">
+                <component :is="getIconComponent(child.label)" />
+              </el-icon>
+              <span>{{ child.label }}</span>
+            </el-menu-item>
+          </el-sub-menu>
+
+          <el-menu-item v-else :index="nav.url">
+            <el-icon :size="18">
+              <component :is="getIconComponent(nav.label)" />
+            </el-icon>
+            <span>{{ nav.label }}</span>
+          </el-menu-item>
+        </template>
+      </el-menu>
+
+      <div class="toggle-btn" @click="toggleMenu">
+        <el-icon :size="18">
+          <Expand v-if="isCollapse" />
+          <Fold v-else />
+        </el-icon>
+      </div>
+    </div>
+
+    <div class="main-content" :data-collapsed="isCollapse">
+      <router-view v-slot="{Component}">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-layout {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-color: #f0f2f5;
+
+  .sidebar {
+    width: 160px;
+    height: 100vh;
+    height: 100%; /* no */
+    min-height: 100vh; /* no */
+    background-color: #081314;
+    display: flex;
+    flex-direction: column;
+    transition: width 0.3s ease;
+    overflow: hidden;
+    position: fixed; /* no */
+    left: 0; /* no */
+    top: 0; /* no */
+    bottom: 0; /* no */
+    z-index: 1000;
+
+    &.collapse {
+      width: 54px;
+    }
+
+    .logo {
+      height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 12px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      transition: all 0.3s ease;
+      overflow: hidden;
+      flex-shrink: 0;
+
+      img {
+        width: 30px;
+        height: 30px;
+        object-fit: contain;
+        flex-shrink: 0;
+      }
+
+      .logo-text {
+        margin-left: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #ffffff;
+        white-space: nowrap;
+      }
+
+      &.collapse {
+        justify-content: center;
+        padding: 10px;
+      }
+    }
+
+    .sidebar-menu {
+      flex: 1;
+      border-right: none;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 8px 0;
+
+      // 覆盖 Element Plus 默认样式
+      :deep(.el-menu) {
+        border-right: none;
+        background-color: transparent;
+      }
+
+      :deep(.el-menu--collapse) {
+        width: 54px;
+      }
+
+      :deep(.el-sub-menu__title),
+      :deep(.el-menu-item) {
+        height: 42px;
+        line-height: 42px;
+        padding: 0 12px !important;
+        color: #999999 !important;
+        font-size: 13px !important;
+
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.1) !important;
+          color: #FFFFFF !important;
+        }
+
+        &.is-active {
+          background-color: rgba(255, 255, 255, 0.15) !important;
+          color: #FFFFFF !important;
+          border-right: 3px solid #FFFFFF;
+        }
+
+        .el-icon {
+          font-size: 18px;
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+          color: inherit;
+        }
+      }
+
+      :deep(.el-menu--collapse) {
+        .el-sub-menu__title,
+        .el-menu-item {
+          padding: 0 !important;
+          text-align: center;
+          
+          .el-icon {
+            margin-right: 0;
+          }
+
+          span {
+            display: none;
+          }
+        }
+      }
+
+      &:not(.el-menu--collapse) {
+        width: 160px;
+      }
+
+      // 子菜单展开样式优化
+      :deep(.el-sub-menu) {
+        .el-sub-menu__icon {
+          color: rgba(255, 255, 255, 0.45);
+          font-size: 12px;
+          transition: transform 0.3s ease;
+        }
+
+        &.is-opened > .el-sub-menu__title .el-sub-menu__icon {
+          transform: rotate(180deg);
+        }
+
+        // 子菜单列表
+        .el-menu {
+          background-color: rgba(0, 0, 0, 0.2);
+
+          .el-menu-item {
+            padding-left: 36px !important;
+            position: relative;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 24px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 4px;
+              height: 4px;
+              border-radius: 50%;
+              background-color: #666;
+              transition: all 0.3s ease;
+            }
+
+            &:hover::before,
+            &.is-active::before {
+              background-color: #FFFFFF;
+              width: 6px;
+              height: 6px;
+            }
+          }
+        }
+      }
+    }
+
+    .toggle-btn {
+      height: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: rgba(255, 255, 255, 0.65);
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+
+      &:hover {
+        color: #ffffff;
+        background-color: rgba(255, 255, 255, 0.06);
+      }
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .main-content {
+    flex: 1;
+    margin-left: 160px;
+    transition: margin-left 0.3s ease;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #f0f2f5;
+    min-height: 100vh; /* no */
+    width: calc(100% - 160px); /* no */
+  }
+}
+
+// 使用 JavaScript 控制主内容区的左边距
+.main-content[data-collapsed="true"] {
+  margin-left: 54px !important;
+  width: calc(100% - 54px) !important; /* no */
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/link/mobile.vue b/src/views/link/mobile.vue
new file mode 100644
index 0000000..46001ed
--- /dev/null
+++ b/src/views/link/mobile.vue
@@ -0,0 +1,376 @@
+<script setup>
+import {ref} from 'vue'
+
+const loading = ref(false)
+
+// 联系信息
+const contactInfo = {
+  company: '燃谷科技（南京）有限公司',
+  phone: '13222013393',
+  email: 'company@rangutech.com',
+  address: '江苏省南京市鼓楼区万谷硅巷5F',
+  mapUrl:
+    'https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8',
+}
+
+// 快捷操作
+const handlePhoneCall = () => {
+  window.location.href = `tel:${contactInfo.phone}`
+}
+
+const handleSendEmail = () => {
+  window.location.href = `mailto:${contactInfo.email}`
+}
+
+const openMap = () => {
+  window.open(contactInfo.mapUrl)
+}
+</script>
+
+<template>
+  <div class="mobile-link">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">联系我们</h1>
+      <p class="page-subtitle">期待与您的合作交流</p>
+    </div>
+
+    <!-- 公司信息卡片 -->
+    <div class="info-section">
+      <div class="company-card">
+        <div class="company-icon">
+          <el-icon :size="32" color="#081314"><OfficeBuilding /></el-icon>
+        </div>
+        <h2 class="company-name">{{ contactInfo.company }}</h2>
+        <p class="company-desc">专业低空智能监管解决方案提供商</p>
+      </div>
+
+      <!-- 联系方式列表 -->
+      <div class="contact-list">
+        <!-- 电话 -->
+        <div class="contact-item" @click="handlePhoneCall">
+          <div class="contact-icon phone">
+            <el-icon :size="20"><Phone /></el-icon>
+          </div>
+          <div class="contact-content">
+            <div class="contact-label">联系电话</div>
+            <div class="contact-value">{{ contactInfo.phone }}</div>
+          </div>
+          <div class="contact-action">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+
+        <!-- 邮箱 -->
+        <div class="contact-item" @click="handleSendEmail">
+          <div class="contact-icon email">
+            <el-icon :size="20"><Message /></el-icon>
+          </div>
+          <div class="contact-content">
+            <div class="contact-label">电子邮箱</div>
+            <div class="contact-value">{{ contactInfo.email }}</div>
+          </div>
+          <div class="contact-action">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+
+        <!-- 地址 -->
+        <div class="contact-item" @click="openMap">
+          <div class="contact-icon location">
+            <el-icon :size="20"><Location /></el-icon>
+          </div>
+          <div class="contact-content">
+            <div class="contact-label">公司地址</div>
+            <div class="contact-value">{{ contactInfo.address }}</div>
+          </div>
+          <div class="contact-action">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 地图区域 -->
+    <div class="map-section">
+      <div class="section-title">
+        <el-icon :size="18"><MapLocation /></el-icon>
+        <span>位置导航</span>
+      </div>
+      <div class="map-container" @click="openMap">
+        <img src="/static/images/link/map.png" alt="地图" class="map-image" />
+        <div class="map-overlay">
+          <el-icon :size="24"><Position /></el-icon>
+          <span>点击查看详细地图</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 快捷操作栏 -->
+    <div class="action-bar">
+      <button class="action-btn primary" @click="handlePhoneCall">
+        <el-icon :size="18"><Phone /></el-icon>
+        <span>电话咨询</span>
+      </button>
+      <button class="action-btn secondary" @click="handleSendEmail">
+        <el-icon :size="18"><Message /></el-icon>
+        <span>邮件联系</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  OfficeBuilding,
+  Phone,
+  Message,
+  Location,
+  ArrowRight,
+  MapLocation,
+  Position,
+} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-link {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 80px; /* no */
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .info-section {
+    padding: 16px;
+
+    // 公司信息卡片
+    .company-card {
+      background-color: #ffffff;
+      border-radius: 12px; /* no */
+      padding: 20px; /* no */
+      text-align: center;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+      margin-bottom: 16px; /* no */
+
+      .company-icon {
+        width: 64px; /* no */
+        height: 64px; /* no */
+        border-radius: 50%;
+        background-color: #f0f5ff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 12px; /* no */
+      }
+
+      .company-name {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 8px 0;
+      }
+
+      .company-desc {
+        font-size: 13px;
+        color: #666666;
+        margin: 0;
+      }
+    }
+
+    // 联系方式列表
+    .contact-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px; /* no */
+
+      .contact-item {
+        background-color: #ffffff;
+        border-radius: 10px; /* no */
+        padding: 16px; /* no */
+        display: flex;
+        align-items: center;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .contact-icon {
+          width: 44px; /* no */
+          height: 44px; /* no */
+          border-radius: 10px; /* no */
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 12px; /* no */
+          flex-shrink: 0;
+
+          &.phone {
+            background-color: #e6f7ff;
+            color: #1890ff;
+          }
+
+          &.email {
+            background-color: #fff7e6;
+            color: #fa8c16;
+          }
+
+          &.location {
+            background-color: #f6ffed;
+            color: #52c41a;
+          }
+        }
+
+        .contact-content {
+          flex: 1;
+          min-width: 0;
+
+          .contact-label {
+            font-size: 12px;
+            color: #999999;
+            margin-bottom: 4px; /* no */
+          }
+
+          .contact-value {
+            font-size: 14px;
+            color: #1a1a1a;
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .contact-action {
+          color: #cccccc;
+          flex-shrink: 0;
+          margin-left: 8px; /* no */
+        }
+      }
+    }
+  }
+
+  // 地图区域
+  .map-section {
+    padding: 0 16px 16px; /* no */
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 6px; /* no */
+      font-size: 16px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin-bottom: 12px; /* no */
+      padding-left: 4px; /* no */
+    }
+
+    .map-container {
+      position: relative;
+      width: 100%;
+      height: 220px; /* no */
+      border-radius: 10px; /* no */
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
+      cursor: pointer;
+
+      .map-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .map-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+        padding: 20px 16px 12px; /* no */
+        display: flex;
+        align-items: center;
+        gap: 8px; /* no */
+        color: #ffffff;
+        font-size: 13px;
+
+        .el-icon {
+          flex-shrink: 0;
+        }
+      }
+
+      &:active .map-overlay {
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
+      }
+    }
+  }
+
+  // 底部快捷操作栏
+  .action-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #ffffff;
+    padding: 12px 16px; /* no */
+    display: flex;
+    gap: 12px; /* no */
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); /* no */
+    z-index: 100;
+
+    .action-btn {
+      flex: 1;
+      height: 48px; /* no */
+      border: none;
+      border-radius: 24px; /* no */
+      font-size: 15px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px; /* no */
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:active {
+        transform: scale(0.96);
+      }
+
+      &.primary {
+        background: linear-gradient(135deg, #081314, #1a2634);
+        color: #ffffff;
+        box-shadow: 0 4px 12px rgba(8, 19, 20, 0.3); /* no */
+      }
+
+      &.secondary {
+        background-color: #f5f7fa;
+        color: #081314;
+        border: 1px solid #e0e0e0;
+      }
+
+      .el-icon {
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/news/mobile.vue b/src/views/news/mobile.vue
new file mode 100644
index 0000000..040dd61
--- /dev/null
+++ b/src/views/news/mobile.vue
@@ -0,0 +1,283 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+const loading = ref(true)
+
+// 假数据 - 新闻列表
+const newsList = ref([
+  {
+    id: 1,
+    title: '燃谷科技完成A轮融资，加速低空经济布局',
+    cover_image: '/static/images/main/1.png',
+    time: '2025-01-15',
+    category: '公司动态',
+    snapshot: '近日，燃谷科技宣布完成数千万元A轮融资，本轮融资将主要用于技术研发和市场拓展...',
+  },
+  {
+    id: 2,
+    title: '低空智控中枢系统V3.0版本正式发布',
+    cover_image: '/static/images/main/2.png',
+    time: '2025-01-10',
+    category: '产品更新',
+    snapshot: '燃谷科技正式发布低空智控中枢系统V3.0版本，新增AI智能识别、多源数据融合等核心功能...',
+  },
+  {
+    id: 3,
+    title: '携手共建智慧城市：燃谷科技与多地政府达成战略合作',
+    cover_image: '/static/images/main/3.png',
+    time: '2025-01-05',
+    category: '行业合作',
+    snapshot: '燃谷科技先后与深圳、成都、杭州等多地政府签署战略合作协议，共同推进低空经济示范区建设...',
+  },
+  {
+    id: 4,
+    title: '空域感知矩阵系统荣获技术创新奖',
+    cover_image: '/static/images/main/4.png',
+    time: '2024-12-28',
+    category: '荣誉资质',
+    snapshot: '在第十届中国航空航天博览会上，燃谷科技的空域感知矩阵系统凭借卓越的技术创新性荣获年度技术创新奖...',
+  },
+  {
+    id: 5,
+    title: '低空监管解决方案成功应用于多个无人机物流项目',
+    cover_image: '/static/images/main/5.png',
+    time: '2024-12-20',
+    category: '应用案例',
+    snapshot: '燃谷科技的低空智能监管解决方案已成功应用于京东、顺丰等企业的多个无人机物流配送项目...',
+  },
+  {
+    id: 6,
+    title: '燃谷科技受邀参加国际低空经济论坛并发表主题演讲',
+    cover_image: '/static/images/main/6.png',
+    time: '2024-12-15',
+    category: '行业活动',
+    snapshot: '燃谷科技CEO张明受邀参加在新加坡举办的国际低空经济论坛，就"低空安全监管技术趋势"发表主题演讲...',
+  },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+})
+
+const toDetail = (item) => {
+  router.push({
+    path: '/news/detail',
+    query: {
+      id: item.id,
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-news" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">新闻中心</h1>
+      <p class="page-subtitle">了解燃谷科技最新动态</p>
+    </div>
+
+    <!-- 新闻列表 -->
+    <div class="news-list">
+      <div
+        v-for="item in newsList"
+        :key="item.id"
+        class="news-card"
+        @click="toDetail(item)"
+      >
+        <!-- 封面图 -->
+        <div class="news-image">
+          <img :src="item.cover_image" :alt="item.title" />
+          <span class="news-category">{{ item.category }}</span>
+        </div>
+
+        <!-- 内容区 -->
+        <div class="news-content">
+          <h3 class="news-title">{{ item.title }}</h3>
+          <p class="news-desc">{{ item.snapshot }}</p>
+          <div class="news-meta">
+            <span class="news-time">
+              <el-icon><Clock /></el-icon>
+              {{ item.time }}
+            </span>
+            <span class="read-more">
+              阅读更多
+              <el-icon><ArrowRight /></el-icon>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-if="!loading && newsList.length === 0" class="empty-state">
+      <el-icon :size="64" color="#cccccc"><Document /></el-icon>
+      <p>暂无新闻内容</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Clock, ArrowRight, Document} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-news {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .news-list {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .news-card {
+    background-color: #ffffff;
+    border-radius: 8px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* no */
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.98);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* no */
+    }
+
+    .news-image {
+      position: relative;
+      width: 100%;
+      height: 180px; /* no */
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s ease;
+      }
+
+      &:active img {
+        transform: scale(1.05);
+      }
+
+      .news-category {
+        position: absolute;
+        top: 12px; /* no */
+        left: 12px; /* no */
+        padding: 4px 10px; /* no */
+        background-color: rgba(8, 19, 20, 0.85);
+        color: #ffffff;
+        font-size: 11px;
+        border-radius: 12px; /* no */
+        backdrop-filter: blur(4px);
+      }
+    }
+
+    .news-content {
+      padding: 14px; /* no */
+
+      .news-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 8px 0;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .news-desc {
+        font-size: 13px;
+        color: #666666;
+        line-height: 1.6;
+        margin: 0 0 12px 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .news-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 1px solid #f0f0f0;
+        padding-top: 10px; /* no */
+
+        .news-time {
+          display: flex;
+          align-items: center;
+          gap: 4px; /* no */
+          font-size: 12px;
+          color: #999999;
+
+          .el-icon {
+            font-size: 14px;
+          }
+        }
+
+        .read-more {
+          display: flex;
+          align-items: center;
+          gap: 4px; /* no */
+          font-size: 12px;
+          color: #081314;
+          font-weight: 500;
+
+          .el-icon {
+            font-size: 14px;
+            transition: transform 0.3s ease;
+          }
+
+          &:active .el-icon {
+            transform: translateX(3px);
+          }
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px; /* no */
+    color: #999999;
+
+    p {
+      margin-top: 16px; /* no */
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/views/product/detail/mobile.vue b/src/views/product/detail/mobile.vue
new file mode 100644
index 0000000..9550c1a
--- /dev/null
+++ b/src/views/product/detail/mobile.vue
@@ -0,0 +1,774 @@
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import {cryptoDecrypt} from '@/utils/cryptojs'
+
+const route = useRoute()
+const router = useRouter()
+
+// 解密参数
+const query = ref({})
+const loading = ref(true)
+const isHardware = ref(true)  // 是否为硬件类型
+const advantages = ref('')   // 核心优势内容
+const sidebarCollapsed = ref(false) // 侧边栏是否折叠
+
+onMounted(() => {
+  try {
+    query.value = JSON.parse(cryptoDecrypt(route.query.type))
+    isHardware.value = query.value.type === 'hardwareSystem'
+
+    // 安全获取核心优势内容（兼容PC端window.advantages）
+    if (typeof window !== 'undefined' && window.advantages) {
+      advantages.value = window.advantages
+    } else if (query.value.advantages) {
+      advantages.value = query.value.advantages
+    } else if (query.value.features && query.value.features.length > 0) {
+      // 如果没有advantages，使用features生成列表
+      advantages.value = '<ul>' +
+        query.value.features.map(f => `<li>${f}</li>`).join('') +
+        '</ul>'
+    }
+  } catch (error) {
+    console.error('参数解析失败:', error)
+  } finally {
+    loading.value = false
+  }
+
+  // 监听侧边栏状态变化事件
+  window.addEventListener('sidebar-toggle', handleSidebarToggle)
+
+  // 初始化时检查侧边栏状态
+  checkSidebarState()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('sidebar-toggle', handleSidebarToggle)
+})
+
+// 处理侧边栏折叠/展开事件
+const handleSidebarToggle = (event) => {
+  sidebarCollapsed.value = event.detail?.collapsed || false
+  updateFooterPosition()
+}
+
+// 检查当前侧边栏状态
+const checkSidebarState = () => {
+  const sidebar = document.querySelector('.sidebar')
+  if (sidebar) {
+    sidebarCollapsed.value = sidebar.classList.contains('collapse')
+  }
+  updateFooterPosition()
+}
+
+// 更新底部操作栏位置
+const updateFooterPosition = () => {
+  const footer = document.querySelector('.detail-footer')
+  if (footer) {
+    if (sidebarCollapsed.value) {
+      footer.setAttribute('data-sidebar', 'collapsed')
+    } else {
+      footer.removeAttribute('data-sidebar')
+    }
+  }
+}
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="mobile-detail" v-loading="loading">
+    <!-- ==================== 顶部导航栏 ==================== -->
+    <nav class="detail-nav">
+      <button class="back-btn" @click="goBack">
+        <el-icon><ArrowLeft /></el-icon>
+        <span>返回</span>
+      </button>
+      <h1 class="nav-title">{{ query.title }}{{ query.subTitle ? ' - ' + query.subTitle : '' }}</h1>
+    </nav>
+
+    <!-- ==================== 硬件设备详情布局 ==================== -->
+    <template v-if="isHardware && !loading">
+      <!-- 产品主图 -->
+      <section class="product-hero">
+        <div class="hero-image-wrapper">
+          <img
+            :src="`./static/images/${query.imgUrl}`"
+            :alt="query.title"
+            class="hero-image"
+          />
+          <span class="image-badge">硬件设备</span>
+        </div>
+      </section>
+
+      <!-- 核心优势 -->
+      <section class="advantages-section" v-if="advantages">
+        <div class="section-header">
+          <h2 class="section-title">✨ 核心优势</h2>
+        </div>
+        <div class="advantages-content" v-html="advantages"></div>
+      </section>
+
+      <!-- 详细描述 -->
+      <section class="description-section" v-if="query.description">
+        <div class="section-header">
+          <h2 class="section-title">📋 产品介绍</h2>
+        </div>
+        <div class="description-content" v-html="query.description"></div>
+      </section>
+
+      <!-- 技术规格（如果有） -->
+      <section class="specs-section" v-if="query.specs || query.features">
+        <div class="section-header">
+          <h2 class="section-title">🔧 技术规格</h2>
+        </div>
+        <div class="specs-list" v-if="query.features">
+          <div v-for="(feature, idx) in query.features" :key="idx" class="spec-item">
+            <el-icon color="#1890ff"><CircleCheck /></el-icon>
+            <span>{{ feature }}</span>
+          </div>
+        </div>
+      </section>
+    </template>
+
+    <!-- ==================== 软件系统详情布局 ==================== -->
+    <template v-if="!isHardware && !loading">
+      <!-- 视频展示区 -->
+      <section class="video-section" v-if="query.video">
+        <div class="video-wrapper">
+          <video
+            autoplay
+            muted
+            loop
+            playsinline
+            :src="`./static/video/${query.video}`"
+            class="demo-video"
+          ></video>
+          <div class="video-overlay">
+            <span class="video-badge">系统演示</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 软件截图/图片（如果没有视频） -->
+      <section class="software-hero" v-if="!query.video && query.imgUrl">
+        <div class="software-image-wrapper">
+          <img
+            :src="`./static/images/${query.imgUrl}`"
+            :alt="query.title"
+            class="software-image"
+          />
+        </div>
+      </section>
+
+      <!-- 功能概述 -->
+      <section class="overview-section" v-if="query.description">
+        <div class="section-header">
+          <h2 class="section-title">💡 功能概述</h2>
+        </div>
+        <div class="overview-content" v-html="query.description"></div>
+      </section>
+
+      <!-- 功能模块卡片 -->
+      <section class="modules-section" v-if="query.card && query.card.length > 0">
+        <div class="section-header">
+          <h2 class="section-title">🎯 核心功能模块</h2>
+          <p class="section-desc">共 {{ query.card.length }} 个功能模块</p>
+        </div>
+
+        <div class="module-list">
+          <div v-for="item in query.card" :key="item.id" class="module-card">
+            <div class="module-header">
+              <el-icon :size="20" color="#1890ff"><Grid /></el-icon>
+              <h3 class="module-title">{{ item.title }}</h3>
+            </div>
+            <div class="module-content">{{ item.content }}</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 应用场景 -->
+      <section class="scenarios-section" v-if="query.scenarios">
+        <div class="section-header">
+          <h2 class="section-title">🚀 应用场景</h2>
+        </div>
+        <div class="scenario-tags">
+          <span v-for="(scene, idx) in query.scenarios" :key="idx" class="scenario-tag">
+            {{ scene }}
+          </span>
+        </div>
+      </section>
+    </template>
+
+    <!-- ==================== 底部操作栏 ==================== -->
+    <footer class="detail-footer">
+      <div class="footer-inner">
+        <button class="footer-btn back-btn" @click="goBack">
+          <div class="btn-icon-wrapper back">
+            <el-icon><ArrowLeft /></el-icon>
+          </div>
+          <span class="btn-text">返回列表</span>
+        </button>
+
+        <button class="footer-btn contact-btn" @click="$router.push('/link')">
+          <div class="btn-icon-wrapper contact">
+            <el-icon><PhoneFilled /></el-icon>
+          </div>
+          <span class="btn-text">联系我们</span>
+          <span class="btn-badge">立即咨询</span>
+        </button>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import {
+  ArrowLeft,
+  CircleCheck,
+  Grid,
+  PhoneFilled
+} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-detail {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 80px; /* no */
+
+  // ==================== 导航栏 ====================
+  .detail-nav {
+    position: sticky;
+    top: 0; /* no */
+    z-index: 100;
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 14px 16px; /* no */
+    display: flex;
+    align-items: center;
+    gap: 12px; /* no */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* no */
+
+    .back-btn {
+      display: flex;
+      align-items: center;
+      gap: 4px; /* no */
+      padding: 8px 12px; /* no */
+      background-color: rgba(255, 255, 255, 0.1);
+      border: none;
+      border-radius: 20px; /* no */
+      color: #ffffff;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:active {
+        background-color: rgba(255, 255, 255, 0.2);
+        transform: scale(0.95);
+      }
+
+      .el-icon {
+        font-size: 16px;
+      }
+    }
+
+    .nav-title {
+      flex: 1;
+      font-size: 16px;
+      font-weight: 600;
+      color: #ffffff;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // ==================== 通用区块样式 ====================
+  section {
+    margin: 16px; /* no */
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); /* no */
+  }
+
+  .section-header {
+    padding: 16px 16px 12px; /* no */
+    border-bottom: 1px solid #f0f0f0;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin: 0 0 4px 0;
+    }
+
+    .section-desc {
+      font-size: 12px;
+      color: #999999;
+      margin: 0;
+    }
+  }
+
+  // ==================== 硬件详情样式 ====================
+  .product-hero {
+    margin: 16px; /* no */
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+
+    .hero-image-wrapper {
+      position: relative;
+      width: 100%;
+      background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 50%);
+
+      .hero-image {
+        width: 100%;
+        height: auto;
+        min-height: 280px; /* no */
+        max-height: 400px; /* no */
+        object-fit: contain;
+        display: block;
+        padding: 20px; /* no */
+        box-sizing: border-box;
+      }
+
+      .image-badge {
+        position: absolute;
+        top: 16px; /* no */
+        right: 16px; /* no */
+        padding: 6px 14px; /* no */
+        background: linear-gradient(135deg, #1890ff, #096dd9);
+        color: #ffffff;
+        font-size: 12px;
+        font-weight: 500;
+        border-radius: 16px; /* no */
+        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3); /* no */
+      }
+    }
+  }
+
+  .advantages-section {
+    .advantages-content {
+      padding: 16px; /* no */
+      line-height: 1.8;
+      font-size: 14px;
+      color: #333333;
+
+      :deep(h4),
+      :deep(h3),
+      :deep(h2) {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 12px 0 8px 0;
+      }
+
+      :deep(p) {
+        margin: 8px 0;
+        line-height: 1.7;
+      }
+
+      :deep(ul),
+      :deep(ol) {
+        padding-left: 20px; /* no */
+        margin: 8px 0;
+
+        li {
+          margin: 6px 0;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+
+  .description-section {
+    .description-content {
+      padding: 16px; /* no */
+      font-size: 14px;
+      line-height: 1.9;
+      color: #555555;
+
+      :deep(p) {
+        margin: 10px 0;
+        text-indent: 2em;
+        text-align: justify;
+      }
+
+      :deep(img) {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px; /* no */
+        margin: 10px 0;
+      }
+    }
+  }
+
+  .specs-section {
+    .specs-list {
+      padding: 16px; /* no */
+      display: flex;
+      flex-direction: column;
+      gap: 12px; /* no */
+
+      .spec-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px; /* no */
+        padding: 12px; /* no */
+        background-color: #fafafa;
+        border-radius: 8px; /* no */
+        border-left: 3px solid #1890ff;
+
+        .el-icon {
+          flex-shrink: 0;
+          margin-top: 2px;
+        }
+
+        span {
+          font-size: 14px;
+          color: #333333;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+
+  // ==================== 软件详情样式 ====================
+  .video-section {
+    margin: 16px; /* no */
+    background-color: #000000;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+
+    .video-wrapper {
+      position: relative;
+      width: 100%;
+      height: 220px; /* no */
+
+      .demo-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .video-overlay {
+        position: absolute;
+        bottom: 12px; /* no */
+        right: 12px; /* no */
+
+        .video-badge {
+          padding: 5px 12px; /* no */
+          background-color: rgba(24, 144, 255, 0.9);
+          color: #ffffff;
+          font-size: 11px;
+          border-radius: 12px; /* no */
+        }
+      }
+    }
+  }
+
+  .software-hero {
+    margin: 16px; /* no */
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+
+    .software-image-wrapper {
+      width: 100%;
+      background: linear-gradient(180deg, #e6f7ff 0%, #ffffff 50%);
+
+      .software-image {
+        width: 100%;
+        height: auto;
+        min-height: 240px; /* no */
+        object-fit: contain;
+        display: block;
+        padding: 16px; /* no */
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  .overview-section {
+    .overview-content {
+      padding: 16px; /* no */
+      font-size: 14px;
+      line-height: 1.9;
+      color: #555555;
+
+      :deep(p) {
+        margin: 10px 0;
+        text-align: justify;
+      }
+    }
+  }
+
+  .modules-section {
+    .module-list {
+      padding: 12px; /* no */
+      display: flex;
+      flex-direction: column;
+      gap: 12px; /* no */
+
+      .module-card {
+        background-color: #fafafa;
+        border: 1px solid #e8e8e8;
+        border-radius: 10px; /* no */
+        overflow: hidden;
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .module-header {
+          display: flex;
+          align-items: center;
+          gap: 8px; /* no */
+          padding: 14px 16px; /* no */
+          background: linear-gradient(135deg, #0389ff, #0066cc);
+
+          .module-title {
+            flex: 1;
+            font-size: 16px;
+            font-weight: 600;
+            color: #ffffff;
+            margin: 0;
+          }
+        }
+
+        .module-content {
+          padding: 14px 16px; /* no */
+          font-size: 13px;
+          color: #666666;
+          line-height: 1.7;
+          display: -webkit-box;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+  .scenarios-section {
+    .scenario-tags {
+      padding: 16px; /* no */
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px; /* no */
+
+      .scenario-tag {
+        padding: 8px 16px; /* no */
+        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
+        color: #16a34a;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 16px; /* no */
+        border: 1px solid #bbf7d0;
+      }
+    }
+  }
+
+  // ==================== 底部操作栏 ====================
+  .detail-footer {
+    position: fixed;
+    bottom: 0;
+    left: 160px; /* no */ /* 匹配侧边栏展开时的宽度 */
+    right: 0;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #ffffff 100%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    padding: 12px 16px; /* no */
+    padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* no */
+    z-index: 99;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    transition: left 0.3s ease;
+
+    // 当侧边栏折叠时
+    &[data-sidebar="collapsed"] {
+      left: 54px; /* no */ /* 匹配侧边栏折叠时的宽度 */
+    }
+
+    .footer-inner {
+      display: flex;
+      gap: 12px; /* no */
+      max-width: 600px; /* no */
+      margin: 0 auto;
+    }
+
+    .footer-btn {
+      flex: 1;
+      height: 52px; /* no */
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px; /* no */
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: visible;
+      border-radius: 14px; /* no */
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0; /* no */
+        height: 0; /* no */
+        background-color: rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        transition: width 0.4s ease, height 0.4s ease;
+        pointer-events: none;
+        z-index: 0;
+      }
+
+      &:active::before {
+        width: 120px; /* no */
+        height: 120px; /* no */
+      }
+
+      &:active {
+        transform: scale(0.96);
+      }
+
+      .btn-icon-wrapper {
+        width: 36px; /* no */
+        height: 36px; /* no */
+        border-radius: 10px; /* no */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        transition: all 0.3s ease;
+        position: relative;
+        z-index: 1;
+
+        .el-icon {
+          font-size: 20px;
+          transition: transform 0.3s ease;
+        }
+      }
+
+      .btn-text {
+        font-size: 15px;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+        position: relative;
+        z-index: 1;
+      }
+
+      .btn-badge {
+        position: absolute;
+        top: -4px; /* no */
+        right: -2px; /* no */
+        padding: 2px 8px; /* no */
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 8px; /* no */
+        animation: pulse-badge 2s infinite;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      // 返回按钮样式
+      &.back-btn {
+        background: linear-gradient(135deg, #f5f7fa 0%, #e8eaed 100%);
+        color: #555555;
+        border-radius: 14px; /* no */
+        box-shadow:
+          0 2px 8px rgba(0, 0, 0, 0.04), /* no */
+          inset 0 1px 0 rgba(255, 255, 255, 0.8); /* no */
+
+        .btn-icon-wrapper.back {
+          background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
+          color: #666666;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        &:active {
+          background: linear-gradient(135deg, #e8eaed 0%, #dcdfe3 100%);
+          box-shadow:
+            0 1px 4px rgba(0, 0, 0, 0.06), /* no */
+            inset 0 1px 0 rgba(255, 255, 255, 0.6); /* no */
+
+          .btn-icon-wrapper.back {
+            transform: scale(0.9);
+
+            .el-icon {
+              transform: translateX(-2px);
+            }
+          }
+        }
+      }
+
+      // 联系我们按钮样式
+      &.contact-btn {
+        flex: 1.3; /* 稍微宽一点 */
+        background: linear-gradient(135deg, #1890ff 0%, #096dd9 50%, #0050b3 100%);
+        color: #ffffff;
+        border-radius: 14px; /* no */
+        box-shadow:
+          0 4px 16px rgba(24, 144, 255, 0.35), /* no */
+          0 2px 6px rgba(24, 144, 255, 0.2), /* no */
+          inset 0 1px 0 rgba(255, 255, 255, 0.2); /* no */
+
+        .btn-icon-wrapper.contact {
+          background: rgba(255, 255, 255, 0.2);
+          color: #ffffff;
+          backdrop-filter: blur(4px);
+        }
+
+        .btn-badge {
+          background: linear-gradient(135deg, #ff4d4f, #ff7875);
+          color: #ffffff;
+          box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4); /* no */
+        }
+
+        &:active {
+          background: linear-gradient(135deg, #096dd9 0%, #0050b3 50%, #003a8c 100%);
+          box-shadow:
+            0 2px 10px rgba(24, 144, 255, 0.25), /* no */
+            inset 0 1px 0 rgba(255, 255, 255, 0.15); /* no */
+
+          .btn-icon-wrapper.contact {
+            transform: scale(0.9);
+            background: rgba(255, 255, 255, 0.15);
+
+            .el-icon {
+              transform: rotate(-15deg) scale(1.1);
+            }
+          }
+
+          .btn-badge {
+            animation: none;
+            transform: scale(0.95);
+          }
+        }
+      }
+    }
+  }
+
+  // 徽章脉冲动画
+  @keyframes pulse-badge {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 0.9;
+    }
+  }
+}
+</style>
diff --git a/src/views/product/hardwareSystem/mobile.vue b/src/views/product/hardwareSystem/mobile.vue
new file mode 100644
index 0000000..6cb580d
--- /dev/null
+++ b/src/views/product/hardwareSystem/mobile.vue
@@ -0,0 +1,372 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+
+const router = useRouter()
+const loading = ref(true)
+
+// 使用PC端真实数据源
+const productList = ref([])  // 硬件设备列表
+
+// 应用案例数据（来自PC端project.vue）
+const caseList = ref([
+  {
+    id: 1,
+    label: '智慧物流配送',
+    img: '/static/images/product/1.png',
+  },
+  {
+    id: 2,
+    label: '要地防控',
+    img: '/static/images/product/2.png',
+  },
+  {
+    id: 3,
+    label: '关键基础设施守护',
+    img: '/static/images/product/3.png',
+  },
+  {
+    id: 4,
+    label: '规模化无人机巡检',
+    img: '/static/images/product/4.png',
+  },
+  {
+    id: 5,
+    label: '城市低空交通管理',
+    img: '/static/images/product/5.png',
+  },
+  {
+    id: 6,
+    label: '区域低空监管组网',
+    img: '/static/images/product/6.png',
+  },
+  {
+    id: 7,
+    label: '大型活动保障',
+    img: '/static/images/product/7.png',
+  },
+  {
+    id: 8,
+    label: '移动式低空安防',
+    img: '/static/images/product/8.png',
+  },
+])
+
+onMounted(() => {
+  // 从window对象获取真实数据
+  productList.value = window.hardwareSystemList || []
+  setTimeout(() => {
+    loading.value = false
+  }, 300)
+})
+
+// 跳转详情页（仅硬件设备可用）
+const toDetail = (item) => {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-hardware" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">硬件系统</h1>
+      <p class="page-subtitle">低空监管核心硬件设备</p>
+    </div>
+
+    <!-- 硬件设备列表（可点击） -->
+    <section class="section" v-if="productList.length > 0">
+      <div class="section-title-bar">
+        <span class="title-icon">🔧</span>
+        <h2>核心设备</h2>
+        <span class="subtitle">点击查看详细信息</span>
+      </div>
+
+      <div class="product-list">
+        <div
+          v-for="product in productList"
+          :key="product.id"
+          class="product-card"
+          @click="toDetail(product)"
+        >
+          <!-- 产品图片 -->
+          <div class="product-image">
+            <img :src="`./static/images/${product.imgUrl}`" :alt="product.title" />
+            <span class="click-hint">
+              <el-icon><View /></el-icon>
+            </span>
+          </div>
+
+          <!-- 产品信息 -->
+          <div class="product-info">
+            <h3 class="product-title">{{ product.title }}</h3>
+            <p class="product-desc" v-if="product.desc || product.description">
+              {{ product.desc || product.description }}
+            </p>
+
+            <!-- 查看详情按钮 -->
+            <div class="action-btn">
+              <span>查看详情</span>
+              <el-icon><ArrowRight /></el-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 应用案例板块（不可点击，纯展示） -->
+    <section class="section case-section" v-if="caseList.length > 0">
+      <div class="section-title-bar alt">
+        <span class="title-icon">📋</span>
+        <h2>应用案例</h2>
+        <span class="subtitle">典型应用场景展示</span>
+      </div>
+
+      <div class="case-grid">
+        <div
+          v-for="caseItem in caseList"
+          :key="caseItem.id"
+          class="case-item"
+        >
+          <!-- 案例图片 -->
+          <div class="case-image-wrapper">
+            <img :src="caseItem.img" :alt="caseItem.label" />
+          </div>
+
+          <!-- 案例名称 -->
+          <div class="case-label">{{ caseItem.label }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 无数据提示 -->
+    <div v-if="productList.length === 0 && caseList.length === 0" class="empty-state">
+      <el-icon :size="64" color="#cccccc"><Box /></el-icon>
+      <p>暂无产品信息</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {ArrowRight, View, Box} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-hardware {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .section {
+    padding: 16px;
+
+    &.case-section {
+      background-color: #ffffff;
+      margin-top: 12px; /* no */
+      border-top: 4px solid #081314; /* no */
+    }
+  }
+
+  .section-title-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px; /* no */
+    margin-bottom: 16px; /* no */
+    padding-bottom: 10px; /* no */
+    border-bottom: 2px solid #e8e8e8;
+
+    &.alt {
+      border-bottom-color: #d6e4ff;
+    }
+
+    .title-icon {
+      font-size: 20px;
+    }
+
+    h2 {
+      flex: 1;
+      font-size: 18px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin: 0;
+    }
+
+    .subtitle {
+      font-size: 11px;
+      color: #999999;
+      background-color: #f5f5f5;
+      padding: 3px 8px; /* no */
+      border-radius: 10px; /* no */
+    }
+  }
+
+  // 硬件产品列表样式
+  .product-list {
+    display: flex;
+    flex-direction: column;
+    gap: 14px; /* no */
+  }
+
+  .product-card {
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.98);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* no */
+    }
+
+    .product-image {
+      position: relative;
+      width: 100%;
+      height: 200px; /* no */
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        background-color: #fafafa;
+        padding: 10px; /* no */
+        box-sizing: border-box;
+      }
+
+      .click-hint {
+        position: absolute;
+        top: 10px; /* no */
+        right: 10px; /* no */
+        width: 28px; /* no */
+        height: 28px; /* no */
+        background-color: rgba(24, 144, 255, 0.9);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        font-size: 14px;
+      }
+    }
+
+    .product-info {
+      padding: 14px; /* no */
+
+      .product-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 8px 0;
+        line-height: 1.4;
+      }
+
+      .product-desc {
+        font-size: 12px;
+        color: #666666;
+        line-height: 1.6;
+        margin: 0 0 12px 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .action-btn {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 10px; /* no */
+        border-top: 1px solid #f0f0f0;
+        color: #1890ff;
+        font-size: 13px;
+        font-weight: 500;
+
+        .el-icon {
+          transition: transform 0.3s ease;
+        }
+
+        &:active .el-icon {
+          transform: translateX(4px);
+        }
+      }
+    }
+  }
+
+  // 应用案例网格样式（不可点击）
+  .case-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px; /* no */
+
+    .case-item {
+      background-color: #fafafa;
+      border-radius: 10px; /* no */
+      overflow: hidden;
+      border: 1px solid #e8e8e8;
+
+      .case-image-wrapper {
+        width: 100%;
+        height: 140px; /* no */
+        overflow: hidden;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          background-color: #ffffff;
+        }
+      }
+
+      .case-label {
+        padding: 10px; /* no */
+        text-align: center;
+        font-size: 13px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 1.4;
+        background-color: #ffffff;
+        border-top: 1px solid #f0f0f0;
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px; /* no */
+    color: #999999;
+
+    p {
+      margin-top: 16px; /* no */
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/views/product/softwareSystem/mobile.vue b/src/views/product/softwareSystem/mobile.vue
new file mode 100644
index 0000000..22e589a
--- /dev/null
+++ b/src/views/product/softwareSystem/mobile.vue
@@ -0,0 +1,291 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+
+const router = useRouter()
+const loading = ref(true)
+
+// 使用PC端真实数据源 - 软件系统列表
+const softwareList = ref([])
+
+onMounted(() => {
+  // 从window对象获取真实数据
+  softwareList.value = window.softwareSystemList || []
+  setTimeout(() => {
+    loading.value = false
+  }, 300)
+})
+
+// 点击图片跳转详情页
+const toDetail = (item) => {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-software" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">软件系统</h1>
+      <p class="page-subtitle">智能化低空监管软件平台</p>
+    </div>
+
+    <!-- 软件系统列表 -->
+    <div class="software-list" v-if="softwareList.length > 0">
+      <div
+        v-for="software in softwareList"
+        :key="software.id"
+        class="software-card"
+      >
+        <!-- 标题栏 -->
+        <div class="card-header-bar">
+          <h3 class="software-title">{{ software.title }}</h3>
+        </div>
+
+        <!-- 图片区域（可点击） -->
+        <div class="image-area" @click="toDetail(software)">
+          <img :src="`./static/images/${software.imgUrl}`" :alt="software.title" class="software-image" />
+          <div class="image-overlay">
+            <span class="view-detail">
+              <el-icon><View /></el-icon>
+              查看详情
+            </span>
+          </div>
+        </div>
+
+        <!-- 描述信息 -->
+        <div class="card-body">
+          <!-- 副标题 -->
+          <p class="sub-title" v-if="software.subTitle">{{ software.subTitle }}</p>
+
+          <!-- 详细描述 -->
+          <div class="description" v-if="software.desc || software.description">
+            <p>{{ software.desc || software.description }}</p>
+          </div>
+
+          <!-- 功能特性标签 -->
+          <div class="features" v-if="software.features && software.features.length > 0">
+            <span v-for="(feat, idx) in software.features" :key="idx" class="feature-tag">
+              {{ feat }}
+            </span>
+          </div>
+
+          <!-- 查看详情按钮 -->
+          <button class="detail-btn" @click="toDetail(software)">
+            <span>了解更多</span>
+            <el-icon><ArrowRight /></el-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 无数据提示 -->
+    <div v-else class="empty-state">
+      <el-icon :size="64" color="#cccccc"><Monitor /></el-icon>
+      <p>暂无软件系统信息</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {View, ArrowRight, Monitor} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-software {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .software-list {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px; /* no */
+  }
+
+  .software-card {
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+
+    .card-header-bar {
+      background: linear-gradient(135deg, #0389ff, #0066cc);
+      padding: 14px 16px; /* no */
+
+      .software-title {
+        font-size: 17px;
+        font-weight: 600;
+        color: #ffffff;
+        margin: 0;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .image-area {
+      position: relative;
+      width: 100%;
+      height: 240px; /* no */
+      overflow: hidden;
+      cursor: pointer;
+
+      .software-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        background-color: #fafafa;
+        padding: 12px; /* no */
+        box-sizing: border-box;
+        transition: transform 0.3s ease;
+      }
+
+      &:active .software-image {
+        transform: scale(1.02);
+      }
+
+      .image-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+        padding: 20px 16px 12px; /* no */
+        display: flex;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        .view-detail {
+          display: flex;
+          align-items: center;
+          gap: 6px; /* no */
+          color: #ffffff;
+          font-size: 13px;
+          font-weight: 500;
+
+          .el-icon {
+            font-size: 16px;
+          }
+        }
+      }
+
+      &:active .image-overlay {
+        opacity: 1;
+      }
+    }
+
+    .card-body {
+      padding: 16px; /* no */
+
+      .sub-title {
+        font-size: 14px;
+        color: #1890ff;
+        font-weight: 500;
+        margin: 0 0 10px 0;
+        line-height: 1.4;
+      }
+
+      .description {
+        margin-bottom: 14px; /* no */
+
+        p {
+          font-size: 13px;
+          color: #666666;
+          line-height: 1.7;
+          margin: 0;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      .features {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px; /* no */
+        margin-bottom: 16px; /* no */
+
+        .feature-tag {
+          padding: 5px 12px; /* no */
+          background-color: #e6f7ff;
+          color: #096dd9;
+          font-size: 11px;
+          border-radius: 12px; /* no */
+          border: 1px solid #d6e4ff;
+          font-weight: 500;
+        }
+      }
+
+      .detail-btn {
+        width: 100%;
+        height: 42px; /* no */
+        border: none;
+        border-radius: 21px; /* no */
+        background: linear-gradient(135deg, #081314, #1a2634);
+        color: #ffffff;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px; /* no */
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 12px rgba(8, 19, 20, 0.25); /* no */
+
+        &:active {
+          transform: scale(0.97);
+          box-shadow: 0 2px 8px rgba(8, 19, 20, 0.35); /* no */
+        }
+
+        .el-icon {
+          transition: transform 0.3s ease;
+        }
+
+        &:active .el-icon {
+          transform: translateX(3px);
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px; /* no */
+    color: #999999;
+
+    p {
+      margin-top: 16px; /* no */
+      font-size: 14px;
+    }
+  }
+}
+</style>