更新代码

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;