后期修改完善,上线版本
This commit is contained in:
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user