xuye929/AIProd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后期修改完善，上线版本

Browse Source
This commit is contained in:
qiuxiao
2025-11-12 18:11:11 +08:00
parent c54f9c9976
commit 8f57683dd5
98 changed files with 2110 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
pages/Launches/FinanceDetail/index.vue
View File

@ -2,45 +2,46 @@
<div id="normal-container">
<IntegratedLayout>
<div class="content">
<div class="title-text">{{ financeDetail.title || '' }}</div>
<div class="rate-box">
<Rate v-model="financeDetail.rating" readonly />
<div class="flex" style="gap: 20px">
<CommentBtn :comment-count="commentCount" />
</div>
<div class="bread-menu">
<span>AI Launches</span>
<i class="el-icon-arrow-right"></i>
<span class="crumbs gradient-color">{{newsDetail.title || ''}}</span>
</div>
<div class="terms-item">
<div class="item-title">
<img src="/ToolDetail/icon_note.png" alt="">
<span>Introduction: </span>
</div>
<div class="item-content">
<div style="padding-right: 70px">
{{ financeDetail.summary || '' }}
<div class="title-text">{{ newsDetail.title || '' }}</div>
<div class="flex mt-24">
<div>
<div class="terms-item">
<div class="item-title">
<img src="/ToolDetail/icon_star.png" alt="">
<span>Score: </span>
<div class="score color-01">{{ (newsDetail.rating || 0).toFixed(1) }}</div>
</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">
{{ newsDetail.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">{{ formatPublishTime(newsDetail.publishTime || '') }}</div>
</div>
</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">{{ financeDetail.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">{{ financeDetail.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="title">Special Financing</div>
<div class="card content-box">
<SpecialFinanceItem />
<div class="card content-box" v-if="newsDetail.extra && Array.isArray(newsDetail.extra.financing)">
<SpecialFinanceItem v-for="(it, i) in newsDetail.extra.financing" :key="i" :item="it" />
</div>
</div>
</IntegratedLayout>
@ -50,12 +51,15 @@
<script>
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
import SpecialFinanceItem from "@/pages/Launches/FinanceDetail/SpecialFinanceItem.vue";
import ThumbBtn from "@/pages/ToolDetail/components/ThumbBtn.vue";
export default {
components: {CommentBtn, SpecialFinanceItem},
components: {ThumbBtn, CommentBtn, SpecialFinanceItem},
data() {
return {
commentCount: 0,
news_slug: '',
newsDetail: {},
financeDetail: {
title: 'The Timeline Of Sketch',
rating: 1,
@ -63,22 +67,88 @@ export default {
publishTime: 'Sep 03 2025',
likeCount: 100,
},
tagList: [
'Sketch',
'Athens',
'Offline Maps',
'AR',
'Navigation',
'Scenic Spots',
'Exploration',
],
}
},
methods: {},
methods: {
formatPublishTime(timeString) {
if (!timeString) return '';
const date = new Date(timeString);
const months = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
const month = months[date.getMonth()];
const day = String(date.getDate()).padStart(2, '0');
const year = date.getFullYear();
return `${month} ${day} ${year}`;
},
stringJsonToObject(str) {
// 将json字符串转为对象，捕获错误，当str为空或者转对象失败时默认返回空数组
try {
return JSON.parse(str);
} catch (e) {
console.error('Error parsing JSON string:', e);
return [];
}
},
// 获取新闻详情
async getNewsDetail(newsSlug) {
const {data: res} = await this.$api.article.getArticleDetail(newsSlug);
const {code, data} = res;
if (code === 0 && data) {
this.newsDetail = {...data, extra: this.stringJsonToObject(data.extra || '[]')};
// 处理socialLinks
if (this.newsDetail.extra && Array.isArray(this.newsDetail.extra.socialLinks)) {
const socialLinks = this.newsDetail.extra.socialLinks;
// 查找Website选项的索引
const websiteIndex = socialLinks.findIndex(item => item && item.key === 'Website');
// 如果找到Website选项且不在第一个位置，则移到第一个位置
if (websiteIndex !== -1 && websiteIndex !== 0) {
const websiteItem = socialLinks.splice(websiteIndex, 1)[0];
socialLinks.unshift(websiteItem);
}
}
}
}
},
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.newsDetail.tags) {
return [];
}
return this.stringJsonToObject(this.newsDetail.tags || '[]');
}
},
}
</script>
<style scoped lang="scss">
.mt-24 {
margin-top: 24px;
}
.color-01 {
color: #7B61FF;
}
.card {
padding: 50px 30px;
background-color: #FFFFFF;
@ -89,7 +159,7 @@ export default {
margin-bottom: 20px;
font-size: 30px;
color: #1E293B;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
&::before {
content: '';
@ -102,9 +172,20 @@ export default {
}
}
.content {
padding-top: 180px;
padding-top: 25px;
padding-bottom: 100px;
.bread-menu {
font-size: $mid-font-size;
font-family: 'Poppins-Medium';
margin-bottom: 25px;
.crumbs {
font-family: 'Poppins-SemiBold';
font-weight: 600;
}
}
.content-box {
padding: 50px 30px;
}
@ -118,9 +199,8 @@ export default {
.title-text {
font-size: 34px;
color: #1E293B;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
margin-top: 80px;
}
.rate-box {
@ -147,7 +227,7 @@ export default {
align-items: center;
gap: 8px;
color: #1E293B;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
img {
width: 24px;
@ -156,7 +236,7 @@ export default {
}
.item-content {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
}
}
@ -172,7 +252,7 @@ export default {
width: 80%;
.tag-item {
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
flex-shrink: 0;
padding: 4px 12px;
border-radius: 12px;