后期修改完善,上线版本

This commit is contained in:
2025-11-12 18:11:11 +08:00
parent c54f9c9976
commit 8f57683dd5
98 changed files with 2110 additions and 867 deletions

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;