备份代码

1
2026-07-31 11:24:03 +08:00 · 2026-07-30 17:12:26 +08:00 · 2026-07-30 16:54:55 +08:00 · 2026-07-30 10:00:57 +08:00 · 2026-07-27 10:06:41 +08:00 · 2026-07-15 15:05:21 +08:00
63 changed files with 2568 additions and 3854 deletions
--- a/index.html
+++ b/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
@ -10,9 +10,9 @@
      name="description"
      content="燃谷科技位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。"
    />
    <script src="/config.js"></script>
    <script src="/config/nav.js"></script>
    <script src="/config/product.js"></script>
    <script src="/config.js"></script>
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.2",
    "@vueup/vue-quill": "^1.2.0",
    "@vueuse/core": "^13.8.0",
    "axios": "^1.12.2",
@ -21,6 +22,7 @@
    "quill": "^2.0.3",
    "terser": "^5.43.1",
    "v-viewer": "^3.0.11",
    "vant": "^4.10.0",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  },
--- a/public/config.js
+++ b/public/config.js
@ -1,3 +1,10 @@
 window.config = {
  // 新闻中心
  baseUrl: 'http://192.168.3.10:9121/',
  // 文件下载
  downloadUrl: 'https://work.rangutech.cn:1001/',
  // 静态图片
  assetsUrl: 'https://insider.rangutech.com/app_static_data/images/',
  // 演示系统
  featureUrl: 'http://192.168.3.32:5174/#/',
 }
--- a/public/config/nav.js
+++ b/public/config/nav.js
@ -1,31 +1,37 @@
 window.nav = {
  header: [
-    {id: 1, label: '首页', url: '/', hasChildren: false},
+    {id: 1, label: '首页', url: '/', mobileUrl: '/m/homepage', hasChildren: false},
    {
      id: 2,
      label: '解决方案',
      url: '/product',
      mobileUrl: '/m/product',
      hasChildren: true,
      children: [
        {
          id: 2.1,
          label: '空域感知矩阵',
          url: '/product/hardwareSystem',
          mobileUrl: '/m/product/hardwareSystem',
          hasChildren: false,
        },
        {
          id: 2.2,
          label: '低空智控中枢',
          url: '/product/softwareSystem',
          mobileUrl: '/m/product/softwareSystem',
          hasChildren: false,
        },
      ],
    },
-    // {id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
+    // {id: 3, label: '服务与支撑', url: '/services', mobileUrl: '/m/services', hasChildren: false},
-    {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
+    {id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false},
-    {id: 5, label: '关于我们', url: '/about', hasChildren: false},
+    {id: 5, label: '关于我们', url: '/about', mobileUrl: '/m/about', hasChildren: false},
-    {id: 6, label: '联系我们', url: '/link', hasChildren: false},
+    {id: 6, label: '联系我们', url: '/link', mobileUrl: '/m/link', hasChildren: false},
    {id: 7, label: '资源下载', url: '/download', mobileUrl: '/m/download', hasChildren: false},
    {id: 8, label: '演示系统', url: window.config.featureUrl, hasChildren: false, open: true},
  ],
  footer: [
    {
      id: 1,
@ -33,31 +39,38 @@ window.nav = {
      url: '',
      hasChildren: true,
      children: [
-        {id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem'},
+        {id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem', mobileUrl: '/m/product/hardwareSystem'},
-        {id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem'},
+        {id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem', mobileUrl: '/m/product/softwareSystem'},
      ],
    },
    // {
    //   id: 2,
    //   label: '服务与支撑',
    //   url: '/services',
    //   mobileUrl: '/m/services',
    //   hasChildren: false,
    // },
-    // {
+    {
-    //   id: 3,
+      id: 3,
-    //   label: '软件下载',
+      label: '资源下载',
-    //   url: '/download',
+      url: '/download',
-    //   hasChildren: false,
+      hasChildren: true,
-    // },
+      children: [
-    {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
+        {id: 3.1, label: '资源下载', url: '/download', mobileUrl: '/m/download'},
        {id: 3.2, label: 'Android', url: '', downloadType: 'android'},
        {id: 3.3, label: 'iOS', url: '', downloadType: 'ios'},
        {id: 3.4, label: '客户端', url: '', downloadType: 'pc'},
      ],
    },
    // {id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false},
    {
      id: 5,
      label: '关于燃谷',
      url: '',
      hasChildren: true,
      children: [
-        {id: 5.1, label: '公司简介', url: '/about'},
+        {id: 5.1, label: '公司简介', url: '/about', mobileUrl: '/m/about'},
-        {id: 5.2, label: '联系我们', url: '/link'},
+        {id: 5.2, label: '联系我们', url: '/link', mobileUrl: '/m/link'},
      ],
    },
  ],
--- a/public/static/images/banner/about.png
+++ b/public/static/images/banner/about.png
--- a/public/static/images/banner/download.png
+++ b/public/static/images/banner/download.png
--- a/public/static/images/banner/link.png
+++ b/public/static/images/banner/link.png
--- a/public/static/images/banner/news.png
+++ b/public/static/images/banner/news.png
--- a/public/static/images/banner/product.png
+++ b/public/static/images/banner/product.png
--- a/public/static/images/download/android.png
+++ b/public/static/images/download/android.png
--- a/public/static/images/download/ios.png
+++ b/public/static/images/download/ios.png
--- a/public/static/images/download/windows.png
+++ b/public/static/images/download/windows.png
--- a/src/api/index.js
+++ b/src/api/index.js
@ -44,3 +44,20 @@ export function saveDetail(data) {
    data,
  })
 }
 // 获取下载资源
 export function downloadList(params) {
  return request({
    url: `${window.config.downloadUrl}api/minio/Object/list`,
    method: 'get',
    params,
  })
 }
 export function downloadFile(params) {
  return request({
    url: `${window.config.downloadUrl}api/minio/Object/url`,
    method: 'get',
    params,
  })
 }
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -20,6 +20,14 @@ body {
  height: 600px;
  margin-bottom: 50px;
 }
 /* 移动端 Banner 自适应高度 */
@media screen and (max-width: 999px) {
  .banner {
    height: auto;
    margin-bottom: 20px;
  }
 }
 .page {
  width: 100%;
  height: 100%;
--- a/src/components/Banner/index.vue
+++ b/src/components/Banner/index.vue
@ -19,6 +19,7 @@ const props = defineProps({
 <style lang="scss" scoped>
 .logo {
  width: 100%;
-  height: 100%;
+  height: auto;
  display: block;
 }
 </style>
--- a/src/components/Swiper/composable.js
+++ b/src/components/Swiper/composable.js
@ -0,0 +1,125 @@
 import {ref, computed, watch, nextTick, getCurrentInstance, onUnmounted} from 'vue'
 /**
 * Swiper 公用逻辑 composable
 * @param {object} props   - 组件 props
 * @param {object} model   - v-model ref (currentPage)
 * @param {function} emit  - emit 函数
 */
 export function useSwiper(props, model, emit) {
  const instance = getCurrentInstance()
  const $fontSize = instance.appContext.config.globalProperties.$fontSize
  const trackRef = ref(null)
  let autoPlayTimer = null
  /* ---------- 计算属性 ---------- */
  const itemWidth = computed(() => $fontSize(props.sourceWidth))
  const itemHeight = computed(() => $fontSize(props.sourceHeight))
  const itemGap = computed(() => $fontSize(props.sourceGap))
  const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
  const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
  const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
  const totalPages = computed(() => props.data.length - props.pageSize + 1)
  /* ---------- 方法 ---------- */
  function clickTitle() {
    emit('title-click')
  }
  function translate(page) {
    if (!trackRef.value) return
    trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
    trackRef.value.style.transform = `translateX(-${itemTotalWidth.value * (page - 1)}px)`
  }
  function goToPage(page) {
    model.value = Number(page)
  }
  function nextPage() {
    const next = model.value < totalPages.value ? model.value + 1 : 1
    goToPage(next)
  }
  function prevPage() {
    const prev = model.value > 1 ? model.value - 1 : totalPages.value
    goToPage(prev)
  }
  function handleItemClick(item, index) {
    emit('item-click', item, index)
  }
  function handleItemHover(item, index) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
    emit('item-hover', item, index)
  }
  function handleItemHoverLeave() {
    startAutoPlay()
  }
  function startAutoPlay() {
    if (!props.autoPlay) return
    stopAutoPlay()
    autoPlayTimer = setInterval(nextPage, 3000)
  }
  function stopAutoPlay() {
    if (autoPlayTimer) {
      clearInterval(autoPlayTimer)
      autoPlayTimer = null
    }
  }
  /* 移动端触摸事件 */
  function handleItemTouchStart(item, index) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
    emit('item-hover', item, index)
  }
  function handleItemTouchEnd() {
    startAutoPlay()
  }
  /* ---------- 监听器 ---------- */
  watch(model, (newVal, oldVal) => {
    if (newVal !== oldVal) {
      nextTick(() => translate(newVal))
    }
  }, {immediate: true})
  watch(() => props.autoPlay, (autoPlay) => {
    autoPlay ? startAutoPlay() : stopAutoPlay()
  }, {immediate: true})
  watch(() => props.data.length, (newLen, oldLen) => {
    if (newLen !== oldLen && model.value !== 1) {
      model.value = 1
    }
  })
  onUnmounted(stopAutoPlay)
  return {
    trackRef,
    itemWidth,
    itemHeight,
    itemGap,
    itemTotalWidth,
    viewPortWidth,
    trackWidth,
    totalPages,
    clickTitle,
    goToPage,
    nextPage,
    prevPage,
    handleItemClick,
    handleItemHover,
    handleItemHoverLeave,
    handleItemTouchStart,
    handleItemTouchEnd,
  }
 }
--- a/src/components/Swiper/mobile/index.vue
+++ b/src/components/Swiper/mobile/index.vue
@ -0,0 +1,183 @@
 <script setup>
 import {useSwiper} from '../composable.js'
 const currentPage = defineModel({type: [Number, String], default: 1})
 const props = defineProps({
  id: {type: String, required: true},
  title: {type: String, default: ''},
  data: {type: Array, default: () => [1]},
  pageSize: {type: [Number, String], default: 1},
  showDot: {type: Boolean, default: true},
  showPagination: {type: Boolean, default: true},
  showHover: {type: Boolean, default: false},
  autoPlay: {type: Boolean, default: false},
  transitionDuration: {type: Number, default: 300},
  sourceWidth: {type: Number, default: 276},
  sourceHeight: {type: Number, default: 355},
  sourceGap: {type: Number, default: 20},
 })
 const emit = defineEmits(['page-change', 'item-click', 'item-hover', 'title-click'])
 const {
  trackRef,
  itemWidth,
  itemHeight,
  itemGap,
  itemTotalWidth,
  viewPortWidth,
  trackWidth,
  totalPages,
  clickTitle,
  goToPage,
  nextPage,
  prevPage,
  handleItemClick,
  handleItemHover,
  handleItemHoverLeave,
  handleItemTouchStart,
  handleItemTouchEnd,
 } = useSwiper(props, currentPage, emit)
 </script>
 <template>
  <section :id="id" class="generic-carousel">
    <!-- 标题 -->
    <slot name="title">
      <h2 v-if="title" class="carousel-title" @click="clickTitle">{{ title }}</h2>
    </slot>
    <!-- 分页指示器 -->
    <div v-if="showDot" class="carousel-pagination">
      <button
        v-for="page in totalPages"
        :key="page"
        :class="['pagination-dot', {'is-active': page === currentPage}]"
        @click="goToPage(page)"
        :aria-label="`切换到第${page}页`"
      />
    </div>
    <!-- 导航按钮 -->
    <div v-if="showPagination && totalPages > 1" class="carousel-navigation flex j-s">
      <button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页">&lt;</button>
      <button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">&gt;</button>
    </div>
    <!-- 轮播内容区域 -->
    <div class="carousel-content">
      <div class="carousel-viewport" :style="{width: viewPortWidth}">
        <div
          ref="trackRef"
          class="carousel-track"
          :style="{width: trackWidth}"
        >
          <div
            v-for="(item, index) in data"
            :key="index"
            class="carousel-item"
            :style="{
              width: itemWidth + 'px',
              height: itemHeight + 'px',
              marginRight: index < data.length - 1 ? itemGap + 'px' : '0',
            }"
            @click="handleItemClick(item, index)"
            @mouseenter="handleItemHover(item, index)"
            @mouseleave="handleItemHoverLeave(item, index)"
            @touchstart="handleItemTouchStart(item, index)"
            @touchend="handleItemTouchEnd"
          >
            <slot :item="item" :index="index" :isActive="currentPage === Math.ceil((index + 1) / pageSize)" />
          </div>
        </div>
      </div>
    </div>
  </section>
 </template>
 <style lang="scss" scoped>
 .generic-carousel {
  padding: 20px 0;
  text-align: center;
  position: relative;
  .carousel-title {
    font-family: 'PingFang SC';
    font-weight: 600;
    font-size: 18px;
    color: #333333;
  }
  .carousel-pagination {
    width: 64px;
    height: 4px;
    margin: 12px auto 20px;
    display: flex;
    .pagination-dot {
      flex: 1;
      height: 100%;
      background: #d9d9d9;
      border: none;
      cursor: pointer;
      transition: background 0.3s ease;
      &.is-active {
        background: #0389ff;
      }
    }
  }
  .carousel-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: 0 8px; /* no */
    z-index: 10;
    pointer-events: none;
    .nav-btn {
      pointer-events: auto;
      width: 32px; /* no */
      height: 32px; /* no */
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      color: #333;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }
  }
 }
 .carousel-content {
  width: 100%;
  overflow: hidden;
 }
 .carousel-viewport {
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }
 .carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
  padding-top: 12px;
 }
 .carousel-item {
  flex-shrink: 0;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
 }
 </style>
--- a/src/components/Swiper/pc/index.vue
+++ b/src/components/Swiper/pc/index.vue
@ -1,7 +1,6 @@
 <script setup>
-import {ref, computed, watch, nextTick, getCurrentInstance, onUnmounted} from 'vue'
+import {useSwiper} from '../composable.js'
 /* -------------------- 组件接口定义 -------------------- */
 const currentPage = defineModel({type: [Number, String], default: 1})
 const props = defineProps({
@ -21,145 +20,23 @@ const props = defineProps({
 const emit = defineEmits(['page-change', 'item-click', 'item-hover', 'title-click'])
-/* -------------------- 响应式变量 -------------------- */
+const {
-const instance = getCurrentInstance()
+  trackRef,
-const $fontSize = instance.appContext.config.globalProperties.$fontSize
+  itemWidth,
-const trackRef = ref(null)
+  itemHeight,
-let autoPlayTimer = null
+  itemGap,
-
+  itemTotalWidth,
-/* -------------------- 计算属性 -------------------- */
+  viewPortWidth,
-const itemWidth = computed(() => $fontSize(props.sourceWidth))
+  trackWidth,
-const itemHeight = computed(() => $fontSize(props.sourceHeight))
+  totalPages,
-const itemGap = computed(() => $fontSize(props.sourceGap))
+  clickTitle,
-
+  goToPage,
-const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
+  nextPage,
-const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
+  prevPage,
-const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
+  handleItemClick,
-const totalPages = computed(() => props.data.length - props.pageSize + 1)
+  handleItemHover,
-
+  handleItemHoverLeave,
-/* -------------------- 方法 -------------------- */
+} = useSwiper(props, currentPage, emit)
 /**
 * 标题点击事件
 */
 const clickTitle = () => {
  emit('title-click')
 }
 /**
 * 执行平移动画
 * @param {number} page - 目标页码
 */
 const translate = (page) => {
  if (!trackRef.value) return
  trackRef.value.style.transition = `transform ${props.transitionDuration}ms ease`
  trackRef.value.style.transform = `translateX(-${itemTotalWidth.value * (page - 1)}px)`
 }
 /**
 * 切换到指定页码
 * @param {number} page - 目标页码
 */
 const goToPage = (page) => {
  currentPage.value = Number(page)
 }
 /**
 * 切换到下一页，循环播放
 */
 const nextPage = () => {
  const nextPage = currentPage.value < totalPages.value ? currentPage.value + 1 : 1
  goToPage(nextPage)
 }
 /**
 * 切换到上一页，循环播放
 */
 const prevPage = () => {
  const prevPage = currentPage.value > 1 ? currentPage.value - 1 : totalPages.value
  goToPage(prevPage)
 }
 /**
 * 处理项目点击事件
 * @param {Object} item - 项目数据
 * @param {number} index - 项目索引
 */
 const handleItemClick = (item, index) => {
  emit('item-click', item, index)
 }
 /**
 * 处理项目悬停事件
 * @param {Object} item - 项目数据
 * @param {number} index - 项目索引
 */
 const handleItemHover = (item, index) => {
  clearInterval(autoPlayTimer)
  autoPlayTimer = null
  emit('item-hover', item, index)
 }
 /**
 * 处理项目鼠标移出事件
 * @param {Object} item - 项目数据
 * @param {number} index - 项目索引
 */
 const handleItemHoverLeave = () => {
  startAutoPlay()
 }
 /**
 * 启动自动播放
 */
 const startAutoPlay = () => {
  if (!props.autoPlay) return
  stopAutoPlay()
  autoPlayTimer = setInterval(nextPage, 3000)
 }
 /**
 * 停止自动播放
 */
 const stopAutoPlay = () => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
 }
 /* -------------------- 监听器 -------------------- */
 // 监听页码变化，执行平移动画
 watch(
  currentPage,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      nextTick(() => translate(newVal))
    }
  },
  {immediate: true}
 )
 // 监听自动播放设置变化
 watch(
  () => props.autoPlay,
  (autoPlay) => {
    autoPlay ? startAutoPlay() : stopAutoPlay()
  },
  {immediate: true}
 )
 // 监听数据变化，重置到第一页
 watch(
  () => props.data.length,
  (newLen, oldLen) => {
    if (newLen !== oldLen && currentPage.value !== 1) {
      currentPage.value = 1
    }
  }
 )
 // 组件卸载时清理定时器
 onUnmounted(stopAutoPlay)
 </script>
 <template>
@ -168,7 +45,6 @@ onUnmounted(stopAutoPlay)
    <slot name="title">
      <h2 v-if="title" class="carousel-title" @click="clickTitle">{{ title }}</h2>
    </slot>
    <!-- <h2 v-if="title" class="carousel-title">{{ title }}</h2> -->
    <!-- 分页指示器 -->
    <div v-if="showDot" class="carousel-pagination">
--- a/src/components/downloadImg/index.vue
+++ b/src/components/downloadImg/index.vue
@ -0,0 +1,52 @@
 <script setup>
 defineProps({
  type: {
    type: String,
    required: true,
  },
 })
 const visible = defineModel({default: false})
 const options = {
  ios: {label: 'iOS', img: `${window.config.assetsUrl}app/ios.png`},
  android: {label: 'Android', img: `${window.config.assetsUrl}app/android.png`},
 }
 </script>
 <template>
  <el-dialog v-model="visible" title="扫码下载" width="500px" :close-on-click-modal="true">
    <div class="dialog-body flex j-c a-c">
      <div class="download-option">
        <img :src="options[type]?.img" :alt="type" />
        <span class="label">{{ options[type]?.label }}</span>
      </div>
    </div>
  </el-dialog>
 </template>
 <style lang="scss" scoped>
 .dialog-body {
  gap: 40px;
  padding: 20px 0;
  .download-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    img {
      width: 140px;
      height: 140px;
      object-fit: contain;
    }
    .label {
      font-size: 16px;
      color: #333;
    }
  }
 }
 </style>
--- a/src/home.vue
+++ b/src/home.vue
@ -1,15 +1,17 @@
 <script setup>
 import {storeToRefs} from 'pinia'
 import {useNavStore} from '@/store/nav'
 import {isMobileDevice} from '@/utils/rem'
 import {onMounted, ref} from 'vue'
 import Header from './views/layout/pc/header/index.vue'
 import Footer from './views/layout/pc/footer/index.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()
+// 移动端判断
-
+const navStore = useNavStore()
-console.log('isMobile===>', isMobile.value)
+const {isMobile} = storeToRefs(navStore)
 const referrer = ref(document.referrer || '')
 const ipUrl = ref('')
@ -18,6 +20,14 @@ const CACHE_KEY = 'ip'
 const TIME_KEY = 'ipFetchTime'
 const CACHE_MIN = 60 * 60 * 1000 // 1h
 // 初始化移动端状态
 navStore.setIsMobile(isMobileDevice())
 // 监听窗口 resize
 window.addEventListener('resize', () => {
  navStore.setIsMobile(isMobileDevice())
 })
 async function getUrl() {
  const now = Date.now()
  const cachedIp = sessionStorage.getItem(CACHE_KEY)
@ -46,7 +56,6 @@ function postVisit() {
    referrer: referrer.value,
    real_ip: ipUrl.value,
  }
  visit(params).then((res) => {})
 }
@ -56,11 +65,8 @@ onMounted(async () => {
 </script>
 <template>
-  <!-- APP端布局 -->
+  <!-- PC端布局 -->
-  <MobileLayout v-if="isMobile" />
+  <div v-if="!isMobile" id="app">
  <!-- PC端布局（保持不变） -->
  <div v-else id="app">
    <Header id="header" />
    <router-view id="main" v-slot="{Component, title}">
      <keep-alive include="New">
@ -69,6 +75,9 @@ onMounted(async () => {
    </router-view>
    <Footer id="footer" />
  </div>
  <!-- 移动端布局 -->
  <MobileLayout v-else />
 </template>
 <style lang="scss" scoped>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,84 +1,9 @@
 import {createWebHashHistory, createRouter} from 'vue-router'
-import {isMobile} from '@/utils/responsive'
+import mobileRoutes from './mobile.js'
-// 动态加载首页组件
+import HomeView from '@/views/pc/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 pcRoutes = [
 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 = [
  // ============================================  首页  ============================================
  {path: '/', component: HomeView},
@ -86,7 +11,7 @@ const routes = [
  {
    path: '/product/hardwareSystem',
    name: 'HardwareSystem',
-    component: HardwareSystemView,
+    component: () => import('@/views/pc/product/hardwareSystem.vue'),
    meta: {
      title: '低空监管体系',
    },
@ -94,7 +19,7 @@ const routes = [
  {
    path: '/product/softwareSystem',
    name: 'SoftwareSystem',
-    component: SoftwareSystemView,
+    component: () => import('@/views/pc/product/softwareSystem.vue'),
    meta: {
      title: '低空远程识别设备',
    },
@ -102,29 +27,37 @@ const routes = [
  {
    path: '/product/detail',
    name: 'ProductDetail',
-    component: ProductDetailView,
+    component: () => import('@/views/pc/product/detail.vue'),
    meta: {
      title: '产品详情',
    },
  },
  // ============================================  服务与支撑  ============================================
  {
    path: '/services',
    name: 'Services',
    component: () => import('@/views/pc/services/index.vue'),
    meta: {
      title: '服务与支撑',
    },
  },
  // ============================================  新闻中心  ============================================
  {
    path: '/news',
    name: 'News',
-    component: NewsView,
+    component: () => import('@/views/pc/news/index.vue'),
    meta: {
      title: '新闻中心',
    },
  },
  // ============================================  联系我们  ============================================
  {
-    path: '/link',
+    path: '/news/detail',
-    name: 'Link',
+    name: 'NewsDetail',
-    component: LinkView,
+    component: () => import('@/views/pc/news/detail.vue'),
    meta: {
-      title: '联系我们',
+      title: '新闻详情',
    },
  },
@ -132,16 +65,104 @@ const routes = [
  {
    path: '/about',
    name: 'About',
-    component: AboutView,
+    component: () => import('@/views/pc/about/index.vue'),
    meta: {
      title: '关于我们',
    },
  },
  // ============================================  联系我们  ============================================
  {
    path: '/link',
    name: 'Link',
    component: () => import('@/views/pc/link/index.vue'),
    meta: {
      title: '联系我们',
    },
  },
  // ============================================  下载中心  ============================================
  {
    path: '/download',
    name: 'Download',
    component: () => import('@/views/pc/download/index.vue'),
    meta: {
      title: '下载中心',
    },
  },
  // ============================================  管理页面  ============================================
  {
    path: '/manager',
    name: 'Manager',
    component: () => import('@/views/manager/index.vue'),
    meta: {
      title: '管理中心',
    },
  },
 ]
 const routes = [...pcRoutes, ...mobileRoutes]
 const router = createRouter({
  history: createWebHashHistory(),
  routes,
 })
 // 移动端/PC端断点
 const MOBILE_BREAKPOINT = 1000
 // PC → 移动端路由映射
 const pcToMobileMap = {
  '/': '/m/homepage',
  '/product/hardwareSystem': '/m/product/hardwareSystem',
  '/product/softwareSystem': '/m/product/softwareSystem',
  '/product/detail': '/m/product/detail',
  '/services': '/m/services',
  '/news': '/m/news',
  '/news/detail': '/m/news/detail',
  '/about': '/m/about',
  '/link': '/m/link',
  '/download': '/m/download',
 }
 // 移动端 → PC 路由映射（反向）
 const mobileToPcMap = Object.fromEntries(
  Object.entries(pcToMobileMap).map(([k, v]) => [v, k])
 )
 // 判断是否为移动端
 function checkIsMobile() {
  return window.innerWidth < MOBILE_BREAKPOINT
 }
 router.beforeEach(async (to, from, next) => {
  const {useNavStore} = await import('@/store/nav.js')
  const navStore = useNavStore()
  const isMobile = checkIsMobile()
  // 更新移动端状态
  navStore.setIsMobile(isMobile)
  // 移动端访问 PC 路由 → 重定向到移动端路由
  if (isMobile && pcToMobileMap[to.path]) {
    return next({path: pcToMobileMap[to.path], query: to.query, hash: to.hash, replace: true})
  }
  // PC端访问移动端路由 → 重定向到 PC 路由
  if (!isMobile && mobileToPcMap[to.path]) {
    return next({path: mobileToPcMap[to.path], query: to.query, hash: to.hash, replace: true})
  }
  next()
 })
 router.afterEach((to, from) => {
  // 只有路径变化时才滚动到顶部
  if (to.path !== from.path) {
    requestAnimationFrame(() => {
      window.scrollTo({top: 0, behavior: 'instant'})
    })
  }
 })
 export default router
--- a/src/router/mobile.js
+++ b/src/router/mobile.js
@ -0,0 +1,76 @@
 const mobileRoutes = [
  // ============================================  首页  ============================================
  {
    path: '/m/homepage',
    name: 'MobileHomepage',
    component: () => import('@/views/mobile/homepage/index.vue'),
  },
  // ============================================  产品中心  ============================================
  {
    path: '/m/product/hardwareSystem',
    name: 'MobileHardwareSystem',
    component: () => import('@/views/mobile/product/hardwareSystem.vue'),
    meta: {title: '低空监管体系'},
  },
  {
    path: '/m/product/softwareSystem',
    name: 'MobileSoftwareSystem',
    component: () => import('@/views/mobile/product/softwareSystem.vue'),
    meta: {title: '低空远程识别设备'},
  },
  {
    path: '/m/product/detail',
    name: 'MobileProductDetail',
    component: () => import('@/views/mobile/product/detail.vue'),
    meta: {title: '产品详情'},
  },
  // ============================================  服务与支撑  ============================================
  {
    path: '/m/services',
    name: 'MobileServices',
    component: () => import('@/views/mobile/services/index.vue'),
    meta: {title: '服务与支撑'},
  },
  // ============================================  新闻中心  ============================================
  {
    path: '/m/news',
    name: 'MobileNews',
    component: () => import('@/views/mobile/news/index.vue'),
    meta: {title: '新闻中心'},
  },
  {
    path: '/m/news/detail',
    name: 'MobileNewsDetail',
    component: () => import('@/views/mobile/news/detail.vue'),
    meta: {title: '新闻详情'},
  },
  // ============================================  关于我们  ============================================
  {
    path: '/m/about',
    name: 'MobileAbout',
    component: () => import('@/views/mobile/about/index.vue'),
    meta: {title: '关于我们'},
  },
  // ============================================  联系我们  ============================================
  {
    path: '/m/link',
    name: 'MobileLink',
    component: () => import('@/views/mobile/link/index.vue'),
    meta: {title: '联系我们'},
  },
  // ============================================  下载中心  ============================================
  {
    path: '/m/download',
    name: 'MobileDownload',
    component: () => import('@/views/mobile/download/index.vue'),
    meta: {title: '下载中心'},
  },
 ]
 export default mobileRoutes
--- a/src/store/nav.js
+++ b/src/store/nav.js
@ -6,6 +6,7 @@ export const useNavStore = defineStore(
  () => {
    const navIndex = ref('/')
    const showLoad = ref(true)
    const isMobile = ref(window.innerWidth < 1000)
    const changeNavIndex = (id) => {
      if (!id) {
@ -20,14 +21,22 @@ export const useNavStore = defineStore(
      showLoad.value = status
    }
    const setIsMobile = (val) => {
      isMobile.value = val
    }
    return {
      navIndex,
      showLoad,
      isMobile,
      changeNavIndex,
      setLoad,
      setIsMobile,
    }
  },
  {
-    persist: true,
+    persist: {
      storage: sessionStorage,
    },
  }
 )
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@ -1,136 +1,54 @@
 // rem等比适配配置
 // 基准大小
 const baseSize = 16
-// PC端设计稿宽度
+// 设计稿宽度（PC端）
 const pcDesignWidth = 1920
-// 移动端设计稿宽度
+// 设计稿宽度（移动端）
 const mobileDesignWidth = 375
 // 移动端/PC端断点
 const mobileBreakpoint = 1000
 // 最大缩放比例
 const maxScale = 2
 // 移动端断点（与 responsive.js 保持一致）
 const MOBILE_BREAKPOINT = 1000
-// 判断是否为移动端
+// 检测是否为移动端
-function isMobile() {
+export function isMobileDevice() {
-  const result = window.innerWidth < MOBILE_BREAKPOINT
+  return window.innerWidth < mobileBreakpoint
-  console.log('📱 [rem.js] isMobile() 检测:', {
+}
-    windowWidth: window.innerWidth,
+
-    breakpoint: MOBILE_BREAKPOINT,
+// 获取当前设计稿宽度
-    isMobile: result,
+function getDesignWidth() {
-    timestamp: new Date().toLocaleTimeString()
+  return isMobileDevice() ? mobileDesignWidth : pcDesignWidth
  })
  return result
 }
 // 设置 rem 函数
 function setRem() {
-  const clientWidth = document.documentElement.clientWidth
+  const designWidth = getDesignWidth()
-  const mobile = isMobile()
+  // 当前页面宽度相对于设计稿宽度的缩放比例
-  
+  const scale = document.documentElement.clientWidth / designWidth
-  let designWidth, scale, minScale, finalFontSize
+  // 设置页面根节点字体大小（最高放大比例为maxScale）
-
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, maxScale) + 'px'
  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 designWidth = getDesignWidth()
-  let designWidth
+  const scale = clientWidth / designWidth
-  const mobile = isMobile()
+  return res * Math.min(scale, maxScale)
  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', () => {
+  window.addEventListener('resize', setRem)
    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()
--- a/src/utils/responsive.js
+++ b/src/utils/responsive.js
@ -1,43 +0,0 @@
 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}
--- a/src/views/about/mobile.vue
+++ b/src/views/about/mobile.vue
@ -1,522 +0,0 @@
 <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>
--- a/src/views/download/index.vue
+++ b/src/views/download/index.vue
@ -1,96 +0,0 @@
 <script setup>
 import {ref, onMounted} from 'vue'
 import Swiper from '@/components/swiper/index.vue'
 const currentPage = ref(1)
 onMounted(() => {})
 const list = ref([
  {id: 1, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
  {id: 2, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
  {id: 3, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
  {id: 4, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
  {id: 5, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
  {id: 6, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
 ])
 const downloadFile = (id) => {
  console.log('id===>', id)
 }
 </script>
 <template>
  <div class="page">
    <div class="placeholder"></div>
    <Swiper
      id="download"
      title="软件下载"
      v-model="currentPage"
      :sourceWidth="1600"
      :sourceHeight="800"
      :show-pagination="false"
      :auto-play="false"
      :showHover="false"
    >
      <template #default>
        <div class="my-card flex j-s wrap">
          <div class="card flex j-s" v-for="item in list" :key="item.id">
            <div class="img">
              <img :src="`./static/main/${item.imgUrl}`" alt="" />
            </div>
            <div class="content">
              <div class="label">{{ item.label }}</div>
              <div class="sub-label">{{ item.subLabel }}</div>
              <div class="download" @click="downloadFile(item.id)">
                点击下载
              </div>
            </div>
          </div>
        </div>
      </template>
    </Swiper>
  </div>
 </template>
 <style lang="scss" scoped>
 .my-card {
  width: 100%;
  height: 100%;
  .card {
    width: 48%;
    height: 170px;
    box-sizing: border-box;
    .img {
      width: 550px;
      height: 100%;
      background: #d9d9d9;
    }
    .content {
      margin-top: 20px;
      text-align: left;
      .label {
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 26px;
        color: $black;
        margin-bottom: 20px;
      }
      .sub-label {
        font-family: 'PingFang SC';
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        margin-bottom: 30px;
      }
      .download {
        font-family: 'PingFang SC';
        font-weight: 400;
        font-size: 18px;
        color: #0389ff;
        cursor: pointer;
      }
    }
  }
 }
 </style>
--- a/src/views/homepage/mobile.vue
+++ b/src/views/homepage/mobile.vue
@ -1,341 +0,0 @@
 <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>
--- a/src/views/layout/mobile/index.vue
+++ b/src/views/layout/mobile/index.vue
@ -1,367 +1,321 @@
 <script setup>
-import {ref, onMounted} from 'vue'
+import {ref, onMounted, watch} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
+import {useRouter} from 'vue-router'
 import {useNavStore} from '@/store/nav'
 import {storeToRefs} from 'pinia'
-import {
+import {Menu, ArrowDown, ArrowRight} from '@element-plus/icons-vue'
  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 router = useRouter()
-const isCollapse = ref(true)
+const sidebarVisible = ref(false)
 const navList = ref([])
 const activeIndex = ref('/')
 const expandedSubMenus = ref([])
-// 图标映射表 - 使用Element Plus内置图标
+const toggleSidebar = () => {
-const iconMap = {
+  sidebarVisible.value = !sidebarVisible.value
  '首页': 'HomeFilled',
  '解决方案': 'Grid',
  '空域感知矩阵': 'Monitor',
  '低空智控中枢': 'Cpu',
  '新闻中心': 'Document',
  '关于我们': 'InfoFilled',
  '联系我们': 'Phone',
  '服务与支撑': 'Service',
  '下载中心': 'Download',
 }
-// 获取菜单项对应的图标组件
+const closeSidebar = () => {
-const getIconComponent = (label) => {
+  sidebarVisible.value = false
-  const iconName = iconMap[label] || 'Grid'
+}
-  const iconComponents = {
+
-    HomeFilled,
+const toggleSubMenu = (navId) => {
-    Grid,
+  const idx = expandedSubMenus.value.indexOf(navId)
-    Monitor,
+  if (idx > -1) {
-    Cpu,
+    expandedSubMenus.value.splice(idx, 1)
-    Document,
+  } else {
-    InfoFilled,
+    expandedSubMenus.value.push(navId)
    Phone,
    Service,
    Download,
  }
  return iconComponents[iconName] || Grid
 }
-const handleSelect = (key) => {
+const getTargetUrl = (nav) => {
-  navStore.changeNavIndex(key)
+  return nav.mobileUrl || nav.url
  router.push(key)
 }
-const toggleMenu = () => {
+const handleNavClick = (nav) => {
-  isCollapse.value = !isCollapse.value
+  if (nav.hasChildren || nav.children?.length > 0) {
-
+    toggleSubMenu(nav.id)
-  // 派发侧边栏状态变化事件，让其他组件（如详情页底部栏）能够响应
+    return
  window.dispatchEvent(new CustomEvent('sidebar-toggle', {
    detail: {
      collapsed: isCollapse.value
  }
-  }))
+  if (nav.open) {
    window.open(nav.url)
    sidebarVisible.value = false
    return
  }
  const targetUrl = getTargetUrl(nav)
  navStore.changeNavIndex(targetUrl)
  activeIndex.value = targetUrl
  router.push(targetUrl)
  sidebarVisible.value = false
 }
 watch(
  navIndex,
  (newVal) => {
    activeIndex.value = newVal
  },
  {immediate: true}
 )
 onMounted(() => {
  navList.value = window.nav?.header || []
  activeIndex.value = route.path
 })
 const toMIIF = () => {
  window.open('https://beian.miit.gov.cn')
 }
 </script>
 <template>
-  <div class="app-layout">
+  <div class="mobile-layout">
-    <div class="sidebar" :class="{collapse: isCollapse}">
+    <!-- ==================== 顶部 Header ==================== -->
-      <div class="logo" :class="{collapse: isCollapse}">
+    <div class="mobile-header">
-        <img src="/static/images/header/logo.png" alt="logo" />
+      <el-icon class="header-menu-icon" :size="22" @click="toggleSidebar">
-        <span v-show="!isCollapse" class="logo-text">燃谷科技</span>
+        <Menu />
      </el-icon>
      <div class="header-logo" @click="router.push('/')"></div>
    </div>
-      <el-menu
+    <!-- ==================== 侧边栏 ==================== -->
-        :default-active="activeIndex"
+    <transition name="sidebar-slide">
-        :collapse="isCollapse"
+      <div v-show="sidebarVisible" class="sidebar">
-        class="sidebar-menu"
+        <div class="sidebar-nav">
        @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"
+            <div v-if="nav.hasChildren || nav.children?.length > 0" class="nav-group">
-            :index="nav.url"
+              <div
                class="nav-item nav-item--parent"
                :class="{'nav-item--expanded': expandedSubMenus.includes(nav.id)}"
                @click="handleNavClick(nav)"
              >
-            <template #title>
+                <span class="nav-label">{{ nav.label }}</span>
-              <el-icon :size="18">
+                <el-icon class="nav-arrow" :size="12">
-                <component :is="getIconComponent(nav.label)" />
+                  <ArrowDown v-if="expandedSubMenus.includes(nav.id)" />
                  <ArrowRight v-else />
                </el-icon>
-              <span>{{ nav.label }}</span>
+              </div>
-            </template>
+              <div v-show="expandedSubMenus.includes(nav.id)" class="nav-sub">
-            <el-menu-item
+                <div
                  v-for="child in nav.children"
                  :key="child.id"
-              :index="child.url"
+                  class="nav-item nav-item--child"
                  :class="{'nav-item--active': activeIndex === getTargetUrl(child)}"
                  @click="handleNavClick(child)"
                >
-              <el-icon :size="18">
+                  {{ child.label }}
-                <component :is="getIconComponent(child.label)" />
+                </div>
-              </el-icon>
+              </div>
-              <span>{{ child.label }}</span>
+            </div>
-            </el-menu-item>
+            <!-- 无子菜单 -->
-          </el-sub-menu>
+            <div
-
+              v-else
-          <el-menu-item v-else :index="nav.url">
+              class="nav-item"
-            <el-icon :size="18">
+              :class="{'nav-item--active': activeIndex === getTargetUrl(nav)}"
-              <component :is="getIconComponent(nav.label)" />
+              @click="handleNavClick(nav)"
-            </el-icon>
+            >
-            <span>{{ nav.label }}</span>
+              <span class="nav-label">{{ nav.label }}</span>
-          </el-menu-item>
+            </div>
          </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>
    <!-- ==================== Content 内容区域 ==================== -->
    <div class="mobile-content">
      <router-view v-slot="{Component}">
        <keep-alive include="New">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
    <!-- ==================== Footer 底部 ==================== -->
    <div class="mobile-footer">
      <div class="footer-info">
        <span>Copyright © 2023.Rangu Technology Co.,Ltd.</span>
        <span>燃谷科技（南京）有限公司</span>
      </div>
      <div class="footer-beian" @click="toMIIF">苏ICP备2023030548号-1</div>
    </div>
  </div>
 </template>
 <style lang="scss" scoped>
-.app-layout {
+// ==================== 布局容器 ====================
-  display: flex;
+.mobile-layout {
  height: 100vh;
  width: 100%;
-  overflow: hidden;
+  max-width: 100vw;
-  background-color: #f0f2f5;
+  min-height: 100vh;
  .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;
+  background-color: white;
    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 默认样式
+// ==================== Header ====================
-      :deep(.el-menu) {
+.mobile-header {
-        border-right: none;
+  position: fixed;
-        background-color: transparent;
+  top: 0;
-      }
+  left: 0;
-
+  width: 100%; /* no */
-      :deep(.el-menu--collapse) {
+  max-width: 100vw;
-        width: 54px;
+  height: 44px; /* no */
-      }
+  background-color: $bg_color;
-
+  z-index: 110;
      :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;
+  padding: 0 10px; /* no */
  box-sizing: border-box;
  .header-menu-icon {
    color: $white;
    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 {
+  .header-logo {
-        font-size: 18px;
+    background-image: url('/static/images/header/logo.png');
-      }
+    background-size: contain;
-    }
+    background-repeat: no-repeat;
-  }
+    background-position: center;
-
+    width: 100px;
-  .main-content {
+    height: 32px; /* no */
-    flex: 1;
+    cursor: pointer;
-    margin-left: 160px;
+    flex-shrink: 0;
    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"] {
+.sidebar-mask {
-  margin-left: 54px !important;
+  position: fixed;
-  width: calc(100% - 54px) !important; /* no */
+  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
 }
-.fade-enter-active,
+.mask-fade-enter-active,
-.fade-leave-active {
+.mask-fade-leave-active {
  transition: opacity 0.3s ease;
 }
-
+.mask-fade-enter-from,
-.fade-enter-from,
+.mask-fade-leave-to {
 .fade-leave-to {
  opacity: 0;
 }
 // ==================== 侧边栏（浮动层） ====================
 .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 160px; /* no */
  height: 100%;
  background-color: $bg_color;
  z-index: 105;
  overflow-y: auto;
  padding-top: 56px; /* no */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); /* no */
 }
 .sidebar-slide-enter-active,
 .sidebar-slide-leave-active {
  transition: transform 0.3s ease;
 }
 .sidebar-slide-enter-from,
 .sidebar-slide-leave-to {
  transform: translateX(-100%);
 }
 .sidebar-nav {
  padding: 0;
 }
 .nav-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* no */
 }
 .nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px; /* no */
  cursor: pointer;
  color: #999999;
  font-size: 14px;
  transition: all 0.2s ease;
  user-select: none;
  &:active {
    background-color: rgba(255, 255, 255, 0.05);
  }
  &--active {
    color: $white;
  }
  &--parent {
    font-weight: 500;
  }
  &--expanded {
    color: $white;
  }
  &--child {
    padding-left: 32px; /* no */
    font-size: 13px;
  }
  .nav-label {
    flex: 1;
  }
  .nav-arrow {
    color: #999999;
    flex-shrink: 0;
  }
 }
 .nav-sub {
  overflow: hidden;
 }
 // ==================== Content 内容区域 ====================
 .mobile-content {
  margin-top: 44px; /* no */
  flex: 1;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
 }
 // ==================== Footer 底部 ====================
 .mobile-footer {
  width: 100%;
  max-width: 100vw;
  padding: 20px 16px; /* no */
  box-sizing: border-box;
  text-align: center;
  background-color: $bg_color;
  .footer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #999999;
    font-size: 12px;
    margin-bottom: 8px;
  }
  .footer-beian {
    color: #0056b3;
    font-size: 11px;
    cursor: pointer;
  }
 }
 </style>
--- a/src/views/layout/pc/footer/components/nav.vue
+++ b/src/views/layout/pc/footer/components/nav.vue
@ -7,24 +7,26 @@ const navStore = useNavStore()
 const router = useRouter()
 const footerNav = ref([])
 const emit = defineEmits(['downloadClick'])
 onMounted(() => {
  footerNav.value = window.nav.footer
 })
-const navClick = (url) => {
+const navClick = (node) => {
-  navStore.changeNavIndex(url)
+  if (node.downloadType) {
-  router.push(url)
+    emit('downloadClick', node.downloadType)
    return
  }
  if (!node.url) return
  navStore.changeNavIndex(node.url)
  router.push(node.url)
 }
 </script>
 <template>
  <ul class="footer-nav flex j-s">
-    <NavNode
+    <NavNode v-for="node in footerNav" :key="node.id" :node="node" @nav-click="navClick" />
      v-for="node in footerNav"
      :key="node.id"
      :node="node"
      @nav-click="navClick"
    />
  </ul>
 </template>
--- a/src/views/layout/pc/footer/components/navNode.vue
+++ b/src/views/layout/pc/footer/components/navNode.vue
@ -8,12 +8,12 @@ defineProps({
 const emits = defineEmits(['navClick'])
-const onClick = (url) => emits('navClick', url)
+const onClick = (node) => emits('navClick', node)
 </script>
 <template>
  <li class="footer-nav__item">
-    <div class="item-label" @click="onClick(node.url)">
+    <div class="item-label" @click="onClick(node)">
      {{ node.label }}
    </div>
@ -41,8 +41,8 @@ const onClick = (url) => emits('navClick', url)
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
-      -webkit-transform: translateY(-8px);
+      -webkit-transform: translateY(-2px);
-      transform: translateY(-8px);
+      transform: translateY(-2px);
    }
  }
 }
--- a/src/views/layout/pc/footer/index.vue
+++ b/src/views/layout/pc/footer/index.vue
@ -3,6 +3,21 @@ import {ref, onMounted} from 'vue'
 import Logo from './components/logo.vue'
 import Nav from './components/nav.vue'
 import QRCode from './components/QRCode.vue'
 import DownloadImg from '@/components/downloadImg/index.vue'
 import {ElMessage} from 'element-plus'
 const imgType = ref('ios')
 const showImgType = ref(false)
 const handleDownloadClick = (type) => {
  if (type === 'pc') {
    ElMessage.warning('敬请期待！')
    return
  }
  imgType.value = type
  showImgType.value = true
 }
 onMounted(() => {})
 const toMIIF = () => {
@ -16,7 +31,7 @@ const toMIIF = () => {
    <Logo id="logo" />
    <!-- 内容 -->
-    <Nav id="nav" />
+    <Nav id="nav" @download-click="handleDownloadClick" />
    <!-- 二维码 -->
    <QRCode id="QR" />
@ -29,6 +44,8 @@ const toMIIF = () => {
      <span class="url" @click="toMIIF">苏ICP备2023030548号-1</span>
      <span class="url" @click="toMIIF">苏ICP备2023030548号-5</span>
    </div>
    <DownloadImg :type="imgType" v-model="showImgType" />
  </div>
 </template>
--- a/src/views/layout/pc/header/nav.vue
+++ b/src/views/layout/pc/header/nav.vue
@ -1,19 +1,39 @@
 <script setup>
 import {ref, onMounted, watch, onUnmounted} from 'vue'
 import {useRouter} from 'vue-router'
 import {useNavStore} from '@/store/nav'
 import {storeToRefs} from 'pinia'
 // Store 相关
 const navStore = useNavStore()
 const {navIndex} = storeToRefs(navStore)
 const router = useRouter()
 // 响应式数据
 const navList = ref([])
 const activeIndex = ref('/')
 // 根据 url 查找导航项（含子级）
 const findNavItem = (url) => {
  for (const nav of navList.value) {
    if (nav.url === url && !nav.hasChildren) return nav
    if (nav.children) {
      const child = nav.children.find((c) => c.url === url)
      if (child) return child
    }
  }
  return null
 }
 // 处理导航选择
 const handleSelect = (key) => {
  const navItem = findNavItem(key)
  if (navItem?.open) {
    window.open(navItem.url)
    return
  }
  navStore.changeNavIndex(key)
  router.push(key)
 }
 // 监听 store 中的 navIndex 变化
@ -47,33 +67,20 @@ onUnmounted(() => {
      active-text-color="#FFFFFF"
      text-color="#999999"
      background-color="$bg_color"
      router
    >
      <template v-for="nav in navList" :key="nav.id">
        <!-- 有子菜单的情况 -->
-        <el-sub-menu
+        <el-sub-menu v-if="nav.hasChildren || nav?.children?.length > 0" :index="nav.url" popper-class="pepper">
          v-if="nav.hasChildren || nav?.children?.length > 0"
          :index="nav.url"
          popper-class="pepper"
        >
          <template #title>
            <span>{{ nav.label }}</span>
          </template>
-          <el-menu-item
+          <el-menu-item v-for="child in nav.children" :key="child.id" :index="child.url">
            v-for="child in nav.children"
            :key="child.id"
            :index="child.url"
          >
            {{ child.label }}
          </el-menu-item>
        </el-sub-menu>
        <!-- 无子菜单的情况 -->
-        <el-menu-item
+        <el-menu-item v-else :index="nav.url" :class="{'is-active': activeIndex === nav.url}">
          v-else
          :index="nav.url"
          :class="{'is-active': activeIndex === nav.url}"
        >
          {{ nav.label }}
        </el-menu-item>
      </template>
--- a/src/views/link/mobile.vue
+++ b/src/views/link/mobile.vue
@ -1,376 +0,0 @@
 <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>
--- a/src/views/mobile/about/index.vue
+++ b/src/views/mobile/about/index.vue
@ -0,0 +1,85 @@
 <script setup>
 import {ref, onMounted, getCurrentInstance} from 'vue'
 import Swiper from '@/components/Swiper/mobile/index.vue'
 import Banner from '@/components/Banner/index.vue'
 const instance = getCurrentInstance()
 const $fontSize = instance.appContext.config.globalProperties.$fontSize
 const introduction = '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。'
 const currentPage = ref(1)
 const imgList = [
  {id: 1, width: 140, height: 90, list: ['main/1.png','main/2.png','main/3.png','main/4.png']},
  {id: 2, width: 100, height: 145, list: ['main/5.png','main/6.png','main/7.png','main/8.png','main/9.png']},
  {id: 3, width: 100, height: 145, list: ['main/10.png','main/11.png','main/12.png','main/13.png','main/14.png']},
  {id: 4, width: 100, height: 145, list: ['main/15.png','main/16.png','main/17.png','main/18.png','main/19.png']},
  {id: 5, width: 100, height: 145, list: ['main/20.png','main/21.png']},
 ]
 </script>
 <template>
  <div class="page">
    <Banner class="banner" img="banner/about.png" />
    <!-- 关于燃谷 -->
    <div class="section">
      <h2 class="section-title">关于燃谷</h2>
      <div class="about-box">
        <img class="about-img" src="/static/images/main/rangu.png" />
        <p class="about-text">{{ introduction }}</p>
      </div>
    </div>
    <!-- 资质证书 -->
    <div class="section">
      <h2 class="section-title">资质证书</h2>
      <div class="cert-grid">
        <div v-for="listItem in imgList" :key="listItem.id" class="cert-row" :class="{'cert-row--few': listItem.list.length <= 4}">
          <div v-for="(img, idx) in listItem.list" :key="idx">
            <img
              :style="{width: $fontSize(listItem.width) + 'px', height: $fontSize(listItem.height) + 'px', margin: '3px'}"
              :src="`./static/images/${img}`"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>
 <style lang="scss" scoped>
 .page { width: 100%; }
 .section {
  padding: 0 12px;
  .section-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 16px;
  }
 }
 .about-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  .about-img { width: 80%; height: auto; }
  .about-text { font-size: 14px; line-height: 28px; color: #333; text-align: left; }
 }
 .cert-grid {
  .cert-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .cert-row--few {
    justify-content: center;
  }
 }
 </style>
--- a/src/views/mobile/download/index.vue
+++ b/src/views/mobile/download/index.vue
@ -0,0 +1,158 @@
 <script setup>
 import {ref, onMounted} from 'vue'
 import Swiper from '@/components/Swiper/mobile/index.vue'
 import {downloadFile, downloadList} from '@/api'
 import Banner from '@/components/Banner/index.vue'
 import DownloadImg from '@/components/downloadImg/index.vue'
 import {ElMessage} from 'element-plus'
 const currentAppPage = ref(1)
 const currentFilePage = ref(1)
 const list = ref(null)
 const imgType = ref('ios')
 const showImgType = ref(false)
 onMounted(() => getList())
 const transform = (items) => {
  const root = {children: []}
  const getOrCreateFolder = (parent, name, fullPath) => {
    let folder = parent.children.find((child) => child.name === name && child.type === 'folder')
    if (!folder) {
      folder = {name, type: 'folder', children: [], fullPath}
      parent.children.push(folder)
    }
    return folder
  }
  items.forEach((item) => {
    const parts = item.Key.split('/')
    if (parts.length === 1) {
      root.children.push({name: parts[0], type: 'file', etag: item.ETag, size: item.Size, lastModified: item.LastModifiedDateTime, fullPath: item.Key})
    } else {
      let currentParent = root, currentPath = ''
      for (let i = 0; i < parts.length - 1; i++) {
        currentPath += (currentPath ? '/' : '') + parts[i]
        currentParent = getOrCreateFolder(currentParent, parts[i], currentPath + '/')
      }
      currentParent.children.push({name: parts[parts.length - 1], type: 'file', etag: item.ETag, size: item.Size, lastModified: item.LastModifiedDateTime, fullPath: item.Key})
    }
  })
  return root.children
 }
 const treeProps = {children: 'children', label: 'name'}
 const formatSize = (bytes) => {
  if (!bytes) return ''
  const units = ['B', 'KB', 'MB', 'GB']
  let i = 0, size = bytes
  while (size >= 1024 && i < units.length - 1) { size /= 1024; i++ }
  return size.toFixed(2) + ' ' + units[i]
 }
 const getList = () => {
  downloadList({recursive: true, version: true, prefix: '', bucket: ''})
    .then((res) => { if (res.code == 0 && res?.data?.length > 0) list.value = transform(res.data) })
    .catch(() => {})
 }
 const downloadFileFN = (data) => {
  downloadFile({bucket: '', objname: data.fullPath, expiresMinutes: 60, isDownload: true})
    .then((res) => { if (res.code === 0 && res.data) window.open(res.data) })
    .catch(() => {})
 }
 const showMsg = () => ElMessage.warning('敬请期待！')
 const openImg = (type) => { imgType.value = type; showImgType.value = true }
 </script>
 <template>
  <div class="page">
    <Banner class="banner" img="banner/download.png" />
    <!-- App 下载区 -->
    <div class="section">
      <h2 class="section-title">资源下载</h2>
      <div class="app-row">
        <div class="app-card" @click="openImg('ios')">
          <img src="/static/images/download/ios.png" />
        </div>
        <div class="app-card" @click="openImg('android')">
          <img src="/static/images/download/android.png" />
        </div>
        <div class="app-card" @click="showMsg">
          <img src="/static/images/download/windows.png" />
        </div>
      </div>
    </div>
    <!-- 文件下载区 -->
    <div class="section">
      <h2 class="section-title">文件下载</h2>
      <div class="file-list">
        <el-tree v-if="list && list.length" :data="list" :props="treeProps" accordion node-key="name" default-expand-all>
          <template #default="{data}">
            <div class="tree-node">
              <span class="node-label">{{ data.name }}</span>
              <template v-if="data.type === 'file'">
                <span class="file-size">{{ formatSize(data.size) }}</span>
                <svg class="download-icon" @click.stop="downloadFileFN(data)" viewBox="0 0 24 24" fill="none"><path d="M12 3V15M12 15L8 11M12 15L16 11" stroke="#4A90D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 17V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17" stroke="#4A90D9" stroke-width="2" stroke-linecap="round"/></svg>
              </template>
            </div>
          </template>
        </el-tree>
        <div v-else class="empty-tip">暂无下载资源</div>
      </div>
    </div>
    <DownloadImg :type="imgType" v-model="showImgType" />
  </div>
 </template>
 <style lang="scss" scoped>
 .page { width: 100%; }
 .section {
  padding: 0 12px;
  .section-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 16px;
  }
 }
 .app-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  .app-card {
    width: 100px;
    height: 120px;
    img { width: 100%; height: 100%; object-fit: contain; }
  }
 }
 .file-list {
  width: 100%;
  max-height: 400px;
  border: 1px solid #e5e5e5;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  .empty-tip { text-align: center; color: #999; font-size: 14px; padding: 30px 0; }
 }
 .tree-node {
  display: flex; align-items: center; width: 100%; padding: 4px 0; gap: 6px;
  .node-label { flex: 1; font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-size { font-size: 11px; color: #999; white-space: nowrap; min-width: 60px; text-align: right; }
  .download-icon { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
 }
 ::v-deep(.el-tree) {
  background: transparent;
  .el-tree-node__content { height: auto; padding: 4px 0; }
 }
 </style>
--- a/src/views/mobile/homepage/index.vue
+++ b/src/views/mobile/homepage/index.vue
@ -0,0 +1,176 @@
 <script setup>
 import {ref} from 'vue'
 import {useRouter} from 'vue-router'
 import Swiper from '@/components/Swiper/mobile/index.vue'
 import {useHomepage} from '@/views/pc/homepage/composable.js'
 import {cryptoEncrypt} from '@/utils/cryptojs'
 const router = useRouter()
 const {currentPage, videoLoaded, list, onVideoLoaded, goToFeatural} = useHomepage()
 const videoRef = ref(null)
 function handleVideoLoaded() {
  onVideoLoaded()
  if (videoRef.value) {
    videoRef.value.play().catch(() => {})
  }
 }
 function toUrl(item) {
  router.push({
    path: '/m/product/detail',
    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
 }
 </script>
 <template>
  <div class="page" v-loading="videoLoaded">
    <!-- 视频 Banner -->
    <div class="banner">
      <video
        ref="videoRef"
        autoplay
        muted
        loop
        playsinline
        webkit-playsinline
        preload="auto"
        disablePictureInPicture
        controlslist="nodownload nofullscreen noremoteplayback"
        @loadeddata="handleVideoLoaded"
      >
        <source src="/static/video/display.mp4" type="video/mp4" />
      </video>
      <div class="banner-link" @click="goToFeatural">
        <span>演示系统</span>
      </div>
    </div>
    <!-- 产品体系 Swiper -->
    <Swiper
      id="home_swiper"
      title="产品体系"
      v-model="currentPage"
      :data="list"
      :page-size="1"
      :show-pagination="true"
      :show-hover="false"
      :source-width="280"
      :source-height="320"
      :auto-play="true"
    >
      <template #default="{item}">
        <div class="card-item" @click="toUrl(item)">
          <div class="card-header">{{ item.title }}</div>
          <div class="card-body">
            <img :src="`./static/images/${item.imgUrl}`" />
          </div>
        </div>
      </template>
    </Swiper>
  </div>
 </template>
 <style lang="scss" scoped>
 .page {
  width: 100%;
  // ==================== Banner ====================
  .banner {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #333;
    margin-bottom: 10px;
    video {
      width: 100%;
      height: auto;
      display: block;
      // 屏蔽移动端浏览器注入的默认播放控件
      &::-webkit-media-controls {
        display: none !important;
      }
      &::-webkit-media-controls-panel {
        display: none !important;
      }
      &::-webkit-media-controls-play-button {
        display: none !important;
      }
      &::-webkit-media-controls-start-playback-button {
        display: none !important;
      }
      &::-webkit-media-controls-timeline {
        display: none !important;
      }
      &::-webkit-media-controls-current-time-display,
      &::-webkit-media-controls-time-remaining-display {
        display: none !important;
      }
      &::-webkit-media-controls-fullscreen-button {
        display: none !important;
      }
    }
    &-link {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 24px;
      border: 1px solid #1fe1ff;
      border-radius: 8px;
      cursor: pointer;
      white-space: nowrap;
      span {
        font-weight: 600;
        font-size: 14px;
        color: $white;
        letter-spacing: 0.06em;
      }
    }
  }
  // ==================== 产品卡片 ====================
  .card-item {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    .card-header {
      height: 60px;
      line-height: 60px;
      background-color: #0389ff;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      flex-shrink: 0;
    }
    .card-body {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: #fff;
      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
 }
 </style>
--- a/src/views/mobile/link/index.vue
+++ b/src/views/mobile/link/index.vue
@ -0,0 +1,66 @@
 <script setup>
 import {ref, onMounted} from 'vue'
 import Banner from '@/components/Banner/index.vue'
 const toCompany = () => {
  window.open('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')
 }
 </script>
 <template>
  <div class="page">
    <Banner class="banner" img="banner/link.png" />
    <div class="section">
      <h2 class="section-title">联系我们</h2>
      <div class="link-box">
        <div class="info-list">
          <div class="info-item name">燃谷科技（南京）有限公司</div>
          <div class="info-item">电话：13222013393</div>
          <div class="info-item">邮箱：company@rangutech.com</div>
          <div class="info-item">地址：江苏省南京市鼓楼区万谷硅巷5F</div>
        </div>
        <img class="map-img" src="/static/images/link/map.png" @click="toCompany" />
      </div>
    </div>
  </div>
 </template>
 <style lang="scss" scoped>
 .page { width: 100%; }
 .section {
  padding: 0 12px;
  .section-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 16px;
  }
 }
 .link-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  .info-list {
    .info-item {
      font-size: 14px;
      line-height: 2;
      color: #333;
    }
    .name {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .map-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
 }
 </style>
--- a/src/views/mobile/news/detail.vue
+++ b/src/views/mobile/news/detail.vue
@ -0,0 +1,95 @@
 <script setup>
 import {onMounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {ElMessage} from 'element-plus'
 import {getNewsDetail} from '@/api/index'
 const route = useRoute()
 const detail = route.query
 const showLoad = ref(true)
 const newsTitle = ref('')
 const newsTime = ref('')
 const newsSubTitle = ref('')
 const newsContent = ref(null)
 const router = useRouter()
 onMounted(() => getDetail())
 const getDetail = () => {
  getNewsDetail({slug: detail.slug})
    .then((res) => {
      if (res.code === 0) {
        let {content, snapshot, datetime, title} = res.data
        newsTitle.value = title
        newsTime.value = datetime
        newsSubTitle.value = snapshot
        newsContent.value = content
        showLoad.value = false
      } else {
        ElMessage.error(res.msg)
        showLoad.value = false
      }
    })
    .catch(() => { showLoad.value = false })
 }
 const toBack = () => {
  router.push('/m/news')
 }
 </script>
 <template>
  <div class="page" v-loading="showLoad">
    <template v-if="newsTitle">
      <h2 class="title">{{ newsTitle }}</h2>
      <p class="time" v-if="newsTime">{{ newsTime }}</p>
      <div class="article" v-html="newsContent"></div>
    </template>
    <div v-else class="no-content">暂无内容</div>
    <div class="back-btn" @click="toBack">返回</div>
  </div>
 </template>
 <style lang="scss" scoped>
 .page {
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  .title {
    text-align: center;
    margin: 24px 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
  }
  .time {
    text-align: center;
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
  }
  .article {
    width: 100%;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    :deep(img) { max-width: 100%; height: auto; }
  }
  .no-content { text-align: center; color: #999; font-size: 16px; padding: 40px 0; }
  .back-btn {
    margin: 32px auto 40px;
    width: 120px;
    padding: 10px 0;
    text-align: center;
    background: #0389ff;
    border-radius: 16px;
    font-size: 16px;
    color: #fff;
  }
 }
 </style>
--- a/src/views/mobile/news/index.vue
+++ b/src/views/mobile/news/index.vue
@ -0,0 +1,107 @@
 <script setup>
 import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
 import Banner from '@/components/Banner/index.vue'
 import {useRouter} from 'vue-router'
 import {getNews} from '@/api/index'
 const showLoad = ref(true)
 const newList = ref([])
 const page = ref({pageNum: 1, pageSize: 10, totalPages: 0})
 let scrollTop = 0
 const router = useRouter()
 onMounted(() => getNewList())
 async function getNewList() {
  getNews({status: 'published', page: page.value.pageNum, page_size: page.value.pageSize})
    .then((res) => { if (res.code === 0) { newList.value = res.data; page.value.totalPages = res.pagination.total_pages } })
    .catch(() => {})
    .finally(() => { showLoad.value = false })
 }
 const toDetail = (item) => {
  router.push({path: '/m/news/detail', query: {id: item.id, slug: item.slug}})
 }
 onActivated(async () => {
  await nextTick()
  requestAnimationFrame(() => { window.scrollTo({top: scrollTop, behavior: 'instant'}) })
 })
 onDeactivated(() => { scrollTop = document.documentElement.scrollTop || document.body.scrollTop })
 </script>
 <template>
  <div class="page" v-loading="showLoad">
    <Banner class="banner" img="banner/news.png" />
    <div class="section">
      <h2 class="section-title">新闻中心</h2>
      <template v-if="newList.length > 0">
        <div class="news-list">
          <div class="news-card" v-for="item in newList" :key="item.id" @click="toDetail(item)">
            <div class="news-img">
              <img :src="item.cover_image" />
            </div>
            <div class="news-body">
              <div class="news-title">{{ item.title }}</div>
              <div class="news-time">{{ item?.time }}</div>
              <div class="news-desc">{{ item.snapshot }}</div>
            </div>
          </div>
        </div>
      </template>
      <div v-else class="no-content">暂无内容</div>
    </div>
  </div>
 </template>
 <style lang="scss" scoped>
 .page { width: 100%; }
 .section {
  padding: 0 12px;
  .section-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 16px;
  }
 }
 .news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
 }
 .news-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  .news-img {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
    img { width: 100%; height: 100%; object-fit: cover; }
  }
  .news-body {
    flex: 1;
    overflow: hidden;
    .news-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .news-time { font-size: 11px; color: #999; margin-bottom: 4px; }
    .news-desc { font-size: 12px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  }
 }
 .no-content { text-align: center; color: #999; font-size: 16px; padding: 40px 0; }
 </style>
--- a/src/views/mobile/product/detail.vue
+++ b/src/views/mobile/product/detail.vue
@ -0,0 +1,175 @@
 <script setup>
 import {ref, onMounted} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {cryptoDecrypt} from '@/utils/cryptojs.js'
 const route = useRoute()
 const router = useRouter()
 const query = JSON.parse(cryptoDecrypt(route.query.type))
 const advantages = window.advantages
 const videoLoaded = ref(false)
 onMounted(() => {
  videoLoaded.value = query.type !== 'softwareSystem' ? false : true
 })
 function onVideoLoaded() {
  videoLoaded.value = false
 }
 function toBack() {
  if (query.type === 'hardwareSystem') {
    router.push('/m/product/hardwareSystem')
  } else if (query.type === 'softwareSystem') {
    router.push('/m/product/softwareSystem')
  } else {
    router.back()
  }
 }
 </script>
 <template>
  <div class="page" v-loading="videoLoaded">
    <h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>
    <!-- ============== 硬件详情 ============== -->
    <template v-if="query.type === 'hardwareSystem'">
      <div class="hardware-section">
        <img class="hardware-img" :src="`./static/images/${query.imgUrl}`" alt="" />
        <div class="advantage-box">
          <h4 class="advantage-title">核心优势</h4>
          <div class="advantage-text" v-html="advantages"></div>
        </div>
      </div>
      <div class="desc-box" v-html="query.description"></div>
    </template>
    <!-- ============== 软件详情 ============== -->
    <template v-else>
      <div class="software-section">
        <video autoplay muted loop playsinline @loadeddata="onVideoLoaded" v-show="!videoLoaded">
          <source :src="`./static/video/${query.video}`" type="video/mp4" />
        </video>
        <div class="desc-box" v-html="query.description"></div>
      </div>
      <div class="card-grid" v-if="query.card">
        <div class="card" v-for="item in query.card" :key="item.id">
          <h4 class="card-title">{{ item.title }}</h4>
          <p class="card-text">{{ item.content }}</p>
        </div>
      </div>
    </template>
    <div class="back-btn" @click="toBack">返回</div>
  </div>
 </template>
 <style lang="scss" scoped>
 .page {
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
 }
 .label {
  margin: 24px 0 16px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
 }
 // ============== 硬件区域 ==============
 .hardware-section {
  .hardware-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .advantage-box {
    margin-top: 16px;
    padding: 12px;
    background: #f5f7fa;
    border-radius: 8px;
    .advantage-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .advantage-text {
      font-size: 14px;
      line-height: 1.8;
      color: #333;
    }
  }
 }
 // ============== 软件区域 ==============
 .software-section {
  video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
  }
 }
 // ============== 描述文案 ==============
 .desc-box {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
 }
 // ============== 功能卡片 ==============
 .card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
 }
 .card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  .card-title {
    background-color: #0389ff;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 10px 0;
  }
  .card-text {
    font-size: 12px;
    padding: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #666;
  }
 }
 // ============== 返回按钮 ==============
 .back-btn {
  margin: 32px auto 40px;
  width: 120px;
  padding: 10px 0;
  text-align: center;
  background: #0389ff;
  border-radius: 16px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
 }
 </style>
--- a/src/views/mobile/product/hardwareSystem.vue
+++ b/src/views/mobile/product/hardwareSystem.vue
@ -0,0 +1,105 @@
 <script setup>
 import {ref, onMounted, computed} from 'vue'
 import Swiper from '@/components/Swiper/mobile/index.vue'
 import Banner from '@/components/Banner/index.vue'
 import {findLabelByUrl} from '@/utils'
 import {cryptoEncrypt} from '@/utils/cryptojs'
 import {useNavStore} from '@/store/nav'
 import {useRouter} from 'vue-router'
 const navStore = useNavStore()
 const router = useRouter()
 const hardwareSystemList = window.hardwareSystemList
 const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
 const currentPage = ref(1)
 function titleClick(item) {
  router.push({
    path: '/m/product/detail',
    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
 }
 </script>
 <template>
  <div class="page">
    <Banner class="banner" img="banner/product.png" />
    <Swiper
      id="one"
      :title="title"
      v-model="currentPage"
      :data="hardwareSystemList"
      :page-size="1"
      :show-pagination="true"
      :show-hover="false"
      :auto-play="false"
      :source-width="300"
      :source-height="360"
      :source-gap="20"
    >
      <template #default="{item}">
        <div class="card-item" @click="titleClick(item)">
          <div class="card-header">
            <div class="card-title">{{ item.title }}</div>
            <div class="card-subtitle">{{ item.subTitle }}</div>
          </div>
          <div class="card-body">
            <img :src="`./static/images/${item.imgUrl}`" class="card-img" />
          </div>
        </div>
      </template>
    </Swiper>
  </div>
 </template>
 <style lang="scss" scoped>
 .page {
  width: 100%;
 }
 .card-item {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  .card-header {
    background-color: #0389ff;
    color: #fff;
    padding: 12px 0;
    text-align: center;
    flex-shrink: 0;
    .card-title {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .card-subtitle {
      font-size: 12px;
      margin-top: 4px;
      opacity: 0.85;
    }
  }
  .card-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
    .card-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
 }
 </style>
--- a/src/views/mobile/product/softwareSystem.vue
+++ b/src/views/mobile/product/softwareSystem.vue
@ -0,0 +1,103 @@
 <script setup>
 import {ref, computed} from 'vue'
 import Swiper from '@/components/Swiper/mobile/index.vue'
 import Banner from '@/components/Banner/index.vue'
 import {findLabelByUrl} from '@/utils'
 import {cryptoEncrypt} from '@/utils/cryptojs'
 import {useNavStore} from '@/store/nav'
 import {useRouter} from 'vue-router'
 const navStore = useNavStore()
 const router = useRouter()
 const softwareSystemList = window.softwareSystemList
 const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
 const currentPage = ref(1)
 function titleClick(item) {
  router.push({
    path: '/m/product/detail',
    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
 }
 </script>
 <template>
  <div class="page">
    <Banner class="banner" img="banner/product.png" />
    <Swiper
      id="one"
      :title="title"
      v-model="currentPage"
      :data="softwareSystemList"
      :page-size="1"
      :show-pagination="true"
      :show-hover="false"
      :auto-play="false"
      :source-width="300"
      :source-height="360"
      :source-gap="20"
    >
      <template #default="{item}">
        <div class="card-item" @click="titleClick(item)">
          <div class="card-header">{{ item.title }}</div>
          <div class="card-body">
            <img :src="`./static/images/${item.imgUrl}`" class="card-img" />
          </div>
        </div>
      </template>
    </Swiper>
  </div>
 </template>
 <style lang="scss" scoped>
 .page {
  width: 100%;
 }
 .card-item {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  .card-header {
    background-color: #0389ff;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 0;
    flex-shrink: 0;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #333;
    }
  }
  .card-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
    .card-img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
 }
 </style>
--- a/src/views/mobile/services/index.vue
+++ b/src/views/mobile/services/index.vue
@ -0,0 +1,6 @@
 <script setup>
 import PcIndex from '@/views/pc/services/index.vue'
 </script>
 <template>
  <PcIndex />
 </template>
--- a/src/views/news/mobile.vue
+++ b/src/views/news/mobile.vue
@ -1,283 +0,0 @@
 <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>
--- a/src/views/pc/about/index.vue
+++ b/src/views/pc/about/index.vue
@ -1,6 +1,6 @@
 <script setup>
 import {ref, onMounted, getCurrentInstance} from 'vue'
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import Banner from '@/components/Banner/index.vue'
 const instance = getCurrentInstance()
--- a/src/views/pc/download/index.vue
+++ b/src/views/pc/download/index.vue
@ -0,0 +1,402 @@
 <script setup>
 import {ref, onMounted} from 'vue'
 import Swiper from '@/components/Swiper/pc/index.vue'
 import {downloadFile, downloadList} from '@/api'
 import Banner from '@/components/Banner/index.vue'
 import DownloadImg from '@/components/downloadImg/index.vue'
 import {ElMessage} from 'element-plus'
 const currentPage = ref(1)
 const currentFilePage = ref(1)
 onMounted(() => {
  getList()
 })
 const list = ref(null)
 /**
 * 将带有 Key（路径）的扁平列表转换为树形结构
 * @param {Array} items - 原始数据，每个元素包含 Key, ETag, Size, LastModifiedDateTime 等
 * @returns {Array} 树形数组，每个元素为文件或文件夹节点
 */
 const transform = (items) => {
  const root = {children: []}
  const getOrCreateFolder = (parent, name, fullPath) => {
    let folder = parent.children.find((child) => child.name === name && child.type === 'folder')
    if (!folder) {
      folder = {name, type: 'folder', children: [], fullPath}
      parent.children.push(folder)
    }
    return folder
  }
  items.forEach((item) => {
    const parts = item.Key.split('/')
    if (parts.length === 1) {
      root.children.push({
        name: parts[0],
        type: 'file',
        etag: item.ETag,
        size: item.Size,
        lastModified: item.LastModifiedDateTime,
        fullPath: item.Key,
      })
    } else {
      let currentParent = root
      let currentPath = ''
      for (let i = 0; i < parts.length - 1; i++) {
        const folderName = parts[i]
        currentPath += (currentPath ? '/' : '') + folderName
        currentParent = getOrCreateFolder(currentParent, folderName, currentPath + '/')
      }
      const fileName = parts[parts.length - 1]
      currentParent.children.push({
        name: fileName,
        type: 'file',
        etag: item.ETag,
        size: item.Size,
        lastModified: item.LastModifiedDateTime,
        fullPath: item.Key,
      })
    }
  })
  return root.children
 }
 // el-tree 的 props 配置
 const treeProps = {
  children: 'children',
  label: 'name',
 }
 /**
 * 格式化文件大小
 */
 const formatSize = (bytes) => {
  if (!bytes) return ''
  const units = ['B', 'KB', 'MB', 'GB']
  let i = 0
  let size = bytes
  while (size >= 1024 && i < units.length - 1) {
    size /= 1024
    i++
  }
  return size.toFixed(2) + ' ' + units[i]
 }
 /**
 * 获取下载的文件列表
 */
 const getList = () => {
  let params = {
    recursive: true,
    version: true,
    prefix: '',
    bucket: '',
  }
  downloadList(params)
    .then((res) => {
      console.log(res)
      if (res.code == 0 && res?.data?.length > 0) {
        list.value = transform(res.data)
        console.log('list.value===>', list.value)
      }
    })
    .catch((error) => {
      console.log('error', error)
    })
 }
 /**
 * 下载文件
 */
 const downloadFileFN = (data) => {
  console.log('data===>', data)
  let query = {
    bucket: '',
    objname: data.fullPath,
    expiresMinutes: 60,
    isDownload: true,
  }
  downloadFile(query)
    .then((res) => {
      console.log('res===>', res)
      if (res.code === 0 && res.data) {
        window.open(res.data)
      }
    })
    .catch((err) => {
      console.log('err===>', err)
    })
 }
 // 提示用户敬请期待
 const showMsg = () => {
  ElMessage.warning('敬请期待！')
 }
 const imgType = ref('ios')
 const showImgType = ref(false)
 const openImg = (type) => {
  imgType.value = type
  showImgType.value = true
 }
 </script>
 <template>
  <div class="page">
    <Banner class="banner" img="banner/download.png" />
    <Swiper
      id="one"
      title="资源下载"
      v-model="currentPage"
      :sourceWidth="1200"
      :sourceHeight="400"
      :show-pagination="false"
      :auto-play="false"
      :showHover="false"
    >
      <template #default>
        <div class="my-card flex j-s">
          <div class="img" @click="openImg('ios')">
            <img src="/static/images/download/ios.png" alt="" />
          </div>
          <div class="img" @click="openImg('android')">
            <img src="/static/images/download/android.png" alt="" />
          </div>
          <div class="img" @click="showMsg">
            <img src="/static/images/download/windows.png" alt="" />
          </div>
        </div>
      </template>
    </Swiper>
    <Swiper
      id="file"
      title="文件下载"
      v-model="currentFilePage"
      :sourceWidth="1200"
      :sourceHeight="400"
      :show-pagination="false"
      :auto-play="false"
      :showHover="false"
    >
      <div class="file-list">
        <el-tree
          v-if="list && list.length"
          :data="list"
          :props="treeProps"
          accordion
          node-key="name"
          default-expand-all
        >
          <template #default="{data}">
            <div class="tree-node">
              <!-- 文件夹图标 -->
              <svg
                v-if="data.type === 'folder'"
                class="node-icon folder-icon"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M2 6C2 4.89543 2.89543 4 4 4H9.17157C9.70199 4 10.2107 4.21071 10.5858 4.58579L12 6H20C21.1046 6 22 6.89543 22 8V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6Z"
                  fill="#F7C948"
                  stroke="#E5A800"
                  stroke-width="1.2"
                />
              </svg>
              <!-- 文件图标 -->
              <svg
                v-else
                class="node-icon file-icon"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 2H14.1716C14.702 2 15.2107 2.21071 15.5858 2.58579L19.4142 6.41421C19.7893 6.78929 20 7.29799 20 7.82843V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2Z"
                  fill="#A8C5E0"
                  stroke="#7DA8CC"
                  stroke-width="1.2"
                />
                <path d="M14 2V6C14 7.10457 14.8954 8 16 8H20" stroke="#7DA8CC" stroke-width="1.2" fill="none" />
              </svg>
              <span class="node-label">{{ data.name }}</span>
              <!-- 文件信息（仅文件类型显示） -->
              <template v-if="data.type === 'file'">
                <span class="file-size">{{ formatSize(data.size) }}</span>
                <span class="file-date">{{ data.lastModified }}</span>
                <!-- 下载图标 -->
                <svg
                  class="download-icon"
                  @click.stop="downloadFileFN(data)"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 3V15M12 15L8 11M12 15L16 11"
                    stroke="#4A90D9"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M4 17V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17"
                    stroke="#4A90D9"
                    stroke-width="2"
                    stroke-linecap="round"
                  />
                </svg>
              </template>
            </div>
          </template>
        </el-tree>
        <div v-else class="empty-tip">暂无下载资源</div>
      </div>
    </Swiper>
    <DownloadImg :type="imgType" v-model="showImgType" />
  </div>
 </template>
 <style lang="scss" scoped>
 .my-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .img {
    width: 300px;
    height: 360px;
    padding: 20px;
    box-sizing: border-box;
    img {
      padding: 20px;
      width: 100%;
      height: 100%;
      &:hover {
        cursor: pointer;
        transition: all 0.3s ease;
        transform: translateY(-10px);
      }
    }
  }
 }
 .file-title {
  text-align: center;
  font-family: 'PingFang SC';
  font-weight: 600;
  font-size: 1.5rem;
  color: #333333;
  &::after {
    content: '';
    display: block;
    width: 120px;
    height: 6px;
    background-color: #0389ff;
    position: relative;
    left: 50%;
    top: 20px;
    translate: -50%;
  }
 }
 .file-list {
  width: 1200px;
  max-height: 500px;
  border: 1px solid #e5e5e5;
  margin: 0px auto;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  text-align: left;
  .empty-tip {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 40px 0;
  }
 }
 /* el-tree 节点自定义样式 */
 .tree-node {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 0;
  gap: 8px;
  .node-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .node-label {
    flex: 1;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .file-size {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
  }
  .file-date {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    min-width: 140px;
    text-align: right;
  }
  .download-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.7;
    }
  }
 }
 /* 覆盖 el-tree 默认样式 */
 ::v-deep(.el-tree) {
  background: transparent;
  .el-tree-node__content {
    height: auto;
    padding: 6px 0;
    &:hover {
      background-color: #f5f7fa;
    }
  }
  .el-tree-node__expand-icon {
    color: #666;
  }
 }
 </style>
--- a/src/views/pc/homepage/composable.js
+++ b/src/views/pc/homepage/composable.js
@ -0,0 +1,40 @@
 import {ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {cryptoEncrypt} from '@/utils/cryptojs'
 // 首页公用逻辑和数据
 export function useHomepage() {
  const router = useRouter()
  const swiperWidth = ref(400)
  const swiperHeight = ref(400)
  const currentPage = ref(1)
  const videoLoaded = ref(true)
  const list = [...window.softwareSystemList, ...window.hardwareSystemList]
  function onVideoLoaded() {
    videoLoaded.value = false
  }
  function toUrl(item) {
    router.push({
      path: '/product/detail',
      query: {type: cryptoEncrypt(JSON.stringify(item))},
    })
  }
  function goToFeatural() {
    window.open(window.config.featureUrl)
  }
  return {
    swiperWidth,
    swiperHeight,
    currentPage,
    videoLoaded,
    list,
    onVideoLoaded,
    toUrl,
    goToFeatural,
  }
 }
--- a/src/views/pc/homepage/index.vue
+++ b/src/views/pc/homepage/index.vue
@ -1,5 +1,5 @@
 <script setup>
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import {ref, onMounted} from 'vue'
 import {cryptoEncrypt} from '@/utils/cryptojs'
 import {useRouter} from 'vue-router'
@ -23,6 +23,10 @@ function toUrl(item) {
    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
 }
 function goToFeatural() {
  window.open(window.config.featureUrl)
 }
 </script>
 <template>
@ -31,7 +35,7 @@ function toUrl(item) {
      <video autoplay muted loop @loadeddata="onVideoLoaded">
        <source src="/static/video/display.mp4" type="video/mp4" />
      </video>
-      <div class="banner-link"><span>进入演示系统</span></div>
+      <div class="banner-link" @click="goToFeatural"><span>进入演示系统</span></div>
    </div>
    <Swiper
      id="home_swiper"
--- a/src/views/pc/link/index.vue
+++ b/src/views/pc/link/index.vue
@ -1,6 +1,6 @@
 <script setup>
 import {ref, onMounted} from 'vue'
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import Banner from '@/components/Banner/index.vue'
 // import Map from './map.vue'
--- a/src/views/pc/link/map.vue
+++ b/src/views/pc/link/map.vue
--- a/src/views/pc/news/detail.vue
+++ b/src/views/pc/news/detail.vue
@ -2,8 +2,8 @@
 import {onMounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {getNewsDetail} from '@/api/index'
 import {ElMessage} from 'element-plus'
 import {list as mockList, newsDetail as mockDetail} from './mock.js'
 const route = useRoute()
 const detail = route.query
--- a/src/views/pc/news/index.vue
+++ b/src/views/pc/news/index.vue
@ -2,15 +2,14 @@
 defineOptions({name: 'New'})
 import {ref, onMounted, nextTick, onActivated, onDeactivated, computed} from 'vue'
 import Banner from '@/components/Banner/index.vue'
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import {useRouter} from 'vue-router'
 import {onBeforeRouteLeave} from 'vue-router'
 import {getNews} from '@/api/index'
 import {fontSize} from '@/utils'
 const currentPage = ref(1)
 const showLoad = ref(true)
-const containerWidth = ref(fontSize(1700))
+const containerWidth = ref(1700)
 const containerHeight = computed(() => {
  if (newList.value.length > 0) {
    return 350 * newList.value.length
--- a/src/views/pc/news/mock.js
+++ b/src/views/pc/news/mock.js
@ -1,39 +1,33 @@
 export const list = [
  {
-    id: 1,
+    id: 3,
-    imgUrl: 'news/1.png',
+    title: 'Remote ID与无人机防碰撞技术：从长春航展相撞事件看低空安全未来',
-    label: '低空经济：撬动社会发展的新支点',
+    slug: 'a5caa86d51984028b2b3fca83946e063',
-    time: '2025年9月4日',
+    cover_image: '/api/download/img/007c3bf8e3414783878bb33282088db3.png',
-    subLabel: '',
+    snapshot:
-    content:
+      '2025年9月长春航展上，两架小鹏汇天eVTOL飞行器在编队演练中因间距不足发生接触并起火，虽无人员伤亡，却暴露出低空飞行器在避障能力与空域协同管理上的短板；在此背景下，Remote ID“电子车牌”技术、多源融合的防撞系统以及分层智能监管平台正成为构建低空安全体系的关键支撑，而国家标准GB 42590-2023的实施更标志着我国低空经济正从高速发展迈向安全优先、规范有序的新阶段。',
-      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
+    status: 'published',
    datetime: '2025-09-30',
  },
  {
    id: 2,
-    imgUrl: 'news/2.png',
+    title: '无人机强制国标实施，低空安全监管迎来新篇章',
-    label: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    slug: '4b7573cfbcaa42548fc46fabe060001e',
-    time: '2025年8月29日',
+    cover_image: '/api/download/img/b3d9d7e210f440b781686fa0be228d6a.png',
-    subLabel: '',
+    snapshot:
-    content:
+      '2025年8月，上海环球金融中心400米高空两架无人机相撞坠落，再次暴露“黑飞”乱象；与此同时，我国首部民用无人机强制性国家标准GB 42590-2023已于2024年6月实施，结合远程识别、飞手定位等技术及各地低空监管平台建设，无人机监管正从被动追责转向主动防控，迈向法规与技术协同守护低空安全的新阶段。',
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+    status: 'published',
    datetime: '2025-09-01',
  },
  {
-    id: 3,
+    id: 1,
-    imgUrl: 'news/3.png',
+    title: '低空监管升级！无人机远程识别技术如何守护我们的隐私与安全',
-    label: '关于当前低空经济形势发展的现状',
+    slug: 'bd68b39a096646f189b9b5a2e9efd16c',
-    time: '2025年8月29日',
+    cover_image: '/api/download/img/9dd9f35298e844bda897a9b855bf484b.png',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    snapshot:
-    content:
+      '随着低空经济迅猛发展，无人机在物流、巡检、娱乐等领域广泛应用，但“黑飞”、偷拍、空中碰撞等安全与隐私风险也随之凸显。为应对挑战，公安大学低空安全研究中心推出“无人机广域识别解决方案”，依托国家强制标准Remote ID技术，实现对合作无人机的精准识别、定位与动态追踪。该方案结合低成本被动感知设备与配套预警APP，助力构建空天地一体化的三维监管体系。同时，新规强化飞手责任，严惩瞒报与违规行为。未来，全国低空智联网平台将整合审批、监视与避让技术，推动低空治理从“严控”走向“善管”，在保障安全与隐私的同时，释放低空经济更大潜能。',
-      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
+    status: 'published',
-  },
+    datetime: '2024-06-06',
  {
    id: 4,
    imgUrl: 'news/4.png',
    label: '关于当前低空经济形势发展的现状',
    time: '2025年8月29日',
    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
    content:
      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
  },
 ]
--- a/src/views/pc/product/detail.vue
+++ b/src/views/pc/product/detail.vue
--- a/src/views/pc/product/hardwareSystem.vue
+++ b/src/views/pc/product/hardwareSystem.vue
@ -1,6 +1,6 @@
 <script setup>
 import {ref, onMounted, computed} from 'vue'
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import Banner from '@/components/Banner/index.vue'
 import Project from './project.vue'
--- a/src/views/pc/product/index.vue
+++ b/src/views/pc/product/index.vue
@ -1,6 +1,6 @@
 <script setup>
 import {ref, onMounted} from 'vue'
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import Banner from '@/components/Banner/index.vue'
 const currentPage = ref(1)
--- a/src/views/pc/product/project.vue
+++ b/src/views/pc/product/project.vue
@ -1,5 +1,5 @@
 <script setup>
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import {ref, onMounted} from 'vue'
 onMounted(() => {})
--- a/src/views/pc/product/softwareSystem.vue
+++ b/src/views/pc/product/softwareSystem.vue
@ -1,6 +1,6 @@
 <script setup>
 import {ref, onMounted, computed} from 'vue'
-import Swiper from '@/components/Swiper/index.vue'
+import Swiper from '@/components/Swiper/pc/index.vue'
 import Banner from '@/components/Banner/index.vue'
 import {findLabelByUrl} from '@/utils'
--- a/src/views/pc/services/index.vue
+++ b/src/views/pc/services/index.vue
--- a/src/views/product/detail/mobile.vue
+++ b/src/views/product/detail/mobile.vue
@ -1,774 +0,0 @@
 <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>
--- a/src/views/product/hardwareSystem/mobile.vue
+++ b/src/views/product/hardwareSystem/mobile.vue
@ -1,372 +0,0 @@
 <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>
--- a/src/views/product/softwareSystem/mobile.vue
+++ b/src/views/product/softwareSystem/mobile.vue
@ -1,291 +0,0 @@
 <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>
Author	SHA1	Message	Date
yiqiuyang	c170b31f3a	备份代码	2026-07-31 11:24:03 +08:00
yiqiuyang	4aa7949e48	备份代码	2026-07-30 17:12:26 +08:00
yiqiuyang	661ee7d7a3	1	2026-07-30 16:54:55 +08:00
yiqiuyang	2b9a322335	1	2026-07-30 10:00:57 +08:00
yiqiuyang	5900370c58	1	2026-07-27 10:06:41 +08:00
yiqiuyang	11166cb057	修改布局	2026-07-15 15:05:21 +08:00