1

修改公司地址
修改设备图片
2026-05-17 23:25:42 +08:00 · 2026-05-17 14:43:40 +08:00 · 2025-10-16 18:16:23 +08:00 · 2025-10-16 17:44:21 +08:00 · 2025-10-16 17:42:32 +08:00 · 2025-10-16 17:39:38 +08:00
58 changed files with 4327 additions and 517 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,7 @@
 node_modules
 /dist
 /situation
+/protal_dist

 # local env files
 .env.local
@ -21,3 +22,4 @@ package-lock.json
 *.njsproj
 *.sln
 *.sw?
+*.zip
--- a/index.html
+++ b/index.html
@ -5,12 +5,13 @@
    <link rel="icon" type="image/svg+xml" href="/rangu.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>燃谷科技（南京）有限公司</title>
-    <meta name="keywords" content="低空经济,低空监管,远程识别,RemoteID,RID" />
+    <meta name="keywords" content="燃谷,万谷硅巷,低空经济,低空监管,远程识别,RemoteID,RID" />
    <meta
      name="description"
      content="燃谷科技位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。"
    />
-    <script src="/nav/index.js"></script>
+    <script src="/config/nav.js"></script>
+    <script src="/config/product.js"></script>
    <script src="/config.js"></script>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
    "@vueup/vue-quill": "^1.2.0",
    "@vueuse/core": "^13.8.0",
    "axios": "^1.12.2",
+    "crypto-js": "^4.2.0",
    "element-plus": "^2.11.1",
    "js-cookie": "^3.0.5",
    "mitt": "^3.0.1",
--- a/public/config.js
+++ b/public/config.js
@ -1,9 +1,3 @@
-window.GD_KEYS = [
-  '348d477ba83826e46b32d3ff10fffe82',
-  'ed2ea36f8564541569c370254845d93d',
-  'c1da03827f956a215311c0f5229bddc3',
-]
-
 window.config = {
  baseUrl: 'http://192.168.3.10:9121/',
 }
--- a/public/config/nav.js
+++ b/public/config/nav.js
@ -10,13 +10,13 @@ window.nav = {
        {
          id: 2.1,
          label: '空域感知矩阵',
-          url: '/product/monitorSystem',
+          url: '/product/hardwareSystem',
          hasChildren: false,
        },
        {
          id: 2.2,
          label: '低空智控中枢',
-          url: '/product/remoteDevice',
+          url: '/product/softwareSystem',
          hasChildren: false,
        },
      ],
@ -33,8 +33,8 @@ window.nav = {
      url: '',
      hasChildren: true,
      children: [
-        {id: 1.1, label: '空域感知矩阵', url: '/product/monitorSystem'},
-        {id: 1.2, label: '低空智控中枢', url: '/product/remoteDevice'},
+        {id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem'},
+        {id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem'},
      ],
    },
    // {
--- a/public/config/product.js
+++ b/public/config/product.js
@ -0,0 +1,177 @@
+window.advantages = `
+        <div>★ 提供业界领先的性价比解决方案。</div>
+        <div>★ 内置4G全网通，无需外接网络，即装即用。</div>
+        <div>★ 宽电压输入，轻松应对电压不稳等复杂情况。</div>
+        <div>★ 超低功耗设计，极大节约长期用电与运维成本。</div>
+        <div>★ 极致轻量，极大拓宽了安装位置与应用场景。</div>
+        <div>★ 灵活可调的侦测模式，满足从安防到巡检的全场景需求。</div>
+        <div>★ 具备升级能力，当前投资可平滑演进至更高专业层级。</div>
+        `
+
+window.hardwareSystemList = [
+  {
+    id: 'm1',
+    type: 'hardwareSystem',
+    title: 'RGRID-Lite',
+    subTitle: '无人机Remote ID远程识别设备',
+    imgUrl: 'product/detail/m1.png',
+    description: `
+        <div  class="hardware">RGRID-Lite 是一款专为国标无人机远程识别设计的地面监测设备。它能够精准获取低空目标区域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并动态显示与记录无人机及飞手的移动轨迹。所有数据实时上传至后台系统，支持长期存储与便捷回溯，为空域监管提供完整的数据支撑。</div>        
+        <div  class="hardware">设备采用轻量化与一体化设计，部署灵活，可快速适配多种复杂安装环境。凭借超低功耗特性，可搭配UPS不间断电源或太阳能供电系统，实现长时间稳定运行。同时，内置4G全网通模块，无需依赖外部网络，彻底解决供电与传输难题。</div>        
+        <div  class="hardware">RGRID-Lite 在具备卓越性能的同时，展现出优异的性价比，广泛适用于各类低空监管场景。设备支持功能定制与二次开发，可根据用户需求灵活扩展，是构建低成本、高效率无人机监管体系的理想之选。</div>        
+        `,
+  },
+  {
+    id: 'm2',
+    type: 'hardwareSystem',
+    title: 'RGRID-Ped',
+    subTitle: '无人机Remote ID远程识别模块',
+    imgUrl: 'product/detail/m2.png',
+    description: `
+        <div  class="hardware">RGRID-Ped 是一款遵循国标GB42590-2023的便携式无人机远程识别模块。它能够精准监测并获取目标空域内无人机的多项关键数据，包括实时位置、飞手位置、唯一SN识别码、飞行型号、航速与高度等，并实时推送至用户平台。</div>
+        <div  class="hardware">该模块采用高度集成化设计，体积小巧、功耗极低，具备完善的接口与通信协议，可快速适配并嵌入各类无人机反制、监管或作业设备中，轻松应对有限的内部空间要求。同时，模块支持全方位的二次开发与功能定制，为各类集成应用提供可靠、灵活的低空感知核心。</div>
+        `,
+  },
+  {
+    id: 'm3',
+    type: 'hardwareSystem',
+    title: 'RGRID-Mob',
+    subTitle: '无人机Remote ID远程识别手持设备',
+    imgUrl: 'product/detail/m3.png',
+    description: `
+        <div  class="hardware">RGRID-Mob 是一款符合国标 GB42590-2023 的便携式无人机远程识别设备，专为机动巡检与快速部署场景设计。它可精准监测目标空域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并实时显示与记录无人机与飞手的动态轨迹。所有数据同步上传至后台，支持长期存储与灵活调阅，为空域执法与现场处置提供完整信息支撑。</div>
+        <div  class="hardware">设备支持多终端协同管理，用户可通过移动端小程序实时查看数据，指挥中心亦能通过大屏系统统览全局。系统具备分级权限管理功能，支持多级账户与设备组网，实现权限分离与协同指挥。手机端集成一键导航功能，可快速定位飞手位置；指挥平台则全面监管辖区内所有设备状态与每架被侦测无人机的详细数据，真正实现“前端机动侦测—后端统一指挥”的一体化管控闭环。</div>
+        <div  class="hardware">RGRID-Mob 重量轻、体积小，可随身挂载，便于野外作业与快速机动。内置4G数据传输模块，开机即用，无需复杂配对，极大提升部署效率与操作便捷性，是应对突发低空监管任务的理想移动侦测终端。</div>
+        `,
+  },
+]
+
+window.softwareSystemList = [
+  {
+    id: 'r1',
+    type: 'softwareSystem',
+    title: '低空综合监管及应用服务平台',
+    imgUrl: 'product/detail/r1.jpg',
+    video: 'display.mp4',
+    card: [
+      {id: 1, title: '三维总览', content: '基于数字孪生技术，通过三维和传感器状态数据，实现对真实状态的数字化呈现。'},
+      {id: 2, title: '实时监管', content: '基于人工智能算法，智能识别判定各类预警，实现全面的智能监测与管理。'},
+      {id: 3, title: '传感器监测', content: '对无人机、机场、反无人机设备、ADS-B设备等各类设备的布署和状态全面监控。'},
+      {
+        id: 4,
+        title: '综合审批',
+        content: '对各类申请审批数据的汇总与分类统计，全面了解不同来源、类型和条件的申请和审批情况。',
+      },
+      {id: 5, title: '重点目标', content: '对辖区内的关键目标分类统计和位置呈现，以提供全面的目标信息和空间分布视角。'},
+      {id: 6, title: '辖区信息', content: '操作员情况、备案飞行器信息、相关企业等信息不同维度的综合展示。'},
+    ],
+    description: `
+        <div  class="hardware">低空全域运营中枢，是构建于数字孪生技术之上的低空管理核心平台。它通过精准的三维建模与全域传感器数据融合，将物理空域完整复现为动态的数字世界，实现对无人机、机场、反制设备等所有单元部署与运行状态的全局洞察。</div>
+        <div  class="hardware">平台深度融合人工智能算法，具备实时智能监管与预警研判能力，确保对空域异常事件的精准识别与快速响应。同时，系统集成了从空域申请审批、重点目标管理到辖区人员、航空器及企业信息的多维度综合管理功能，在一个平台上完成了从全景感知、智能决策到协同处置的全流程闭环，真正实现了低空运营的“一图总览、一体指挥、一站服务”。</div>`,
+  },
+  {
+    id: 'r2',
+    type: 'softwareSystem',
+    title: '低空综合态势平台',
+    imgUrl: 'product/detail/r2.jpg',
+    video: '2.mp4',
+    card: [
+      {
+        id: 1,
+        title: '区域化监管',
+        content: '按地理或行政划分区域，通过数据隔离与协同机制，实现灵活的区域自治或跨域联动管控。',
+      },
+      {
+        id: 2,
+        title: '海量设备接入',
+        content: '基于微服务架构设计，支持万级设备高并发接入与弹性扩展，确保稳定性和可靠性。',
+      },
+      {
+        id: 3,
+        title: '多源数据融合',
+        content: '整合传感器、外部系统及各类数据，构建全域动态分析模型，强化低空态势决策支撑。',
+      },
+      {id: 4, title: '私有化部署', content: '支持本地化安全部署，提供定制化方案与云端协同管控能力，保障数据自主可控。'},
+      {
+        id: 5,
+        title: 'SaaS服务',
+        content: '云端多租户架构，按需弹性扩展，提供低运维成本标准化服务，支持数据共享与任务协同。',
+      },
+      {id: 6, title: '数据接口服务', content: '开放标准化API与多协议接口，打通跨平台数据交互，推动低空生态互联互通。'},
+    ],
+    description: ` 
+        <div  class="hardware">低空综合态势平台，是面向全域低空监管与协同运营的新一代数字化基础设施。平台基于微服务架构设计，具备万级设备高并发接入与弹性扩展能力，确保系统在高负载下的稳定可靠运行。通过整合多源传感器数据与外部系统信息，平台构建起全域动态分析模型，实现从感知到决策的智能闭环，显著提升低空态势的洞察力与响应效率。</div>
+        <div  class="hardware">在部署方式上，平台全面支持私有化与SaaS化双模式：既可通过本地化部署保障数据安全与自主可控，也支持云端多租户架构，以标准化服务降低运维成本，促进跨组织数据共享与任务协同。同时，平台引入灵活的区域化监管机制，支持按地理或行政单元进行数据隔离与业务协同，实现从区域自治到跨域联动的精准管控。</div>
+        <div  class="hardware">为构建开放的低空数字生态，平台提供标准化API与多协议接口，打通跨系统数据壁垒，推动各类设备、系统与服务的互联互通，为低空产业的规模化发展提供坚实的技术底座。</div>`,
+  },
+  {
+    id: 'r3',
+    type: 'softwareSystem',
+    title: '低空管控系统',
+    imgUrl: 'product/detail/r3.jpg',
+    video: '3.mp4',
+    card: [
+      {
+        id: 1,
+        title: '黑白名单管理',
+        content: '对无人机的多层次监控，如告警、处置或放行，以确保阵地内空域的安全与可控。',
+      },
+      {id: 2, title: '处置策略执行', content: '自动通过采取入侵警告、拦截或干扰等措施，迅速应对检测到的潜在威胁。'},
+      {id: 3, title: '历史预警管理', content: '审查历史安全事件，提供信息导出功能，以支持分析、报告和决策过程。'},
+    ],
+    description: `
+        <div  class="hardware">低空管控系统是为核心阵地提供精准化、智能化空域防御的指挥中枢。系统支持对多个分散阵地的统一管理，实时监控所有设备状态，并对空域内目标进行持续跟踪与智能告警。</div>
+        <div  class="hardware">通过内置的黑白名单管理机制，系统可对无人机进行精准识别与差异化处置。一旦发现潜在威胁，指挥员可快速下发处置指令，或由系统自动执行预设的反制策略——从入侵警告到主动干扰，实现对空域风险的快速响应与有效化解。</div>
+        <div  class="hardware">所有预警与处置记录均被完整保存于系统之中，支持历史数据的查询、导出与深度分析，为优化布防策略、复盘处置流程与生成合规报告提供坚实的数据支撑，全面提升阵地空域的持久安全与管控效能。</div>`,
+  },
+  {
+    id: 'r4',
+    type: 'softwareSystem',
+    title: '低空应用系统',
+    imgUrl: 'product/detail/r4.jpg',
+    video: '4.mp4',
+    card: [
+      {
+        id: 1,
+        title: '设备信息管理',
+        content: '无人机全生命周期管理，无人机设备的合理调度、机库管理，以及飞行人员的信息记录和培训管理。',
+      },
+      {id: 2, title: '任务航线规划', content: '高效规划无人机的飞行路径，确保全面而准确地覆盖目标区域。'},
+      {
+        id: 3,
+        title: '任务调度管理',
+        content:
+          '涵盖规划、调度、执行和监控巡检任务全过程。有效规划和优化无人机的飞行计划，设定巡检区域和时间，监测任务进度，实时获取数据。',
+      },
+    ],
+    description: `
+        <div  class="hardware">低空应用系统是面向行业无人机作业的一体化智能调度与管理平台。系统提供从设备、人员到任务的全流程数字化管理，实现对无人机设备的合理调配、全生命周期维护，以及对飞行人员的规范信息管理与培训记录。</div>
+        <div  class="hardware">在任务执行层面，系统支持高效规划无人机的飞行路径，通过航线粗细采样点的灵活设置，确保对目标区域实现精准覆盖与高效扫描。用户可便捷完成巡检标注，系统自动整合飞行数据与巡检结果，快速生成结构化报告，为作业分析与决策提供可靠依据。</div>
+        <div  class="hardware">平台同时提供完整的任务调度管理功能，覆盖从任务规划、计划优化、过程监控到数据回传的全链路，有效提升无人机在巡检、测绘等场景中的自动化水平与作业效率，推动低空应用的集约化与智能化运营。</div>`,
+  },
+  {
+    id: 'r5',
+    type: 'softwareSystem',
+    title: '低空仿真系统',
+    imgUrl: 'product/detail/r5.jpg',
+    video: '5.mp4',
+    card: [
+      {
+        id: 1,
+        title: '航空器孪生',
+        content:
+          '航空器孪生是指利用数字化技术和仿真模型创建的虚拟飞行器，与实际飞行器实时同步，并能够模拟其行为、性能和运行情况。帮助飞行员和维护人员进行培训、飞行仿真、性能分析和故障诊断，从而提高飞行器的安全性、效率性和可靠性。为飞行员和运营商提供更好的训练和支持，同时降低了飞行试验和维护成本。',
+      },
+      {
+        id: 2,
+        title: '监管传感器孪生',
+        content:
+          '整合低空监管传感器、环境传感器和支撑传感器等各类传感器的智能系统，旨在实现对低空空域的实时监测和管理。通过监测飞行器活动、环境参数和相关数据，并将其与数字化模型实时同步，该系统能够提供全面的低空环境评估、低空空域监管和飞行器安全保障，为低空飞行提供了可靠的技术支持。',
+      },
+    ],
+    description: ` 
+        <div  class="hardware">低空仿真系统是构建于数字孪生技术之上的专业化模拟推演平台，旨在为低空运行提供高保真、全流程的虚拟仿真环境。</div>
+        <div  class="hardware">系统通过构建航空器数字孪生体，实现对真实飞行器的精准映射与行为模拟。虚拟飞行器可与实体设备实时同步，支持飞行仿真、性能分析与故障复现，广泛应用于飞行员训练、维护诊断与运行评估，显著提升飞行安全与运维效率，同时大幅降低实装训练与试验成本。</div>
+        <div  class="hardware">同时，系统集成监管传感器孪生网络，对部署于真实环境中的各类监测设备进行数字化建模与数据同步。通过对飞行器活动、环境参数等多源信息的融合分析，系统可实现对低空空域的实时态势复现、运行风险评估与监管策略预演，为低空监管体系的规划部署、效能验证与优化调控提供关键决策支持。</div>`,
+  },
+]
--- a/public/static/images/main/banner.png
+++ b/public/static/images/main/banner.png
--- a/public/static/images/main/display.mp4
+++ b/public/static/images/main/display.mp4
--- a/public/static/images/news/1.png
+++ b/public/static/images/news/1.png
--- a/public/static/images/news/2.png
+++ b/public/static/images/news/2.png
--- a/public/static/images/news/3.png
+++ b/public/static/images/news/3.png
--- a/public/static/images/news/4.png
+++ b/public/static/images/news/4.png
--- a/public/static/images/product/2.png
+++ b/public/static/images/product/2.png
--- a/public/static/images/product/7.png
+++ b/public/static/images/product/7.png
--- a/public/static/images/product/detail/m1.png
+++ b/public/static/images/product/detail/m1.png
--- a/public/static/images/product/detail/m2.png
+++ b/public/static/images/product/detail/m2.png
--- a/public/static/images/product/detail/m3.png
+++ b/public/static/images/product/detail/m3.png
--- a/public/static/images/product/detail/r1.jpg
+++ b/public/static/images/product/detail/r1.jpg
--- a/public/static/images/product/detail/r2.jpg
+++ b/public/static/images/product/detail/r2.jpg
--- a/public/static/images/product/detail/r3.jpg
+++ b/public/static/images/product/detail/r3.jpg
--- a/public/static/images/product/detail/r4.jpg
+++ b/public/static/images/product/detail/r4.jpg
--- a/public/static/images/product/detail/r5.jpg
+++ b/public/static/images/product/detail/r5.jpg
--- a/public/static/video/2.mp4
+++ b/public/static/video/2.mp4
--- a/public/static/video/3.mp4
+++ b/public/static/video/3.mp4
--- a/public/static/video/4.mp4
+++ b/public/static/video/4.mp4
--- a/public/static/video/5.mp4
+++ b/public/static/video/5.mp4
--- a/public/static/video/display.mp4
+++ b/public/static/video/display.mp4
--- a/src/api/index.js
+++ b/src/api/index.js
@ -3,7 +3,43 @@ import request from '@/utils/request'
 // 获取访问接口
 export function visit(data) {
  return request({
-    url: '/tracking',
+    url: '/tracking/',
+    method: 'post',
+    data,
+  })
+}
+
+// 获取新闻列表
+export function getNews(params) {
+  return request({
+    url: '/news',
+    method: 'get',
+    params,
+  })
+}
+
+// 获取新闻列表
+export function getNewsDetail(params) {
+  return request({
+    url: '/news/details',
+    method: 'get',
+    params,
+  })
+}
+
+// 保存新闻
+export function updateNews(data) {
+  return request({
+    url: '/news/B8fpNxunbxj37x3VRcVz',
+    method: 'post',
+    data,
+  })
+}
+
+// 获取新闻列表
+export function saveDetail(data) {
+  return request({
+    url: '/news/VbxWW8EdJQGyWzJyvSrN',
    method: 'post',
    data,
  })
--- a/src/assets/styles/variable.scss
+++ b/src/assets/styles/variable.scss
@ -8,5 +8,7 @@ $nav_font_size: 18px;

 $border: 2px solid red;

+$border_radius: 8px;
+
 // header nav
 $header_nav_height: 80px;
--- a/src/components/meta/index.vue
+++ b/src/components/meta/index.vue
@ -5,18 +5,18 @@ onMounted(() => {})

 <template>
  <div>
-    <p>ID/无人机低空监管设备 无人机定位设备/无人机飞手定位设备/无人机侦测设备/Remote ID无人机远程识别模块 Remote</p>
-    <p>Remote ID无人机识别设备/符合GB-42590-2023/无人机远程识别发射模块 无人机远程识别设备/无人机RID/Remote</p>
+    <p>ID/无人机低空监管设备 无人机定位设备/无人机飞手定位设备/无人机侦测设备/software ID无人机远程识别模块 software</p>
+    <p>software ID无人机识别设备/符合GB-42590-2023/无人机远程识别发射模块 无人机远程识别设备/无人机RID/software</p>
    <p>ID无人机远程识别广播模块/RID无人机识别/无人机飞手远程定位设备</p>
    <p>无人机测距模块/无人机侦测监管设备/RID无人机识别/无人机定位器/无人机飞手定位器</p>
    <p>无人机侦测定位设备/迷你无人机识别模块/低空经济无人机识别设备/单兵无人机侦测识别设备</p>
-    <p>无人机探测器/防撞机无人机定位设备/Remote ID无人机预警仪</p>
-    <p>全向无人机探测设备/无人机定位飞手定位设备/安防安保无人机监测设备/RID无人机识别/Remote ID远程识别模块</p>
+    <p>无人机探测器/防撞机无人机定位设备/software ID无人机预警仪</p>
+    <p>全向无人机探测设备/无人机定位飞手定位设备/安防安保无人机监测设备/RID无人机识别/software ID远程识别模块</p>
    <p>无人机侦测设备飞手定位飞行轨迹/UAV无线电侦测设备/无人机GPS GNSS定位设备</p>
    <p>无人机RID广播识别模块/无人机探测飞手定位飞行轨迹/专业级无人机预警侦测设备 无人机航拍防撞设备/无人机Remote</p>
-    <p>ID国标定位侦测设备/低空安防无人机监管 无人机识别跟踪设备/RID无人机定位模块/Remote</p>
-    <p>ID无人机定位跟踪设备带飞手定位飞行轨迹 自主研发无人机侦测定位模块/Remote</p>
-    <p>ID无人机远程识别设备/飞机定位飞行轨迹飞手定位无人机识别模块源头厂家 无人机标签识别设备/Remote</p>
+    <p>ID国标定位侦测设备/低空安防无人机监管 无人机识别跟踪设备/RID无人机定位模块/software</p>
+    <p>ID无人机定位跟踪设备带飞手定位飞行轨迹 自主研发无人机侦测定位模块/software</p>
+    <p>ID无人机远程识别设备/飞机定位飞行轨迹飞手定位无人机识别模块源头厂家 无人机标签识别设备/software</p>
    <p>
      ID无人机侦测定位设备/远程广播模块识别 无人机远程识别地面站/RID无人机识别/无人机巡检智能识别模块/无人机定位飞手定位
    </p>
--- a/src/components/swiper/index.vue
+++ b/src/components/swiper/index.vue
@ -31,6 +31,7 @@ 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')
--- a/src/home.vue
+++ b/src/home.vue
@ -1,55 +1,66 @@
 <script setup>
 import Header from './views/layout/pc/header/index.vue'
 import Footer from './views/layout/pc/footer/index.vue'
-import {onMounted, ref, watch} from 'vue'
+import MobileLayout from './views/layout/mobile/index.vue'
+import {onMounted, ref, watch, computed} from 'vue'
 import {visit} from '@/api/index'
 import axios from 'axios'
+import {useResponsive} from '@/utils/responsive'

-onMounted(() => {
-  getUrl()
-})
+const {isMobile, windowWidth} = useResponsive()

-const referrer = ref('')
+console.log('isMobile===>', isMobile.value)
+
+const referrer = ref(document.referrer || '')
 const ipUrl = ref('')

-console.log('11===>', window.location)
-function getUrl() {
-  referrer.value = document.referrer
+const CACHE_KEY = 'ip'
+const TIME_KEY = 'ipFetchTime'
+const CACHE_MIN = 60 * 60 * 1000 // 1h

-  axios
-    .get('https://api64.ipify.org?format=json')
-    .then(({data}) => {
+async function getUrl() {
+  const now = Date.now()
+  const cachedIp = sessionStorage.getItem(CACHE_KEY)
+  const cachedTime = sessionStorage.getItem(TIME_KEY)
+
+  if (cachedIp && cachedTime && now - Number(cachedTime) < CACHE_MIN) {
+    ipUrl.value = cachedIp
+    return cachedIp
+  }
+
+  try {
+    const {data} = await axios.get('https://api64.ipify.org?format=json')
    ipUrl.value = data.ip
-    })
-    .catch(console.error)
+    sessionStorage.setItem(CACHE_KEY, data.ip)
+    sessionStorage.setItem(TIME_KEY, now.toString())
+    postVisit()
+  } catch (e) {
+    console.error('获取 IP 失败:', e)
+  }
 }

-async function postVisit() {
-  let params = {
+function postVisit() {
+  const params = {
    timestamp: new Date(),
    url: window.location.href,
    referrer: referrer.value,
    real_ip: ipUrl.value,
  }
-  let {code, msg} = await visit(params)
+
+  visit(params).then((res) => {})
 }

-watch(
-  () => [referrer.value, ipUrl.value],
-  ([refer, ipUrl]) => {
-    if (refer && ipUrl) {
-      postVisit()
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-)
+onMounted(async () => {
+  await getUrl()
+})
 </script>

 <template>
-  <div id="app">
+  <!-- APP端布局 -->
+  <MobileLayout v-if="isMobile" />
+
+  <!-- PC端布局（保持不变） -->
+  <div v-else id="app">
    <Header id="header" />
    <router-view id="main" v-slot="{Component, title}">
      <keep-alive include="New">
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,22 +1,100 @@
-import { createWebHashHistory, createRouter } from 'vue-router'
+import {createWebHashHistory, createRouter} from 'vue-router'
+import {isMobile} from '@/utils/responsive'

-import HomeView from '@/views/homepage/index.vue'
+// 动态加载首页组件
+const HomeView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/homepage/mobile.vue').then(resolve)
+    } else {
+      import('@/views/homepage/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载新闻中心组件
+const NewsView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/news/mobile.vue').then(resolve)
+    } else {
+      import('@/views/news/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载联系我们组件
+const LinkView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/link/mobile.vue').then(resolve)
+    } else {
+      import('@/views/link/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载关于我们组件
+const AboutView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/about/mobile.vue').then(resolve)
+    } else {
+      import('@/views/about/index.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载硬件系统组件
+const HardwareSystemView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/product/hardwareSystem/mobile.vue').then(resolve)
+    } else {
+      import('@/views/product/hardwareSystem.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载软件系统组件
+const SoftwareSystemView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/product/softwareSystem/mobile.vue').then(resolve)
+    } else {
+      import('@/views/product/softwareSystem.vue').then(resolve)
+    }
+  })
+}
+
+// 动态加载产品详情组件
+const ProductDetailView = () => {
+  return new Promise((resolve) => {
+    if (isMobile.value) {
+      import('@/views/product/detail/mobile.vue').then(resolve)
+    } else {
+      import('@/views/product/detail.vue').then(resolve)
+    }
+  })
+}

 const routes = [
-  { path: '/', component: HomeView },
+  // ============================================  首页  ============================================
+  {path: '/', component: HomeView},
+
  // ============================================  产品中心  ============================================
  {
-    path: '/product/monitorSystem',
-    name: 'MonitorSystem',
-    component: () => import('@/views/product/monitorSystem.vue'),
+    path: '/product/hardwareSystem',
+    name: 'HardwareSystem',
+    component: HardwareSystemView,
    meta: {
      title: '低空监管体系',
    },
  },
  {
-    path: '/product/remoteDevice',
-    name: 'RemoteDevice',
-    component: () => import('@/views/product/remoteDevice.vue'),
+    path: '/product/softwareSystem',
+    name: 'SoftwareSystem',
+    component: SoftwareSystemView,
    meta: {
      title: '低空远程识别设备',
    },
@ -24,63 +102,39 @@ const routes = [
  {
    path: '/product/detail',
    name: 'ProductDetail',
-    component: () => import('@/views/product/detail.vue'),
+    component: ProductDetailView,
    meta: {
      title: '产品详情',
    },
  },
-  // ============================================  服务与支撑  ============================================
-  {
-    path: '/services',
-    name: 'Services',
-    component: () => import('@/views/services/index.vue'),
-    meta: {
-      title: '服务与支撑',
-    },
-  },
+
  // ============================================  新闻中心  ============================================
  {
    path: '/news',
    name: 'News',
-    component: () => import('@/views/news/index.vue'),
+    component: NewsView,
    meta: {
      title: '新闻中心',
    },
  },
-  // ============================================  关于我们  ============================================
-  {
-    path: '/about',
-    name: 'About',
-    component: () => import('@/views/about/index.vue'),
-    meta: {
-      title: '关于我们',
-    },
-  },
+
  // ============================================  联系我们  ============================================
  {
    path: '/link',
    name: 'Link',
-    component: () => import('@/views/link/index.vue'),
+    component: LinkView,
    meta: {
      title: '联系我们',
    },
  },
-  // ============================================  下载中心  ============================================
+
+  // ============================================  关于我们  ============================================
  {
-    path: '/download',
-    name: 'Download',
-    component: () => import('@/views/download/index.vue'),
+    path: '/about',
+    name: 'About',
+    component: AboutView,
    meta: {
-      title: '下载中心',
-    },
-  },
-  // ============================================  管理页面  ============================================
-  {
-    path: '/manager',
-    name: 'Manager',
-    component: () => import('@/views/manager/index.vue'),
-    meta: {
-      title: '管理中心',
+      title: '关于我们',
    },
  },
 ]
@ -90,13 +144,4 @@ const router = createRouter({
  routes,
 })

-router.afterEach((to, from) => {
-  // 只有路径变化时才滚动到顶部
-  if (to.path !== from.path) {
-    requestAnimationFrame(() => {
-      window.scrollTo({ top: 0, behavior: 'instant' })
-    })
-  }
-})
-
 export default router
--- a/src/store/nav.js
+++ b/src/store/nav.js
@ -5,6 +5,7 @@ export const useNavStore = defineStore(
  'nav',
  () => {
    const navIndex = ref('/')
+    const showLoad = ref(true)

    const changeNavIndex = (id) => {
      if (!id) {
@ -14,9 +15,16 @@ export const useNavStore = defineStore(
      }
    }

+    const setLoad = (status) => {
+      console.log('status===>', status)
+      showLoad.value = status
+    }
+
    return {
      navIndex,
+      showLoad,
      changeNavIndex,
+      setLoad,
    }
  },
  {
--- a/src/utils/cryptojs.js
+++ b/src/utils/cryptojs.js
@ -0,0 +1,28 @@
+import CryptoJS from 'crypto-js'
+
+const key = CryptoJS.enc.Utf8.parse('k+tsU5mZz1BY+P8z')
+const iv = CryptoJS.enc.Utf8.parse('k+tsU5mZz1BY+P8z')
+
+// crypto-js加密
+export function cryptoEncrypt(word) {
+  const srcs = CryptoJS.enc.Utf8.parse(word)
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  })
+  return encrypted.ciphertext.toString(CryptoJS.enc.Base64)
+}
+
+// crypto-js解密
+export function cryptoDecrypt(word) {
+  const encryptedHexStr = CryptoJS.enc.Base64.parse(word)
+  const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
+  const decrypt = CryptoJS.AES.decrypt(srcs, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  })
+  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
+  return decryptedStr.toString()
+}
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@ -1,42 +1,136 @@
 // rem等比适配配置
 // 基准大小
 const baseSize = 16
-// 设计稿宽度
-const designWidth = 1920
+// PC端设计稿宽度
+const pcDesignWidth = 1920
+// 移动端设计稿宽度
+const mobileDesignWidth = 375
 // 最大缩放比例
 const maxScale = 2
+// 移动端断点（与 responsive.js 保持一致）
+const MOBILE_BREAKPOINT = 1000
+
+// 判断是否为移动端
+function isMobile() {
+  const result = window.innerWidth < MOBILE_BREAKPOINT
+  console.log('📱 [rem.js] isMobile() 检测:', {
+    windowWidth: window.innerWidth,
+    breakpoint: MOBILE_BREAKPOINT,
+    isMobile: result,
+    timestamp: new Date().toLocaleTimeString()
+  })
+  return result
+}

 // 设置 rem 函数
 function setRem() {
-  // 当前页面宽度相对于设计稿宽度的缩放比例
-  const scale = document.documentElement.clientWidth / designWidth
-  // 设置页面根节点字体大小（最高放大比例为maxScale）
-  document.documentElement.style.fontSize =
-    baseSize * Math.min(scale, maxScale) + 'px'
+  const clientWidth = document.documentElement.clientWidth
+  const mobile = isMobile()
+  
+  let designWidth, scale, minScale, finalFontSize
+
+  if (mobile) {
+    // 移动端：基于 375px 设计稿
+    designWidth = mobileDesignWidth
+    // 为了避免字体过小，限制最小缩放比例
+    minScale = 0.85
+    scale = Math.max(clientWidth / designWidth, minScale)
+    
+    console.log('📱 [rem.js] 移动端模式 setRem():', {
+      clientWidth: `${clientWidth}px`,
+      designWidth: `${designWidth}px (移动端)`,
+      rawScale: (clientWidth / designWidth).toFixed(4),
+      minScale: minScale,
+      finalScale: scale.toFixed(4),
+      baseSize: `${baseSize}px`,
+      calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
+      timestamp: new Date().toLocaleTimeString()
+    })
+  } else {
+    // PC端：基于 1920px 设计稿
+    designWidth = pcDesignWidth
+    scale = Math.min(clientWidth / designWidth, maxScale)
+
+    console.log('💻 [rem.js] PC端模式 setRem():', {
+      clientWidth: `${clientWidth}px`,
+      designWidth: `${designWidth}px (PC端)`,
+      rawScale: (clientWidth / designWidth).toFixed(4),
+      maxScale: maxScale,
+      finalScale: scale.toFixed(4),
+      baseSize: `${baseSize}px`,
+      calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
+      timestamp: new Date().toLocaleTimeString()
+    })
+  }
+
+  // 设置页面根节点字体大小
+  finalFontSize = baseSize * scale
+  document.documentElement.style.fontSize = finalFontSize + 'px'
+  
+  console.log('✅ [rem.js] 最终设置:', {
+    'document.documentElement.style.fontSize': `${finalFontSize.toFixed(2)}px`,
+    '实际计算值': `1rem = ${finalFontSize.toFixed(2)}px`,
+    '示例换算': `10rem = ${(10 * finalFontSize).toFixed(2)}px, 20rem = ${(20 * finalFontSize).toFixed(2)}px`
+  })
 }

 // 根据设计稿尺寸计算实际尺寸
 export function fontSize(res) {
-  const clientWidth =
-    window.innerWidth ||
-    document.documentElement.clientWidth ||
-    document.body.clientWidth
+  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return res
-  const scale = clientWidth / designWidth
-  return res * Math.min(scale, maxScale)
+
+  let designWidth
+  const mobile = isMobile()
+  
+  if (mobile) {
+    designWidth = mobileDesignWidth
+  } else {
+    designWidth = pcDesignWidth
+  }
+
+  const rawScale = clientWidth / designWidth
+  const finalScale = mobile ? Math.max(rawScale, 0.85) : Math.min(rawScale, maxScale)
+  const result = res * finalScale
+  
+  console.log('📐 [rem.js] fontSize() 计算:', {
+    input: `${res}px`,
+    clientWidth: `${clientWidth}px`,
+    mode: mobile ? '移动端' : 'PC端',
+    designWidth: `${designWidth}px`,
+    rawScale: rawScale.toFixed(4),
+    finalScale: finalScale.toFixed(4),
+    output: `${result.toFixed(2)}px`
+  })
+
+  return result
 }

 // 初始化rem配置
 export function initRem() {
+  console.log('🚀 [rem.js] initRem() 初始化:', {
+    baseSize: `${baseSize}px`,
+    pcDesignWidth: `${pcDesignWidth}px`,
+    mobileDesignWidth: `${mobileDesignWidth}px`,
+    MOBILE_BREAKPOINT: `${MOBILE_BREAKPOINT}px`,
+    maxScale: maxScale,
+    currentWindowWidth: `${window.innerWidth}px`,
+    currentMode: window.innerWidth < MOBILE_BREAKPOINT ? '📱 移动端' : '💻 PC端'
+  })
+  
  setRem()
+  
  // 改变窗口大小时重新设置 rem
-  window.addEventListener('resize', setRem)
+  window.addEventListener('resize', () => {
+    console.log('🔄 [rem.js] 窗口resize事件触发:', {
+      newWidth: `${window.innerWidth}px`,
+      timestamp: new Date().toLocaleTimeString()
+    })
+    setRem()
+  })
 }

 // 移除rem监听（可选，用于清理）
 export function removeRemListener() {
+  console.log('❌ [rem.js] removeRemListener() 移除监听')
  window.removeEventListener('resize', setRem)
 }
-
-// 自动初始化（如果需要在导入时自动初始化）
-// initRem()
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -2,9 +2,7 @@
 * axios 封装
 */
 import axios from 'axios'
-import {ElMessage, ElMessageBox} from 'element-plus'
 import {tansParams} from '@/utils/index'
-import {getToken, removeToken, removeUserTenantInfo} from '@/utils/auth'

 // 配置基础URL
 const baseURL = window.config?.baseUrl || 'http://work.rangutech.cn:9131'
@ -21,14 +19,6 @@ const service = axios.create({
 // 请求拦截器
 service.interceptors.request.use(
  (config) => {
-    // 是否需要设置 token
-    const isToken = (config.headers || {}).isToken === false
-
-    // 添加token到请求头
-    if (getToken() && !isToken) {
-      config.headers.Authorization = `Bearer ${getToken()}`
-    }
-
    // GET请求参数处理
    if (config.method?.toLowerCase() === 'get' && config.params) {
      const urlParams = tansParams(config.params)
@ -48,80 +38,22 @@ service.interceptors.request.use(
 service.interceptors.response.use(
  (response) => {
    const {data, config} = response
-
    // 处理二进制数据响应
    if (config.responseType === 'blob' || config.responseType === 'arraybuffer') {
      return data
    }
-
    // 正常响应处理
    if (response.status === 200) {
      return data
    }
-
    // 异常响应处理
    return Promise.reject(response)
  },
  (error) => {
    const {config, response, message} = error
-
    console.error('Response error:', {config, response, message})
-
-    // 处理认证错误
-    if (response && [401, 471, 472].includes(response.status)) {
-      handleAuthError(config, response)
-      return Promise.reject(error)
-    }
-
-    // 处理网络错误
-    handleNetworkError(message)
-
    return Promise.reject(error)
  }
 )

-/**
- * 处理认证错误
- */
-function handleAuthError(config, response) {
-  const excludeUrls = ['/Token/Logout', '/Token/Access']
-
-  if (!excludeUrls.includes(config.url)) {
-    ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
-      confirmButtonText: '重新登录',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-      .then(() => {
-        removeToken()
-        removeUserTenantInfo()
-        // 这里需要导入store
-        // store.dispatch('LogOut').then(() => {});
-        window.location.reload() // 简单重载页面
-      })
-      .catch(() => {
-        // 用户取消操作
-      })
-  }
-}
-
-/**
- * 处理网络错误
- */
-function handleNetworkError(message) {
-  let errorMsg = message
-
-  if (message === 'Network Error') {
-    errorMsg = '网络连接异常，请检查网络设置'
-  } else if (message.includes('timeout')) {
-    errorMsg = '请求超时，请稍后重试'
-  }
-
-  ElMessage({
-    message: errorMsg,
-    type: 'error',
-    duration: 1000,
-  })
-}
-
 export default service
--- a/src/utils/responsive.js
+++ b/src/utils/responsive.js
@ -0,0 +1,43 @@
+import {ref, onMounted, onUnmounted, computed} from 'vue'
+
+const MOBILE_BREAKPOINT = 1000
+
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
+
+console.log('windowWidth===>', windowWidth.value)
+
+const isMobile = computed(() => windowWidth.value < MOBILE_BREAKPOINT)
+
+function updateWindowSize() {
+  if (typeof window !== 'undefined') {
+    windowWidth.value = window.innerWidth
+  }
+}
+
+let listenersCount = 0
+
+export function useResponsive() {
+  onMounted(() => {
+    if (listenersCount === 0) {
+      updateWindowSize()
+      window.addEventListener('resize', updateWindowSize)
+    }
+    listenersCount++
+  })
+
+  onUnmounted(() => {
+    listenersCount--
+    if (listenersCount <= 0) {
+      listenersCount = 0
+      window.removeEventListener('resize', updateWindowSize)
+    }
+  })
+
+  return {
+    isMobile,
+    windowWidth,
+    MOBILE_BREAKPOINT,
+  }
+}
+
+export {isMobile, windowWidth, MOBILE_BREAKPOINT}
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@ -29,37 +29,19 @@ const imgList = [
    id: 2,
    width: 210,
    height: 300,
-    list: [
-      'main/5.png',
-      'main/6.png',
-      'main/7.png',
-      'main/8.png',
-      'main/9.png',
-    ],
+    list: ['main/5.png', 'main/6.png', 'main/7.png', 'main/8.png', 'main/9.png'],
  },
  {
    id: 3,
    width: 210,
    height: 300,
-    list: [
-      'main/10.png',
-      'main/11.png',
-      'main/12.png',
-      'main/13.png',
-      'main/14.png',
-    ],
+    list: ['main/10.png', 'main/11.png', 'main/12.png', 'main/13.png', 'main/14.png'],
  },
  {
    id: 4,
    width: 210,
    height: 300,
-    list: [
-      'main/15.png',
-      'main/16.png',
-      'main/17.png',
-      'main/18.png',
-      'main/19.png',
-    ],
+    list: ['main/15.png', 'main/16.png', 'main/17.png', 'main/18.png', 'main/19.png'],
  },
  {
    id: 5,
@ -135,9 +117,13 @@ onMounted(() => {})
 .my-card {
  width: 100%;
  height: 100%;
+  img {
+    width: 40%;
+    height: auto;
+  }
  .label {
    text-align: left;
-    width: 532px;
+    width: 40%;
    padding-right: 25px;
    font-family: 'PingFang SC';
    font-weight: 400;
--- a/src/views/about/mobile.vue
+++ b/src/views/about/mobile.vue
@ -0,0 +1,522 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+
+const loading = ref(true)
+
+// 公司介绍
+const companyInfo = {
+  name: '燃谷科技',
+  fullName: '燃谷科技（南京）有限公司',
+  founded: '2023年',
+  location: '南京鼓楼万谷硅巷',
+  introduction:
+    '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。',
+}
+
+// 核心优势
+const advantages = [
+  {
+    icon: 'DataAnalysis',
+    title: '低空大数据',
+    desc: '海量数据采集与分析能力',
+    color: '#1890ff',
+  },
+  {
+    icon: 'Connection',
+    title: '低空物联网',
+    desc: '全方位设备连接与管理',
+    color: '#52c41a',
+  },
+  {
+    icon: 'Cpu',
+    title: '智能算法引擎',
+    desc: 'AI驱动的智能决策系统',
+    color: '#fa8c16',
+  },
+  {
+    icon: 'Monitor',
+    title: '空间计算模型',
+    desc: '高精度空间数据处理',
+    color: '#722ed1',
+  },
+]
+
+// 资质证书
+const certificates = [
+  {id: 1, name: '营业执照', image: '/static/images/main/1.png'},
+  {id: 2, name: 'ISO9001认证', image: '/static/images/main/2.png'},
+  {id: 3, name: '高新技术企业', image: '/static/images/main/3.png'},
+  {id: 4, name: '软件著作权', image: '/static/images/main/4.png'},
+  {id: 5, name: '专利证书1', image: '/static/images/main/5.png'},
+  {id: 6, name: '专利证书2', image: '/static/images/main/6.png'},
+  {id: 7, name: '专利证书3', image: '/static/images/main/7.png'},
+  {id: 8, name: '专利证书4', image: '/static/images/main/8.png'},
+  {id: 9, name: '专利证书5', image: '/static/images/main/9.png'},
+  {id: 10, name: '荣誉证书1', image: '/static/images/main/10.png'},
+  {id: 11, name: '荣誉证书2', image: '/static/images/main/11.png'},
+  {id: 12, name: '荣誉证书3', image: '/static/images/main/12.png'},
+]
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+})
+</script>
+
+<template>
+  <div class="mobile-about" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">关于我们</h1>
+      <p class="page-subtitle">了解燃谷科技</p>
+    </div>
+
+    <!-- 公司简介 -->
+    <div class="intro-section">
+      <div class="company-card">
+        <!-- Logo区域 -->
+        <div class="logo-area">
+          <img src="/static/images/main/rangu.png" alt="燃谷科技" class="company-logo" />
+        </div>
+
+        <!-- 公司信息 -->
+        <div class="info-area">
+          <h2 class="company-name">{{ companyInfo.fullName }}</h2>
+
+          <div class="info-tags">
+            <span class="tag">📅 {{ companyInfo.founded }}成立</span>
+            <span class="tag">📍 {{ companyInfo.location }}</span>
+          </div>
+
+          <div class="company-intro">
+            <p>{{ companyInfo.introduction }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 核心优势 -->
+    <div class="advantages-section">
+      <div class="section-header">
+        <h3 class="section-title">核心优势</h3>
+        <p class="section-desc">四大核心技术组件</p>
+      </div>
+
+      <div class="advantages-grid">
+        <div
+          v-for="(item, index) in advantages"
+          :key="index"
+          class="advantage-card"
+          :style="{borderLeftColor: item.color}"
+        >
+          <div class="advantage-icon" :style="{backgroundColor: item.color + '15'}">
+            <el-icon :size="24" :style="{color: item.color}">
+              <component :is="item.icon" />
+            </el-icon>
+          </div>
+          <div class="advantage-content">
+            <h4 class="advantage-title">{{ item.title }}</h4>
+            <p class="advantage-desc">{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 资质证书 -->
+    <div class="certificate-section">
+      <div class="section-header">
+        <h3 class="section-title">资质证书</h3>
+        <p class="section-desc">权威认证 · 实力见证</p>
+      </div>
+
+      <div class="certificate-grid">
+        <div
+          v-for="cert in certificates"
+          :key="cert.id"
+          class="certificate-item"
+          @click="$viewer.api({images: [cert.image]})"
+        >
+          <img :src="cert.image" :alt="cert.name" class="certificate-img" />
+          <div class="certificate-name">{{ cert.name }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 企业文化 -->
+    <div class="culture-section">
+      <div class="section-header">
+        <h3 class="section-title">企业文化</h3>
+        <p class="section-desc">创新 · 质量 · 合作</p>
+      </div>
+
+      <div class="culture-cards">
+        <div class="culture-card innovation">
+          <div class="culture-icon">💡</div>
+          <h4>创新</h4>
+          <p>持续技术创新<br />引领行业发展</p>
+        </div>
+
+        <div class="culture-card quality">
+          <div class="culture-icon">⭐</div>
+          <h4>质量</h4>
+          <p>精益求精<br />追求卓越品质</p>
+        </div>
+
+        <div class="culture-card cooperation">
+          <div class="culture-icon">🤝</div>
+          <h4>合作</h4>
+          <p>开放共赢<br />携手共创未来</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部CTA -->
+    <div class="cta-section">
+      <div class="cta-content">
+        <h3>携手共进，共创低空经济新未来</h3>
+        <p>期待与您的合作交流</p>
+        <el-button type="primary" round size="large" @click="$router.push('/link')">
+          联系我们
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {DataAnalysis, Connection, Cpu, Monitor} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-about {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  // 公司简介
+  .intro-section {
+    padding: 16px;
+
+    .company-card {
+      background-color: #ffffff;
+      border-radius: 12px; /* no */
+      overflow: hidden;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+
+      .logo-area {
+        width: 100%;
+        height: 200px; /* no */
+        background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px; /* no */
+
+        .company-logo {
+          max-width: 80%;
+          max-height: 160px; /* no */
+          object-fit: contain;
+        }
+      }
+
+      .info-area {
+        padding: 20px; /* no */
+
+        .company-name {
+          font-size: 20px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 12px 0;
+          text-align: center;
+        }
+
+        .info-tags {
+          display: flex;
+          justify-content: center;
+          gap: 10px; /* no */
+          margin-bottom: 16px; /* no */
+          flex-wrap: wrap;
+
+          .tag {
+            display: inline-block;
+            padding: 4px 12px; /* no */
+            background-color: #f5f7fa;
+            color: #666666;
+            font-size: 12px;
+            border-radius: 14px; /* no */
+          }
+        }
+
+        .company-intro {
+          p {
+            font-size: 14px;
+            line-height: 1.8;
+            color: #555555;
+            text-indent: 2em;
+            margin: 0;
+            text-align: justify;
+          }
+        }
+      }
+    }
+  }
+
+  // 核心优势
+  .advantages-section {
+    padding: 0 16px 16px;
+
+    .section-header {
+      margin-bottom: 16px; /* no */
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 6px 0;
+      }
+
+      .section-desc {
+        font-size: 13px;
+        color: #999999;
+        margin: 0;
+      }
+    }
+
+    .advantages-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px; /* no */
+
+      .advantage-card {
+        background-color: #ffffff;
+        border-radius: 10px; /* no */
+        padding: 16px; /* no */
+        border-left: 3px solid;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: scale(0.97);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .advantage-icon {
+          width: 48px; /* no */
+          height: 48px; /* no */
+          border-radius: 10px; /* no */
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 10px; /* no */
+        }
+
+        .advantage-content {
+          .advantage-title {
+            font-size: 15px;
+            font-weight: 600;
+            color: #1a1a1a;
+            margin: 0 0 6px 0;
+          }
+
+          .advantage-desc {
+            font-size: 12px;
+            color: #666666;
+            margin: 0;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+  }
+
+  // 资质证书
+  .certificate-section {
+    padding: 0 16px 16px;
+
+    .section-header {
+      margin-bottom: 16px; /* no */
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 6px 0;
+      }
+
+      .section-desc {
+        font-size: 13px;
+        color: #999999;
+        margin: 0;
+      }
+    }
+
+    .certificate-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px; /* no */
+
+      .certificate-item {
+        background-color: #ffffff;
+        border-radius: 8px; /* no */
+        overflow: hidden;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* no */
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: scale(0.95);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* no */
+        }
+
+        .certificate-img {
+          width: 100%;
+          height: 200px; /* no */
+          object-fit: contain;
+          background-color: #fafafa;
+          padding: 8px; /* no */
+          box-sizing: border-box;
+        }
+
+        .certificate-name {
+          padding: 8px; /* no */
+          font-size: 11px;
+          color: #666666;
+          text-align: center;
+          background-color: #fafafa;
+        }
+      }
+    }
+  }
+
+  // 企业文化
+  .culture-section {
+    padding: 0 16px 16px;
+
+    .section-header {
+      margin-bottom: 16px; /* no */
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 6px 0;
+      }
+
+      .section-desc {
+        font-size: 13px;
+        color: #999999;
+        margin: 0;
+      }
+    }
+
+    .culture-cards {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px; /* no */
+
+      .culture-card {
+        background-color: #ffffff;
+        border-radius: 10px; /* no */
+        padding: 16px 12px; /* no */
+        text-align: center;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .culture-icon {
+          font-size: 32px;
+          margin-bottom: 8px; /* no */
+        }
+
+        h4 {
+          font-size: 15px;
+          font-weight: 600;
+          color: #1a1a1a;
+          margin: 0 0 6px 0;
+        }
+
+        p {
+          font-size: 11px;
+          color: #666666;
+          line-height: 1.6;
+          margin: 0;
+        }
+
+        &.innovation {
+          border-top: 3px solid #1890ff;
+        }
+
+        &.quality {
+          border-top: 3px solid #faad14;
+        }
+
+        &.cooperation {
+          border-top: 3px solid #52c41a;
+        }
+      }
+    }
+  }
+
+  // 底部CTA
+  .cta-section {
+    margin: 16px; /* no */
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    border-radius: 12px; /* no */
+    padding: 32px 20px; /* no */
+    text-align: center;
+
+    .cta-content {
+      h3 {
+        font-size: 18px;
+        font-weight: 600;
+        color: #ffffff;
+        margin: 0 0 10px 0;
+        line-height: 1.4;
+      }
+
+      p {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.7);
+        margin: 0 0 20px 0;
+      }
+
+      .el-button {
+        width: 180px; /* no */
+        height: 44px; /* no */
+        font-size: 15px;
+        background-color: #ffffff !important;
+        color: #081314 !important;
+        border: none !important;
+
+        &:active {
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/views/homepage/index.vue
+++ b/src/views/homepage/index.vue
@ -1,44 +1,72 @@
 <script setup>
 import Swiper from '@/components/Swiper/index.vue'
-
 import {ref, onMounted} from 'vue'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+import {useRouter} from 'vue-router'
+
+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]
+
 onMounted(() => {})
+
+function onVideoLoaded() {
+  videoLoaded.value = false
+}
+
+function toUrl(item) {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
 </script>

 <template>
-  <div class="page">
+  <div class="page" v-loading="videoLoaded">
    <div class="banner">
-      <video autoplay muted loop>
-        <source src="/static/images/main/display.mp4" type="video/mp4" />
+      <video autoplay muted loop @loadeddata="onVideoLoaded">
+        <source src="/static/video/display.mp4" type="video/mp4" />
      </video>
      <div class="banner-link"><span>进入演示系统</span></div>
    </div>
-    <div class="swiper">
    <Swiper
      id="home_swiper"
      title="产品体系"
      v-model="currentPage"
-        :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-        :page-size="4"
+      :data="list"
+      :page-size="3"
      :show-pagination="true"
+      :source-width="swiperWidth"
+      :source-height="swiperHeight"
      :auto-play="true"
    >
      <template #default="{item, index, isActive}">
-          <div class="my-card" :class="{active: isActive}">
-            <h2>{{ item }}</h2>
+        <div class="list" @click="toUrl(item)">
+          <div class="top">
+            <div class="title">{{ item.title }}</div>
+          </div>
+          <div class="card flex column a-c j-c" :class="{active: isActive}">
+            <img :class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'" :src="`./static/images/${item.imgUrl}`" />
+          </div>
        </div>
      </template>
    </Swiper>
  </div>
-  </div>
 </template>

 <style lang="scss" scoped>
 .page {
-  .banner {
+  .placeholder {
    width: 100%;
    height: 100%;
+  }
+  .banner {
+    width: 100%;
+    height: 800px;
    position: relative;
    background-color: #333333;
    &-link {
@ -68,16 +96,31 @@ onMounted(() => {})
    video {
      padding: 3px;
      width: 100%;
-      height: 100%;
+      height: auto;
      border-radius: 8px;
    }
  }
-  .swiper {
-    width: 100%;
-    height: 800px;
-    .my-card {
-      background: #d9d9d9;
+
+  .list {
    height: 100%;
+    border: 1px solid #eee;
+    .top {
+      height: 50px;
+      border-radius: 8px 8px 0 0;
+      background-color: #0389ff;
+      color: #fff;
+      padding: 15px 0;
+    }
+    .card {
+      height: calc(100% - 50px - 30px);
+    }
+    .r-img {
+      width: 90%;
+      height: auto;
+    }
+    .m-img {
+      width: 70%;
+      height: auto;
    }
  }
 }
--- a/src/views/homepage/mobile.vue
+++ b/src/views/homepage/mobile.vue
@ -0,0 +1,341 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+
+const router = useRouter()
+const videoLoaded = ref(true)
+const list = [...window.softwareSystemList, ...window.hardwareSystemList]
+
+onMounted(() => {
+  console.log('当前是手机端===>',)
+})
+
+function onVideoLoaded() {
+  videoLoaded.value = false
+}
+
+function toUrl(item) {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-homepage" v-loading="videoLoaded">
+    <!-- Banner区域 -->
+    <div class="banner-section">
+      <video autoplay muted loop @loadeddata="onVideoLoaded" class="banner-video">
+        <source src="/static/video/display.mp4" type="video/mp4" />
+      </video>
+      <div class="banner-overlay">
+        <h1 class="banner-title">低空智能监管解决方案</h1>
+        <p class="banner-subtitle">专业 · 创新 · 可靠</p>
+      </div>
+    </div>
+
+    <!-- 产品体系 -->
+    <div class="product-section">
+      <div class="section-header">
+        <h2 class="section-title">产品体系</h2>
+        <p class="section-desc">全方位低空监管产品矩阵</p>
+      </div>
+
+      <div class="product-grid">
+        <div
+          v-for="(item, index) in list"
+          :key="index"
+          class="product-card"
+          @click="toUrl(item)"
+        >
+          <div class="card-image">
+            <img
+              :src="`./static/images/${item.imgUrl}`"
+              :alt="item.title"
+              :class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'"
+            />
+          </div>
+          <div class="card-info">
+            <h3 class="card-title">{{ item.title }}</h3>
+            <p class="card-desc">{{ item.desc || '点击查看详情' }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 特色优势 -->
+    <div class="feature-section">
+      <div class="section-header">
+        <h2 class="section-title">核心优势</h2>
+        <p class="section-desc">技术领先，服务至上</p>
+      </div>
+
+      <div class="feature-grid">
+        <div class="feature-card" v-for="i in 4" :key="i">
+          <div class="feature-icon">
+            <el-icon :size="32"><icon-svg :name="'feature' + i" /></el-icon>
+          </div>
+          <h3 class="feature-title">优势 {{ i }}</h3>
+          <p class="feature-desc">专业的技术团队为您提供优质服务</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mobile-homepage {
+  min-height: 100%;
+  background-color: #f0f2f5;
+
+  // Banner区域
+  .banner-section {
+    position: relative;
+    width: 100%;
+    height: 50vh;
+    min-height: 400px;
+    overflow: hidden;
+
+    .banner-video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .banner-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.3),
+        rgba(0, 0, 0, 0.6)
+      );
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      text-align: center;
+
+      .banner-title {
+        font-size: 28px;
+        font-weight: 700;
+        color: #ffffff;
+        margin-bottom: 12px;
+        line-height: 1.3;
+      }
+
+      .banner-subtitle {
+        font-size: 16px;
+        color: #ffffffd9;
+        margin-bottom: 24px;
+        letter-spacing: 2px;
+      }
+    }
+  }
+
+  // 通用区块标题
+  .section-header {
+    text-align: center;
+    padding: 40px 20px 30px;
+
+    .section-title {
+      font-size: 24px;
+      font-weight: 700;
+      color: #262626;
+      margin-bottom: 8px;
+      position: relative;
+      display: inline-block;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 3px;
+        background: linear-gradient(to right, #1890ff, #096dd9);
+        border-radius: 2px;
+      }
+    }
+
+    .section-desc {
+      font-size: 14px;
+      color: #8c8c8c;
+      margin-top: 16px;
+    }
+  }
+
+  // 产品体系
+  .product-section {
+    background-color: #ffffff;
+    margin: 16px;
+    border-radius: 12px;
+    padding-bottom: 30px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .product-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+      padding: 0 20px;
+
+      .product-card {
+        background: #fafafa;
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 1px solid #f0f0f0;
+
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        }
+
+        .card-image {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: linear-gradient(135deg, #e6f7ff, #bae7ff);
+          padding: 20px;
+
+          img {
+            max-width: 90%;
+            max-height: 100%;
+            object-fit: contain;
+          }
+
+          .m-img {
+            width: 70%;
+          }
+
+          .r-img {
+            width: 85%;
+          }
+        }
+
+        .card-info {
+          padding: 16px;
+
+          .card-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #262626;
+            margin-bottom: 6px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .card-desc {
+            font-size: 13px;
+            color: #8c8c8c;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+  }
+
+  // 特色优势
+  .feature-section {
+    background-color: #ffffff;
+    margin: 16px;
+    border-radius: 12px;
+    padding-bottom: 30px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      padding: 0 20px;
+
+      .feature-card {
+        padding: 20px 16px;
+        background: linear-gradient(135deg, #f0f5ff, #e6f7ff);
+        border-radius: 8px;
+        text-align: center;
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: scale(0.98);
+        }
+
+        .feature-icon {
+          width: 56px;
+          height: 56px;
+          margin: 0 auto 12px;
+          background: linear-gradient(135deg, #1890ff, #096dd9);
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #ffffff;
+          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+        }
+
+        .feature-title {
+          font-size: 15px;
+          font-weight: 600;
+          color: #262626;
+          margin-bottom: 6px;
+        }
+
+        .feature-desc {
+          font-size: 12px;
+          color: #8c8c8c;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+}
+
+// 响应式优化
+@media (max-width: 480px) {
+  .mobile-homepage {
+    .banner-section {
+      height: 45vh;
+      min-height: 350px;
+
+      .banner-overlay {
+        .banner-title {
+          font-size: 22px;
+        }
+
+        .banner-subtitle {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .section-header {
+      .section-title {
+        font-size: 20px;
+      }
+    }
+
+    .product-section {
+      .product-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .feature-section {
+      .feature-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/layout/mobile/index.vue
+++ b/src/views/layout/mobile/index.vue
@ -0,0 +1,367 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter, useRoute} from 'vue-router'
+import {useNavStore} from '@/store/nav'
+import {storeToRefs} from 'pinia'
+import {
+  HomeFilled,
+  Grid,
+  Monitor,
+  Cpu,
+  Document,
+  InfoFilled,
+  Phone,
+  Service,
+  Download,
+  Expand,
+  Fold
+} from '@element-plus/icons-vue'
+
+const router = useRouter()
+const route = useRoute()
+const navStore = useNavStore()
+const {navIndex} = storeToRefs(navStore)
+
+const isCollapse = ref(true)
+const navList = ref([])
+const activeIndex = ref('/')
+
+// 图标映射表 - 使用Element Plus内置图标
+const iconMap = {
+  '首页': 'HomeFilled',
+  '解决方案': 'Grid',
+  '空域感知矩阵': 'Monitor',
+  '低空智控中枢': 'Cpu',
+  '新闻中心': 'Document',
+  '关于我们': 'InfoFilled',
+  '联系我们': 'Phone',
+  '服务与支撑': 'Service',
+  '下载中心': 'Download',
+}
+
+// 获取菜单项对应的图标组件
+const getIconComponent = (label) => {
+  const iconName = iconMap[label] || 'Grid'
+  const iconComponents = {
+    HomeFilled,
+    Grid,
+    Monitor,
+    Cpu,
+    Document,
+    InfoFilled,
+    Phone,
+    Service,
+    Download,
+  }
+  return iconComponents[iconName] || Grid
+}
+
+const handleSelect = (key) => {
+  navStore.changeNavIndex(key)
+  router.push(key)
+}
+
+const toggleMenu = () => {
+  isCollapse.value = !isCollapse.value
+
+  // 派发侧边栏状态变化事件，让其他组件（如详情页底部栏）能够响应
+  window.dispatchEvent(new CustomEvent('sidebar-toggle', {
+    detail: {
+      collapsed: isCollapse.value
+    }
+  }))
+}
+
+onMounted(() => {
+  navList.value = window.nav?.header || []
+  activeIndex.value = route.path
+})
+</script>
+
+<template>
+  <div class="app-layout">
+    <div class="sidebar" :class="{collapse: isCollapse}">
+      <div class="logo" :class="{collapse: isCollapse}">
+        <img src="/static/images/header/logo.png" alt="logo" />
+        <span v-show="!isCollapse" class="logo-text">燃谷科技</span>
+      </div>
+
+      <el-menu
+        :default-active="activeIndex"
+        :collapse="isCollapse"
+        class="sidebar-menu"
+        @select="handleSelect"
+        background-color="#081314"
+        text-color="#999999"
+        active-text-color="#FFFFFF"
+        :collapse-transition="true"
+      >
+        <template v-for="nav in navList" :key="nav.id">
+          <el-sub-menu
+            v-if="nav.hasChildren || nav?.children?.length > 0"
+            :index="nav.url"
+          >
+            <template #title>
+              <el-icon :size="18">
+                <component :is="getIconComponent(nav.label)" />
+              </el-icon>
+              <span>{{ nav.label }}</span>
+            </template>
+            <el-menu-item
+              v-for="child in nav.children"
+              :key="child.id"
+              :index="child.url"
+            >
+              <el-icon :size="18">
+                <component :is="getIconComponent(child.label)" />
+              </el-icon>
+              <span>{{ child.label }}</span>
+            </el-menu-item>
+          </el-sub-menu>
+
+          <el-menu-item v-else :index="nav.url">
+            <el-icon :size="18">
+              <component :is="getIconComponent(nav.label)" />
+            </el-icon>
+            <span>{{ nav.label }}</span>
+          </el-menu-item>
+        </template>
+      </el-menu>
+
+      <div class="toggle-btn" @click="toggleMenu">
+        <el-icon :size="18">
+          <Expand v-if="isCollapse" />
+          <Fold v-else />
+        </el-icon>
+      </div>
+    </div>
+
+    <div class="main-content" :data-collapsed="isCollapse">
+      <router-view v-slot="{Component}">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-layout {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-color: #f0f2f5;
+
+  .sidebar {
+    width: 160px;
+    height: 100vh;
+    height: 100%; /* no */
+    min-height: 100vh; /* no */
+    background-color: #081314;
+    display: flex;
+    flex-direction: column;
+    transition: width 0.3s ease;
+    overflow: hidden;
+    position: fixed; /* no */
+    left: 0; /* no */
+    top: 0; /* no */
+    bottom: 0; /* no */
+    z-index: 1000;
+
+    &.collapse {
+      width: 54px;
+    }
+
+    .logo {
+      height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 12px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      transition: all 0.3s ease;
+      overflow: hidden;
+      flex-shrink: 0;
+
+      img {
+        width: 30px;
+        height: 30px;
+        object-fit: contain;
+        flex-shrink: 0;
+      }
+
+      .logo-text {
+        margin-left: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #ffffff;
+        white-space: nowrap;
+      }
+
+      &.collapse {
+        justify-content: center;
+        padding: 10px;
+      }
+    }
+
+    .sidebar-menu {
+      flex: 1;
+      border-right: none;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 8px 0;
+
+      // 覆盖 Element Plus 默认样式
+      :deep(.el-menu) {
+        border-right: none;
+        background-color: transparent;
+      }
+
+      :deep(.el-menu--collapse) {
+        width: 54px;
+      }
+
+      :deep(.el-sub-menu__title),
+      :deep(.el-menu-item) {
+        height: 42px;
+        line-height: 42px;
+        padding: 0 12px !important;
+        color: #999999 !important;
+        font-size: 13px !important;
+
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.1) !important;
+          color: #FFFFFF !important;
+        }
+
+        &.is-active {
+          background-color: rgba(255, 255, 255, 0.15) !important;
+          color: #FFFFFF !important;
+          border-right: 3px solid #FFFFFF;
+        }
+
+        .el-icon {
+          font-size: 18px;
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+          color: inherit;
+        }
+      }
+
+      :deep(.el-menu--collapse) {
+        .el-sub-menu__title,
+        .el-menu-item {
+          padding: 0 !important;
+          text-align: center;
+          
+          .el-icon {
+            margin-right: 0;
+          }
+
+          span {
+            display: none;
+          }
+        }
+      }
+
+      &:not(.el-menu--collapse) {
+        width: 160px;
+      }
+
+      // 子菜单展开样式优化
+      :deep(.el-sub-menu) {
+        .el-sub-menu__icon {
+          color: rgba(255, 255, 255, 0.45);
+          font-size: 12px;
+          transition: transform 0.3s ease;
+        }
+
+        &.is-opened > .el-sub-menu__title .el-sub-menu__icon {
+          transform: rotate(180deg);
+        }
+
+        // 子菜单列表
+        .el-menu {
+          background-color: rgba(0, 0, 0, 0.2);
+
+          .el-menu-item {
+            padding-left: 36px !important;
+            position: relative;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 24px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 4px;
+              height: 4px;
+              border-radius: 50%;
+              background-color: #666;
+              transition: all 0.3s ease;
+            }
+
+            &:hover::before,
+            &.is-active::before {
+              background-color: #FFFFFF;
+              width: 6px;
+              height: 6px;
+            }
+          }
+        }
+      }
+    }
+
+    .toggle-btn {
+      height: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: rgba(255, 255, 255, 0.65);
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+
+      &:hover {
+        color: #ffffff;
+        background-color: rgba(255, 255, 255, 0.06);
+      }
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .main-content {
+    flex: 1;
+    margin-left: 160px;
+    transition: margin-left 0.3s ease;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #f0f2f5;
+    min-height: 100vh; /* no */
+    width: calc(100% - 160px); /* no */
+  }
+}
+
+// 使用 JavaScript 控制主内容区的左边距
+.main-content[data-collapsed="true"] {
+  margin-left: 54px !important;
+  width: calc(100% - 54px) !important; /* no */
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/src/views/link/index.vue
+++ b/src/views/link/index.vue
@ -34,7 +34,7 @@ onMounted(() => {})
            <div class="label">燃谷科技（南京）有限公司</div>
            <div class="label">电话：13222013393</div>
            <div class="label">邮箱：company@rangutech.com</div>
-            <div class="label">地址：江苏省南京市鼓楼区万谷硅巷9F</div>
+            <div class="label">地址：江苏省南京市鼓楼区万谷硅巷5F</div>
          </div>
          <img class="img" src="/static/images/link/map.png" @click="toCompany"></img>
        </div>
--- a/src/views/link/map.vue
+++ b/src/views/link/map.vue
@ -1,6 +1,12 @@
 <script setup>
 import {ref, onMounted} from 'vue'

+window.GD_KEYS = [
+  '348d477ba83826e46b32d3ff10fffe82',
+  'ed2ea36f8564541569c370254845d93d',
+  'c1da03827f956a215311c0f5229bddc3',
+]
+
 const map = ref(null)

 const center = [118.762616, 32.068811]
--- a/src/views/link/mobile.vue
+++ b/src/views/link/mobile.vue
@ -0,0 +1,376 @@
+<script setup>
+import {ref} from 'vue'
+
+const loading = ref(false)
+
+// 联系信息
+const contactInfo = {
+  company: '燃谷科技（南京）有限公司',
+  phone: '13222013393',
+  email: 'company@rangutech.com',
+  address: '江苏省南京市鼓楼区万谷硅巷5F',
+  mapUrl:
+    'https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8',
+}
+
+// 快捷操作
+const handlePhoneCall = () => {
+  window.location.href = `tel:${contactInfo.phone}`
+}
+
+const handleSendEmail = () => {
+  window.location.href = `mailto:${contactInfo.email}`
+}
+
+const openMap = () => {
+  window.open(contactInfo.mapUrl)
+}
+</script>
+
+<template>
+  <div class="mobile-link">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">联系我们</h1>
+      <p class="page-subtitle">期待与您的合作交流</p>
+    </div>
+
+    <!-- 公司信息卡片 -->
+    <div class="info-section">
+      <div class="company-card">
+        <div class="company-icon">
+          <el-icon :size="32" color="#081314"><OfficeBuilding /></el-icon>
+        </div>
+        <h2 class="company-name">{{ contactInfo.company }}</h2>
+        <p class="company-desc">专业低空智能监管解决方案提供商</p>
+      </div>
+
+      <!-- 联系方式列表 -->
+      <div class="contact-list">
+        <!-- 电话 -->
+        <div class="contact-item" @click="handlePhoneCall">
+          <div class="contact-icon phone">
+            <el-icon :size="20"><Phone /></el-icon>
+          </div>
+          <div class="contact-content">
+            <div class="contact-label">联系电话</div>
+            <div class="contact-value">{{ contactInfo.phone }}</div>
+          </div>
+          <div class="contact-action">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+
+        <!-- 邮箱 -->
+        <div class="contact-item" @click="handleSendEmail">
+          <div class="contact-icon email">
+            <el-icon :size="20"><Message /></el-icon>
+          </div>
+          <div class="contact-content">
+            <div class="contact-label">电子邮箱</div>
+            <div class="contact-value">{{ contactInfo.email }}</div>
+          </div>
+          <div class="contact-action">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+
+        <!-- 地址 -->
+        <div class="contact-item" @click="openMap">
+          <div class="contact-icon location">
+            <el-icon :size="20"><Location /></el-icon>
+          </div>
+          <div class="contact-content">
+            <div class="contact-label">公司地址</div>
+            <div class="contact-value">{{ contactInfo.address }}</div>
+          </div>
+          <div class="contact-action">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 地图区域 -->
+    <div class="map-section">
+      <div class="section-title">
+        <el-icon :size="18"><MapLocation /></el-icon>
+        <span>位置导航</span>
+      </div>
+      <div class="map-container" @click="openMap">
+        <img src="/static/images/link/map.png" alt="地图" class="map-image" />
+        <div class="map-overlay">
+          <el-icon :size="24"><Position /></el-icon>
+          <span>点击查看详细地图</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 快捷操作栏 -->
+    <div class="action-bar">
+      <button class="action-btn primary" @click="handlePhoneCall">
+        <el-icon :size="18"><Phone /></el-icon>
+        <span>电话咨询</span>
+      </button>
+      <button class="action-btn secondary" @click="handleSendEmail">
+        <el-icon :size="18"><Message /></el-icon>
+        <span>邮件联系</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  OfficeBuilding,
+  Phone,
+  Message,
+  Location,
+  ArrowRight,
+  MapLocation,
+  Position,
+} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-link {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 80px; /* no */
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .info-section {
+    padding: 16px;
+
+    // 公司信息卡片
+    .company-card {
+      background-color: #ffffff;
+      border-radius: 12px; /* no */
+      padding: 20px; /* no */
+      text-align: center;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+      margin-bottom: 16px; /* no */
+
+      .company-icon {
+        width: 64px; /* no */
+        height: 64px; /* no */
+        border-radius: 50%;
+        background-color: #f0f5ff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 12px; /* no */
+      }
+
+      .company-name {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 8px 0;
+      }
+
+      .company-desc {
+        font-size: 13px;
+        color: #666666;
+        margin: 0;
+      }
+    }
+
+    // 联系方式列表
+    .contact-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px; /* no */
+
+      .contact-item {
+        background-color: #ffffff;
+        border-radius: 10px; /* no */
+        padding: 16px; /* no */
+        display: flex;
+        align-items: center;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .contact-icon {
+          width: 44px; /* no */
+          height: 44px; /* no */
+          border-radius: 10px; /* no */
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 12px; /* no */
+          flex-shrink: 0;
+
+          &.phone {
+            background-color: #e6f7ff;
+            color: #1890ff;
+          }
+
+          &.email {
+            background-color: #fff7e6;
+            color: #fa8c16;
+          }
+
+          &.location {
+            background-color: #f6ffed;
+            color: #52c41a;
+          }
+        }
+
+        .contact-content {
+          flex: 1;
+          min-width: 0;
+
+          .contact-label {
+            font-size: 12px;
+            color: #999999;
+            margin-bottom: 4px; /* no */
+          }
+
+          .contact-value {
+            font-size: 14px;
+            color: #1a1a1a;
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .contact-action {
+          color: #cccccc;
+          flex-shrink: 0;
+          margin-left: 8px; /* no */
+        }
+      }
+    }
+  }
+
+  // 地图区域
+  .map-section {
+    padding: 0 16px 16px; /* no */
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 6px; /* no */
+      font-size: 16px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin-bottom: 12px; /* no */
+      padding-left: 4px; /* no */
+    }
+
+    .map-container {
+      position: relative;
+      width: 100%;
+      height: 220px; /* no */
+      border-radius: 10px; /* no */
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
+      cursor: pointer;
+
+      .map-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .map-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+        padding: 20px 16px 12px; /* no */
+        display: flex;
+        align-items: center;
+        gap: 8px; /* no */
+        color: #ffffff;
+        font-size: 13px;
+
+        .el-icon {
+          flex-shrink: 0;
+        }
+      }
+
+      &:active .map-overlay {
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
+      }
+    }
+  }
+
+  // 底部快捷操作栏
+  .action-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #ffffff;
+    padding: 12px 16px; /* no */
+    display: flex;
+    gap: 12px; /* no */
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); /* no */
+    z-index: 100;
+
+    .action-btn {
+      flex: 1;
+      height: 48px; /* no */
+      border: none;
+      border-radius: 24px; /* no */
+      font-size: 15px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px; /* no */
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:active {
+        transform: scale(0.96);
+      }
+
+      &.primary {
+        background: linear-gradient(135deg, #081314, #1a2634);
+        color: #ffffff;
+        box-shadow: 0 4px 12px rgba(8, 19, 20, 0.3); /* no */
+      }
+
+      &.secondary {
+        background-color: #f5f7fa;
+        color: #081314;
+        border: 1px solid #e0e0e0;
+      }
+
+      .el-icon {
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/manager/index.vue
+++ b/src/views/manager/index.vue
@ -3,8 +3,9 @@ import axios from 'axios';
 import { ref, reactive, onMounted } from 'vue';
 import { QuillEditor } from '@vueup/vue-quill'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
+import {getNews,getNewsDetail,updateNews,saveDetail} from '@/api/index'

-const API_BASE = window.config?.baseUrl
+const baseURL = window.config?.baseUrl

 // 新闻列表
 const newsList = ref([]);
@ -45,14 +46,20 @@ const editorOption= {
  modules:{
    toolbar: {
      container: [
-        ['bold', 'italic', 'underline', 'strike'],
-        [{ header: 1 }, { header: 2 }],
-        [{ list: 'ordered' }, { list: 'bullet' }],
-        [{ indent: '-1' }, { indent: '+1' }],
-        [{ color: [] }, { background: [] }],
-        [{ align: [] }],
-        ['link', 'image'],
-        ['clean'],
+        ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
+        ['blockquote', 'code-block'], //引用，代码块
+        [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
+        [{'list': 'ordered'}, {'list': 'bullet'}], //列表
+        [{'script': 'sub'}, {'script': 'super'}], // 上下标
+        [{'indent': '-1'}, {'indent': '+1'}], // 缩进
+        [{'direction': 'rtl'}], // 文本方向
+        [{'size': ['small', false, 'large', 'huge']}], // 字体大小
+        [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
+        [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
+        [{'font': []}], //字体
+        [{'align': []}], //对齐方式
+        ['clean'], //清除字体样式
+        ['image', 'video'] //上传图片、上传视频
      ],
      handlers: {
        image: imageHandler,
@ -127,16 +134,15 @@ function imageHandler() {
 // ----------------- 获取新闻 -----------------
 const fetchNews = async () => {
  try {
-    const res = await axios.get(`${API_BASE}/news/`, {
-      params: {
+    let query = {
+      status: statusFilter.value || undefined,
      page: page.value,
      page_size: pageSize.value,
-        status: statusFilter.value || undefined,
-      },
-    });
-    if (res.data.code === 0) {
-      newsList.value = res.data.data;
-      totalPages.value = res.data.pagination.total_pages;
+    }
+    let {code, data, pagination} = await getNews(query)
+    if (code === 0) {
+      newsList.value = data;
+      totalPages.value = pagination.total_pages;
    }
  } catch (err) {
    console.error("获取新闻失败", err);
@ -146,10 +152,11 @@ const fetchNews = async () => {
 // ----------------- 添加/编辑 -----------------
 const saveNews = async () => {
  try {
+    editingNews.content = quillInstance.value.root.innerHTML
    if (isEditing.value) {
-      await axios.post(`${API_BASE}/news/B8fpNxunbxj37x3VRcVz`, editingNews);
+      await updateNews(editingNews);
    } else {
-      await axios.post(`${API_BASE}/news/VbxWW8EdJQGyWzJyvSrN`, editingNews);
+      await saveDetail(editingNews);
    }
    showForm.value = false;
    fetchNews();
@ -161,16 +168,15 @@ const saveNews = async () => {
 const editNews = async (news) => {
  loading.value = true;
  try {
-    const res = await axios.get(`${API_BASE}/news/details`, {
-      params: { slug: news.slug }
-    });
-   
-    console.log(res.data)
-    if (res.data.code === 0) {
-      console.log(res.data.data)
-      Object.assign(editingNews, res.data.data);
+    let query = {
+      slug: news.slug,
+    }
+    let {code, data} = await getNewsDetail(query)
+    if (code === 0) {
+      Object.assign(editingNews, data);
      isEditing.value = true;
      showForm.value = true;
+      quillInstance.value.clipboard.dangerouslyPasteHTML(editingNews.content)
    }
  } finally {
    loading.value = false;
@ -185,6 +191,7 @@ const addNews = () => {
    content: "",
    status: "draft",
    slug: "",
+    datetime: null,
  });
  isEditing.value = false;
  showForm.value = true;
@ -222,7 +229,7 @@ function uploadImage(file) {
    const formData = new FormData();
    formData.append('file', file);

-    fetch(`${API_BASE}/update/img`, {
+    fetch(`${baseURL}update/img`, {
      method: 'POST',
      body: formData,
    })
@ -230,7 +237,7 @@ function uploadImage(file) {
      .then((data) => {
        if (data.code === 0) {
        console.log(data)
-          resolve(`${API_BASE}/download/img/${data.data}`);
+          resolve(`${baseURL}download/img/${data.data}`);
        } else {
          reject(data.msg);
        }
@ -243,6 +250,7 @@ function uploadImage(file) {

 onMounted(() => {
  fetchNews();
+  addNews();
 });
 </script>

@ -303,7 +311,7 @@ onMounted(() => {
      </div>
      <label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
      <label>内容:</label>
-      <quill-editor v-model:content="editingNews.content" content-type="delta" 
+      <quill-editor content-type="html" 
        theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
      <label>状态:
        <select v-model="editingNews.status">
--- a/src/views/news/detail.vue
+++ b/src/views/news/detail.vue
@ -1,15 +1,49 @@
 <script setup>
-import {onMounted} from 'vue'
+import {onMounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'

-import {newsDetail} from './mock'
+import {getNewsDetail} from '@/api/index'
+import {ElMessage} from 'element-plus'

 const route = useRoute()
 const detail = route.query
-detail.artical = newsDetail.find((item) => item.id == route.query.id).article
+const showLoad = ref(true)
+
+const newsTitle = ref('')
+const newsTime = ref('')
+const newsSubTitle = ref('')
+const newsCoverImg = ref('')
+const newsContent = ref(null)

 const router = useRouter()
-onMounted(() => {})
+
+onMounted(() => {
+  getDetail()
+})
+
+const getDetail = () => {
+  let query = {
+    slug: detail.slug,
+  }
+  getNewsDetail(query)
+    .then((res) => {
+      if (res.code === 0) {
+        let {content, cover_image, snapshot, datetime, title} = res.data
+        newsTitle.value = title
+        newsTime.value = datetime
+        newsSubTitle.value = snapshot
+        newsCoverImg.value = cover_image
+        newsContent.value = content
+        showLoad.value = false
+      } else {
+        ElMessage.error(res.msg)
+        showLoad.value = false
+      }
+    })
+    .catch((err) => {
+      showLoad.value = false
+    })
+}

 const toBack = () => {
  router.back()
@ -17,55 +51,49 @@ const toBack = () => {
 </script>

 <template>
-  <div class="page flex column a-c">
-    <div class="label">
-      {{ detail.label }}
-    </div>
-    <div class="time">
-      {{ detail.time }}
-    </div>
-    <div class="img">
-      <img :src="`./static/images/${detail.imgUrl}`" alt="" />
-    </div>
+  <div class="page flex column a-c" v-loading="showLoad">
+    <div v-if="newsTitle">
+      <h3 class="label">
+        {{ newsTitle }}
+      </h3>
+      <h3 class="time" v-if="newsTime">
+        {{ newsTime }}
+      </h3>
      <div class="artical">
-      {{ detail.artical }}
+        <div v-html="newsContent"></div>
      </div>
+    </div>
+    <div v-else class="no-content">暂无内容</div>
    <div class="back" @click="toBack">返回</div>
  </div>
 </template>

 <style lang="scss" scoped>
-.label {
+.page {
+  .label {
+    text-align: center;
    margin: 64px 0 20px 0;
    font-family: 'PingFang SC';
    font-weight: 500;
    font-size: 28px;
    color: $black;
-}
-.time {
-  margin-bottom: 40px;
-}
-.img {
-  width: 1200px;
-  height: 600px;
-  margin-bottom: 40px;
-  img {
-    width: 100%;
-    height: 100%;
  }
-}
-.artical {
-  width: 1200px;
+  .time {
+    text-align: center;
    font-family: 'PingFang SC';
-  font-weight: 400;
-  font-size: 18px;
-  color: $black;
-  text-indent: 2em;
-  white-space: pre-wrap; /* 保留换行符，同时允许自动折行 */
-  word-break: break-word; /* 长单词截断 */
-  margin-bottom: 300px;
-}
-.back {
+    font-weight: 500;
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+  .artical {
+    width: 1200px;
+  }
+  .no-content {
+    margin-top: 40px;
+    font-size: 32px;
+  }
+  .back {
+    margin-top: 40px;
    padding: 10px 40px;
    background: #0389ff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
@ -74,5 +102,6 @@ const toBack = () => {
    font-size: 20px;
    color: $white;
    cursor: pointer;
+  }
 }
 </style>
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@ -1,39 +1,72 @@
 <script setup>
 defineOptions({name: 'New'})
-import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
+import {ref, onMounted, nextTick, onActivated, onDeactivated, computed} from 'vue'
 import Banner from '@/components/Banner/index.vue'
 import Swiper from '@/components/Swiper/index.vue'
 import {useRouter} from 'vue-router'
 import {onBeforeRouteLeave} from 'vue-router'
-import {list} from './mock'
+import {getNews} from '@/api/index'
+import {fontSize} from '@/utils'

 const currentPage = ref(1)
+const showLoad = ref(true)
+const containerWidth = ref(fontSize(1700))
+const containerHeight = computed(() => {
+  if (newList.value.length > 0) {
+    return 350 * newList.value.length
+  } else {
+    return 200
+  }
+})

-const containerWidth = ref(1700)
-const containerHeight = ref(1400)
-
-onMounted(() => {})
+onMounted(() => {
+  getNewList()
+})

 let router = useRouter()
+
+let scrollTop = 0
+
+const newList = ref([])
+
+const page = ref({
+  pageNum: 1,
+  pageSize: 10,
+  totalPages: 0,
+})
+
+async function getNewList() {
+  let query = {
+    status: 'published',
+    page: page.value.pageNum,
+    page_size: page.value.pageSize,
+  }
+
+  getNews(query)
+    .then((res) => {
+      if (res.code === 0) {
+        newList.value = res.data
+        page.value.totalPages = res.pagination.total_pages
+        showLoad.value = false
+      } else {
+        showLoad.value = false
+      }
+    })
+    .catch(() => {
+      showLoad.value = false
+    })
+}
+
 const toDetail = (item) => {
  router.push({
    path: '/news/detail',
    query: {
      id: item.id,
-      imgUrl: item.imgUrl,
-      label: item.label,
-      time: item.time,
-      subLabel: item?.subLabel,
+      slug: item.slug,
    },
  })
 }

-let scrollTop = 0
-
-onDeactivated(() => {
-  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-})
-
 onActivated(async () => {
  await nextTick()
  // 再强制等一帧布局
@ -42,20 +75,20 @@ onActivated(async () => {
  })
 })

+onDeactivated(() => {
+  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+})
+
 onBeforeRouteLeave((to) => {
  if (to.name === 'Detail') return
-
-  // 去别的顶级菜单 → 销毁
  const parent = to.matched[0]
  if (parent?.name !== 'News') {
-    // 通过修改路由 meta 让 keep-alive 排除当前组件
-    // 需要把 keep-alive 写成 :include="cachedNames" 并在 pinia 里维护数组
  }
 })
 </script>

 <template>
-  <div class="page">
+  <div class="page" v-loading="showLoad">
    <Banner class="banner" img="banner/news.png" />
    <Swiper
      id="one"
@ -69,24 +102,27 @@ onBeforeRouteLeave((to) => {
    >
      <template #default="{item, index, isActive}">
        <div class="my-card">
+          <template v-if="newList.length > 0">
            <div
              class="news flex j-s"
              :class="{active: isActive}"
-            v-for="item in list"
+              v-for="item in newList"
              :key="item.id"
              @click="toDetail(item)"
            >
              <div class="img">
-              <img :src="`./static/images/${item.imgUrl}`" />
+                <img :src="item.cover_image" />
              </div>

              <div class="content">
-              <div class="label">{{ item.label }}</div>
-              <div class="time">{{ item.time }}</div>
+                <div class="label">{{ item.title }}</div>
+                <div class="time">{{ item?.time }}</div>
                <div class="sub-label">{{ item?.subLabel }}</div>
-              <div class="text">{{ item.content }}</div>
+                <div class="text">{{ item.snapshot }}</div>
              </div>
            </div>
+          </template>
+          <div v-else class="no-content">暂无内容</div>
        </div>
      </template>
    </Swiper>
@ -153,5 +189,10 @@ onBeforeRouteLeave((to) => {
      color: #999999;
    }
  }
+
+  .no-content {
+    margin-top: 40px;
+    font-size: 24px;
+  }
 }
 </style>
--- a/src/views/news/mobile.vue
+++ b/src/views/news/mobile.vue
@ -0,0 +1,283 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+const loading = ref(true)
+
+// 假数据 - 新闻列表
+const newsList = ref([
+  {
+    id: 1,
+    title: '燃谷科技完成A轮融资，加速低空经济布局',
+    cover_image: '/static/images/main/1.png',
+    time: '2025-01-15',
+    category: '公司动态',
+    snapshot: '近日，燃谷科技宣布完成数千万元A轮融资，本轮融资将主要用于技术研发和市场拓展...',
+  },
+  {
+    id: 2,
+    title: '低空智控中枢系统V3.0版本正式发布',
+    cover_image: '/static/images/main/2.png',
+    time: '2025-01-10',
+    category: '产品更新',
+    snapshot: '燃谷科技正式发布低空智控中枢系统V3.0版本，新增AI智能识别、多源数据融合等核心功能...',
+  },
+  {
+    id: 3,
+    title: '携手共建智慧城市：燃谷科技与多地政府达成战略合作',
+    cover_image: '/static/images/main/3.png',
+    time: '2025-01-05',
+    category: '行业合作',
+    snapshot: '燃谷科技先后与深圳、成都、杭州等多地政府签署战略合作协议，共同推进低空经济示范区建设...',
+  },
+  {
+    id: 4,
+    title: '空域感知矩阵系统荣获技术创新奖',
+    cover_image: '/static/images/main/4.png',
+    time: '2024-12-28',
+    category: '荣誉资质',
+    snapshot: '在第十届中国航空航天博览会上，燃谷科技的空域感知矩阵系统凭借卓越的技术创新性荣获年度技术创新奖...',
+  },
+  {
+    id: 5,
+    title: '低空监管解决方案成功应用于多个无人机物流项目',
+    cover_image: '/static/images/main/5.png',
+    time: '2024-12-20',
+    category: '应用案例',
+    snapshot: '燃谷科技的低空智能监管解决方案已成功应用于京东、顺丰等企业的多个无人机物流配送项目...',
+  },
+  {
+    id: 6,
+    title: '燃谷科技受邀参加国际低空经济论坛并发表主题演讲',
+    cover_image: '/static/images/main/6.png',
+    time: '2024-12-15',
+    category: '行业活动',
+    snapshot: '燃谷科技CEO张明受邀参加在新加坡举办的国际低空经济论坛，就"低空安全监管技术趋势"发表主题演讲...',
+  },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+})
+
+const toDetail = (item) => {
+  router.push({
+    path: '/news/detail',
+    query: {
+      id: item.id,
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-news" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">新闻中心</h1>
+      <p class="page-subtitle">了解燃谷科技最新动态</p>
+    </div>
+
+    <!-- 新闻列表 -->
+    <div class="news-list">
+      <div
+        v-for="item in newsList"
+        :key="item.id"
+        class="news-card"
+        @click="toDetail(item)"
+      >
+        <!-- 封面图 -->
+        <div class="news-image">
+          <img :src="item.cover_image" :alt="item.title" />
+          <span class="news-category">{{ item.category }}</span>
+        </div>
+
+        <!-- 内容区 -->
+        <div class="news-content">
+          <h3 class="news-title">{{ item.title }}</h3>
+          <p class="news-desc">{{ item.snapshot }}</p>
+          <div class="news-meta">
+            <span class="news-time">
+              <el-icon><Clock /></el-icon>
+              {{ item.time }}
+            </span>
+            <span class="read-more">
+              阅读更多
+              <el-icon><ArrowRight /></el-icon>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-if="!loading && newsList.length === 0" class="empty-state">
+      <el-icon :size="64" color="#cccccc"><Document /></el-icon>
+      <p>暂无新闻内容</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Clock, ArrowRight, Document} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-news {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .news-list {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .news-card {
+    background-color: #ffffff;
+    border-radius: 8px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* no */
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.98);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* no */
+    }
+
+    .news-image {
+      position: relative;
+      width: 100%;
+      height: 180px; /* no */
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s ease;
+      }
+
+      &:active img {
+        transform: scale(1.05);
+      }
+
+      .news-category {
+        position: absolute;
+        top: 12px; /* no */
+        left: 12px; /* no */
+        padding: 4px 10px; /* no */
+        background-color: rgba(8, 19, 20, 0.85);
+        color: #ffffff;
+        font-size: 11px;
+        border-radius: 12px; /* no */
+        backdrop-filter: blur(4px);
+      }
+    }
+
+    .news-content {
+      padding: 14px; /* no */
+
+      .news-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 8px 0;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .news-desc {
+        font-size: 13px;
+        color: #666666;
+        line-height: 1.6;
+        margin: 0 0 12px 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .news-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 1px solid #f0f0f0;
+        padding-top: 10px; /* no */
+
+        .news-time {
+          display: flex;
+          align-items: center;
+          gap: 4px; /* no */
+          font-size: 12px;
+          color: #999999;
+
+          .el-icon {
+            font-size: 14px;
+          }
+        }
+
+        .read-more {
+          display: flex;
+          align-items: center;
+          gap: 4px; /* no */
+          font-size: 12px;
+          color: #081314;
+          font-weight: 500;
+
+          .el-icon {
+            font-size: 14px;
+            transition: transform 0.3s ease;
+          }
+
+          &:active .el-icon {
+            transform: translateX(3px);
+          }
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px; /* no */
+    color: #999999;
+
+    p {
+      margin-top: 16px; /* no */
+      font-size: 14px;
+    }
+  }
+}
+</style>
--- a/src/views/product/description.js
+++ b/src/views/product/description.js
@ -1,63 +0,0 @@
-export const advantages = `
-        <div>★ 提供业界领先的性价比解决方案。</div>
-        <div>★ 内置4G全网通，无需外接网络，即装即用。</div>
-        <div>★ 宽电压输入，轻松应对电压不稳等复杂情况。</div>
-        <div>★ 超低功耗设计，极大节约长期用电与运维成本。</div>
-        <div>★ 极致轻量，极大拓宽了安装位置与应用场景。</div>
-        <div>★ 灵活可调的侦测模式，满足从安防到巡检的全场景需求。</div>
-        <div>★ 具备升级能力，当前投资可平滑演进至更高专业层级。</div>
-        `
-
-export const monitorSystemList = [
-  {
-    id: 1,
-    description: `
-        <div  class="monitor">RGRID-Lite 是一款专为国标无人机远程识别设计的地面监测设备。它能够精准获取低空目标区域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并动态显示与记录无人机及飞手的移动轨迹。所有数据实时上传至后台系统，支持长期存储与便捷回溯，为空域监管提供完整的数据支撑。</div>        
-        <div  class="monitor">设备采用轻量化与一体化设计，部署灵活，可快速适配多种复杂安装环境。凭借超低功耗特性，可搭配UPS不间断电源或太阳能供电系统，实现长时间稳定运行。同时，内置4G全网通模块，无需依赖外部网络，彻底解决供电与传输难题。</div>        
-        <div  class="monitor">RGRID-Lite 在具备卓越性能的同时，展现出优异的性价比，广泛适用于各类低空监管场景。设备支持功能定制与二次开发，可根据用户需求灵活扩展，是构建低成本、高效率无人机监管体系的理想之选。</div>        
-        `,
-  },
-  {
-    id: 2,
-    description: `
-        <div  class="monitor">RGRID-Ped 是一款遵循国标GB42590-2023的便携式无人机远程识别模块。它能够精准监测并获取目标空域内无人机的多项关键数据，包括实时位置、飞手位置、唯一SN识别码、飞行型号、航速与高度等，并实时推送至用户平台。</div>
-        <div  class="monitor">该模块采用高度集成化设计，体积小巧、功耗极低，具备完善的接口与通信协议，可快速适配并嵌入各类无人机反制、监管或作业设备中，轻松应对有限的内部空间要求。同时，模块支持全方位的二次开发与功能定制，为各类集成应用提供可靠、灵活的低空感知核心。</div>
-        `,
-  },
-  {
-    id: 3,
-    description: `
-        <div  class="monitor">RGRID-Mob 是一款符合国标 GB42590-2023 的便携式无人机远程识别设备，专为机动巡检与快速部署场景设计。它可精准监测目标空域内无人机的实时位置、飞手位置、唯一SN识别码等关键信息，并实时显示与记录无人机与飞手的动态轨迹。所有数据同步上传至后台，支持长期存储与灵活调阅，为空域执法与现场处置提供完整信息支撑。</div>
-        <div  class="monitor">设备支持多终端协同管理，用户可通过移动端小程序实时查看数据，指挥中心亦能通过大屏系统统览全局。系统具备分级权限管理功能，支持多级账户与设备组网，实现权限分离与协同指挥。手机端集成一键导航功能，可快速定位飞手位置；指挥平台则全面监管辖区内所有设备状态与每架被侦测无人机的详细数据，真正实现“前端机动侦测—后端统一指挥”的一体化管控闭环。</div>
-        <div  class="monitor">RGRID-Mob 重量轻、体积小，可随身挂载，便于野外作业与快速机动。内置4G数据传输模块，开机即用，无需复杂配对，极大提升部署效率与操作便捷性，是应对突发低空监管任务的理想移动侦测终端。</div>
-        `,
-  },
-]
-
-export const remoteDeviceList = [
-  {
-    id: 1,
-    description: `<div>多模态数据融合：直面不同侦测设备的数据壁垒，凭借自研融合算法，呈现深度可靠的全局态势。</div>
-        <div>体系化平台搭配：作为中枢神经，无缝对接与总览旗下各类专业平台，奠定一站式服务基石。</div>`,
-  },
-  {
-    id: 2,
-    description: ` <div>大量设备接入经验：具备广泛的设备兼容性，确保监管网络覆盖无死角。</div>
-        <div>SAAS化架构：支持多租户权限管理，满足不同区域、不同层级管理单位的独立运营与协同监管需求。</div>`,
-  },
-  {
-    id: 3,
-    description: `<div>大量行业内接入经验：预集成了众多厂商设备接口，极大降低了系统集成难度与成本，体现了卓越的性价比。</div>
-        <div>体系化平台搭配：与监管平台无缝联动，接收预警并执行指令，形成“侦-识-控”一体的完整闭环。</div>`,
-  },
-  {
-    id: 4,
-    description: `<div>多模态数据融合：将飞行数据、视频流与AI识别结果深度融合，输出可直接应用的业务洞察。</div>
-        <div>SAAS化架构：支持多团队、多项目并行作业与数据隔离，轻松管理大规模机队。</div>`,
-  },
-  {
-    id: 5,
-    description: ` <div>体系化平台搭配：与真实监管平台联动，是“一站式服务”中用于模拟、预测与优化的关键一环。</div>
-        <div>多模态数据融合：将真实地理信息、仿真数据与实时监管流融合，在虚拟空间中复现最真实的低空场景。</div>`,
-  },
-]
--- a/src/views/product/detail.vue
+++ b/src/views/product/detail.vue
@ -1,16 +1,24 @@
 <script setup>
-import {ref, onMounted, computed} from 'vue'
+import {ref, onMounted, shallowRef, watchEffect} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
-import {advantages, monitorSystemList, remoteDeviceList} from './description.js'
+import {cryptoDecrypt} from '@/utils/cryptojs.js'
+
+const advantages = window.advantages

 const route = useRoute()
 const router = useRouter()

-const detail = route.query
+const query = JSON.parse(cryptoDecrypt(route.query.type))

-const showMonitor = computed(() => detail.type === 'monitorSystem')
+const videoLoaded = ref(false)

-onMounted(() => {})
+onMounted(() => {
+  videoLoaded.value = query.type !== 'softwareSystem' ? false : true
+})
+
+function onVideoLoaded() {
+  videoLoaded.value = false
+}

 const toBack = () => {
  router.back()
@ -18,58 +26,76 @@ const toBack = () => {
 </script>

 <template>
-  <div class="page flex column a-c">
-    <div class="label">{{ detail.title }} {{ detail.subTitle }}</div>
-    <div class="content flex j-s">
-      <div class="img">
-        <img :src="`./static/images/${detail.imgUrl}`" alt="" />
-      </div>
+  <div class="page flex column a-c" v-loading="videoLoaded">
+    <h3 class="label">{{ query.title }} {{ query?.subTitle }}</h3>

-      <!-- 核心优势 -->
-      <div class="text" v-if="showMonitor">
-        <div class="title">核心优势：</div>
+    <!-- 硬件内容 -->
+    <template v-if="query.type === 'hardwareSystem'">
+      <div class="content flex j-s hardware">
+        <img class="img" :src="`./static/images/${query.imgUrl}`" alt="" />
+        <div class="text">
+          <h4 class="title">核心优势：</h4>
          <div v-html="advantages"></div>
        </div>
-      <div class="text" v-if="!showMonitor">
-        <div v-html="remoteDeviceList[detail.id - 1].description"></div>
-      </div>
      </div>

-    <!-- 介绍 -->
-    <div class="descripition" v-if="showMonitor">
-      <div v-html="monitorSystemList[detail.id - 1].description"></div>
+      <div class="descripition">
+        <div v-html="query.description"></div>
      </div>
+    </template>
+
+    <!-- 软件 -->
+    <template v-else>
+      <div class="content software flex">
+        <video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
+          <source :src="`./static/video/${query.video}`" type="video/mp4" />
+        </video>
+        <div class="descripition">
+          <div v-html="query.description"></div>
+        </div>
+      </div>
+      <div class="card-list flex j-c a-c wrap">
+        <div class="card" v-for="item in query.card" :key="item.id">
+          <h4 class="title">{{ item.title }}</h4>
+          <div class="content">{{ item.content }}</div>
+        </div>
+      </div>
+    </template>
+
    <div class="back" @click="toBack">返回</div>
  </div>
 </template>

 <style lang="scss" scoped>
-:deep(.monitor) {
+:deep(.hardware) {
+  font-size: 20px;
+  line-height: 1.8;
  margin-bottom: 40px;
 }

 .label {
-  margin: 64px 0 20px 0;
+  margin: 40px 0 0 0;
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: 32px;
  font-weight: bold;
  color: $black;
 }
+
 .time {
  margin-bottom: 40px;
 }
 .content {
-  width: 1300px;
-  height: 550px;
  margin-top: 40px;
  margin-bottom: 40px;
+}
+
+.hardware {
+  width: 1300px;
  .img {
-    img {
    width: 550px;
    height: 550px;
  }
-  }
  .text {
    font-size: 24px;
    line-height: 5ex;
@ -80,12 +106,59 @@ const toBack = () => {
    }
  }
 }
+
+.software {
+  width: 1700px;
+  align-items: flex-start;
+  video {
+    width: 65%;
+    height: auto;
+    margin-right: 40px;
+  }
+}
+
+.card-list {
+  width: 1200px;
+  height: 100%;
+  .card {
+    width: 350px;
+    height: 300px;
+    margin: 20px;
+    text-align: center;
+    border-radius: $border_radius;
+    transition: all 0.3s ease-in-out;
+    border: 1px solid #eee;
+    cursor: pointer;
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+    .title {
+      background-color: #0389ff;
+      height: 60px;
+      line-height: 60px;
+      color: #fff;
+      font-size: 28px;
+      border-radius: $border_radius $border_radius 0 0;
+    }
+    .content {
+      font-size: 18px;
+      padding: 0 20px;
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
 .descripition {
  width: 1000px;
-  font-size: 20px;
 }

 .back {
+  margin-top: 40px;
  padding: 10px 40px;
  background: #0389ff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
--- a/src/views/product/detail/mobile.vue
+++ b/src/views/product/detail/mobile.vue
@ -0,0 +1,774 @@
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import {cryptoDecrypt} from '@/utils/cryptojs'
+
+const route = useRoute()
+const router = useRouter()
+
+// 解密参数
+const query = ref({})
+const loading = ref(true)
+const isHardware = ref(true)  // 是否为硬件类型
+const advantages = ref('')   // 核心优势内容
+const sidebarCollapsed = ref(false) // 侧边栏是否折叠
+
+onMounted(() => {
+  try {
+    query.value = JSON.parse(cryptoDecrypt(route.query.type))
+    isHardware.value = query.value.type === 'hardwareSystem'
+
+    // 安全获取核心优势内容（兼容PC端window.advantages）
+    if (typeof window !== 'undefined' && window.advantages) {
+      advantages.value = window.advantages
+    } else if (query.value.advantages) {
+      advantages.value = query.value.advantages
+    } else if (query.value.features && query.value.features.length > 0) {
+      // 如果没有advantages，使用features生成列表
+      advantages.value = '<ul>' +
+        query.value.features.map(f => `<li>${f}</li>`).join('') +
+        '</ul>'
+    }
+  } catch (error) {
+    console.error('参数解析失败:', error)
+  } finally {
+    loading.value = false
+  }
+
+  // 监听侧边栏状态变化事件
+  window.addEventListener('sidebar-toggle', handleSidebarToggle)
+
+  // 初始化时检查侧边栏状态
+  checkSidebarState()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('sidebar-toggle', handleSidebarToggle)
+})
+
+// 处理侧边栏折叠/展开事件
+const handleSidebarToggle = (event) => {
+  sidebarCollapsed.value = event.detail?.collapsed || false
+  updateFooterPosition()
+}
+
+// 检查当前侧边栏状态
+const checkSidebarState = () => {
+  const sidebar = document.querySelector('.sidebar')
+  if (sidebar) {
+    sidebarCollapsed.value = sidebar.classList.contains('collapse')
+  }
+  updateFooterPosition()
+}
+
+// 更新底部操作栏位置
+const updateFooterPosition = () => {
+  const footer = document.querySelector('.detail-footer')
+  if (footer) {
+    if (sidebarCollapsed.value) {
+      footer.setAttribute('data-sidebar', 'collapsed')
+    } else {
+      footer.removeAttribute('data-sidebar')
+    }
+  }
+}
+
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="mobile-detail" v-loading="loading">
+    <!-- ==================== 顶部导航栏 ==================== -->
+    <nav class="detail-nav">
+      <button class="back-btn" @click="goBack">
+        <el-icon><ArrowLeft /></el-icon>
+        <span>返回</span>
+      </button>
+      <h1 class="nav-title">{{ query.title }}{{ query.subTitle ? ' - ' + query.subTitle : '' }}</h1>
+    </nav>
+
+    <!-- ==================== 硬件设备详情布局 ==================== -->
+    <template v-if="isHardware && !loading">
+      <!-- 产品主图 -->
+      <section class="product-hero">
+        <div class="hero-image-wrapper">
+          <img
+            :src="`./static/images/${query.imgUrl}`"
+            :alt="query.title"
+            class="hero-image"
+          />
+          <span class="image-badge">硬件设备</span>
+        </div>
+      </section>
+
+      <!-- 核心优势 -->
+      <section class="advantages-section" v-if="advantages">
+        <div class="section-header">
+          <h2 class="section-title">✨ 核心优势</h2>
+        </div>
+        <div class="advantages-content" v-html="advantages"></div>
+      </section>
+
+      <!-- 详细描述 -->
+      <section class="description-section" v-if="query.description">
+        <div class="section-header">
+          <h2 class="section-title">📋 产品介绍</h2>
+        </div>
+        <div class="description-content" v-html="query.description"></div>
+      </section>
+
+      <!-- 技术规格（如果有） -->
+      <section class="specs-section" v-if="query.specs || query.features">
+        <div class="section-header">
+          <h2 class="section-title">🔧 技术规格</h2>
+        </div>
+        <div class="specs-list" v-if="query.features">
+          <div v-for="(feature, idx) in query.features" :key="idx" class="spec-item">
+            <el-icon color="#1890ff"><CircleCheck /></el-icon>
+            <span>{{ feature }}</span>
+          </div>
+        </div>
+      </section>
+    </template>
+
+    <!-- ==================== 软件系统详情布局 ==================== -->
+    <template v-if="!isHardware && !loading">
+      <!-- 视频展示区 -->
+      <section class="video-section" v-if="query.video">
+        <div class="video-wrapper">
+          <video
+            autoplay
+            muted
+            loop
+            playsinline
+            :src="`./static/video/${query.video}`"
+            class="demo-video"
+          ></video>
+          <div class="video-overlay">
+            <span class="video-badge">系统演示</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 软件截图/图片（如果没有视频） -->
+      <section class="software-hero" v-if="!query.video && query.imgUrl">
+        <div class="software-image-wrapper">
+          <img
+            :src="`./static/images/${query.imgUrl}`"
+            :alt="query.title"
+            class="software-image"
+          />
+        </div>
+      </section>
+
+      <!-- 功能概述 -->
+      <section class="overview-section" v-if="query.description">
+        <div class="section-header">
+          <h2 class="section-title">💡 功能概述</h2>
+        </div>
+        <div class="overview-content" v-html="query.description"></div>
+      </section>
+
+      <!-- 功能模块卡片 -->
+      <section class="modules-section" v-if="query.card && query.card.length > 0">
+        <div class="section-header">
+          <h2 class="section-title">🎯 核心功能模块</h2>
+          <p class="section-desc">共 {{ query.card.length }} 个功能模块</p>
+        </div>
+
+        <div class="module-list">
+          <div v-for="item in query.card" :key="item.id" class="module-card">
+            <div class="module-header">
+              <el-icon :size="20" color="#1890ff"><Grid /></el-icon>
+              <h3 class="module-title">{{ item.title }}</h3>
+            </div>
+            <div class="module-content">{{ item.content }}</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 应用场景 -->
+      <section class="scenarios-section" v-if="query.scenarios">
+        <div class="section-header">
+          <h2 class="section-title">🚀 应用场景</h2>
+        </div>
+        <div class="scenario-tags">
+          <span v-for="(scene, idx) in query.scenarios" :key="idx" class="scenario-tag">
+            {{ scene }}
+          </span>
+        </div>
+      </section>
+    </template>
+
+    <!-- ==================== 底部操作栏 ==================== -->
+    <footer class="detail-footer">
+      <div class="footer-inner">
+        <button class="footer-btn back-btn" @click="goBack">
+          <div class="btn-icon-wrapper back">
+            <el-icon><ArrowLeft /></el-icon>
+          </div>
+          <span class="btn-text">返回列表</span>
+        </button>
+
+        <button class="footer-btn contact-btn" @click="$router.push('/link')">
+          <div class="btn-icon-wrapper contact">
+            <el-icon><PhoneFilled /></el-icon>
+          </div>
+          <span class="btn-text">联系我们</span>
+          <span class="btn-badge">立即咨询</span>
+        </button>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import {
+  ArrowLeft,
+  CircleCheck,
+  Grid,
+  PhoneFilled
+} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-detail {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 80px; /* no */
+
+  // ==================== 导航栏 ====================
+  .detail-nav {
+    position: sticky;
+    top: 0; /* no */
+    z-index: 100;
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 14px 16px; /* no */
+    display: flex;
+    align-items: center;
+    gap: 12px; /* no */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* no */
+
+    .back-btn {
+      display: flex;
+      align-items: center;
+      gap: 4px; /* no */
+      padding: 8px 12px; /* no */
+      background-color: rgba(255, 255, 255, 0.1);
+      border: none;
+      border-radius: 20px; /* no */
+      color: #ffffff;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:active {
+        background-color: rgba(255, 255, 255, 0.2);
+        transform: scale(0.95);
+      }
+
+      .el-icon {
+        font-size: 16px;
+      }
+    }
+
+    .nav-title {
+      flex: 1;
+      font-size: 16px;
+      font-weight: 600;
+      color: #ffffff;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // ==================== 通用区块样式 ====================
+  section {
+    margin: 16px; /* no */
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); /* no */
+  }
+
+  .section-header {
+    padding: 16px 16px 12px; /* no */
+    border-bottom: 1px solid #f0f0f0;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin: 0 0 4px 0;
+    }
+
+    .section-desc {
+      font-size: 12px;
+      color: #999999;
+      margin: 0;
+    }
+  }
+
+  // ==================== 硬件详情样式 ====================
+  .product-hero {
+    margin: 16px; /* no */
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+
+    .hero-image-wrapper {
+      position: relative;
+      width: 100%;
+      background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 50%);
+
+      .hero-image {
+        width: 100%;
+        height: auto;
+        min-height: 280px; /* no */
+        max-height: 400px; /* no */
+        object-fit: contain;
+        display: block;
+        padding: 20px; /* no */
+        box-sizing: border-box;
+      }
+
+      .image-badge {
+        position: absolute;
+        top: 16px; /* no */
+        right: 16px; /* no */
+        padding: 6px 14px; /* no */
+        background: linear-gradient(135deg, #1890ff, #096dd9);
+        color: #ffffff;
+        font-size: 12px;
+        font-weight: 500;
+        border-radius: 16px; /* no */
+        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3); /* no */
+      }
+    }
+  }
+
+  .advantages-section {
+    .advantages-content {
+      padding: 16px; /* no */
+      line-height: 1.8;
+      font-size: 14px;
+      color: #333333;
+
+      :deep(h4),
+      :deep(h3),
+      :deep(h2) {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 12px 0 8px 0;
+      }
+
+      :deep(p) {
+        margin: 8px 0;
+        line-height: 1.7;
+      }
+
+      :deep(ul),
+      :deep(ol) {
+        padding-left: 20px; /* no */
+        margin: 8px 0;
+
+        li {
+          margin: 6px 0;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+
+  .description-section {
+    .description-content {
+      padding: 16px; /* no */
+      font-size: 14px;
+      line-height: 1.9;
+      color: #555555;
+
+      :deep(p) {
+        margin: 10px 0;
+        text-indent: 2em;
+        text-align: justify;
+      }
+
+      :deep(img) {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px; /* no */
+        margin: 10px 0;
+      }
+    }
+  }
+
+  .specs-section {
+    .specs-list {
+      padding: 16px; /* no */
+      display: flex;
+      flex-direction: column;
+      gap: 12px; /* no */
+
+      .spec-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px; /* no */
+        padding: 12px; /* no */
+        background-color: #fafafa;
+        border-radius: 8px; /* no */
+        border-left: 3px solid #1890ff;
+
+        .el-icon {
+          flex-shrink: 0;
+          margin-top: 2px;
+        }
+
+        span {
+          font-size: 14px;
+          color: #333333;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+
+  // ==================== 软件详情样式 ====================
+  .video-section {
+    margin: 16px; /* no */
+    background-color: #000000;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+
+    .video-wrapper {
+      position: relative;
+      width: 100%;
+      height: 220px; /* no */
+
+      .demo-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .video-overlay {
+        position: absolute;
+        bottom: 12px; /* no */
+        right: 12px; /* no */
+
+        .video-badge {
+          padding: 5px 12px; /* no */
+          background-color: rgba(24, 144, 255, 0.9);
+          color: #ffffff;
+          font-size: 11px;
+          border-radius: 12px; /* no */
+        }
+      }
+    }
+  }
+
+  .software-hero {
+    margin: 16px; /* no */
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+
+    .software-image-wrapper {
+      width: 100%;
+      background: linear-gradient(180deg, #e6f7ff 0%, #ffffff 50%);
+
+      .software-image {
+        width: 100%;
+        height: auto;
+        min-height: 240px; /* no */
+        object-fit: contain;
+        display: block;
+        padding: 16px; /* no */
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  .overview-section {
+    .overview-content {
+      padding: 16px; /* no */
+      font-size: 14px;
+      line-height: 1.9;
+      color: #555555;
+
+      :deep(p) {
+        margin: 10px 0;
+        text-align: justify;
+      }
+    }
+  }
+
+  .modules-section {
+    .module-list {
+      padding: 12px; /* no */
+      display: flex;
+      flex-direction: column;
+      gap: 12px; /* no */
+
+      .module-card {
+        background-color: #fafafa;
+        border: 1px solid #e8e8e8;
+        border-radius: 10px; /* no */
+        overflow: hidden;
+        transition: all 0.3s ease;
+
+        &:active {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        .module-header {
+          display: flex;
+          align-items: center;
+          gap: 8px; /* no */
+          padding: 14px 16px; /* no */
+          background: linear-gradient(135deg, #0389ff, #0066cc);
+
+          .module-title {
+            flex: 1;
+            font-size: 16px;
+            font-weight: 600;
+            color: #ffffff;
+            margin: 0;
+          }
+        }
+
+        .module-content {
+          padding: 14px 16px; /* no */
+          font-size: 13px;
+          color: #666666;
+          line-height: 1.7;
+          display: -webkit-box;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+  .scenarios-section {
+    .scenario-tags {
+      padding: 16px; /* no */
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px; /* no */
+
+      .scenario-tag {
+        padding: 8px 16px; /* no */
+        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
+        color: #16a34a;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 16px; /* no */
+        border: 1px solid #bbf7d0;
+      }
+    }
+  }
+
+  // ==================== 底部操作栏 ====================
+  .detail-footer {
+    position: fixed;
+    bottom: 0;
+    left: 160px; /* no */ /* 匹配侧边栏展开时的宽度 */
+    right: 0;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #ffffff 100%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    padding: 12px 16px; /* no */
+    padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* no */
+    z-index: 99;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    transition: left 0.3s ease;
+
+    // 当侧边栏折叠时
+    &[data-sidebar="collapsed"] {
+      left: 54px; /* no */ /* 匹配侧边栏折叠时的宽度 */
+    }
+
+    .footer-inner {
+      display: flex;
+      gap: 12px; /* no */
+      max-width: 600px; /* no */
+      margin: 0 auto;
+    }
+
+    .footer-btn {
+      flex: 1;
+      height: 52px; /* no */
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px; /* no */
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: visible;
+      border-radius: 14px; /* no */
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0; /* no */
+        height: 0; /* no */
+        background-color: rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        transition: width 0.4s ease, height 0.4s ease;
+        pointer-events: none;
+        z-index: 0;
+      }
+
+      &:active::before {
+        width: 120px; /* no */
+        height: 120px; /* no */
+      }
+
+      &:active {
+        transform: scale(0.96);
+      }
+
+      .btn-icon-wrapper {
+        width: 36px; /* no */
+        height: 36px; /* no */
+        border-radius: 10px; /* no */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        transition: all 0.3s ease;
+        position: relative;
+        z-index: 1;
+
+        .el-icon {
+          font-size: 20px;
+          transition: transform 0.3s ease;
+        }
+      }
+
+      .btn-text {
+        font-size: 15px;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+        position: relative;
+        z-index: 1;
+      }
+
+      .btn-badge {
+        position: absolute;
+        top: -4px; /* no */
+        right: -2px; /* no */
+        padding: 2px 8px; /* no */
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 8px; /* no */
+        animation: pulse-badge 2s infinite;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      // 返回按钮样式
+      &.back-btn {
+        background: linear-gradient(135deg, #f5f7fa 0%, #e8eaed 100%);
+        color: #555555;
+        border-radius: 14px; /* no */
+        box-shadow:
+          0 2px 8px rgba(0, 0, 0, 0.04), /* no */
+          inset 0 1px 0 rgba(255, 255, 255, 0.8); /* no */
+
+        .btn-icon-wrapper.back {
+          background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
+          color: #666666;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* no */
+        }
+
+        &:active {
+          background: linear-gradient(135deg, #e8eaed 0%, #dcdfe3 100%);
+          box-shadow:
+            0 1px 4px rgba(0, 0, 0, 0.06), /* no */
+            inset 0 1px 0 rgba(255, 255, 255, 0.6); /* no */
+
+          .btn-icon-wrapper.back {
+            transform: scale(0.9);
+
+            .el-icon {
+              transform: translateX(-2px);
+            }
+          }
+        }
+      }
+
+      // 联系我们按钮样式
+      &.contact-btn {
+        flex: 1.3; /* 稍微宽一点 */
+        background: linear-gradient(135deg, #1890ff 0%, #096dd9 50%, #0050b3 100%);
+        color: #ffffff;
+        border-radius: 14px; /* no */
+        box-shadow:
+          0 4px 16px rgba(24, 144, 255, 0.35), /* no */
+          0 2px 6px rgba(24, 144, 255, 0.2), /* no */
+          inset 0 1px 0 rgba(255, 255, 255, 0.2); /* no */
+
+        .btn-icon-wrapper.contact {
+          background: rgba(255, 255, 255, 0.2);
+          color: #ffffff;
+          backdrop-filter: blur(4px);
+        }
+
+        .btn-badge {
+          background: linear-gradient(135deg, #ff4d4f, #ff7875);
+          color: #ffffff;
+          box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4); /* no */
+        }
+
+        &:active {
+          background: linear-gradient(135deg, #096dd9 0%, #0050b3 50%, #003a8c 100%);
+          box-shadow:
+            0 2px 10px rgba(24, 144, 255, 0.25), /* no */
+            inset 0 1px 0 rgba(255, 255, 255, 0.15); /* no */
+
+          .btn-icon-wrapper.contact {
+            transform: scale(0.9);
+            background: rgba(255, 255, 255, 0.15);
+
+            .el-icon {
+              transform: rotate(-15deg) scale(1.1);
+            }
+          }
+
+          .btn-badge {
+            animation: none;
+            transform: scale(0.95);
+          }
+        }
+      }
+    }
+  }
+
+  // 徽章脉冲动画
+  @keyframes pulse-badge {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 0.9;
+    }
+  }
+}
+</style>
--- a/src/views/product/hardwareSystem.vue
+++ b/src/views/product/hardwareSystem.vue
@ -5,10 +5,13 @@ import Banner from '@/components/Banner/index.vue'
 import Project from './project.vue'

 import {findLabelByUrl} from '@/utils'
+import {cryptoEncrypt} from '@/utils/cryptojs'

 import {useNavStore} from '@/store/nav'
 const navStore = useNavStore()

+const hardwareSystemList = window.hardwareSystemList
+
 import {useRouter} from 'vue-router'
 const router = useRouter()

@ -18,24 +21,11 @@ onMounted(() => {})

 const currentPage = ref(1)

-const swiperItem = ref([
-  {id: 1, title: 'RGRID-Lite', subTitle: '无人机Remote ID远程识别设备', imgUrl: 'product/detail/6.png'},
-  {id: 2, title: 'RGRID-Ped', subTitle: '无人机Remote ID远程识别模块', imgUrl: 'product/detail/1.png'},
-  {id: 3, title: 'RGRID-Mob', subTitle: '无人机Remote ID远程识别手持设备', imgUrl: 'product/detail/4.png'},
-])
-
 // 点击标题跳转详情页
 function titleClick(item) {
-  console.log('title clicked:', item)
  router.push({
    path: '/product/detail',
-    query: {
-      type: 'monitorSystem',
-      id: item.id,
-      title: item.title,
-      subTitle: item.subTitle,
-      imgUrl: item.imgUrl,
-    },
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
 }
 </script>
@ -47,11 +37,12 @@ function titleClick(item) {
      id="one"
      :title="title"
      v-model="currentPage"
-      :data="swiperItem"
+      :data="hardwareSystemList"
      :page-size="3"
      :show-pagination="false"
      :auto-play="false"
-      :sourceHeight="400"
+      :source-width="300"
+      :source-height="400"
      :source-gap="80"
    >
      <template #default="{item, index, isActive}">
@ -60,7 +51,6 @@ function titleClick(item) {
            <div class="title">{{ item.title }}</div>
            <div class="sub-title">{{ item.subTitle }}</div>
          </div>
-          <div class="line"></div>
          <img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
        </div>
      </template>
@ -74,14 +64,12 @@ function titleClick(item) {
 .content {
  height: 100%;
  .top {
-    background-color: #eee;
+    background-color: #0389ff;
+    color: #fff;
+    letter-spacing: 1px;
    padding: 10px 0;
  }
-  .line {
-    width: 100%;
-    height: 2px;
-    background-color: $black;
-  }
+
  .img {
    width: 300px;
    height: 300px;
--- a/src/views/product/hardwareSystem/mobile.vue
+++ b/src/views/product/hardwareSystem/mobile.vue
@ -0,0 +1,372 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+
+const router = useRouter()
+const loading = ref(true)
+
+// 使用PC端真实数据源
+const productList = ref([])  // 硬件设备列表
+
+// 应用案例数据（来自PC端project.vue）
+const caseList = ref([
+  {
+    id: 1,
+    label: '智慧物流配送',
+    img: '/static/images/product/1.png',
+  },
+  {
+    id: 2,
+    label: '要地防控',
+    img: '/static/images/product/2.png',
+  },
+  {
+    id: 3,
+    label: '关键基础设施守护',
+    img: '/static/images/product/3.png',
+  },
+  {
+    id: 4,
+    label: '规模化无人机巡检',
+    img: '/static/images/product/4.png',
+  },
+  {
+    id: 5,
+    label: '城市低空交通管理',
+    img: '/static/images/product/5.png',
+  },
+  {
+    id: 6,
+    label: '区域低空监管组网',
+    img: '/static/images/product/6.png',
+  },
+  {
+    id: 7,
+    label: '大型活动保障',
+    img: '/static/images/product/7.png',
+  },
+  {
+    id: 8,
+    label: '移动式低空安防',
+    img: '/static/images/product/8.png',
+  },
+])
+
+onMounted(() => {
+  // 从window对象获取真实数据
+  productList.value = window.hardwareSystemList || []
+  setTimeout(() => {
+    loading.value = false
+  }, 300)
+})
+
+// 跳转详情页（仅硬件设备可用）
+const toDetail = (item) => {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-hardware" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">硬件系统</h1>
+      <p class="page-subtitle">低空监管核心硬件设备</p>
+    </div>
+
+    <!-- 硬件设备列表（可点击） -->
+    <section class="section" v-if="productList.length > 0">
+      <div class="section-title-bar">
+        <span class="title-icon">🔧</span>
+        <h2>核心设备</h2>
+        <span class="subtitle">点击查看详细信息</span>
+      </div>
+
+      <div class="product-list">
+        <div
+          v-for="product in productList"
+          :key="product.id"
+          class="product-card"
+          @click="toDetail(product)"
+        >
+          <!-- 产品图片 -->
+          <div class="product-image">
+            <img :src="`./static/images/${product.imgUrl}`" :alt="product.title" />
+            <span class="click-hint">
+              <el-icon><View /></el-icon>
+            </span>
+          </div>
+
+          <!-- 产品信息 -->
+          <div class="product-info">
+            <h3 class="product-title">{{ product.title }}</h3>
+            <p class="product-desc" v-if="product.desc || product.description">
+              {{ product.desc || product.description }}
+            </p>
+
+            <!-- 查看详情按钮 -->
+            <div class="action-btn">
+              <span>查看详情</span>
+              <el-icon><ArrowRight /></el-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 应用案例板块（不可点击，纯展示） -->
+    <section class="section case-section" v-if="caseList.length > 0">
+      <div class="section-title-bar alt">
+        <span class="title-icon">📋</span>
+        <h2>应用案例</h2>
+        <span class="subtitle">典型应用场景展示</span>
+      </div>
+
+      <div class="case-grid">
+        <div
+          v-for="caseItem in caseList"
+          :key="caseItem.id"
+          class="case-item"
+        >
+          <!-- 案例图片 -->
+          <div class="case-image-wrapper">
+            <img :src="caseItem.img" :alt="caseItem.label" />
+          </div>
+
+          <!-- 案例名称 -->
+          <div class="case-label">{{ caseItem.label }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 无数据提示 -->
+    <div v-if="productList.length === 0 && caseList.length === 0" class="empty-state">
+      <el-icon :size="64" color="#cccccc"><Box /></el-icon>
+      <p>暂无产品信息</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {ArrowRight, View, Box} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-hardware {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .section {
+    padding: 16px;
+
+    &.case-section {
+      background-color: #ffffff;
+      margin-top: 12px; /* no */
+      border-top: 4px solid #081314; /* no */
+    }
+  }
+
+  .section-title-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px; /* no */
+    margin-bottom: 16px; /* no */
+    padding-bottom: 10px; /* no */
+    border-bottom: 2px solid #e8e8e8;
+
+    &.alt {
+      border-bottom-color: #d6e4ff;
+    }
+
+    .title-icon {
+      font-size: 20px;
+    }
+
+    h2 {
+      flex: 1;
+      font-size: 18px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin: 0;
+    }
+
+    .subtitle {
+      font-size: 11px;
+      color: #999999;
+      background-color: #f5f5f5;
+      padding: 3px 8px; /* no */
+      border-radius: 10px; /* no */
+    }
+  }
+
+  // 硬件产品列表样式
+  .product-list {
+    display: flex;
+    flex-direction: column;
+    gap: 14px; /* no */
+  }
+
+  .product-card {
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.98);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* no */
+    }
+
+    .product-image {
+      position: relative;
+      width: 100%;
+      height: 200px; /* no */
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        background-color: #fafafa;
+        padding: 10px; /* no */
+        box-sizing: border-box;
+      }
+
+      .click-hint {
+        position: absolute;
+        top: 10px; /* no */
+        right: 10px; /* no */
+        width: 28px; /* no */
+        height: 28px; /* no */
+        background-color: rgba(24, 144, 255, 0.9);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        font-size: 14px;
+      }
+    }
+
+    .product-info {
+      padding: 14px; /* no */
+
+      .product-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 8px 0;
+        line-height: 1.4;
+      }
+
+      .product-desc {
+        font-size: 12px;
+        color: #666666;
+        line-height: 1.6;
+        margin: 0 0 12px 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .action-btn {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 10px; /* no */
+        border-top: 1px solid #f0f0f0;
+        color: #1890ff;
+        font-size: 13px;
+        font-weight: 500;
+
+        .el-icon {
+          transition: transform 0.3s ease;
+        }
+
+        &:active .el-icon {
+          transform: translateX(4px);
+        }
+      }
+    }
+  }
+
+  // 应用案例网格样式（不可点击）
+  .case-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px; /* no */
+
+    .case-item {
+      background-color: #fafafa;
+      border-radius: 10px; /* no */
+      overflow: hidden;
+      border: 1px solid #e8e8e8;
+
+      .case-image-wrapper {
+        width: 100%;
+        height: 140px; /* no */
+        overflow: hidden;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          background-color: #ffffff;
+        }
+      }
+
+      .case-label {
+        padding: 10px; /* no */
+        text-align: center;
+        font-size: 13px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 1.4;
+        background-color: #ffffff;
+        border-top: 1px solid #f0f0f0;
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px; /* no */
+    color: #999999;
+
+    p {
+      margin-top: 16px; /* no */
+      font-size: 14px;
+    }
+  }
+}
+</style>
--- a/src/views/product/project.vue
+++ b/src/views/product/project.vue
@ -5,7 +5,7 @@ onMounted(() => {})

 // 资质证书
 const certificateWidth = ref(1300)
-const certificateHeight = ref(500)
+const certificateHeight = ref(700)

 const currentPage = ref(1)

@ -20,7 +20,7 @@ const imgList = [
  {
    id: 2,
    list: [
-      {id: 2.1, width: 290, height: 188, label: '大型活动保障', img: 'product/2.png'},
+      {id: 2.1, width: 290, height: 188, label: '要地防控', img: 'product/2.png'},
      {id: 2.2, width: 210, height: 280, label: '区域低空监管组网', img: 'product/6.png'},
    ],
  },
@ -28,7 +28,7 @@ const imgList = [
    id: 3,
    list: [
      {id: 3.1, width: 290, height: 188, label: '关键基础设施守护', img: 'product/3.png'},
-      {id: 3.2, width: 210, height: 280, label: '要地防控', img: 'product/7.png'},
+      {id: 3.2, width: 210, height: 280, label: '大型活动保障', img: 'product/7.png'},
    ],
  },
  {
@ -54,13 +54,8 @@ const imgList = [
      :showHover="false"
    >
      <template #default="{item, index, isActive}">
-        <div class="certificate flex j-s a-c" :class="{active: isActive}">
-          <div
-            v-for="(list, listIdx) in imgList"
-            :index="list.id"
-            class="flex j-c a-c wrap"
-            :class="{'last-row': listIdx === imgList.length - 1}"
-          >
+        <div class="certificate flex j-s" :class="{active: isActive}">
+          <div v-for="list in imgList" :index="list.id" class="flex j-c wrap">
            <div v-for="(img, imgIndex) in list.list" :key="imgIndex">
              <div class="label">{{ img.label }}</div>
              <img
@ -82,9 +77,7 @@ const imgList = [

 <style lang="scss" scoped>
 #certificate {
-  // margin-top: 60px;
  .certificate {
-    margin-top: 40px;
    width: 100%;
    height: 100%;
    .label {
--- a/src/views/product/softwareSystem.vue
+++ b/src/views/product/softwareSystem.vue
@ -4,7 +4,12 @@ import Swiper from '@/components/Swiper/index.vue'
 import Banner from '@/components/Banner/index.vue'
 import {findLabelByUrl} from '@/utils'

+import {cryptoEncrypt} from '@/utils/cryptojs'
+
 import {useNavStore} from '@/store/nav'
+
+const softwareSystemList = window.softwareSystemList
+
 const navStore = useNavStore()

 import {useRouter} from 'vue-router'
@ -13,31 +18,17 @@ const router = useRouter()
 const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))

 const swiperWidth = ref(1300)
-const swiperHeight = ref(500)
+const swiperHeight = ref(800)

 onMounted(() => {})

 const currentPage = ref(1)

-const swiperItem = ref([
-  {id: 1, img: '', title: '低空全域运营中枢'},
-  {id: 2, img: '', title: '无人机精准识别与管控系统'},
-  {id: 3, img: '', title: '开放式反制协同指挥平台'},
-  {id: 4, img: '', title: '全自动智能巡检作业平台'},
-  {id: 5, img: '', title: '低空数字孪生与推演平台'},
-])
-
 // 点击标题跳转详情页
 function titleClick(item) {
-  console.log('title clicked:', item)
  router.push({
    path: '/product/detail',
-    query: {
-      type: 'remoteDevice',
-      id: item.id,
-      title: item.title,
-      img: item.img,
-    },
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
  })
 }
 </script>
@ -55,14 +46,14 @@ function titleClick(item) {
      :source-height="swiperHeight"
      :showHover="false"
    >
-      <template #default="{item, index, isActive}">
-        <div class="content flex j-s a-c wrap" @click="titleClick(item)">
-          <div v-for="list in swiperItem" :key="list.id" class="list">
+      <template #default="{isActive}">
+        <div class="content flex j-c a-c wrap">
+          <div v-for="list in softwareSystemList" :key="list.id" class="list" @click="titleClick(list)">
            <div class="top">
              <div class="title">{{ list.title }}</div>
            </div>
            <div class="line"></div>
-            <div class="my-card" :class="{active: isActive}"></div>
+            <img class="img" :src="`./static/images/${list.imgUrl}`" :class="{active: isActive}" />
          </div>
        </div>
      </template>
@ -73,19 +64,33 @@ function titleClick(item) {
 <style lang="scss" scoped>
 .content {
  height: 100%;
-  border: 1px solid red;
-  .top {
-    background-color: #eee;
-    padding: 10px 0;
+  .list {
+    margin-top: 60px;
+    margin: 0 15px;
+    width: 400px;
+    transition: all 0.3s ease;
+    border-radius: 8px;
+    cursor: pointer;
+    &:hover {
+      transform: translateY(-50px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
+  }
+  .top {
+    border-radius: 8px 8px 0 0;
+    background-color: #0389ff;
+    color: #fff;
+    padding: 15px 0;
+  }
+
  .line {
    width: 100%;
    height: 2px;
    background-color: $black;
  }
  .img {
-    width: 300px;
-    height: 300px;
+    width: 100%;
+    height: auto;
  }
 }
 </style>
--- a/src/views/product/softwareSystem/mobile.vue
+++ b/src/views/product/softwareSystem/mobile.vue
@ -0,0 +1,291 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useRouter} from 'vue-router'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+
+const router = useRouter()
+const loading = ref(true)
+
+// 使用PC端真实数据源 - 软件系统列表
+const softwareList = ref([])
+
+onMounted(() => {
+  // 从window对象获取真实数据
+  softwareList.value = window.softwareSystemList || []
+  setTimeout(() => {
+    loading.value = false
+  }, 300)
+})
+
+// 点击图片跳转详情页
+const toDetail = (item) => {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
+</script>
+
+<template>
+  <div class="mobile-software" v-loading="loading">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">软件系统</h1>
+      <p class="page-subtitle">智能化低空监管软件平台</p>
+    </div>
+
+    <!-- 软件系统列表 -->
+    <div class="software-list" v-if="softwareList.length > 0">
+      <div
+        v-for="software in softwareList"
+        :key="software.id"
+        class="software-card"
+      >
+        <!-- 标题栏 -->
+        <div class="card-header-bar">
+          <h3 class="software-title">{{ software.title }}</h3>
+        </div>
+
+        <!-- 图片区域（可点击） -->
+        <div class="image-area" @click="toDetail(software)">
+          <img :src="`./static/images/${software.imgUrl}`" :alt="software.title" class="software-image" />
+          <div class="image-overlay">
+            <span class="view-detail">
+              <el-icon><View /></el-icon>
+              查看详情
+            </span>
+          </div>
+        </div>
+
+        <!-- 描述信息 -->
+        <div class="card-body">
+          <!-- 副标题 -->
+          <p class="sub-title" v-if="software.subTitle">{{ software.subTitle }}</p>
+
+          <!-- 详细描述 -->
+          <div class="description" v-if="software.desc || software.description">
+            <p>{{ software.desc || software.description }}</p>
+          </div>
+
+          <!-- 功能特性标签 -->
+          <div class="features" v-if="software.features && software.features.length > 0">
+            <span v-for="(feat, idx) in software.features" :key="idx" class="feature-tag">
+              {{ feat }}
+            </span>
+          </div>
+
+          <!-- 查看详情按钮 -->
+          <button class="detail-btn" @click="toDetail(software)">
+            <span>了解更多</span>
+            <el-icon><ArrowRight /></el-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 无数据提示 -->
+    <div v-else class="empty-state">
+      <el-icon :size="64" color="#cccccc"><Monitor /></el-icon>
+      <p>暂无软件系统信息</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {View, ArrowRight, Monitor} from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.mobile-software {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  padding-bottom: 20px;
+
+  .page-header {
+    background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
+    padding: 24px 16px;
+    color: #ffffff;
+
+    .page-title {
+      font-size: 22px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      letter-spacing: 1px;
+    }
+
+    .page-subtitle {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+    }
+  }
+
+  .software-list {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px; /* no */
+  }
+
+  .software-card {
+    background-color: #ffffff;
+    border-radius: 12px; /* no */
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
+
+    .card-header-bar {
+      background: linear-gradient(135deg, #0389ff, #0066cc);
+      padding: 14px 16px; /* no */
+
+      .software-title {
+        font-size: 17px;
+        font-weight: 600;
+        color: #ffffff;
+        margin: 0;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .image-area {
+      position: relative;
+      width: 100%;
+      height: 240px; /* no */
+      overflow: hidden;
+      cursor: pointer;
+
+      .software-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        background-color: #fafafa;
+        padding: 12px; /* no */
+        box-sizing: border-box;
+        transition: transform 0.3s ease;
+      }
+
+      &:active .software-image {
+        transform: scale(1.02);
+      }
+
+      .image-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+        padding: 20px 16px 12px; /* no */
+        display: flex;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        .view-detail {
+          display: flex;
+          align-items: center;
+          gap: 6px; /* no */
+          color: #ffffff;
+          font-size: 13px;
+          font-weight: 500;
+
+          .el-icon {
+            font-size: 16px;
+          }
+        }
+      }
+
+      &:active .image-overlay {
+        opacity: 1;
+      }
+    }
+
+    .card-body {
+      padding: 16px; /* no */
+
+      .sub-title {
+        font-size: 14px;
+        color: #1890ff;
+        font-weight: 500;
+        margin: 0 0 10px 0;
+        line-height: 1.4;
+      }
+
+      .description {
+        margin-bottom: 14px; /* no */
+
+        p {
+          font-size: 13px;
+          color: #666666;
+          line-height: 1.7;
+          margin: 0;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      .features {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px; /* no */
+        margin-bottom: 16px; /* no */
+
+        .feature-tag {
+          padding: 5px 12px; /* no */
+          background-color: #e6f7ff;
+          color: #096dd9;
+          font-size: 11px;
+          border-radius: 12px; /* no */
+          border: 1px solid #d6e4ff;
+          font-weight: 500;
+        }
+      }
+
+      .detail-btn {
+        width: 100%;
+        height: 42px; /* no */
+        border: none;
+        border-radius: 21px; /* no */
+        background: linear-gradient(135deg, #081314, #1a2634);
+        color: #ffffff;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px; /* no */
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 12px rgba(8, 19, 20, 0.25); /* no */
+
+        &:active {
+          transform: scale(0.97);
+          box-shadow: 0 2px 8px rgba(8, 19, 20, 0.35); /* no */
+        }
+
+        .el-icon {
+          transition: transform 0.3s ease;
+        }
+
+        &:active .el-icon {
+          transform: translateX(3px);
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px; /* no */
+    color: #999999;
+
+    p {
+      margin-top: 16px; /* no */
+      font-size: 14px;
+    }
+  }
+}
+</style>
Author	SHA1	Message	Date
yiqiuyang	61602a736b	1	2026-05-17 23:25:42 +08:00
yiqiuyang	e9a34e3599	修改公司地址	2026-05-17 14:43:40 +08:00
yiqiuyang	017f5255ef	修改设备图片	2025-10-16 18:16:23 +08:00
yiqiuyang	5e74fa2196	gitigonre	2025-10-16 17:44:21 +08:00
yiqiuyang	e912175871	删除多余视频文件	2025-10-16 17:42:32 +08:00
yiqiuyang	281d0015aa	gitignore	2025-10-16 17:39:38 +08:00
yiqiuyang	bdca181855	修改配置文件	2025-10-16 17:38:45 +08:00
yiqiuyang	168748eb18	Merge branch 'main' of https://git.rangutech.com/yiqiuyang/portal	2025-10-16 17:36:31 +08:00
yiqiuyang	3f5f76946d	news	2025-10-16 17:36:27 +08:00
zhaoke	b9719c22cd	修改富文本	2025-10-16 17:35:59 +08:00
zhaoke	a5d1de0e23	修改管理页面	2025-10-16 16:50:46 +08:00
yiqiuyang	5d93a81ec6	Merge branch 'main' of https://git.rangutech.com/yiqiuyang/portal	2025-10-16 15:50:48 +08:00
yiqiuyang	e5569b37a1	1	2025-10-16 15:48:14 +08:00