dlsx
/
ContestPortal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'新闻'

Browse Source
main
fwb 8 months ago
parent cb22b32e92
commit c54ea78b4f
4 changed files with 205 additions and 122 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/router/module/constRouter/index.ts
  2. 23
      src/views/news/components/newsDetail.vue
  3. 274
      src/views/news/components/newsList.vue
  4. 27
      src/views/news/index.vue

3
src/router/module/constRouter/index.ts
Unescape View File

@ -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: {

23
src/views/news/components/newsDetail.vue
Unescape View File

@ -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>

274
src/views/news/components/newsList.vue
Unescape View File

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

27
src/views/news/index.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save