备份代码

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
55 changed files with 2565 additions and 351 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: 4, label: '新闻中心', url: '/news', hasChildren: false},
-    {id: 5, label: '关于我们', url: '/about', hasChildren: false},
-    {id: 6, label: '联系我们', url: '/link', hasChildren: false},
+    // {id: 3, label: '服务与支撑', url: '/services', mobileUrl: '/m/services', hasChildren: false},
+    {id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false},
+    {id: 5, label: '关于我们', url: '/about', mobileUrl: '/m/about', 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.2, label: '低空智控中枢', url: '/product/softwareSystem'},
+        {id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem', mobileUrl: '/m/product/hardwareSystem'},
+        {id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem', mobileUrl: '/m/product/softwareSystem'},
      ],
    },
    // {
    //   id: 2,
    //   label: '服务与支撑',
    //   url: '/services',
+    //   mobileUrl: '/m/services',
    //   hasChildren: false,
    // },
-    // {
-    //   id: 3,
-    //   label: '软件下载',
-    //   url: '/download',
-    //   hasChildren: false,
-    // },
-    {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
+    {
+      id: 3,
+      label: '资源下载',
+      url: '/download',
+      hasChildren: true,
+      children: [
+        {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.2, label: '联系我们', url: '/link'},
+        {id: 5.1, label: '公司简介', url: '/about', mobileUrl: '/m/about'},
+        {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 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)
-
-/* -------------------- 方法 -------------------- */
-/**
- * 标题点击事件
- */
-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)
+const {
+  trackRef,
+  itemWidth,
+  itemHeight,
+  itemGap,
+  itemTotalWidth,
+  viewPortWidth,
+  trackWidth,
+  totalPages,
+  clickTitle,
+  goToPage,
+  nextPage,
+  prevPage,
+  handleItemClick,
+  handleItemHover,
+  handleItemHoverLeave,
+} = useSwiper(props, currentPage, emit)
 </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,10 +1,18 @@
 <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 {onMounted, ref, watch} from 'vue'
+import MobileLayout from './views/layout/mobile/index.vue'
 import {visit} from '@/api/index'
 import axios from 'axios'

+// 移动端判断
+const navStore = useNavStore()
+const {isMobile} = storeToRefs(navStore)
+
 const referrer = ref(document.referrer || '')
 const ipUrl = ref('')

@ -12,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)
@ -40,7 +56,6 @@ function postVisit() {
    referrer: referrer.value,
    real_ip: ipUrl.value,
  }
-
  visit(params).then((res) => {})
 }

@ -50,7 +65,8 @@ onMounted(async () => {
 </script>

 <template>
-  <div id="app">
+  <!-- PC端布局 -->
+  <div v-if="!isMobile" id="app">
    <Header id="header" />
    <router-view id="main" v-slot="{Component, title}">
      <keep-alive include="New">
@ -59,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,8 +1,9 @@
 import {createWebHashHistory, createRouter} from 'vue-router'
+import mobileRoutes from './mobile.js'

-import HomeView from '@/views/homepage/index.vue'
+import HomeView from '@/views/pc/homepage/index.vue'

-const routes = [
+const pcRoutes = [
  // ============================================  首页  ============================================
  {path: '/', component: HomeView},

@ -10,7 +11,7 @@ const routes = [
  {
    path: '/product/hardwareSystem',
    name: 'HardwareSystem',
-    component: () => import('@/views/product/hardwareSystem.vue'),
+    component: () => import('@/views/pc/product/hardwareSystem.vue'),
    meta: {
      title: '低空监管体系',
    },
@ -18,7 +19,7 @@ const routes = [
  {
    path: '/product/softwareSystem',
    name: 'SoftwareSystem',
-    component: () => import('@/views/product/softwareSystem.vue'),
+    component: () => import('@/views/pc/product/softwareSystem.vue'),
    meta: {
      title: '低空远程识别设备',
    },
@ -26,7 +27,7 @@ const routes = [
  {
    path: '/product/detail',
    name: 'ProductDetail',
-    component: () => import('@/views/product/detail.vue'),
+    component: () => import('@/views/pc/product/detail.vue'),
    meta: {
      title: '产品详情',
    },
@ -36,7 +37,7 @@ const routes = [
  {
    path: '/services',
    name: 'Services',
-    component: () => import('@/views/services/index.vue'),
+    component: () => import('@/views/pc/services/index.vue'),
    meta: {
      title: '服务与支撑',
    },
@ -46,7 +47,7 @@ const routes = [
  {
    path: '/news',
    name: 'News',
-    component: () => import('@/views/news/index.vue'),
+    component: () => import('@/views/pc/news/index.vue'),
    meta: {
      title: '新闻中心',
    },
@ -54,7 +55,7 @@ const routes = [
  {
    path: '/news/detail',
    name: 'NewsDetail',
-    component: () => import('@/views/news/detail.vue'),
+    component: () => import('@/views/pc/news/detail.vue'),
    meta: {
      title: '新闻详情',
    },
@ -64,7 +65,7 @@ const routes = [
  {
    path: '/about',
    name: 'About',
-    component: () => import('@/views/about/index.vue'),
+    component: () => import('@/views/pc/about/index.vue'),
    meta: {
      title: '关于我们',
    },
@ -74,7 +75,7 @@ const routes = [
  {
    path: '/link',
    name: 'Link',
-    component: () => import('@/views/link/index.vue'),
+    component: () => import('@/views/pc/link/index.vue'),
    meta: {
      title: '联系我们',
    },
@ -84,7 +85,7 @@ const routes = [
  {
    path: '/download',
    name: 'Download',
-    component: () => import('@/views/download/index.vue'),
+    component: () => import('@/views/pc/download/index.vue'),
    meta: {
      title: '下载中心',
    },
@ -100,17 +101,60 @@ const routes = [
  },
 ]

+const routes = [...pcRoutes, ...mobileRoutes]
+
 const router = createRouter({
  history: createWebHashHistory(),
  routes,
 })

-// router.beforeEach(async (to, from, next) => {
-//   const {useNavStore} = await import('@/store/nav.js')
-//   const navStore = useNavStore()
-//   navStore.setLoad(true)
-//   next()
-// })
+// 移动端/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) => {
  // 只有路径变化时才滚动到顶部
--- 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,13 +1,28 @@
 // rem等比适配配置
 // 基准大小
 const baseSize = 16
-// 设计稿宽度
-const designWidth = 1920
+// 设计稿宽度（PC端）
+const pcDesignWidth = 1920
+// 设计稿宽度（移动端）
+const mobileDesignWidth = 375
+// 移动端/PC端断点
+const mobileBreakpoint = 1000
 // 最大缩放比例
 const maxScale = 2

+// 检测是否为移动端
+export function isMobileDevice() {
+  return window.innerWidth < mobileBreakpoint
+}
+
+// 获取当前设计稿宽度
+function getDesignWidth() {
+  return isMobileDevice() ? mobileDesignWidth : pcDesignWidth
+}
+
 // 设置 rem 函数
 function setRem() {
+  const designWidth = getDesignWidth()
  // 当前页面宽度相对于设计稿宽度的缩放比例
  const scale = document.documentElement.clientWidth / designWidth
  // 设置页面根节点字体大小（最高放大比例为maxScale）
@ -18,6 +33,7 @@ function setRem() {
 export function fontSize(res) {
  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return res
+  const designWidth = getDesignWidth()
  const scale = clientWidth / designWidth
  return res * Math.min(scale, maxScale)
 }
--- 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/layout/mobile/index.vue
+++ b/src/views/layout/mobile/index.vue
@ -0,0 +1,321 @@
+<script setup>
+import {ref, onMounted, watch} from 'vue'
+import {useRouter} from 'vue-router'
+import {useNavStore} from '@/store/nav'
+import {storeToRefs} from 'pinia'
+import {Menu, ArrowDown, ArrowRight} from '@element-plus/icons-vue'
+
+const navStore = useNavStore()
+const {navIndex} = storeToRefs(navStore)
+const router = useRouter()
+
+const sidebarVisible = ref(false)
+const navList = ref([])
+const activeIndex = ref('/')
+const expandedSubMenus = ref([])
+
+const toggleSidebar = () => {
+  sidebarVisible.value = !sidebarVisible.value
+}
+
+const closeSidebar = () => {
+  sidebarVisible.value = false
+}
+
+const toggleSubMenu = (navId) => {
+  const idx = expandedSubMenus.value.indexOf(navId)
+  if (idx > -1) {
+    expandedSubMenus.value.splice(idx, 1)
+  } else {
+    expandedSubMenus.value.push(navId)
+  }
+}
+
+const getTargetUrl = (nav) => {
+  return nav.mobileUrl || nav.url
+}
+
+const handleNavClick = (nav) => {
+  if (nav.hasChildren || nav.children?.length > 0) {
+    toggleSubMenu(nav.id)
+    return
+  }
+  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 || []
+})
+
+const toMIIF = () => {
+  window.open('https://beian.miit.gov.cn')
+}
+</script>
+
+<template>
+  <div class="mobile-layout">
+    <!-- ==================== 顶部 Header ==================== -->
+    <div class="mobile-header">
+      <el-icon class="header-menu-icon" :size="22" @click="toggleSidebar">
+        <Menu />
+      </el-icon>
+      <div class="header-logo" @click="router.push('/')"></div>
+    </div>
+
+    <!-- ==================== 侧边栏 ==================== -->
+    <transition name="sidebar-slide">
+      <div v-show="sidebarVisible" class="sidebar">
+        <div class="sidebar-nav">
+          <template v-for="nav in navList" :key="nav.id">
+            <!-- 有子菜单 -->
+            <div v-if="nav.hasChildren || nav.children?.length > 0" class="nav-group">
+              <div
+                class="nav-item nav-item--parent"
+                :class="{'nav-item--expanded': expandedSubMenus.includes(nav.id)}"
+                @click="handleNavClick(nav)"
+              >
+                <span class="nav-label">{{ nav.label }}</span>
+                <el-icon class="nav-arrow" :size="12">
+                  <ArrowDown v-if="expandedSubMenus.includes(nav.id)" />
+                  <ArrowRight v-else />
+                </el-icon>
+              </div>
+              <div v-show="expandedSubMenus.includes(nav.id)" class="nav-sub">
+                <div
+                  v-for="child in nav.children"
+                  :key="child.id"
+                  class="nav-item nav-item--child"
+                  :class="{'nav-item--active': activeIndex === getTargetUrl(child)}"
+                  @click="handleNavClick(child)"
+                >
+                  {{ child.label }}
+                </div>
+              </div>
+            </div>
+            <!-- 无子菜单 -->
+            <div
+              v-else
+              class="nav-item"
+              :class="{'nav-item--active': activeIndex === getTargetUrl(nav)}"
+              @click="handleNavClick(nav)"
+            >
+              <span class="nav-label">{{ nav.label }}</span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </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>
+// ==================== 布局容器 ====================
+.mobile-layout {
+  width: 100%;
+  max-width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  overflow-x: hidden;
+}
+
+// ==================== Header ====================
+.mobile-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%; /* no */
+  max-width: 100vw;
+  height: 44px; /* no */
+  background-color: $bg_color;
+  z-index: 110;
+  display: flex;
+  align-items: center;
+  padding: 0 10px; /* no */
+  box-sizing: border-box;
+
+  .header-menu-icon {
+    color: $white;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .header-logo {
+    background-image: url('/static/images/header/logo.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100px;
+    height: 32px; /* no */
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+}
+
+// ==================== 侧边栏遮罩层 ====================
+.sidebar-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+
+.mask-fade-enter-active,
+.mask-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.mask-fade-enter-from,
+.mask-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) => {
-  navStore.changeNavIndex(url)
-  router.push(url)
+const navClick = (node) => {
+  if (node.downloadType) {
+    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
-      v-for="node in footerNav"
-      :key="node.id"
-      :node="node"
-      @nav-click="navClick"
-    />
+    <NavNode 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);
-      transform: translateY(-8px);
+      -webkit-transform: translateY(-2px);
+      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
-          v-if="nav.hasChildren || nav?.children?.length > 0"
-          :index="nav.url"
-          popper-class="pepper"
-        >
+        <el-sub-menu v-if="nav.hasChildren || nav?.children?.length > 0" :index="nav.url" popper-class="pepper">
          <template #title>
            <span>{{ nav.label }}</span>
          </template>
-          <el-menu-item
-            v-for="child in nav.children"
-            :key="child.id"
-            :index="child.url"
-          >
+          <el-menu-item v-for="child in nav.children" :key="child.id" :index="child.url">
            {{ child.label }}
          </el-menu-item>
        </el-sub-menu>

        <!-- 无子菜单的情况 -->
-        <el-menu-item
-          v-else
-          :index="nav.url"
-          :class="{'is-active': activeIndex === nav.url}"
-        >
+        <el-menu-item v-else :index="nav.url" :class="{'is-active': activeIndex === nav.url}">
          {{ nav.label }}
        </el-menu-item>
      </template>
--- 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/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,
-    imgUrl: 'news/1.png',
-    label: '低空经济：撬动社会发展的新支点',
-    time: '2025年9月4日',
-    subLabel: '',
-    content:
-      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
+    id: 3,
+    title: 'Remote ID与无人机防碰撞技术：从长春航展相撞事件看低空安全未来',
+    slug: 'a5caa86d51984028b2b3fca83946e063',
+    cover_image: '/api/download/img/007c3bf8e3414783878bb33282088db3.png',
+    snapshot:
+      '2025年9月长春航展上，两架小鹏汇天eVTOL飞行器在编队演练中因间距不足发生接触并起火，虽无人员伤亡，却暴露出低空飞行器在避障能力与空域协同管理上的短板；在此背景下，Remote ID“电子车牌”技术、多源融合的防撞系统以及分层智能监管平台正成为构建低空安全体系的关键支撑，而国家标准GB 42590-2023的实施更标志着我国低空经济正从高速发展迈向安全优先、规范有序的新阶段。',
+    status: 'published',
+    datetime: '2025-09-30',
  },
  {
    id: 2,
-    imgUrl: 'news/2.png',
-    label: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    time: '2025年8月29日',
-    subLabel: '',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+    title: '无人机强制国标实施，低空安全监管迎来新篇章',
+    slug: '4b7573cfbcaa42548fc46fabe060001e',
+    cover_image: '/api/download/img/b3d9d7e210f440b781686fa0be228d6a.png',
+    snapshot:
+      '2025年8月，上海环球金融中心400米高空两架无人机相撞坠落，再次暴露“黑飞”乱象；与此同时，我国首部民用无人机强制性国家标准GB 42590-2023已于2024年6月实施，结合远程识别、飞手定位等技术及各地低空监管平台建设，无人机监管正从被动追责转向主动防控，迈向法规与技术协同守护低空安全的新阶段。',
+    status: 'published',
+    datetime: '2025-09-01',
  },
  {
-    id: 3,
-    imgUrl: 'news/3.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
-  },
-  {
-    id: 4,
-    imgUrl: 'news/4.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
+    id: 1,
+    title: '低空监管升级！无人机远程识别技术如何守护我们的隐私与安全',
+    slug: 'bd68b39a096646f189b9b5a2e9efd16c',
+    cover_image: '/api/download/img/9dd9f35298e844bda897a9b855bf484b.png',
+    snapshot:
+      '随着低空经济迅猛发展，无人机在物流、巡检、娱乐等领域广泛应用，但“黑飞”、偷拍、空中碰撞等安全与隐私风险也随之凸显。为应对挑战，公安大学低空安全研究中心推出“无人机广域识别解决方案”，依托国家强制标准Remote ID技术，实现对合作无人机的精准识别、定位与动态追踪。该方案结合低成本被动感知设备与配套预警APP，助力构建空天地一体化的三维监管体系。同时，新规强化飞手责任，严惩瞒报与违规行为。未来，全国低空智联网平台将整合审批、监视与避让技术，推动低空治理从“严控”走向“善管”，在保障安全与隐私的同时，释放低空经济更大潜能。',
+    status: 'published',
+    datetime: '2024-06-06',
  },
 ]

--- 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
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