341 lines
8.5 KiB
Vue
341 lines
8.5 KiB
Vue
<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>
|