更新代码

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'},
       ],
     },
   ],

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

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;

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>

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 {

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>

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: '下载中心',

src/store/nav.js

@@ -11,7 +11,6 @@ export const useNavStore = defineStore(
         return
       } else {
         navIndex.value = id
-        console.log(localStorage.getItem('nav'))
       }
     }
 

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 {
+#certificate {
+  margin-top: 60px;
+  .certificate {
+    width: 100%;
+    height: 100%;
+  }
+  .last-row {
     justify-content: center !important;
+  }
 }
 </style>

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)

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>

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

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 {

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;

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}"
+      <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"
         >
-        {{ item.label }}
+          <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>

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 {

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>

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>

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;

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="产品体系"

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>

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>

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="智能加载服务"