对接数据
This commit is contained in:
153
pages/DailyNews/NewsDetailIndex/NewsDetail.vue
Normal file
153
pages/DailyNews/NewsDetailIndex/NewsDetail.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="news-text-content flex flex-col">
|
||||
<div class="tag-list flex flex-wrap">
|
||||
<div v-for="(tag, i) in parsedTags" :key="i" class="tag-item">{{ tag }}</div>
|
||||
</div>
|
||||
<div class="card flex-1 article-content">
|
||||
<div v-html="article.content || ''"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
article: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
safeJsonParse(jsonString) {
|
||||
try {
|
||||
return JSON.parse(jsonString);
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
parsedTags() {
|
||||
if (!this.article || !this.article.tags) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 如果tags已经是数组，直接返回
|
||||
if (Array.isArray(this.article.tags)) {
|
||||
return this.article.tags;
|
||||
}
|
||||
|
||||
// 如果tags是对象（但不是数组），包装成数组返回
|
||||
if (typeof this.article.tags === 'object') {
|
||||
return [this.article.tags];
|
||||
}
|
||||
|
||||
// 如果是字符串，尝试解析为JSON
|
||||
if (typeof this.article.tags === 'string') {
|
||||
// 处理空字符串情况
|
||||
if (this.article.tags.trim() === '') {
|
||||
return [];
|
||||
}
|
||||
const parsed = this.safeJsonParse(this.article.tags);
|
||||
// 如果解析结果是数组，直接返回
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed;
|
||||
}
|
||||
// 如果解析结果是对象，包装成数组返回
|
||||
if (parsed && typeof parsed === 'object') {
|
||||
return [parsed];
|
||||
}
|
||||
// 其他情况返回空数组
|
||||
return [];
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
padding: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.news-text-content {
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
.tag-list {
|
||||
padding: 0 10px;
|
||||
margin: 16px 0;
|
||||
gap: 20px;
|
||||
.tag-item {
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
color: #1E293B;
|
||||
padding: 4px 12px !important;
|
||||
@include gradient-border($linear-gradient-start, $linear-gradient-end)
|
||||
}
|
||||
}
|
||||
.article-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 10px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
color: #1E293B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 26px;
|
||||
background: $header-backgroungd;
|
||||
margin-right: 8px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
}
|
||||
.article-text {
|
||||
color: #64748B;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
}
|
||||
.article-graph {
|
||||
padding-left: 20px;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
.dot-container {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
background: $header-backgroungd;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-weight: 600;
|
||||
color: #506179;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
color: #64748B;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
340
pages/DailyNews/NewsDetailIndex/index.vue
Normal file
340
pages/DailyNews/NewsDetailIndex/index.vue
Normal file
@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div id="normal-container" class="daily-news-content" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
<IntegratedLayout>
|
||||
<div class="content">
|
||||
<div class="views-title">{{ newsDetail.title || '' }}</div>
|
||||
<div class="views-header flex-between-center">
|
||||
<div class="description">
|
||||
{{ newsDetail.summary || '' }}
|
||||
</div>
|
||||
<div class="flex flex-col" style="gap: 16px">
|
||||
<div class="flex" style="gap: 20px">
|
||||
<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">
|
||||
{{ formatDate(newsDetail.publishTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container flex justify-between">
|
||||
<div class="left-content flex flex-col">
|
||||
<div class="card preview-wrapper">
|
||||
<img :src="newsDetail.coverImage || ''" alt="" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<NewsDetail :article="newsDetail" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="comment-title">Related news</div>
|
||||
<div class="flex-between-center" style="gap: 20px">
|
||||
<NewsCardItem v-for="it in relatedNewsList" :key="it.id" :item="it" @refresh="goToRefreshPage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<!--轮播图-->
|
||||
<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="/" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<!--网站导航-->
|
||||
<div class="card pop-list">
|
||||
<div style="padding: 24px 4px">
|
||||
<PopularToolList />
|
||||
</div>
|
||||
</div>
|
||||
<!--文章列表-->
|
||||
<div class="card">
|
||||
<div style="padding: 24px 4px">
|
||||
<div class="clearfix">
|
||||
<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
|
||||
Latest Article
|
||||
</div>
|
||||
<div class="list-scroll">
|
||||
<div class="list">
|
||||
<ArticleCardItem v-for="it in 16" :key="it" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Comment comment-type="article" :id="newsDetail.id" @update:commentCount="handleCommentCountUpdate" />
|
||||
</div>
|
||||
</IntegratedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThumbBtn from "@/pages/ToolDetail/components/ThumbBtn.vue";
|
||||
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
|
||||
import Comment from "@/pages/ToolDetail/Comment/index.vue";
|
||||
import ArticleCardItem from "@/pages/DailyNews/components/ArticleCardItem.vue";
|
||||
import NewsCardItem from "@/pages/DailyNews/components/NewsCardItem.vue";
|
||||
import NewsDetail from "@/pages/DailyNews/NewsDetailIndex/NewsDetail.vue";
|
||||
import PopularToolList from "@/pages/Home/components/PopularToolList.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ThumbBtn,
|
||||
CommentBtn,
|
||||
Comment,
|
||||
ArticleCardItem,
|
||||
NewsCardItem,
|
||||
NewsDetail,
|
||||
PopularToolList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
news_slug: '',
|
||||
newsDetail: {},
|
||||
articleList: [],
|
||||
commentCount: 0,
|
||||
fullscreenLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 刷新工具详情数据
|
||||
async refreshToolDetail() {
|
||||
if (this.news_slug) {
|
||||
await this.getNewsDetail(this.news_slug);
|
||||
}
|
||||
},
|
||||
// 重置页面
|
||||
goToRefreshPage(item) {
|
||||
if (item.slug) {
|
||||
this.$router.push('/news-detail?news_slug=' + item.slug);
|
||||
}
|
||||
},
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
// 获取新闻详情
|
||||
async getNewsDetail(slug) {
|
||||
const {data: res} = await this.$api.article.getArticleDetail(slug);
|
||||
const {code, data} = res;
|
||||
if (code === 0) {
|
||||
this.newsDetail = {...data};
|
||||
}
|
||||
},
|
||||
// 获取相关文章列表
|
||||
async getArticleListData(page = 1, limit = 4) {
|
||||
const params = {page, limit, articleType: 'news'};
|
||||
const {data: res} = await this.$api.article.getArticleList(params);
|
||||
const {code, data} = res;
|
||||
if (code === 0 && data.list) {
|
||||
this.articleList = data.list;
|
||||
}
|
||||
},
|
||||
handleCommentCountUpdate(count) {
|
||||
this.commentCount = count;
|
||||
},
|
||||
async onLoad() {
|
||||
this.fullscreenLoading = true;
|
||||
this.news_slug = this.$route.query.news_slug;
|
||||
if (this.news_slug) {
|
||||
await this.getNewsDetail(this.news_slug);
|
||||
await this.getArticleListData();
|
||||
}
|
||||
this.fullscreenLoading = false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onLoad();
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.news_slug = to.query.news_slug;
|
||||
if (this.news_slug) {
|
||||
this.$router.go(0);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
relatedNewsList() {
|
||||
if (!this.newsDetail.id) {
|
||||
return [];
|
||||
}
|
||||
return this.articleList.filter(e => e.id !== this.newsDetail.id).slice(0, 3);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
padding: 16px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.daily-news-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
.content {
|
||||
padding-top: 87px;
|
||||
padding-bottom: 120px;
|
||||
.gradient-title {
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.views-title {
|
||||
font-family: 'Poppins-Bold', serif;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
margin-top: 78px;
|
||||
}
|
||||
.views-header {
|
||||
margin-top: 10px;
|
||||
.description {
|
||||
margin-right: 350px;
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
font-size: 18px;
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
gap: 20px;
|
||||
margin-top: 114px;
|
||||
.right-content {
|
||||
width: 372px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
.list-scroll {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 1350px;
|
||||
}
|
||||
.swiper-box {
|
||||
height: 174px;
|
||||
::v-deep .el-carousel {
|
||||
.el-carousel__arrow {
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.el-carousel__indicators {
|
||||
.el-carousel__indicator {
|
||||
height: 4px !important;
|
||||
width: 12px !important;
|
||||
border-radius: 2.66px !important;
|
||||
border: 0.66px solid #2563eb !important;
|
||||
background: transparent !important;
|
||||
margin: 0 3px 0 3px !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.el-carousel__button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: none !important;
|
||||
width: 20px !important;
|
||||
background: linear-gradient(0deg, #2563EB 22%, #7B61FF 73%) !important;
|
||||
}
|
||||
|
||||
// 重置其他可能的默认样式
|
||||
&:before,
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $larg-font-size;
|
||||
font-weight: bold;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
}
|
||||
.pop-list {
|
||||
.pop-item {
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.img-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E2E8F0;
|
||||
@include flex-center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
cursor: pointer;
|
||||
@include gradient-border($linear-gradient-start, $linear-gradient-end);
|
||||
box-shadow: 0 5px 7px 0 #00000014;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-name {
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-list {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.left-content {
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
.preview-wrapper {
|
||||
height: 320px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.comment-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
color: #1E293B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 26px;
|
||||
background: $header-backgroungd;
|
||||
margin-right: 8px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
pages/DailyNews/NewsList.vue
Normal file
166
pages/DailyNews/NewsList.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="news-list-wrap flex flex-col" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
<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="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">
|
||||
<ArticleTextListItem v-for="item in it.list" :key="item.id" :item="item" />
|
||||
</div>
|
||||
<div class="diver"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-middle-left">
|
||||
<Pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArticleTextListItem from "@/pages/DailyNews/components/ArticleTextListItem.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ArticleTextListItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
totalPages: 1,
|
||||
pageSize: 10,
|
||||
articleList: [],
|
||||
searchText: '',
|
||||
total: 0,
|
||||
fullscreenLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 模糊搜索
|
||||
async handleTextSearch() {
|
||||
await this.getArticleListData(this.currentPage, this.pageSize, this.searchText);
|
||||
},
|
||||
calculateTotalPages() {
|
||||
// 否则向上取整计算总页数
|
||||
this.totalPages = this.total === 0 ? 1 : Math.ceil(this.total / this.pageSize);
|
||||
},
|
||||
// 获取文章数据列表
|
||||
async getArticleListData(page = 1, limit = 10, searchText) {
|
||||
const params = {page, limit, title: searchText, articleType: 'news', sortField: 'publish_time', sortOrder: 'desc'};
|
||||
if (!searchText) {
|
||||
delete params.title;
|
||||
}
|
||||
this.fullscreenLoading = true;
|
||||
const {data: res} = await this.$api.article.getArticleList(params);
|
||||
const {code, data} = res;
|
||||
if (code === 0 && data.list) {
|
||||
this.total = data.total;
|
||||
this.articleList = data.list;
|
||||
this.calculateTotalPages();
|
||||
}
|
||||
this.fullscreenLoading = false;
|
||||
},
|
||||
handlePageChange(pageNumber) {
|
||||
this.currentPage = pageNumber;
|
||||
this.getArticleListData(pageNumber, 10);
|
||||
},
|
||||
// 添加日期格式化方法
|
||||
formatDate(date) {
|
||||
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const month = months[date.getMonth()];
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
return `${month} ${day} ${year}`;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 添加计算属性，将文章列表按日期分组
|
||||
groupedArticles() {
|
||||
if (!this.articleList || this.articleList.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 创建一个对象来存储按日期分组的文章
|
||||
const groups = {};
|
||||
|
||||
// 遍历文章列表，按日期分组
|
||||
this.articleList.forEach(article => {
|
||||
// 假设 publishTime 是时间戳或可被解析的时间字符串
|
||||
const date = new Date(article.publishTime);
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD 格式作为键
|
||||
const dateKey = date.toISOString().split('T')[0];
|
||||
|
||||
// 如果该日期还没有分组，则初始化
|
||||
if (!groups[dateKey]) {
|
||||
groups[dateKey] = {
|
||||
date: this.formatDate(date), // 格式化为 Sep 04 2025 这样的格式
|
||||
list: []
|
||||
};
|
||||
}
|
||||
|
||||
// 将文章添加到对应日期的分组中
|
||||
groups[dateKey].list.push(article);
|
||||
});
|
||||
|
||||
// 将分组对象转换为数组并按日期降序排列
|
||||
return Object.values(groups).sort((a, b) => {
|
||||
// 解析日期字符串进行比较
|
||||
const dateA = new Date(a.date);
|
||||
const dateB = new Date(b.date);
|
||||
return dateB - dateA;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getArticleListData(this.currentPage, this.pageSize);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
padding: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.news-list-wrap {
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
.input {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.daily-content {
|
||||
.date-title {
|
||||
gap: 8px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 40px;
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.diver {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-top-color: #f3f8fe;
|
||||
border-top-style: solid;
|
||||
border-top-width: 2px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
pages/DailyNews/components/ArticleCardItem.vue
Normal file
80
pages/DailyNews/components/ArticleCardItem.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('refresh', this.item);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.article-box {
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.preview-box {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
border-radius: 6px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 104px;
|
||||
flex: 1;
|
||||
.description {
|
||||
color: #1E293B;
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
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>
|
||||
94
pages/DailyNews/components/ArticleTextListItem.vue
Normal file
94
pages/DailyNews/components/ArticleTextListItem.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="article-item-box flex" @click="goToNewsDetail">
|
||||
<div class="dot-container">
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
{{ item.title || '' }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ item.summary || '' }}
|
||||
</div>
|
||||
<div class="source">
|
||||
Source: TechCrunch
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToNewsDetail() {
|
||||
if (this.item && this.item.slug) {
|
||||
this.articleClick(this.item.id);
|
||||
this.$router.push('/tools-detail?news_slug=' + this.item.slug + '&type=news')
|
||||
}
|
||||
},
|
||||
// 记录文章点击次数
|
||||
async articleClick(id) {
|
||||
if (id) {
|
||||
await this.$api.article.recordArticleClick(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.article-item-box {
|
||||
gap: 10px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dot-container {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
background: $header-backgroungd;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-weight: 600;
|
||||
color: #3A4A65;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
color: #64748B;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.source {
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
color: #C8CFD7;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
pages/DailyNews/components/NewsCardItem.vue
Normal file
110
pages/DailyNews/components/NewsCardItem.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="card card-content" @click="handleClick">
|
||||
<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">
|
||||
{{ item.summary || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="flex items-center" style="gap: 12px">
|
||||
<div class="circle"></div>
|
||||
<div class="text">{{ item.slug || '' }}</div>
|
||||
</div>
|
||||
<div class="flex items-center" style="gap: 8px">
|
||||
<img src="/ToolDetail/icon_thumb.png" alt="" style="width: 14px; height: 14px" />
|
||||
<div class="text">{{ item.likeCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('refresh', this.item);
|
||||
this.$api.article.recordArticleClick(this.id);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
padding: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.card-content {
|
||||
width: 256px;
|
||||
gap: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.preview {
|
||||
height: 100px;
|
||||
border-radius: 6px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.circle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #64748B;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #C8CFD7;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #3A4A65;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.description {
|
||||
color: #64748B;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
291
pages/DailyNews/index.vue
Normal file
291
pages/DailyNews/index.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div id="normal-container" class="daily-news-content" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
<IntegratedLayout>
|
||||
<div class="content">
|
||||
<div class="gradient-color gradient-title">AI Daily News</div>
|
||||
<div class="views-title">AI Daily News</div>
|
||||
<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="card preview-wrapper">
|
||||
<img :src="newConfig.imageUrl || ''" alt="" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<NewsList />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<!--轮播图-->
|
||||
<div class="card swiper-box">
|
||||
<el-carousel :autoplay="false" height="140px">
|
||||
<el-carousel-item v-for="(item, i) in banner" :key="i">
|
||||
<img :src="item.imageUrl || ''" alt="" style="height: 140px; width: 100%;" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<!--网站导航-->
|
||||
<div class="card pop-list">
|
||||
<div style="padding: 24px 4px">
|
||||
<PopularToolList />
|
||||
</div>
|
||||
</div>
|
||||
<!--文章列表-->
|
||||
<div class="card">
|
||||
<div style="padding: 24px 4px">
|
||||
<div class="clearfix">
|
||||
<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
|
||||
Latest Article
|
||||
</div>
|
||||
<div class="list-scroll">
|
||||
<div class="list">
|
||||
<ArticleCardItem v-for="it in latestNewsList" :key="it.id" :item="it" @refresh="goToRelatedNewsDetail" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</IntegratedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArticleCardItem from "@/pages/DailyNews/components/ArticleCardItem.vue";
|
||||
import NewsList from "@/pages/DailyNews/NewsList.vue";
|
||||
import PopularToolList from "@/pages/Home/components/PopularToolList.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NewsList,
|
||||
ArticleCardItem,
|
||||
PopularToolList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
latestNewsList: [],
|
||||
fullscreenLoading: false,
|
||||
newConfig: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
banner() {
|
||||
const bannerConfig = this.$store.getters.bannerConfig;
|
||||
if (bannerConfig.news && bannerConfig.news.length > 0) {
|
||||
return bannerConfig.news;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取最新文章列表
|
||||
async getLatestArticleListData() {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
excludeTypes: ['launches'],
|
||||
sortField: 'publish_time',
|
||||
sortOrder: 'desc',
|
||||
};
|
||||
const {data: res} = await this.$api.article.getArticleList(params);
|
||||
const {code, data} = res;
|
||||
if (code === 0 && data.list) {
|
||||
this.latestNewsList = data.list;
|
||||
}
|
||||
},
|
||||
// 侧边新闻重新跳转路由
|
||||
goToRelatedNewsDetail(item) {
|
||||
if (item.slug && item.articleType) {
|
||||
this.$router.push('/tools-detail?news_slug=' + item.slug + '&type=' + item.articleType)
|
||||
}
|
||||
},
|
||||
// 获取当前模块信息
|
||||
async getModuleConfig() {
|
||||
const {data: res} = await this.$api.config.getModuleConfigKey('module');
|
||||
const {data, code} = res;
|
||||
if (code === 0 && data.module && data.module.news) {
|
||||
this.newConfig = data.module.news.length > 0 ? data.module.news[0] : {};
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
this.fullscreenLoading = true;
|
||||
await this.$store.dispatch('getBannerConfig');
|
||||
await this.getModuleConfig();
|
||||
await this.getLatestArticleListData();
|
||||
this.fullscreenLoading = false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onLoad();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
padding: 16px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.daily-news-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
.content {
|
||||
padding-top: 87px;
|
||||
padding-bottom: 120px;
|
||||
.gradient-title {
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.views-title {
|
||||
font-family: 'Poppins-Bold', serif;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
margin-top: 78px;
|
||||
}
|
||||
.views-header {
|
||||
margin-top: 10px;
|
||||
.description {
|
||||
margin-right: 350px;
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
font-size: 18px;
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
gap: 20px;
|
||||
margin-top: 114px;
|
||||
.right-content {
|
||||
width: 372px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
.list-scroll {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 1350px;
|
||||
}
|
||||
.swiper-box {
|
||||
height: 174px;
|
||||
::v-deep .el-carousel {
|
||||
.el-carousel__arrow {
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.el-carousel__indicators {
|
||||
.el-carousel__indicator {
|
||||
height: 4px !important;
|
||||
width: 12px !important;
|
||||
border-radius: 2.66px !important;
|
||||
border: 0.66px solid #2563eb !important;
|
||||
background: transparent !important;
|
||||
margin: 0 3px 0 3px !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.el-carousel__button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: none !important;
|
||||
width: 20px !important;
|
||||
background: linear-gradient(0deg, #2563EB 22%, #7B61FF 73%) !important;
|
||||
}
|
||||
|
||||
// 重置其他可能的默认样式
|
||||
&:before,
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $larg-font-size;
|
||||
font-weight: bold;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
}
|
||||
.pop-list {
|
||||
.pop-item {
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.img-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E2E8F0;
|
||||
@include flex-center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
cursor: pointer;
|
||||
@include gradient-border($linear-gradient-start, $linear-gradient-end);
|
||||
box-shadow: 0 5px 7px 0 #00000014;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-name {
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-list {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.left-content {
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
.preview-wrapper {
|
||||
height: 320px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
.comment-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
color: #1E293B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 26px;
|
||||
background: $header-backgroungd;
|
||||
margin-right: 8px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user