380 lines
9.3 KiB
Vue
380 lines
9.3 KiB
Vue
<template>
|
||
<div id="normal-container">
|
||
<IntegratedLayout>
|
||
<div class="content">
|
||
<div class="title-text">{{ news_detail.title || '' }}</div>
|
||
<div class="rate-box">
|
||
<Rate v-model="news_detail.rating" readonly />
|
||
<div class="flex" style="gap: 20px">
|
||
<CommentBtn :comment-count="commentCount" />
|
||
</div>
|
||
</div>
|
||
<div class="terms-item">
|
||
<div class="item-title">
|
||
<img src="/ToolDetail/icon_note.png" alt="">
|
||
<span>Introduction: </span>
|
||
</div>
|
||
<div class="item-content">
|
||
{{ news_detail.summary || '' }}
|
||
</div>
|
||
</div>
|
||
<div class="terms-item">
|
||
<div class="item-title">
|
||
<img src="/ToolDetail/icon_clock.png" alt="">
|
||
<span>Data update: </span>
|
||
</div>
|
||
<div class="item-content">{{ news_detail.publishTime || '' }}</div>
|
||
</div>
|
||
<div class="terms-item">
|
||
<div class="item-title">
|
||
<img src="/ToolDetail/like_icon.png" alt="">
|
||
<span>Like: </span>
|
||
</div>
|
||
<div class="item-content">{{ news_detail.likeCount || 0 }}</div>
|
||
</div>
|
||
<div class="tags">
|
||
<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it }}</div>
|
||
</div>
|
||
<div class="diver"></div>
|
||
<div class="container flex">
|
||
<div class="left-content flex-1 flex flex-col">
|
||
<!--<div class="sketch flex justify-between">-->
|
||
<!-- <div class="flex items-center" style="gap: 8px">-->
|
||
<!-- <img style="width: 18px; height: 18px" src="/launches/detail/icon_fly.png" alt="" />-->
|
||
<!-- <div class="text">This is the <span style="color: #7B61FF">6</span> release of Sketch</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="flex items-center more">-->
|
||
<!-- <div>View more</div>-->
|
||
<!-- <img src="/launches/detail/icon_arrow.png" alt="" />-->
|
||
<!-- </div>-->
|
||
<!--</div>-->
|
||
<div class="card flex-1">
|
||
<div class="article-content">
|
||
<div v-html="news_detail.content || ''"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-content">
|
||
<div class="card">
|
||
<div class="flex items-center" style="margin-top: 20px">
|
||
<img alt="" src="/launches/detail/icon_hourse.png" class="icon" />
|
||
<div class="content-title">Company Information</div>
|
||
</div>
|
||
<div class="diver-line"></div>
|
||
<ProjectItem :item="{name: 'Sketch.com', iconUrl: '/launches/web/sketch.png'}" />
|
||
<ProjectItem :item="{name: 'Github.com', iconUrl: '/launches/web/github.png'}" />
|
||
<ProjectItem :item="{name: 'Facebook.com', iconUrl: '/launches/web/facebook.png'}" />
|
||
<ProjectItem :item="{name: 'Instagram.com', iconUrl: '/launches/web/instagram.png'}" />
|
||
<ProjectItem :item="{name: 'Twitter.com', iconUrl: '/launches/web/twitter.png'}" />
|
||
<div class="more flex items-center justify-between" style="margin-top: 20px">
|
||
<div>A total of 8 projects were released</div>
|
||
<img src="/launches/detail/icon_arrow.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="card" style="margin-top: 20px">
|
||
<div class="flex items-center" style="margin-top: 20px">
|
||
<img alt="" src="/launches/detail/icon_finance.png" class="icon" />
|
||
<div class="content-title">Special Financing</div>
|
||
</div>
|
||
<div class="diver-line"></div>
|
||
<FinanceItem />
|
||
<FinanceItem />
|
||
<FinanceItem />
|
||
<div class="flex justify-end" style="margin-top: 30px">
|
||
<div class="more flex items-center justify-between" style="gap: 14px">
|
||
<div>View more</div>
|
||
<img src="/launches/detail/icon_arrow.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="related">
|
||
<div class="related-title flex justify-between items-center">
|
||
<div class="title">Related Products</div>
|
||
<div @click="goToViewMore" class="more pointer">
|
||
View more<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex-between-center list">
|
||
<RelatedTool :item="{
|
||
title: 'Figma',
|
||
summary: 'Easily create highly interactive prototypes',
|
||
likeCount: 123,
|
||
rating: 4.5
|
||
}" />
|
||
<RelatedTool :item="{
|
||
title: 'Figma',
|
||
summary: 'Easily create highly interactive prototypes',
|
||
likeCount: 123,
|
||
rating: 4.5
|
||
}" />
|
||
<RelatedTool :item="{
|
||
title: 'Figma',
|
||
summary: 'Easily create highly interactive prototypes',
|
||
likeCount: 123,
|
||
rating: 4.5
|
||
}" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Comment comment-type="article" :id="news_detail.id" @update:commentCount="handleCommentCountUpdate" />
|
||
</div>
|
||
</IntegratedLayout>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
|
||
import Comment from "@/pages/ToolDetail/Comment/index.vue";
|
||
import RelatedTool from "@/pages/Launches/Detail/RelatedTool.vue";
|
||
import ProjectItem from "@/pages/Launches/Detail/ProjectItem.vue";
|
||
import FinanceItem from "@/pages/Launches/Detail/FinanceItem.vue";
|
||
|
||
export default {
|
||
components: {FinanceItem, ProjectItem, RelatedTool, CommentBtn, Comment},
|
||
data() {
|
||
return {
|
||
news_detail: {},
|
||
commentCount: 0,
|
||
news_slug: '',
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取新闻详情
|
||
async getNewsDetail(newsSlug) {
|
||
const {data: res} = await this.$api.article.getArticleDetail(newsSlug);
|
||
const {code, data} = res;
|
||
if (code === 0 && data) {
|
||
this.news_detail = {...data};
|
||
}
|
||
},
|
||
stringJsonToObject(str) {
|
||
// 将json字符串转为对象，捕获错误，当str为空或者转对象失败时默认返回空数组
|
||
try {
|
||
return JSON.parse(str);
|
||
} catch (e) {
|
||
console.error('Error parsing JSON string:', e);
|
||
return [];
|
||
}
|
||
},
|
||
goToViewMore() {
|
||
// 返回上一页
|
||
this.$router.go(-1);
|
||
},
|
||
handleCommentCountUpdate(count) {
|
||
this.commentCount = count;
|
||
},
|
||
},
|
||
watch: {
|
||
'$route'(to, from) {
|
||
// 当路由参数发生变化时重新加载数据
|
||
if (to.query.news_slug !== from.query.news_slug) {
|
||
this.news_slug = to.query.news_slug;
|
||
if (this.news_slug) {
|
||
this.getNewsDetail(this.news_slug);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.news_slug = this.$route.query.news_slug;
|
||
if (this.news_slug) {
|
||
this.getNewsDetail(this.news_slug);
|
||
}
|
||
},
|
||
computed: {
|
||
tagList() {
|
||
if (!this.news_detail.tags) {
|
||
return [];
|
||
}
|
||
return this.stringJsonToObject(this.news_detail.tags || '[]');
|
||
}
|
||
},
|
||
}
|
||
</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);
|
||
}
|
||
.content {
|
||
padding-top: 100px;
|
||
padding-bottom: 100px;
|
||
|
||
.diver {
|
||
margin-top: 20px;
|
||
border-top: 4px solid #E2E8F0;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 34px;
|
||
color: #1E293B;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
font-weight: 600;
|
||
margin-top: 80px;
|
||
}
|
||
|
||
.rate-box {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.btn-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
.terms-item {
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 7px;
|
||
|
||
.item-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #1E293B;
|
||
font-family: 'Poppins-Medium', serif;
|
||
|
||
img {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
font-family: 'Poppins-Regular', serif;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
gap: 12px;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
user-select: none;
|
||
flex-wrap: wrap;
|
||
width: 80%;
|
||
|
||
.tag-item {
|
||
font-family: 'Poppins-Medium', serif;
|
||
flex-shrink: 0;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
@include gradient-border($linear-gradient-start, $linear-gradient-end);
|
||
}
|
||
}
|
||
|
||
.container {
|
||
gap: 20px;
|
||
|
||
.right-content {
|
||
width: 372px;
|
||
|
||
.diver-line {
|
||
margin-top: 20px;
|
||
border-top: 2px solid #E2E8F0;
|
||
}
|
||
|
||
.content-title {
|
||
margin-left: 6px;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
font-size: 24px;
|
||
color: #1E293B;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.more {
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
padding: 8px 15px;
|
||
border: 1px solid #e2e8f0;
|
||
font-family: 'Poppins-Regular', serif;
|
||
color: #64748B;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-content {
|
||
.sketch {
|
||
padding: 22px;
|
||
background-color: #F5F4FF;
|
||
border-radius: 12px;
|
||
.text {
|
||
font-family: 'Poppins-Regular', serif;
|
||
color: #64748B;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.more {
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
padding: 8px 15px;
|
||
border: 1px solid #e2e8f0;
|
||
font-family: 'Poppins-Regular', serif;
|
||
color: #64748B;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.related {
|
||
margin-top: 60px;
|
||
.related-title {
|
||
.title {
|
||
margin-bottom: 20px;
|
||
font-size: 30px;
|
||
color: #1E293B;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
font-weight: 600;
|
||
&::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 26px;
|
||
background: $header-backgroungd;
|
||
margin-right: 8px;
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
}
|
||
.more {
|
||
display: block;
|
||
text-align: right;
|
||
color: $grey-color;
|
||
font-size: $mid-font-size;
|
||
font-family: 'Poppins-Regular', serif;
|
||
}
|
||
}
|
||
.list {
|
||
gap: 60px;
|
||
margin: 40px 10px 40px 10px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|