diff --git a/public/nav/index.js b/public/nav/index.js
index f45ea8d..9e3bce8 100644
--- a/public/nav/index.js
+++ b/public/nav/index.js
@@ -1,7 +1,26 @@
 window.nav = {
   header: [
     {id: 1, label: '首页', url: '/', hasChildren: false},
-    {id: 2, label: '产品中心', url: '/product', hasChildren: false},
+    {
+      id: 2,
+      label: '产品中心',
+      url: '/product',
+      hasChildren: true,
+      children: [
+        {
+          id: 2.1,
+          label: '低空监管体系',
+          url: '/product/monitorSystem',
+          hasChildren: false,
+        },
+        {
+          id: 2.2,
+          label: '低空远程识别设备',
+          url: '/product/remoteDevice',
+          hasChildren: false,
+        },
+      ],
+    },
     {id: 3, label: '服务与支撑', url: '/services', hasChildren: false},
     {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
     {id: 5, label: '关于我们', url: '/about', hasChildren: false},
@@ -10,41 +29,37 @@ window.nav = {
   footer: [
     {
       id: 1,
-      headerId: 2,
       label: '产品中心',
       url: '',
       hasChildren: true,
       children: [
-        {id: 1.1, headerId: 2, label: '智能加载服务', url: '/product'},
-        {id: 1.2, headerId: 2, label: '智能加载服务', url: '/product'},
-        {id: 1.3, headerId: 2, label: '智能加载服务', url: '/product'},
-        {id: 1.4, headerId: 2, label: '智能加载服务', url: '/product'},
+        {id: 1.1, label: '低空监管体系', url: '/product/monitorSystem'},
+        {id: 1.2, label: '低空远程识别设备', url: '/product/remoteDevice'},
+        {id: 1.3, label: '智能加载服务', url: '/product'},
+        {id: 1.4, label: '智能加载服务', url: '/product'},
       ],
     },
     {
       id: 2,
-      headerId: 3,
       label: '服务与支撑',
       url: '/services',
       hasChildren: false,
     },
     {
       id: 3,
-      headerId: 0,
       label: '软件下载',
       url: '/download',
       hasChildren: false,
     },
-    {id: 4, headerId: 4, label: '新闻中心', url: '/news', hasChildren: false},
+    {id: 4, label: '新闻中心', url: '/news', hasChildren: false},
     {
       id: 5,
-      headerId: 0,
       label: '关于燃谷',
       url: '',
       hasChildren: true,
       children: [
-        {id: 5.1, headerId: 5, label: '公司简介', url: '/about'},
-        {id: 5.2, headerId: 6, label: '联系我们', url: '/link'},
+        {id: 5.1, label: '公司简介', url: '/about'},
+        {id: 5.2, label: '联系我们', url: '/link'},
       ],
     },
   ],
diff --git a/public/static/images/banner/about.png b/public/static/images/banner/about.png
new file mode 100644
index 0000000..6882afb
Binary files /dev/null and b/public/static/images/banner/about.png differ
diff --git a/public/static/images/banner/link.png b/public/static/images/banner/link.png
new file mode 100644
index 0000000..a71ef87
Binary files /dev/null and b/public/static/images/banner/link.png differ
diff --git a/public/static/images/banner/news.png b/public/static/images/banner/news.png
new file mode 100644
index 0000000..9df6d8f
Binary files /dev/null and b/public/static/images/banner/news.png differ
diff --git a/public/static/images/banner/product.png b/public/static/images/banner/product.png
new file mode 100644
index 0000000..f89867b
Binary files /dev/null and b/public/static/images/banner/product.png differ
diff --git a/public/static/images/banner/services.png b/public/static/images/banner/services.png
new file mode 100644
index 0000000..79f60b6
Binary files /dev/null and b/public/static/images/banner/services.png differ
diff --git a/public/static/images/footer/logo.png b/public/static/images/footer/logo.png
index 9000cdb..422f296 100644
Binary files a/public/static/images/footer/logo.png and b/public/static/images/footer/logo.png differ
diff --git a/public/static/images/footer/logo_label_CN.png b/public/static/images/footer/logo_label_CN.png
deleted file mode 100644
index 15c9594..0000000
Binary files a/public/static/images/footer/logo_label_CN.png and /dev/null differ
diff --git a/public/static/images/footer/logo_lable_EN.png b/public/static/images/footer/logo_lable_EN.png
deleted file mode 100644
index dc5efd3..0000000
Binary files a/public/static/images/footer/logo_lable_EN.png and /dev/null differ
diff --git a/public/static/images/header/logo.png b/public/static/images/header/logo.png
index ef5a396..4bae3d1 100644
Binary files a/public/static/images/header/logo.png and b/public/static/images/header/logo.png differ
diff --git a/public/static/images/main/map.png b/public/static/images/main/map.png
new file mode 100644
index 0000000..cc92ecf
Binary files /dev/null and b/public/static/images/main/map.png differ
diff --git a/public/static/images/main/rangu.png b/public/static/images/main/rangu.png
new file mode 100644
index 0000000..05a0fb5
Binary files /dev/null and b/public/static/images/main/rangu.png differ
diff --git a/public/static/images/news/1.png b/public/static/images/news/1.png
new file mode 100644
index 0000000..8535915
Binary files /dev/null and b/public/static/images/news/1.png differ
diff --git a/public/static/images/news/2.png b/public/static/images/news/2.png
new file mode 100644
index 0000000..6c5a6eb
Binary files /dev/null and b/public/static/images/news/2.png differ
diff --git a/public/static/images/news/3.png b/public/static/images/news/3.png
new file mode 100644
index 0000000..b857d8c
Binary files /dev/null and b/public/static/images/news/3.png differ
diff --git a/public/static/images/news/4.png b/public/static/images/news/4.png
new file mode 100644
index 0000000..dc5cee7
Binary files /dev/null and b/public/static/images/news/4.png differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index d55882d..827f2f7 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -15,11 +15,10 @@ body {
   overflow-y: auto;
 }
 
-.placeholder {
+.banner {
   width: 100%;
   height: 600px;
-  background-color: #d9d9d9;
-  font-size: 40px;
+  margin-bottom: 50px;
 }
 .page {
   width: 100%;
diff --git a/src/assets/styles/variable.scss b/src/assets/styles/variable.scss
index fefac9b..f4a75af 100644
--- a/src/assets/styles/variable.scss
+++ b/src/assets/styles/variable.scss
@@ -4,4 +4,9 @@ $bg_color: #081314;
 $white: #ffffff;
 $black: #000000;
 
+$nav_font_size: 18px;
+
 $border: 2px solid red;
+
+// header nav
+$header_nav_height: 80px;
diff --git a/src/components/Banner/index.vue b/src/components/Banner/index.vue
new file mode 100644
index 0000000..edae95e
--- /dev/null
+++ b/src/components/Banner/index.vue
@@ -0,0 +1,24 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+onMounted(() => {})
+
+const props = defineProps({
+  img: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div>
+    <img class="logo" :src="`./static/images/${img}`" alt="" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.logo {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/swiper/index.vue b/src/components/swiper/index.vue
index 359d550..40c23c8 100644
--- a/src/components/swiper/index.vue
+++ b/src/components/swiper/index.vue
@@ -68,9 +68,7 @@ const translate = (page) => {
  * @param {number} page - 目标页码
  */
 const goToPage = (page) => {
-  console.log('page===>', page)
   currentPage.value = Number(page)
-  console.log('currentPage.value===>', currentPage.value, page)
 }
 
 /**
@@ -247,8 +245,8 @@ onUnmounted(stopAutoPlay)
   .carousel-title {
     font-family: 'PingFang SC';
     font-weight: 600;
-    font-size: 38px;
-    color: #333;
+    font-size: 24px;
+    color: #333333;
   }
 
   .carousel-pagination {
diff --git a/src/home.vue b/src/home.vue
index 8398af0..b184203 100644
--- a/src/home.vue
+++ b/src/home.vue
@@ -6,7 +6,13 @@ import Footer from './views/layout/pc/footer/index.vue'
 <template>
   <div id="app">
     <Header id="header" />
-    <router-view id="main" />
+
+    <!-- include 对应组件的 name -->
+    <router-view id="main" v-slot="{Component}">
+      <keep-alive include="New">
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
     <Footer id="footer" />
   </div>
 </template>
@@ -19,19 +25,19 @@ import Footer from './views/layout/pc/footer/index.vue'
   flex-direction: column;
   #header {
     width: 100%;
-    height: 100px;
+    height: $header_nav_height;
     position: fixed;
     z-index: 99;
   }
   #main {
-    margin-top: 100px;
+    margin-top: $header_nav_height;
     width: 100%;
     flex: 1;
     background-color: $white;
   }
   #footer {
     width: 100%;
-    height: 681px;
+    height: 500px;
   }
 }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 4680d77..0dea76e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,22 +4,36 @@ import HomeView from '@/views/homepage/index.vue'
 
 const routes = [
   {path: '/', component: HomeView},
+  // ============================================  产品中心  ============================================
   {
-    path: '/product',
-    component: () => import('@/views/product/index.vue'),
+    path: '/product/monitorSystem',
+    name: 'monitorSystem',
+    component: () => import('@/views/product/monitorSystem.vue'),
     meta: {
-      title: '产品中心',
+      title: '低空监管体系',
     },
   },
+  {
+    path: '/product/remoteDevice',
+    name: 'remoteDevice',
+    component: () => import('@/views/product/remoteDevice.vue'),
+    meta: {
+      title: '低空远程识别设备',
+    },
+  },
+  // ============================================  服务与支撑  ============================================
   {
     path: '/services',
+    name: 'Services',
     component: () => import('@/views/services/index.vue'),
     meta: {
       title: '服务与支撑',
     },
   },
+  // ============================================  新闻中心  ============================================
   {
     path: '/news',
+    name: 'News',
     component: () => import('@/views/news/index.vue'),
     meta: {
       title: '新闻中心',
@@ -29,24 +43,32 @@ const routes = [
     path: '/news/detail',
     name: 'Detail',
     component: () => import('@/views/news/detail.vue'),
+    meta: {
+      title: '新闻详情',
+    },
   },
+  // ============================================  关于我们  ============================================
   {
     path: '/about',
+    name: 'About',
     component: () => import('@/views/about/index.vue'),
     meta: {
       title: '关于我们',
     },
   },
-
+  // ============================================  联系我们  ============================================
   {
     path: '/link',
+    name: 'Link',
     component: () => import('@/views/link/index.vue'),
     meta: {
       title: '联系我们',
     },
   },
+  // ============================================  下载中心  ============================================
   {
     path: '/download',
+    name: 'Download',
     component: () => import('@/views/download/index.vue'),
     meta: {
       title: '下载中心',
diff --git a/src/store/nav.js b/src/store/nav.js
index f9f901c..c48c840 100644
--- a/src/store/nav.js
+++ b/src/store/nav.js
@@ -11,7 +11,6 @@ export const useNavStore = defineStore(
         return
       } else {
         navIndex.value = id
-        console.log(localStorage.getItem('nav'))
       }
     }
 
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index cd8aaa2..25ee8cf 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -1,19 +1,22 @@
 <script setup>
 import {ref, onMounted, getCurrentInstance} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+
 const instance = getCurrentInstance()
 const $fontSize = instance.appContext.config.globalProperties.$fontSize
 
-const containerWidth = ref(1300)
-const containerHeight = ref(1500)
+// 关于燃谷
+const aboutWidth = ref(1200)
+const aboutHeight = ref(600)
+const introduction =
+  '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。'
+
+// 资质证书
+const certificateWidth = ref(1300)
+const certificateHeight = ref(1500)
 
 const currentPage = ref(1)
-const list = [
-  {id: 1, label: 11, value: 22},
-  {id: 2, label: 33, value: 44},
-  {id: 3, label: 55, value: 66},
-  {id: 4, label: 77, value: 88},
-]
 
 const imgList = [
   {
@@ -71,29 +74,33 @@ onMounted(() => {})
 
 <template>
   <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/about.png" />
     <Swiper
-      id="one"
+      id="rangu"
       title="关于燃谷"
       v-model="currentPage"
-      :data="list"
-      :page-size="2"
+      :source-width="aboutWidth"
+      :source-height="aboutHeight"
       :show-pagination="false"
       :auto-play="false"
+      :showHover="false"
     >
       <template #default="{item, index, isActive}">
-        <div class="my-card" :class="{active: isActive}">
-          <h2>{{ item.label }}</h2>
+        <div class="my-card flex j-s a-c" :class="{active: isActive}">
+          <img src="/static/images/main/rangu.png" />
+          <div class="label">
+            {{ introduction }}
+          </div>
         </div>
       </template>
     </Swiper>
 
     <Swiper
-      id="one"
+      id="certificate"
       title="资质证书"
       v-model="currentPage"
-      :source-width="containerWidth"
-      :source-height="containerHeight"
+      :source-width="certificateWidth"
+      :source-height="certificateHeight"
       :show-pagination="false"
       :auto-play="false"
       :showHover="false"
@@ -103,13 +110,8 @@ onMounted(() => {})
           <div
             v-for="(list, listIdx) in imgList"
             :index="list.id"
-            :class="[
-              'flex',
-              'j-s',
-              'a-c',
-              'wrap',
-              {'last-row': listIdx === imgList.length - 1},
-            ]"
+            class="flex j-s a-c wrap"
+            :class="{'last-row': listIdx === imgList.length - 1}"
           >
             <div v-for="(img, imgIndex) in list.list" :key="imgIndex">
               <img
@@ -130,21 +132,28 @@ onMounted(() => {})
 </template>
 
 <style lang="scss" scoped>
-.page {
-  --card-width: v-bind(cardWidth) * 1px;
-}
-
 .my-card {
-  background: #d9d9d9;
-  height: 100%;
-}
-
-.certificate {
   width: 100%;
   height: 100%;
+  .label {
+    text-align: left;
+    width: 532px;
+    padding-right: 25px;
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 50px;
+  }
 }
 
-.last-row {
-  justify-content: center !important;
+#certificate {
+  margin-top: 60px;
+  .certificate {
+    width: 100%;
+    height: 100%;
+  }
+  .last-row {
+    justify-content: center !important;
+  }
 }
 </style>
diff --git a/src/views/homepage/index.vue b/src/views/homepage/index.vue
index f0b050e..85718db 100644
--- a/src/views/homepage/index.vue
+++ b/src/views/homepage/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
 
 import {ref, onMounted} from 'vue'
 const currentPage = ref(1)
diff --git a/src/views/layout/pc/footer/components/logo.vue b/src/views/layout/pc/footer/components/logo.vue
index 9a6d129..18953c5 100644
--- a/src/views/layout/pc/footer/components/logo.vue
+++ b/src/views/layout/pc/footer/components/logo.vue
@@ -6,8 +6,6 @@ onMounted(() => {})
 <template>
   <div class="logo flex column j-s">
     <img class="logo-img" src="/static/images/footer/logo.png" />
-    <div class="logo-CN">燃谷科技</div>
-    <div class="logo-EN">RANGUTECH</div>
   </div>
 </template>
 
@@ -19,22 +17,8 @@ onMounted(() => {})
   color: $white;
 
   .logo-img {
-    width: 204px;
-    height: 204px;
-  }
-  .logo-CN {
-    font-family: 'HYDaHeiJ';
-    font-weight: 400;
-    font-style: 'normal';
-    font-size: 38px;
-    letter-spacing: 0.1em;
-  }
-  .logo-EN {
-    font-family: 'HYZhongHeiJ';
-    font-weight: 400;
-    font-style: 'normal';
-    font-size: 24px;
-    letter-spacing: 0.23em;
+    width: 140px;
+    height: 209px;
   }
 }
 </style>
diff --git a/src/views/layout/pc/footer/components/navNode.vue b/src/views/layout/pc/footer/components/navNode.vue
index 9006bb8..7a8c283 100644
--- a/src/views/layout/pc/footer/components/navNode.vue
+++ b/src/views/layout/pc/footer/components/navNode.vue
@@ -35,7 +35,7 @@ const onClick = (url) => emits('navClick', url)
   .item-label {
     font-family: 'PingFang SC';
     font-weight: 400;
-    font-size: 24px;
+    font-size: $nav_font_size;
     color: $white;
     user-select: auto;
     cursor: pointer;
@@ -55,7 +55,7 @@ const onClick = (url) => emits('navClick', url)
     .item-label {
       font-family: 'PingFang SC';
       font-weight: 400;
-      font-size: 20px;
+      font-size: 14px;
       color: #999999;
     }
   }
diff --git a/src/views/layout/pc/footer/index.vue b/src/views/layout/pc/footer/index.vue
index 464c1a9..ffb3239 100644
--- a/src/views/layout/pc/footer/index.vue
+++ b/src/views/layout/pc/footer/index.vue
@@ -34,19 +34,21 @@ const toMIIF = () => {
 <style lang="scss" scoped>
 .page {
   background-color: $bg_color;
+  $top: 58px;
+
   position: relative;
   #logo {
     width: 220px;
     height: 300px;
     position: absolute;
-    top: 58px;
+    top: 43px;
     left: 190px;
   }
   #nav {
     width: calc(100% - 410px - 380px);
     position: absolute;
     left: 410px;
-    top: 87px;
+    top: $top;
     padding: 0 90px 0 55px;
     box-sizing: border-box;
   }
@@ -54,7 +56,7 @@ const toMIIF = () => {
     width: 150px;
     height: 150px;
     position: absolute;
-    top: 87px;
+    top: $top;
     right: 180px;
   }
   #MIIT-Filing {
diff --git a/src/views/layout/pc/header/index.vue b/src/views/layout/pc/header/index.vue
index f666a40..d85ba91 100644
--- a/src/views/layout/pc/header/index.vue
+++ b/src/views/layout/pc/header/index.vue
@@ -18,15 +18,15 @@ onMounted(() => {})
     background-image: url('/static/images/header/logo.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 173px;
-    height: 72px;
+    width: 164px;
+    height: 56px;
     position: absolute;
     left: 160px;
   }
 
   .nav {
     width: 1000px;
-    height: 100px;
+    height: $header_nav_height;
     position: absolute;
     right: 160px;
     overflow-y: hidden;
diff --git a/src/views/layout/pc/header/nav.vue b/src/views/layout/pc/header/nav.vue
index 88d509c..8897551 100644
--- a/src/views/layout/pc/header/nav.vue
+++ b/src/views/layout/pc/header/nav.vue
@@ -49,14 +49,34 @@ onUnmounted(() => {
       background-color="$bg_color"
       router
     >
-      <el-menu-item
-        v-for="item in navList"
-        :key="item.id"
-        :index="item.url"
-        :class="{'is-active': activeIndex === item.url}"
-      >
-        {{ item.label }}
-      </el-menu-item>
+      <template v-for="nav in navList" :key="nav.id">
+        <!-- 有子菜单的情况 -->
+        <el-sub-menu
+          v-if="nav.hasChildren || nav?.children?.length > 0"
+          :index="nav.url"
+          popper-class="pepper"
+        >
+          <template #title>
+            <span>{{ nav.label }}</span>
+          </template>
+          <el-menu-item
+            v-for="child in nav.children"
+            :key="child.id"
+            :index="child.url"
+          >
+            {{ child.label }}
+          </el-menu-item>
+        </el-sub-menu>
+
+        <!-- 无子菜单的情况 -->
+        <el-menu-item
+          v-else
+          :index="nav.url"
+          :class="{'is-active': activeIndex === nav.url}"
+        >
+          {{ nav.label }}
+        </el-menu-item>
+      </template>
     </el-menu>
   </div>
 </template>
@@ -64,15 +84,28 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 /* 菜单容器样式 */
 .el-menu--horizontal {
-  --el-menu-horizontal-height: 101px;
+  --el-menu-horizontal-height: 81px;
+}
+
+::v-deep(.el-sub-menu__title) {
+  font-size: $nav_font_size !important;
+  font-family: 'PingFang SC' !important;
+  font-weight: 400 !important;
+  padding: 0px 25px !important;
+  box-sizing: border-box !important;
+  text-align: center !important;
+
+  i {
+    display: none !important;
+  }
 }
 
 /* 菜单项基础样式 */
 .el-menu-item {
-  font-family: 'PingFang SC';
   padding: 0 25px;
+  font-family: 'PingFang SC';
   font-weight: 400;
-  font-size: 24px;
+  font-size: $nav_font_size !important;
   line-height: 100%;
   letter-spacing: 0.06em;
   border-bottom: none !important;
@@ -80,7 +113,7 @@ onUnmounted(() => {
 
   /* 激活状态样式 */
   &.is-active {
-    border-bottom: 6px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
   }
 
   /* 悬停效果 */
@@ -88,4 +121,21 @@ onUnmounted(() => {
     background-color: rgba(255, 255, 255, 0.1) !important;
   }
 }
+
+.pepper {
+  background-color: #ffffff;
+  .el-menu-item {
+    width: 246px !important;
+    height: 50px !important;
+    line-height: 50px !important;
+    box-sizing: border-box !important;
+    font-size: 14px !important;
+    color: $black !important;
+    padding: 5px 0 !important;
+    padding-left: 20px !important;
+    &:hover {
+      background-color: #f4f4f4 !important;
+    }
+  }
+}
 </style>
diff --git a/src/views/link/index.vue b/src/views/link/index.vue
index 475523c..05ce7fe 100644
--- a/src/views/link/index.vue
+++ b/src/views/link/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import {ref, onMounted} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
 import Map from './map.vue'
 
 const currentPage = ref(1)
@@ -10,7 +11,7 @@ onMounted(() => {})
 
 <template>
   <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/link.png" />
     <Swiper
       id="one"
       title="联系我们"
@@ -39,6 +40,12 @@ onMounted(() => {})
 </template>
 
 <style lang="scss" scoped>
+.placeholder {
+  background-image: url(`./static/logo/link.png`);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
 .my-card {
   width: 100%;
   height: 100%;
@@ -48,13 +55,13 @@ onMounted(() => {})
     .label {
       font-family: 'PingFang SC';
       font-weight: 400;
-      font-size: 24px;
+      font-size: 20px;
       margin-bottom: 20px;
     }
     .label:nth-child(1) {
       font-family: 'PingFang SC';
       font-weight: 600;
-      font-size: 32px;
+      font-size: 26px;
     }
   }
   .img {
diff --git a/src/views/link/map.vue b/src/views/link/map.vue
index 3e7d64f..f1e0975 100644
--- a/src/views/link/map.vue
+++ b/src/views/link/map.vue
@@ -18,7 +18,9 @@ const tryKey = (key) =>
         const mapInstance = new window.AMap.Map('map', {
           viewMode: '2D',
           zoom: 19,
-          center: [118.762616, 32.068811],
+          center: center,
+          zoomEnable: false,
+          dragEnable: false,
         })
         AMapResolve({AMap: window.AMap, mapInstance, key})
       } catch (e) {
@@ -35,23 +37,46 @@ const initMap = async () => {
     try {
       const {mapInstance} = await tryKey(key)
       map.value = mapInstance
-      console.log('✅ 成功使用 key:', key)
+      console.log('✅ 成功使用')
       return
     } catch {
-      console.warn('❌ key 无效:', key)
+      console.warn('❌ key 无效:')
     }
   }
-  console.error('所有 key 均无法加载地图')
 }
 
 const mark = () => {
+  var icon = new AMap.Icon({
+    size: new AMap.Size(16, 16),
+    image: './static/images/main/map.png',
+    imageOffset: new AMap.Pixel(0, 0), // 设置偏移量
+    imageSize: new AMap.Size(16, 16),
+  })
   let marker = new AMap.Marker({
     position: center,
+    offset: new AMap.Pixel(50, -100),
+    icon: icon,
+    label: {
+      content: '燃谷科技（南京）有限公司',
+      offset: new AMap.Pixel(-13, -20),
+    },
   })
 
   map.value.add(marker)
 }
 
+const toGDMap = () => {
+  let query = {
+    query: '万谷硅巷',
+    city: '320100',
+    geoobj: '118.757114|32.066745|118.768038|32.071509',
+    zoom: '17.5',
+  }
+  window.open(
+    `https://ditu.amap.com/search?query=${query.query}&city=${query.city}&geoobj=${query.geoobj}&zoom=${query.zoom}`
+  )
+}
+
 onMounted(async () => {
   await initMap()
   mark()
@@ -59,5 +84,5 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="map" class="page"></div>
+  <div id="map" class="page" @click="toGDMap"></div>
 </template>
diff --git a/src/views/news/detail.vue b/src/views/news/detail.vue
index 70a7c16..9daef8e 100644
--- a/src/views/news/detail.vue
+++ b/src/views/news/detail.vue
@@ -1,23 +1,80 @@
 <script setup>
 import {onMounted} from 'vue'
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
+
+import {newsDetail} from './mock'
 
 const route = useRoute()
-const id = route.query.id // 就是 /news/123 里的 123
 
-console.log('id===>', id)
+const detail = route.query
 
-onMounted(() => {
-  console.log('id===>', id)
-})
+detail.artical = newsDetail.find((item) => item.id == route.query.id).article
+
+const router = useRouter()
+onMounted(() => {})
+
+const toBack = () => {
+  router.back()
+}
 </script>
 
 <template>
-  <div>
-    <div class="placeholder">
-      {{ id }}
+  <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="artical">
+      {{ detail.artical }}
+    </div>
+    <div class="back" @click="toBack">返回</div>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.label {
+  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;
+  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 {
+  padding: 10px 40px;
+  background: #0389ff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+  margin-bottom: 60px;
+  font-size: 20px;
+  color: $white;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 0fee65e..862c070 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -1,71 +1,62 @@
 <script setup>
-import {ref, onMounted, getCurrentInstance} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+defineOptions({name: 'New'})
+import {ref, onMounted, nextTick, onActivated, onDeactivated} 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'
 
 const currentPage = ref(1)
 
-const instance = getCurrentInstance()
-const $fontSize = instance.appContext.config.globalProperties.$fontSize
-
 const containerWidth = ref(1700)
 const containerHeight = ref(1400)
 
-const list = [
-  {
-    id: 1,
-    imgUrl: 'main/1.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-  {
-    id: 2,
-    imgUrl: 'main/2.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-  {
-    id: 3,
-    imgUrl: 'main/3.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-  {
-    id: 4,
-    imgUrl: 'main/4.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-]
-
 onMounted(() => {})
 
 let router = useRouter()
-const toDetail = (url) => {
+const toDetail = (item) => {
   router.push({
     path: '/news/detail',
     query: {
-      id: url,
+      id: item.id,
+      imgUrl: item.imgUrl,
+      label: item.label,
+      time: item.time,
+      subLabel: item?.subLabel,
     },
   })
 }
+
+let scrollTop = 0
+
+onDeactivated(() => {
+  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+})
+
+onActivated(async () => {
+  await nextTick()
+  // 再强制等一帧布局
+  requestAnimationFrame(() => {
+    window.scrollTo({top: scrollTop, behavior: 'instant'})
+  })
+})
+
+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="placeholder"></div>
+    <Banner class="banner" img="banner/news.png" />
     <Swiper
       id="one"
       title="新闻中心"
@@ -83,16 +74,16 @@ const toDetail = (url) => {
             :class="{active: isActive}"
             v-for="item in list"
             :key="item.id"
-            @click="toDetail(item.id)"
+            @click="toDetail(item)"
           >
             <div class="img">
-              <!-- <img :src="`./static/images/${item.imgUrl}`" /> -->
+              <img :src="`./static/images/${item.imgUrl}`" />
             </div>
 
             <div class="content">
               <div class="label">{{ item.label }}</div>
               <div class="time">{{ item.time }}</div>
-              <div class="sub-label">{{ item.subLabel }}</div>
+              <div class="sub-label">{{ item?.subLabel }}</div>
               <div class="text">{{ item.content }}</div>
             </div>
           </div>
@@ -109,11 +100,13 @@ const toDetail = (url) => {
   .news {
     width: calc(100% - 100px);
     margin: 20px 50px;
+    padding: 10px;
     overflow-y: hidden;
     transition: all 0.3s;
     cursor: pointer;
-    border: 1px solid #eee;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    background: rgba(255, 255, 255, 0.01);
+    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.04);
+
     &:not(:last-of-type) {
       margin-bottom: 40px;
     }
@@ -125,6 +118,11 @@ const toDetail = (url) => {
     width: 428px;
     height: 278px;
     background-color: #d9d9d9;
+    border-radius: 5px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
   .content {
     flex: 1;
diff --git a/src/views/news/mock.js b/src/views/news/mock.js
new file mode 100644
index 0000000..cecabc6
--- /dev/null
+++ b/src/views/news/mock.js
@@ -0,0 +1,61 @@
+export const list = [
+  {
+    id: 1,
+    imgUrl: 'news/1.png',
+    label: '低空经济：撬动社会发展的新支点',
+    time: '2025年9月4日',
+    subLabel: '',
+    content:
+      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
+  },
+  {
+    id: 2,
+    imgUrl: 'news/2.png',
+    label: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    time: '2025年8月29日',
+    subLabel: '',
+    content:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
+  },
+  {
+    id: 3,
+    imgUrl: 'news/3.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
+  },
+  {
+    id: 4,
+    imgUrl: 'news/4.png',
+    label: '关于当前低空经济形势发展的现状',
+    time: '2025年8月29日',
+    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
+    content:
+      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。',
+  },
+]
+
+export const newsDetail = [
+  {
+    id: 1,
+    article:
+      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。\n\n一、 政策强力驱动，顶层设计与地方行动协同并进\n低空经济的发展获得了前所未有的政策支持，已从“战略性新兴产业”的定位加速迈向规模化落地。\n国家战略定调： 2023年12月，中央经济工作会议首次将“低空经济”列为战略性新兴产业。2024年，该概念被写入政府工作报告，标志着其正式上升为国家战略。2025年，相关政策持续加码，国家发改委专门成立低空经济发展司，统筹规划发展，体现了国家层面推动的决心。\n地方“抢飞”热潮： 全国已有30多个省市将发展低空经济写入政府工作报告或出台专项政策。各地纷纷争做“天空之城”，欲向天空要GDP。例如，广东计划2026年产业规模达3000亿元，北京力争带动经济增长超1000亿元。合肥等地对载人eVTOL航线运营提供高额补贴，深圳、安徽、海南等地积极先行先试，形成了你追我赶的“抢飞”态势。\n\n二、 市场规模迅猛扩张，产业链条日趋完善\n在政策与技术的双重驱动下，低空经济的市场规模呈现爆发式增长。\n规模与增速： 据测算，2023年中国低空经济规模已超过5000亿元。2024年规模预计达到约6700亿元，而2025年预计将突破8500亿元，部分机构预测甚至可达1.5万亿元。市场普遍预期，到2030年，规模有望突破2万亿元，2035年或达3.5万亿元。\n企业活力迸发： 截至2025年，全国低空经济相关企业数量已超8.4万家，仅2025年上半年新增企业就超过1.2万家。其中，上市企业118家，专精特新“小巨人”企业211家，高新技术企业近4000家。大疆、亿航智能、小鹏汇天、峰飞航空等龙头企业在全球市场占据重要份额。\n产业链成熟： 产业链已形成较为完整的生态，涵盖上游的核心技术与零部件（如电池、飞控、传感器）、中游的飞行器制造（无人机、eVTOL、直升机等）以及下游的运营服务与基础设施（物流、旅游、培训、起降场建设等）。\n\n三、 技术与应用双轮驱动，商业化进程加速\n技术创新是低空经济发展的核心动力，应用场景的拓展则验证了其商业价值。\n核心技术突破： 在无人机研发、装备制造、新一代通信技术（如5G-A）方面，中国已处于全球领先地位。民用无人机注册数已突破百万架。在eVTOL（电动垂直起降飞行器）领域，亿航智能的EH216-S成为全球首个获得“三证齐全”（型号合格证、生产许可证、标准适航证）的机型，峰飞航空的V2000CG货运无人机也已获适航认证，标志着中国在该领域取得重大进展。\n应用场景百花齐放：\n低空物流： 美团、京东、顺丰等企业已开展常态化无人机配送，有效缓解城市交通拥堵。美团在深圳的无人机送餐、京东在重庆的物流航线已成为典范。\n农林植保： 无人机在农业领域的应用已非常成熟，大幅提升了作业效率，降低了人力成本。\n低空旅游与载人交通： 上海、杭州、重庆等地已开通低空载客常态化航线，“空中的士”项目逐步落地，为公众提供全新的出行和观光体验。\n应急救援与公共服务： 无人机在消防灭火、跨海医疗物资运输、灾情侦察、电力巡检、边境巡检等领域的应用日益广泛，展现出巨大社会价值。\n\n四、 挑战与瓶颈并存，发展之路仍需攻坚\n尽管发展势头迅猛，但低空经济要实现健康可持续发展，仍面临诸多挑战。\n基础设施短板： 通用机场和起降点数量严重不足。截至2023年底，全国在册通用机场仅449个，远低于美国。城市起降点、充电/换电站、通信导航监视（CNS）等“新基建”布局滞后，难以支撑大规模飞行活动。深圳计划2025年建成1200个起降点，凸显了补短板的紧迫性。\n空域管理与法规滞后： 空域开放不足30%，审批流程复杂，“黑飞”问题依然存在。全国性的《低空经济促进法》尚未出台，缺乏统一的空域分类管理标准和“一站式”飞行审批机制，多头管理现象导致协调难度大。\n核心技术“卡脖子”： 在高性能轻量化材料、高能量密度电池（eVTOL续航瓶颈）、航空发动机、高端航电系统、主控芯片等关键核心零部件上，仍存在对外依赖，自主创新能力有待加强。\n商业化与市场培育： 运营服务市场尚未成熟，消费类服务（如私人飞行、公务飞行）占比低，缺乏稳定成熟的盈利模式。eVTOL等高端载人飞行器造价高昂，初期市场有限，距离大众化普及尚有距离。消费者认知度和接受度有待提高。\n\n五、 区域格局：东部引领，多点开花\n低空经济的产业资源呈现集聚态势。广东省一省就聚集了全国20.6%的产业资源，拥有大疆、亿航等头部企业，产品创新和产业聚集度全国领先。长三角、粤港澳大湾区、成渝地区是主要增长极。中西部地区依托空域资源和政策试点（如四川是空域改革试点省份）也在加速追赶。\n\n结语\n2025年的中国低空经济，正处于从“政策热”向“产业热”、“应用热”转化的关键时期。政策支持、技术突破和市场需求形成了强大的发展合力。尽管在基础设施、空域管理、核心技术等方面仍需攻坚克难，但其作为“新质生产力”代表的巨大潜力已毋庸置疑。随着5G-A网络普及、空域管理改革深化、产业链协同创新，中国低空经济正蓄势待发，有望在未来十年内成长为一个数万亿级别的庞大市场，深刻改变人们的出行、物流和生产生活方式。',
+  },
+  {
+    id: 2,
+    article:
+      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。\n低空经济的崛起首先是一场效率革命。在传统物流面临成本攀升与时效瓶颈的当下，无人机物流以“降维打击”之势开辟了新通路。从深圳的无人机快递快线，到四川凉山悬崖村的医疗物资空中生命线，低空运输将“小时级”配送压缩为“分钟级”，消除了地理隔阂，重构了时空经济版图。在广袤农田上空，植保无人机不仅将农药喷洒效率提升数倍，更通过精准施药降低了90%的用水量和30%的农药使用量，在提升农业效能的同时，为可持续发展写下生动注脚。这不仅是技术的胜利，更是人类以智慧突破自然约束，追求更高资源配置效率的文明进阶。\n低空经济更深层的影响在于其激发产业创新的“裂变效应”。它绝非孤立业态，而是一个具有极强牵引力的战略性新兴产业集群。其发展直接驱动高端制造、新材料、人工智能等技术的融合创新与迭代升级，催生了从飞行器研发、空域管理、通信导航到售后服务的全产业链体系。例如，eVTOL（电动垂直起降飞行器）的研发，就集中体现了电池能量密度、飞控系统、轻量化材料等尖端领域的突破。更值得期待的是，低空经济与旅游、教育、应急救援等场景的深度融合，正在孵化出空中观光、航空运动、城市管理等前所未有的新业态，为经济增长开辟出蔚蓝新境。\n然而，低空经济的翱翔之路并非一马平川。其繁荣发展的前提，是一个能够确保安全、有序、高效的低空运行体系。这呼唤着“天空治理”的现代化转型。空域如何划设？飞行如何监管？风险如何防范？这些都需要前瞻性的法规标准与先进的技术基础设施作为支撑。从美国的UAM（城市空中交通）概念到欧盟的U-space计划，全球主要经济体都在竞相构建自己的低空管理框架。对于中国而言，加快完善低空法规、推动空域管理改革、建设智慧空中交通管理系统，是必须跨越的关键一步，这考验着治理者的智慧与魄力。\n展望未来，低空经济描绘的是一幅立体多维的社会图景。它或将缓解地面交通的拥堵之苦，让通勤从二维平面跃入三维空间；它或将赋予偏远地区前所未有的可达性，促进公共服务的均等化；它甚至可能改变城市的形态与规划逻辑，让“天空友好型”建筑和基础设施成为新标准。这场变革关乎效率，更关乎公平；关乎经济，更关乎人文。\n低空经济时代的到来，意味着人类活动疆域的又一次重大拓展。它不仅是经济发展的新蓝海，更是社会进步的新阶梯。唯有以创新为翼、以规范为轨，我们才能驾驭这片充满希望的天空，让低空经济真正为人类社会赋能，开启一个更加高效、互联、美好的未来。',
+  },
+  {
+    id: 3,
+    article:
+      '当无人机轻盈地掠过城市天际线，当“空中出租车”从科幻电影的银幕驶入现实规划的蓝图，一场静悄悄的“天空革命”正悄然降临。低空经济，这片离地千米以下的广阔空域，不再仅仅是飞鸟与航班的通道，它正以前所未有的深度和广度，渗透进寻常百姓家，深刻重塑着人类生活的面貌与体验。\n一、 效率变革：从“即刻送达”到“时空压缩”\n低空经济对生活最直观的冲击，是带来了极致的效率提升，重新定义了“快”与“便”。\n物流配送“分钟级”响应： 外卖、快递、生鲜药品的无人机配送，正逐步打破地面交通的桎梏。它不再受困于红灯、拥堵和复杂的“最后一公里”地形，能够实现点对点的直线飞行，将配送时间从“小时级”压缩至“分钟级”。想象一下，急需的药品或一份热腾腾的晚餐从天而降，这种便利将彻底改变我们的消费习惯和期待。城市通勤“三维化”拓展： 对于饱受通勤之苦的城市居民，eVTOL（电动垂直起降飞行器）为代表的城市空中交通（UAM），提供了全新的解决方案。它有望将地面数小时的通勤时间缩短至空中十几分钟，极大地解放了人们被浪费在路上的时间，有效缓解地面交通压力，让工作与生活的距离不再以平面里程衡量，而是以垂直起降的分钟数计算。\n二、 品质升级：从“基础满足”到“体验升华”\n低空经济不仅追求更快，更致力于更好，它正在提升生活品质的多个维度。\n医疗急救的“黄金通道”： 在生死攸关的时刻，低空飞行器可以构建一条空中生命线。无人机能快速运送血液、疫苗、急救器官；空中救护车能快速抵达事故现场或偏远地区，争分夺秒抢夺生机，极大提升了公共应急保障能力。\n环境监测与农业的“精准之眼”： 无人机搭载高清相机和多光谱传感器，可以大范围、精准地监测大气污染、排查污染源，守护蓝天绿水。在农业领域，精准植保、农田监测大大提升了农业生产效率与智能化水平，最终为人们的餐桌提供更安全、优质的食品保障。\n休闲娱乐的“全新视角”： 低空旅游提供了观赏山河湖海、城市风光的全新视角，空中摄影、航空运动等新型娱乐方式正吸引着越来越多追求独特体验的人们，丰富了大众的精神文化生活。三、 公平普惠：从“数字鸿沟”到“天空桥梁”\n低空经济还具有弥合地域差距、促进社会公平的潜力。\n打通偏远地区“末梢循环”： 对于山区、海岛、乡村等交通不便地区，低空物流和交通可以有效解决物资运输难、人员出行难的问题，让这些地区的居民也能享受到便捷的电商、高效的邮政和及时的医疗服务，助力城乡公共服务均等化。\n构建全域覆盖的“服务网络”： 与传统基础设施投入巨大不同，低空网络部署相对灵活，可以更快地覆盖更广阔的区域，为所有居民编织一张平等的、高效的空中服务网，减少因地理位置不同而导致的发展机会差异。\n四、 挑战与思考：拥抱变革中的理性声音\n低空经济在带来巨大便利的同时，也伴随着一系列需要全社会共同应对的挑战：\n安全与隐私： 飞行器的安全性是公众最大的关切。如何确保绝对飞行安全、避免碰撞、应对恶劣天气？同时，大量飞行器携带摄像设备，如何规范数据采集和使用，保护公民隐私不被侵犯？\n噪音与社区影响： 低空飞行器产生的噪音可能对社区生活造成干扰，需要在技术降噪和合理规划航线、起降点等方面审慎考量。\n法规与公众接受度： 空域管理法规需要持续完善，公众对这项新技术的认知和接受也需要一个过程，透明的沟通和良好的体验是关键。\n结语\n低空经济绝非遥远的概念，它正一步步从愿景走入现实，其影响力将如春雨般细密地浸润我们生活的方方面面。它承诺了一个更高效、更便捷、更公平的未来生活图景。面对这场“天空革命”，我们既要满怀热情地拥抱它带来的无限可能，也要以审慎和智慧应对其伴随的挑战，通过技术创新与制度保障的双轮驱动，确保低空经济真正安全、有序、高效地赋能每一个人，让人类的生活因这片新开拓的天空而更加美好。',
+  },
+  {
+    id: 4,
+    article:
+      '当无人机掠过城市天际线，当“空中出租车”从科幻走入现实，当农业植保进入精准智能时代——一个曾经被重力束缚的经济空间正被彻底打开。低空经济，这片离地千米以下的“黄金空域”，不再只是飞鸟与云朵的领地，而正成为推动社会发展的新引擎，重塑着我们的生产生活方式与城市肌理。\n低空经济的崛起首先是一场效率革命。在传统物流面临成本攀升与时效瓶颈的当下，无人机物流以“降维打击”之势开辟了新通路。从深圳的无人机快递快线，到四川凉山悬崖村的医疗物资空中生命线，低空运输将“小时级”配送压缩为“分钟级”，消除了地理隔阂，重构了时空经济版图。在广袤农田上空，植保无人机不仅将农药喷洒效率提升数倍，更通过精准施药降低了90%的用水量和30%的农药使用量，在提升农业效能的同时，为可持续发展写下生动注脚。这不仅是技术的胜利，更是人类以智慧突破自然约束，追求更高资源配置效率的文明进阶。\n低空经济更深层的影响在于其激发产业创新的“裂变效应”。它绝非孤立业态，而是一个具有极强牵引力的战略性新兴产业集群。其发展直接驱动高端制造、新材料、人工智能等技术的融合创新与迭代升级，催生了从飞行器研发、空域管理、通信导航到售后服务的全产业链体系。例如，eVTOL（电动垂直起降飞行器）的研发，就集中体现了电池能量密度、飞控系统、轻量化材料等尖端领域的突破。更值得期待的是，低空经济与旅游、教育、应急救援等场景的深度融合，正在孵化出空中观光、航空运动、城市管理等前所未有的新业态，为经济增长开辟出蔚蓝新境。\n然而，低空经济的翱翔之路并非一马平川。其繁荣发展的前提，是一个能够确保安全、有序、高效的低空运行体系。这呼唤着“天空治理”的现代化转型。空域如何划设？飞行如何监管？风险如何防范？这些都需要前瞻性的法规标准与先进的技术基础设施作为支撑。从美国的UAM（城市空中交通）概念到欧盟的U-space计划，全球主要经济体都在竞相构建自己的低空管理框架。对于中国而言，加快完善低空法规、推动空域管理改革、建设智慧空中交通管理系统，是必须跨越的关键一步，这考验着治理者的智慧与魄力。\n展望未来，低空经济描绘的是一幅立体多维的社会图景。它或将缓解地面交通的拥堵之苦，让通勤从二维平面跃入三维空间；它或将赋予偏远地区前所未有的可达性，促进公共服务的均等化；它甚至可能改变城市的形态与规划逻辑，让“天空友好型”建筑和基础设施成为新标准。这场变革关乎效率，更关乎公平；关乎经济，更关乎人文。\n低空经济时代的到来，意味着人类活动疆域的又一次重大拓展。它不仅是经济发展的新蓝海，更是社会进步的新阶梯。唯有以创新为翼、以规范为轨，我们才能驾驭这片充满希望的天空，让低空经济真正为人类社会赋能，开启一个更加高效、互联、美好的未来。',
+  },
+]
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index d08a665..2f2baec 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import {ref, onMounted} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
 
 const currentPage = ref(1)
 
@@ -9,7 +10,7 @@ onMounted(() => {})
 
 <template>
   <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/product.png" />
     <Swiper
       id="one"
       title="产品体系"
diff --git a/src/views/product/monitorSystem.vue b/src/views/product/monitorSystem.vue
new file mode 100644
index 0000000..2f2baec
--- /dev/null
+++ b/src/views/product/monitorSystem.vue
@@ -0,0 +1,67 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <Banner class="banner" img="banner/product.png" />
+    <Swiper
+      id="one"
+      title="产品体系"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="two"
+      title="软件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="three"
+      title="硬件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+</style>
diff --git a/src/views/product/remoteDevice.vue b/src/views/product/remoteDevice.vue
new file mode 100644
index 0000000..2f2baec
--- /dev/null
+++ b/src/views/product/remoteDevice.vue
@@ -0,0 +1,67 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <Banner class="banner" img="banner/product.png" />
+    <Swiper
+      id="one"
+      title="产品体系"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="two"
+      title="软件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="three"
+      title="硬件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+</style>
diff --git a/src/views/services/index.vue b/src/views/services/index.vue
index abc1c9c..3c54ef7 100644
--- a/src/views/services/index.vue
+++ b/src/views/services/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import {ref, onMounted} from 'vue'
 import Swiper from '@/components/swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
 
 const currentPage = ref(1)
 
@@ -9,7 +10,7 @@ onMounted(() => {})
 
 <template>
   <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/services.png" />
     <Swiper
       id="one"
       title="智能加载服务"