|
|
|
|
@ -1,172 +1,108 @@ |
|
|
|
|
<template> |
|
|
|
|
<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"> |
|
|
|
|
<el-tabs v-model="activeName" style="max-width: 70%; margin: auto" class="container" @tab-click="handleTabClick"> |
|
|
|
|
<el-tab-pane |
|
|
|
|
v-for="category in categories" |
|
|
|
|
:key="category.id" |
|
|
|
|
:label="category.name" |
|
|
|
|
:name="category.id" |
|
|
|
|
> |
|
|
|
|
<ul> |
|
|
|
|
<li v-for="newsItem in getNewsItemsForCategory(category)" :key="newsItem.id"> |
|
|
|
|
<div class="box-list" @click.stop="handleNewsClick(newsItem)"> |
|
|
|
|
<div class="left-box-list"> |
|
|
|
|
<p class="list-title">{{ newsItem.title }}</p> |
|
|
|
|
<p class="list-summary">{{ stripHtmlTags(newsItem.summary) }}</p> |
|
|
|
|
<p class="list-time">{{ newsItem.date }}</p> |
|
|
|
|
</div> |
|
|
|
|
<el-divider/> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
</el-tabs> |
|
|
|
|
</div> |
|
|
|
|
<img class="news-image" :src="newsItem.imageUrl" alt="News Image" v-default-image> |
|
|
|
|
</div> |
|
|
|
|
<el-divider /> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
</el-tabs> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
import {useRouter} from "vue-router"; |
|
|
|
|
const activeName = ref('通知公告') |
|
|
|
|
const newsData = ref({ |
|
|
|
|
通知公告:[ |
|
|
|
|
{ |
|
|
|
|
id:1, |
|
|
|
|
title: '季节新闻1', |
|
|
|
|
date: '2024年9月23日', |
|
|
|
|
summary: '秋天，这个季节像是大自然最细腻的画师，在不经意间将世界涂抹成一幅斑斓的画卷。它没有春天那样生机勃勃，也没有夏天的热情奔放，更没有冬天的银装素裹，但它却有着自己独特的韵味——宁静、成熟而又充满诗意。\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: '季节新闻6', |
|
|
|
|
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: '体育新闻7', |
|
|
|
|
date: '2024年9月22日', |
|
|
|
|
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。', |
|
|
|
|
imageUrl: 'https://pic.rmb.bdstatic.com/50252becb3b391b2cb68ddde4a9c5d9b.jpeg' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id:13, |
|
|
|
|
title: '科技新闻8', |
|
|
|
|
date: '2024年9月23日', |
|
|
|
|
summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。', |
|
|
|
|
imageUrl: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id:14, |
|
|
|
|
title: '科技新闻9', |
|
|
|
|
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: '科技新闻10', |
|
|
|
|
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 router = useRouter(); |
|
|
|
|
const handleTabClick = (tab) => { |
|
|
|
|
const categoryName = tab.name |
|
|
|
|
import { ref, onMounted } from 'vue' |
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
import { getColumnListApi, queryEssayListApi } from '@/api/news' |
|
|
|
|
let categories = ref([]) |
|
|
|
|
let newsItems = ref({}) |
|
|
|
|
let activeName = ref('') |
|
|
|
|
const router = useRouter() |
|
|
|
|
|
|
|
|
|
//使用正则表达式转换html标签文本 |
|
|
|
|
function stripHtmlTags(html) { |
|
|
|
|
return html.replace(/<[^>]*>/g, ''); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 获取栏目信息 |
|
|
|
|
const fetchColumnList = async () => { |
|
|
|
|
const response = await getColumnListApi() |
|
|
|
|
if (response.success && response.result) { |
|
|
|
|
categories.value = response.result.filter(category => category.isShow === '1') |
|
|
|
|
// 尝试立即加载第一个栏目的新闻列表 |
|
|
|
|
if (categories.value.length > 0) { |
|
|
|
|
await fetchNewsList(categories.value[0].id) |
|
|
|
|
activeName.value = categories.value[0].id |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 栏目新闻列表查询 |
|
|
|
|
const fetchNewsList = async (categoryId) => { |
|
|
|
|
try { |
|
|
|
|
const response = await queryEssayListApi(categoryId) |
|
|
|
|
console.log(response.success,'daaaaaaa') |
|
|
|
|
console.log(response.result.records,'ddddddd') |
|
|
|
|
if (response.success && response.result.records) { |
|
|
|
|
newsItems.value[categoryId] = response.result.records.map(data => ({ |
|
|
|
|
id: data.id, |
|
|
|
|
title: data.title, |
|
|
|
|
date: data.publishTime, |
|
|
|
|
summary: data.content, |
|
|
|
|
imageUrl: data.comimg ? getAbsoluteImagePath(data.comimg) : '' |
|
|
|
|
})) |
|
|
|
|
} |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error('获取新闻列表失败', error) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//获取图片完整地址 |
|
|
|
|
const getAbsoluteImagePath = (relativePath) => { |
|
|
|
|
const baseImageUrl = 'https://localhost:18085/jeecg-boot/'; // 替换为实际的服务器地址 |
|
|
|
|
return baseImageUrl + relativePath; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 获取指定栏目的新闻列表 |
|
|
|
|
const getNewsItemsForCategory = (category) => { |
|
|
|
|
return newsItems.value[category.id] || [] |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 初始化加载栏目列表 |
|
|
|
|
onMounted(() => { |
|
|
|
|
fetchColumnList() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 当选项卡改变时更新当前显示的新闻列表 |
|
|
|
|
const handleTabClick = async (tab) => { |
|
|
|
|
const categoryId = tab.props.name |
|
|
|
|
if (!newsItems.value[categoryId]?.length) { |
|
|
|
|
await fetchNewsList(categoryId) |
|
|
|
|
} |
|
|
|
|
activeName.value = categoryId |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 处理新闻条目的点击事件 |
|
|
|
|
const handleClick = (newsItem) => { |
|
|
|
|
const handleNewsClick = (newsItem) => { |
|
|
|
|
router.push({ |
|
|
|
|
name: 'newsDetail', |
|
|
|
|
params: { id: newsItem.id.toString() }, |
|
|
|
|
query: { ...newsItem } |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
significative
9 months ago