xuye929/AIProd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后期修改完善，上线版本

Browse Source
This commit is contained in:
qiuxiao
2025-11-12 18:11:11 +08:00
parent c54f9c9976
commit 8f57683dd5
98 changed files with 2110 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pages/DailyNews/NewsDetailIndex/NewsDetail.vue
View File

@ -88,7 +88,7 @@ export default {
margin: 16px 0;
gap: 20px;
.tag-item {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #1E293B;
padding: 4px 12px !important;
@include gradient-border($linear-gradient-start, $linear-gradient-end)
@ -99,7 +99,7 @@ export default {
font-weight: 600;
margin-bottom: 20px;
margin-top: 10px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
color: #1E293B;
display: flex;
align-items: center;
@ -115,7 +115,7 @@ export default {
}
.article-text {
color: #64748B;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
}
.article-graph {
padding-left: 20px;
@ -138,13 +138,13 @@ export default {
.title {
font-size: 18px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
color: #506179;
}
.content {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
margin-top: 18px;
}

52
pages/DailyNews/NewsDetailIndex/index.vue
View File

@ -7,14 +7,14 @@
<div class="description">
{{ newsDetail.summary || '' }}
</div>
<div class="flex flex-col" style="gap: 16px">
<div class="flex" style="gap: 20px">
<div class="flex flex-col gap-16">
<div class="flex gap-20">
<ThumbBtn :like-count="newsDetail.likeCount || 0" :id="newsDetail.id || 0" type="article" @like-success="refreshToolDetail" />
<CommentBtn :comment-count="commentCount" />
</div>
<div class="flex items-center justify-center" style="padding: 0 7px; gap: 8px">
<img src="/ToolDetail/icon_clock1.png" alt="" style="width: 16px; height: 16px" />
<div style="font-size: 14px; color: #869EC2; font-family: 'Poppins-Regular', serif; line-height: 18px">
<div class="flex items-center justify-center gap-8 pad-7">
<img src="/ToolDetail/icon_clock1.png" alt="" class="wh-16" />
<div class="date-text">
{{ formatDate(newsDetail.publishTime) }}
</div>
</div>
@ -30,7 +30,7 @@
</div>
<div>
<div class="comment-title">Related news</div>
<div class="flex-between-center" style="gap: 20px">
<div class="flex-between-center gap-20">
<NewsCardItem v-for="it in relatedNewsList" :key="it.id" :item="it" @refresh="goToRefreshPage" />
</div>
</div>
@ -40,21 +40,21 @@
<div class="card swiper-box">
<el-carousel :autoplay="false" height="140px">
<el-carousel-item v-for="item in 4" :key="item">
<img style="width: 100%; height: 140px" alt="" src="/" />
<img class="w-100" alt="" src="/" />
</el-carousel-item>
</el-carousel>
</div>
<!--网站导航-->
<div class="card pop-list">
<div style="padding: 24px 4px">
<div class="pad-24">
<PopularToolList />
</div>
</div>
<!--文章列表-->
<div class="card">
<div style="padding: 24px 4px">
<div class="pad-24">
<div class="clearfix">
<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
<img src="/logo/hot.png" class="mr-6" alt=""/>
Latest Article
</div>
<div class="list-scroll">
@ -174,6 +174,26 @@ export default {
</script>
<style scoped lang="scss">
.date-text {
font-size: 14px; color: #869EC2; font-family: 'Poppins-Regular'; line-height: 18px;
}
.gap-8 {
gap: 8px;
}
.pad-7 {
padding: 0 7px;
}
.w-100 {
width: 100%;
height: 140px;
}
.pad-24 {
padding: 24px 4px;
}
.mr-6 {
margin-right: 6px;
}
.card {
padding: 16px;
background-color: #FFFFFF;
@ -189,12 +209,12 @@ export default {
padding-top: 87px;
padding-bottom: 120px;
.gradient-title {
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-size: 18px;
font-weight: 600;
}
.views-title {
font-family: 'Poppins-Bold', serif;
font-family: 'Poppins-Bold';
font-size: 40px;
font-weight: 700;
margin-top: 78px;
@ -203,7 +223,7 @@ export default {
margin-top: 10px;
.description {
margin-right: 350px;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
font-size: 18px;
color: #64748B;
}
@ -262,7 +282,7 @@ export default {
align-items: center;
font-size: $larg-font-size;
font-weight: bold;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
}
.pop-list {
.pop-item {
@ -295,7 +315,7 @@ export default {
}
.tool-name {
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
color: #64748B;
}
}
@ -319,7 +339,7 @@ export default {
font-size: 30px;
font-weight: 600;
margin-bottom: 30px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
color: #1E293B;
display: flex;
align-items: center;

20
pages/DailyNews/NewsList.vue
View File

@ -3,15 +3,15 @@
<div class="input">
<SearchInput v-model="searchText" placeholder="Please enter the key words" @search="handleTextSearch" />
</div>
<div class="card flex-1 flex flex-col">
<div>
<div style="padding: 30px 10px">
<div class="card flex flex-col flex-1">
<div class="flex-1 pad-10">
<div class="scroll-box">
<div class="daily-content" v-for="(it, i) in groupedArticles" :key="i">
<div class="date-title flex items-center">
<img src="/about/icon_title_date.png" alt="Daily News" />
<div class="gradient-color">{{ it.date }}</div>
</div>
<div class="flex-col flex" style="gap: 40px">
<div class="flex-col flex gap-40">
<ArticleTextListItem v-for="item in it.list" :key="item.id" :item="item" />
</div>
<div class="diver"></div>
@ -128,6 +128,16 @@ export default {
</script>
<style scoped lang="scss">
.pad-10 {
padding: 10px 0;
}
.gap-40 {
gap: 40px;
}
.scroll-box {
max-height: 1600px;
overflow-y: auto;
}
.card {
padding: 20px;
background-color: #FFFFFF;
@ -144,7 +154,7 @@ export default {
.daily-content {
.date-title {
gap: 8px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-size: 24px;
font-weight: 600;
margin-bottom: 40px;

60
pages/DailyNews/components/ArticleCardItem.vue
View File

@ -1,16 +1,18 @@
<template>
<div class="article-box" @click="handleClick">
<div class="line"></div>
<div style="gap: 20px" class="flex">
<div class="preview-box">
<img :src="item.coverImage || ''" alt="" >
<div class="flex gap-20">
<div class="flex flex-col justify-center">
<div class="preview-box">
<img :src="item.coverImage || ''" alt="" class="wh-100">
</div>
<div class="flex items-center gap-6">
<img src="/ToolDetail/icon_clock1.png" alt="" class="wh-16" />
<div class="time">{{ formatPublishTime(item.publishTime || '') }}</div>
</div>
</div>
<div class="content flex flex-col justify-between">
<div class="description">{{ item.summary || '' }}</div>
<div class="flex items-center" style="gap: 6px">
<img src="/ToolDetail/icon_clock1.png" alt="" />
<div class="time">{{ item.publishTime || '' }}</div>
</div>
</div>
</div>
</div>
@ -33,12 +35,35 @@ export default {
methods: {
handleClick() {
this.$emit('refresh', this.item);
}
},
formatPublishTime(timeString) {
if (!timeString) return '';
const date = new Date(timeString);
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const year = date.getFullYear();
return `${year}-${month}-${day}`;
},
},
}
</script>
<style scoped lang="scss">
.gap-20 {
gap: 20px;
}
.gap-6 {
gap: 6px;
}
.time {
color: #869EC2;
font-family: 'Poppins-Regular';
font-size: 14px;
line-height: 16px;
}
.article-box {
cursor: pointer;
&:active {
@ -46,35 +71,22 @@ export default {
}
.preview-box {
width: 104px;
height: 104px;
height: 52px;
border-radius: 6px;
img {
width: 100%;
height: 100%;
}
margin-bottom: 12px;
}
.content {
height: 104px;
flex: 1;
.description {
color: #1E293B;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
img {
width: 16px;
height: 16px;
}
.time {
color: #869EC2;
font-family: 'Poppins-Regular', serif;
font-size: 14px;
line-height: 16px;
}
}
}
</style>

6
pages/DailyNews/components/ArticleTextListItem.vue
View File

@ -73,19 +73,19 @@ export default {
.title {
font-size: 18px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
color: #3A4A65;
}
.content {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
margin-top: 20px;
}
.source {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #C8CFD7;
margin-top: 10px;
font-size: 14px;

37
pages/DailyNews/components/NewsCardItem.vue
View File

@ -3,19 +3,19 @@
<div class="preview">
<img :src="item.coverImage || ''" alt="" />
</div>
<div class="flex flex-col" style="gap: 14px">
<div class="title" style="height: 60px">{{ item.title || '' }}</div>
<div class="description" style="height: 72px">
<div class="flex flex-col gap-12">
<div class="title h-60">{{ item.title || '' }}</div>
<div class="description h-72">
{{ item.summary || '' }}
</div>
</div>
<div class="bottom">
<div class="flex items-center" style="gap: 12px">
<div class="flex items-center gap-12">
<div class="circle"></div>
<div class="text">{{ item.slug || '' }}</div>
<div class="text">{{ item.author || '' }}</div>
</div>
<div class="flex items-center" style="gap: 8px">
<img src="/ToolDetail/icon_thumb.png" alt="" style="width: 14px; height: 14px" />
<div class="flex items-center gap-8">
<img src="/ToolDetail/icon_thumb.png" alt="" />
<div class="text">{{ item.likeCount || 0 }}</div>
</div>
</div>
@ -44,6 +44,18 @@ export default {
</script>
<style scoped lang="scss">
.gap-12 {
gap: 12px;
}
.gap-8 {
gap: 8px;
}
.h-60 {
height: 60px;
}
.h-72 {
height: 72px;
}
.card {
padding: 20px;
background-color: #FFFFFF;
@ -82,14 +94,18 @@ export default {
.text {
font-size: 14px;
color: #C8CFD7;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
line-height: 18px;
}
img {
width: 14px;
height: 14px;
}
}
.title {
font-size: 20px;
color: #3A4A65;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 4;
@ -99,7 +115,8 @@ export default {
}
.description {
color: #64748B;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
height: auto;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

83
pages/DailyNews/index.vue
View File

@ -7,8 +7,8 @@
<div class="views-header flex-between-center">
<div class="description">Keep up-to-date with the latest AI industry developments. This section provides daily news coverage, focusing on global breakthroughs, frontier research, market movements, and emerging trends across AI sectors.</div>
</div>
<div class="container flex justify-between">
<div class="left-content flex flex-col">
<div class="container">
<div class="left-content flex flex-col" ref="leftContent">
<div class="card preview-wrapper">
<img :src="newConfig.imageUrl || ''" alt="" />
</div>
@ -16,26 +16,26 @@
<NewsList />
</div>
</div>
<div class="right-content">
<div class="right-content" ref="rightContent">
<!--轮播图-->
<div class="card swiper-box">
<el-carousel :autoplay="false" height="140px">
<el-carousel :autoplay="false">
<el-carousel-item v-for="(item, i) in banner" :key="i">
<img :src="item.imageUrl || ''" alt="" style="height: 140px; width: 100%;" />
<img :src="item.imageUrl || ''" alt="" class="h-100" />
</el-carousel-item>
</el-carousel>
</div>
<!--网站导航-->
<div class="card pop-list">
<div style="padding: 24px 4px">
<div class="pad-24">
<PopularToolList />
</div>
</div>
<!--文章列表-->
<div class="card">
<div style="padding: 24px 4px">
<div class="card flex-1">
<div class="h-100 flex flex-col pad-24">
<div class="clearfix">
<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
<img src="/logo/hot.png" alt=""/>
Latest Article
</div>
<div class="list-scroll">
@ -115,15 +115,24 @@ export default {
await this.getModuleConfig();
await this.getLatestArticleListData();
this.fullscreenLoading = false;
}
},
},
mounted() {
this.onLoad();
}
},
}
</script>
<style scoped lang="scss">
.img-140 {
height: 140px; width: 100%;
}
.pad-24 {
padding: 24px 4px;
}
.h-100 {
height: 100%;
}
.card {
padding: 16px;
background-color: #FFFFFF;
@ -136,44 +145,58 @@ export default {
overflow-y: auto;
position: relative;
.content {
padding-top: 87px;
padding-bottom: 120px;
padding-top: 25px;
padding-bottom: 100px;
.gradient-title {
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-size: 18px;
font-weight: 600;
}
.views-title {
font-family: 'Poppins-Bold', serif;
font-family: 'Poppins-Bold';
font-size: 40px;
font-weight: 700;
margin-top: 78px;
margin-top: 25px;
}
.views-header {
margin-top: 10px;
.description {
margin-right: 350px;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
font-size: 18px;
color: #64748B;
}
}
.container {
gap: 20px;
margin-top: 114px;
margin-top: 50px;
display: grid;
grid-template-columns: 1fr 372px;
align-items: start;
grid-gap: 20px;
.right-content {
width: 372px;
display: flex;
flex-direction: column;
gap: 20px;
.list-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 1350px;
.card:last-child {
flex: 1;
display: flex;
flex-direction: column;
margin: 0;
.list-scroll {
height: 1500px;
overflow-y: auto;
overflow-x: hidden;
}
}
.swiper-box {
height: 174px;
::v-deep .el-carousel {
.el-carousel__container {
height: 142px;
}
.el-carousel__arrow {
opacity: 0 !important;
transition: none !important;
@ -212,7 +235,10 @@ export default {
align-items: center;
font-size: $larg-font-size;
font-weight: bold;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
img {
margin-right: 6px;
}
}
.pop-list {
.pop-item {
@ -245,7 +271,7 @@ export default {
}
.tool-name {
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
color: #64748B;
}
}
@ -256,8 +282,7 @@ export default {
}
}
.left-content {
flex: 1;
gap: 20px;
height: 100%;
.preview-wrapper {
height: 320px;
img {
@ -270,7 +295,7 @@ export default {
font-size: 30px;
font-weight: 600;
margin-bottom: 30px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
color: #1E293B;
display: flex;
align-items: center;