From c54ea78b4f2bd4a9db761728c775c795941eae70 Mon Sep 17 00:00:00 2001
From: fwb <fwb>
Date: Tue, 24 Sep 2024 16:18:09 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=96=B0=E9=97=BB'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/module/constRouter/index.ts   |   3 +-
 src/views/news/components/newsDetail.vue |  23 +-
 src/views/news/components/newsList.vue   | 274 +++++++++++++++--------
 src/views/news/index.vue                 |  27 +--
 4 files changed, 205 insertions(+), 122 deletions(-)

diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts
index 4fe4128..8ac9583 100644
--- a/src/router/module/constRouter/index.ts
+++ b/src/router/module/constRouter/index.ts
@@ -76,7 +76,8 @@ export const constRouter: any =
           component: () => import('@/views/news/components/newsList.vue'), // 新闻列表组件
         },
         {
-          path: '/newsDetail',
+          // path: '/newsDetail',
+          path: 'detail/:id',
           name: 'newsDetail',
           component: () => import('@/views/news/components/newsDetail.vue'),
           meta: {
diff --git a/src/views/news/components/newsDetail.vue b/src/views/news/components/newsDetail.vue
index 238040b..215d30e 100644
--- a/src/views/news/components/newsDetail.vue
+++ b/src/views/news/components/newsDetail.vue
@@ -1,6 +1,7 @@
 <template>
-  <el-button @click="backHandle" type="success">返回</el-button>
-  <div style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
+  <div class="container">
+    <el-button style="margin-left: 93%" @click="backHandle" type="success">返回</el-button>
+    <el-divider/>
     <p class="list-title">{{ data.title }}</p>
     <p class="list-summary">{{ data.summary }}</p>
     <div class="center-image">
@@ -10,25 +11,38 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue';
+import { ref } from 'vue'
 import {useRoute, useRouter} from "vue-router";
 const router = useRouter();
 const route = useRoute();
 const backHandle = ()=>{
   router.go(-1);
 }
-const data = ref(route.query)
+const data = ref(route.query);
 </script>
 
 <style scoped>
+.container{
+  width: 60%;
+  margin: auto;
+  height: 98vh;
+  overflow-y: scroll;
+  padding: 0;
+  display: block;
+}
+.container::-webkit-scrollbar {
+  width: 0;
+}
 .list-title{
   font-size: 25px;
   font-weight: 600;
+  text-align: center;
 }
 .list-summary{
   font-size: 20px;
   color: #8c8b8b;
   margin-top: 10px;
+  line-height: 1.9;
 }
 .list-time{
   font-size: 16px;
@@ -42,6 +56,7 @@ const data = ref(route.query)
 }
 .list-image{
   width: 500px;
+  height: 500px;
   margin-top: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/news/components/newsList.vue b/src/views/news/components/newsList.vue
index 946aa7c..df85a24 100644
--- a/src/views/news/components/newsList.vue
+++ b/src/views/news/components/newsList.vue
@@ -1,106 +1,198 @@
 <template>
-  <ul>
-    <li v-for="newsItems in newsData" :key="newsItems.id">
-      <div class="box-list" @click="handleClick(newsItems)">
-        <div class="left-box-list">
-          <p class="list-title">{{ newsItems.title }}</p>
-          <p class="list-summary">{{ newsItems.summary }}</p>
-          <p class="list-time">{{ newsItems.date }}</p>
-        </div>
-        <img class="news-image" :src="newsItems.imageUrl" alt="News Image">
-      </div>
-      <el-divider/>
-    </li>
-  </ul>
+  <div class="container">
+    <el-tabs v-model="activeName" style="max-width: 60%;margin: auto" @tab-click="handleTabClick">
+      <el-tab-pane
+          v-for="(newsCategory, categoryName) in newsData"
+          :key="categoryName"
+          :label="categoryName"
+          :name="categoryName.toLowerCase()"
+      >
+        <ul>
+          <li v-for="newsItem in newsCategory" :key="newsItem.id">
+            <div class="box-list" @click.stop="handleClick(newsItem)">
+              <div class="left-box-list">
+                <p class="list-title">{{ newsItem.title }}</p>
+                <p class="list-summary">{{ newsItem.summary }}</p>
+                <p class="list-time">{{ newsItem.date }}</p>
+              </div>
+              <img class="news-image" :src="newsItem.imageUrl" alt="News Image">
+            </div>
+            <el-divider/>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 import {useRouter} from "vue-router";
-const router = useRouter()
-// 假新闻数据
-const newsData = ref([
+const activeName = ref('通知公告')
+const newsData = ref({
+  通知公告:[
+    {
+      id:1,
+      title: '季节新闻1',
+      date: '2024年9月23日',
+      summary: '秋天，这个季节像是大自然最细腻的画师，在不经意间将世界涂抹成一幅斑斓的画卷。它没有春天那样生机勃勃，也没有夏天的热情奔放，更没有冬天的银装素裹，但它却有着自己独特的韵味——宁静、成熟而又充满诗意。\n' +
+          '当第一缕凉风轻拂过脸颊，我们知道，秋天来了。这是一年中最宜人的季节，天空如洗，蓝得深邃而纯净，白云悠悠地飘动着，像是蓝天上随意勾勒的几笔白墨。空气中弥漫着淡淡的桂花香，偶尔还能闻到远处果园里成熟的果香，这些气息交织在一起，构成了一首无言的诗篇。\n' +
+          '树叶开始变得丰富多彩，从翠绿到金黄，再到火红，每一片叶子都承载着岁月的故事，讲述着属于它们自己的生命历程。走在铺满落叶的小径上，脚下发出沙沙的声音，仿佛是秋天独有的乐章，让人的心灵得到了前所未有的宁静与放松。\n' +
+          '在这个季节里，最令人愉悦的莫过于那恰到好处的温度了。早晚微凉，午间温暖，这样的天气最适合穿上一件薄薄的毛衣，或是披上一条柔软的围巾，漫步在街头巷尾，感受着每一寸肌肤与自然亲密接触的惬意。人们的心情似乎也因为这样舒适的气候而变得轻松愉快起来，笑容更加灿烂，生活节奏也不自觉地放慢了几分。\n' +
+          '秋天是一个收获的季节，它不仅带来了丰收的喜悦，还赠予了我们一段温馨而美好的时光。让我们在这宜人的季节里，细细品味生活的每一刻，感受那份来自大自然最真挚的馈赠。当最后一抹夏末的暑气随着日落渐渐消散，秋天便悄无声息地降临了。这是一个富有诗意的季节，它以一种平和而优雅的姿态，缓缓铺开了它的画卷。不同于春之生机勃发，夏之热情似火，冬之静谧纯洁，秋以其特有的方式，为这个世界带来了一份成熟与内敛。\n' +
+          '清晨，当第一缕晨光穿透薄雾，落在大地之上，一切都显得那么宁静而美好。此时的空气，带着些许凉意，却也异常清新。走在这样的早晨，你会发现自己不自觉地深呼吸，想要将这份纯净的气息全部纳入胸膛。树叶的颜色开始变化，由绿转黄，再由黄变红，最终落尽繁华，只留下光秃秃的枝丫，等待来年的重生。每一片落叶，都是秋天的使者，它们用生命最后的色彩，为这个世界增添了无限的温暖与希望。\n' +
+          '午后的阳光，不再那么炽热，而是温和地洒在大地上，给人以舒适的感觉。这个时候，最适合找一处安静的地方，或是在公园的长椅上，或是在自家的阳台上，捧一本书，泡一杯茶，静静地享受这难得的悠闲时光。偶尔抬头望望天，你会发现，秋天的天空特别高远，云朵也更加洁白，仿佛是大自然最好的画家，用最简单的颜色，勾勒出最美的图案。\n' +
+          '秋天，还是一个收获的季节。田野里，金黄色的稻谷随风摇曳，果园中，苹果、梨子挂满枝头，一派丰收的景象。农人们忙碌的身影穿梭其间，脸上洋溢着满足的笑容。这不仅仅是因为物质上的富足，更是因为经过一年的努力之后，终于迎来了回报的时刻。这种喜悦，是任何东西都无法替代的。\n' +
+          '在这样的季节里，人们的心灵似乎也被净化了。孩子们在落叶堆里嬉戏打闹，老人们坐在家门口晒太阳，年轻人则三三两两地散步于公园之中。每个人的脸上都洋溢着轻松和愉快，仿佛整个世界都被这份和谐与美好所包围。\n' +
+          '秋天，就是这样一种神奇的存在。它用自己独特的方式，告诉我们生命的美好不仅仅在于绽放的瞬间，更在于那些平凡而真实的日常。当我们学会欣赏身边的每一份美好，珍惜每一次相遇，或许，这就是秋天给予我们最宝贵的礼物吧。\n',
+      imageUrl: 'https://bj.bcebos.com/bjh-pixel/169827013028013977_5_ainote_new.jpg'
+    },
+    {
+      id:2,
+      title: '体育新闻2',
+      date: '2024年9月22日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://pic.rmb.bdstatic.com/50252becb3b391b2cb68ddde4a9c5d9b.jpeg'
+    },
+    {
+      id:3,
+      title: '科技新闻3',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641'
+    },
+    {
+      id:4,
+      title: '科技新闻4',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://img1.baidu.com/it/u=655643694,820713725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729'
+    },
+    {
+      id:5,
+      title: '科技新闻5',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/00/00/ChMlWV0v7jyIHLj_AAgsbG2bHDcAAL5lQE1rfYACCyE751.jpg'
+    },
+    {
+      id:11,
+      title: '季节新闻1',
+      date: '2024年9月23日',
+      summary: '秋天，这个季节像是大自然最细腻的画师，在不经意间将世界涂抹成一幅斑斓的画卷。它没有春天那样生机勃勃，也没有夏天的热情奔放，更没有冬天的银装素裹，但它却有着自己独特的韵味——宁静、成熟而又充满诗意。\n' +
+          '当第一缕凉风轻拂过脸颊，我们知道，秋天来了。这是一年中最宜人的季节，天空如洗，蓝得深邃而纯净，白云悠悠地飘动着，像是蓝天上随意勾勒的几笔白墨。空气中弥漫着淡淡的桂花香，偶尔还能闻到远处果园里成熟的果香，这些气息交织在一起，构成了一首无言的诗篇。\n' +
+          '树叶开始变得丰富多彩，从翠绿到金黄，再到火红，每一片叶子都承载着岁月的故事，讲述着属于它们自己的生命历程。走在铺满落叶的小径上，脚下发出沙沙的声音，仿佛是秋天独有的乐章，让人的心灵得到了前所未有的宁静与放松。\n' +
+          '在这个季节里，最令人愉悦的莫过于那恰到好处的温度了。早晚微凉，午间温暖，这样的天气最适合穿上一件薄薄的毛衣，或是披上一条柔软的围巾，漫步在街头巷尾，感受着每一寸肌肤与自然亲密接触的惬意。人们的心情似乎也因为这样舒适的气候而变得轻松愉快起来，笑容更加灿烂，生活节奏也不自觉地放慢了几分。\n' +
+          '秋天是一个收获的季节，它不仅带来了丰收的喜悦，还赠予了我们一段温馨而美好的时光。让我们在这宜人的季节里，细细品味生活的每一刻，感受那份来自大自然最真挚的馈赠。当最后一抹夏末的暑气随着日落渐渐消散，秋天便悄无声息地降临了。这是一个富有诗意的季节，它以一种平和而优雅的姿态，缓缓铺开了它的画卷。不同于春之生机勃发，夏之热情似火，冬之静谧纯洁，秋以其特有的方式，为这个世界带来了一份成熟与内敛。\n' +
+          '清晨，当第一缕晨光穿透薄雾，落在大地之上，一切都显得那么宁静而美好。此时的空气，带着些许凉意，却也异常清新。走在这样的早晨，你会发现自己不自觉地深呼吸，想要将这份纯净的气息全部纳入胸膛。树叶的颜色开始变化，由绿转黄，再由黄变红，最终落尽繁华，只留下光秃秃的枝丫，等待来年的重生。每一片落叶，都是秋天的使者，它们用生命最后的色彩，为这个世界增添了无限的温暖与希望。\n' +
+          '午后的阳光，不再那么炽热，而是温和地洒在大地上，给人以舒适的感觉。这个时候，最适合找一处安静的地方，或是在公园的长椅上，或是在自家的阳台上，捧一本书，泡一杯茶，静静地享受这难得的悠闲时光。偶尔抬头望望天，你会发现，秋天的天空特别高远，云朵也更加洁白，仿佛是大自然最好的画家，用最简单的颜色，勾勒出最美的图案。\n' +
+          '秋天，还是一个收获的季节。田野里，金黄色的稻谷随风摇曳，果园中，苹果、梨子挂满枝头，一派丰收的景象。农人们忙碌的身影穿梭其间，脸上洋溢着满足的笑容。这不仅仅是因为物质上的富足，更是因为经过一年的努力之后，终于迎来了回报的时刻。这种喜悦，是任何东西都无法替代的。\n' +
+          '在这样的季节里，人们的心灵似乎也被净化了。孩子们在落叶堆里嬉戏打闹，老人们坐在家门口晒太阳，年轻人则三三两两地散步于公园之中。每个人的脸上都洋溢着轻松和愉快，仿佛整个世界都被这份和谐与美好所包围。\n' +
+          '秋天，就是这样一种神奇的存在。它用自己独特的方式，告诉我们生命的美好不仅仅在于绽放的瞬间，更在于那些平凡而真实的日常。当我们学会欣赏身边的每一份美好，珍惜每一次相遇，或许，这就是秋天给予我们最宝贵的礼物吧。\n',
+      imageUrl: 'https://bj.bcebos.com/bjh-pixel/169827013028013977_5_ainote_new.jpg'
+    },
+    {
+      id:12,
+      title: '体育新闻2',
+      date: '2024年9月22日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://pic.rmb.bdstatic.com/50252becb3b391b2cb68ddde4a9c5d9b.jpeg'
+    },
+    {
+      id:13,
+      title: '科技新闻3',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641'
+    },
+    {
+      id:14,
+      title: '科技新闻4',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://img1.baidu.com/it/u=655643694,820713725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729'
+    },
+    {
+      id:15,
+      title: '科技新闻5',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/00/00/ChMlWV0v7jyIHLj_AAgsbG2bHDcAAL5lQE1rfYACCyE751.jpg'
+    },
+  ],
+  赛事资讯:[
+    {
+      id:6,
+      title: '科技新闻6',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://img2.woyaogexing.com/2023/05/05/1601bcb82e9858e21149cf64086a21db.jpg'
+    },
+    {
+      id:7,
+      title: '体育新闻7',
+      date: '2024年9月22日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://img2.woyaogexing.com/2023/05/05/6280b93c7eb748a24466bd0d3021e3a9.jpg'
+    },
+    {
+      id:8,
+      title: '科技新闻8',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://img2.woyaogexing.com/2023/05/05/113da83a57b3661c3170c2571007f8e5.jpg'
+    },
+    {
+      id:9,
+      title: '科技新闻9',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://img1.baidu.com/it/u=515359320,1010066691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=810'
+    },
+    {
+      id:10,
+      title: '科技新闻10',
+      date: '2024年9月23日',
+      summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+      imageUrl: 'https://q6.itc.cn/images01/20240613/84d2e170b23b47be86f17ec5009febf9.jpeg'
+    },
+  ],
+  科技新闻:[
   {
-    id:1,
-    title: '科技新闻1',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://img1.xcarimg.com/exp/7971/8041/8084/8581/20130421003812814631.jpg'
-  },
-  {
-    id:2,
-    title: '体育新闻2',
-    date: '2024年9月22日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://pic.rmb.bdstatic.com/50252becb3b391b2cb68ddde4a9c5d9b.jpeg'
-  },
-  {
-    id:3,
-    title: '科技新闻3',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641'
-  },
-  {
-    id:4,
-    title: '科技新闻4',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://img1.baidu.com/it/u=655643694,820713725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729'
-  },
-  {
-    id:5,
-    title: '科技新闻5',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/00/00/ChMlWV0v7jyIHLj_AAgsbG2bHDcAAL5lQE1rfYACCyE751.jpg'
-  },
-  {
-    id:6,
-    title: '科技新闻6',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/1601bcb82e9858e21149cf64086a21db.jpg'
-  },
-  {
-    id:7,
-    title: '体育新闻7',
-    date: '2024年9月22日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/6280b93c7eb748a24466bd0d3021e3a9.jpg'
-  },
-  {
-    id:8,
-    title: '科技新闻8',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/113da83a57b3661c3170c2571007f8e5.jpg'
-  },
-  {
-    id:9,
-    title: '科技新闻9',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://img1.baidu.com/it/u=515359320,1010066691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=810'
-  },
-  {
-    id:10,
-    title: '科技新闻10',
-    date: '2024年9月23日',
-    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
-    imageUrl: 'https://q6.itc.cn/images01/20240613/84d2e170b23b47be86f17ec5009febf9.jpeg'
-  },
-]);
-const handleClick = (newsItems)=>{
-  // router.push(`/news/${newsItems.id}`);
-  router.push({path:'/newsDetail',query:newsItems})
+    id:16,
+    title:'1',
+    summary:'1111111',
+    date:'121313'
+  }
+],
+});
+const router = useRouter();
+const handleTabClick = (tab) => {
+  const categoryName = tab.name
+}
+// 处理新闻条目的点击事件
+const handleClick = (newsItem) => {
+  router.push({
+    name: 'newsDetail',
+    params: { id: newsItem.id.toString() },
+    query: { ...newsItem }
+  })
 }
 </script>
 
 <style scoped>
+.container{
+  margin: auto;
+  height: 98vh;
+  overflow-y: scroll;
+  padding: 0;
+  display: block;
+}
+.container::-webkit-scrollbar {
+  width: 0;
+}
 .box-list{
   display: flex;
-  /*background: cornsilk;*/
   width: 95%;
   height: 100px;
   margin-left: 30px;
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 7f2f827..89f8e34 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -1,37 +1,12 @@
 <template>
   <div class="container">
-    <el-card style="max-width: 70%;margin: auto">
-      <template #header>
-        <div class="card-header">
-          <span>新闻推荐</span>
-        </div>
-      </template>
-      <div class="content">
-        <router-view></router-view>
-      </div>
-    </el-card>
+    <router-view/>
   </div>
 </template>
 <script setup lang="ts">
-
 </script>
 <style scoped>
 .container{
   margin-top:100px;
 }
-.card-header{
-  font-size: 20px;
-  font-weight: 600;
-  margin-left: 100px;
-}
-.content {
-  height: 89vh;
-  overflow-y: scroll;
-  padding: 0;
-  margin: 0;
-  display: block;
-}
-.content::-webkit-scrollbar {
-  width: 0;
-}
 </style>
\ No newline at end of file