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

101
pages/AIHub/AIToolsDetail.vue
View File

@ -2,19 +2,24 @@
<div id="normal-container" v-loading.fullscreen.lock="fullscreenLoading">
<IntegratedLayout>
<div class="content">
<div class="bread-menu">
<span>{{ type ? titleKey[type] : '' }}</span>
<i class="el-icon-arrow-right"></i>
<span class="crumbs gradient-color">{{newsDetail.title || ''}}</span>
</div>
<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">
<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 :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 pad-7 gap-8">
<img src="/ToolDetail/icon_clock1.png" alt="" class="img-16" />
<div class="date-text">
{{ formatDate(newsDetail.publishTime) }}
</div>
</div>
@ -23,7 +28,7 @@
<div class="container flex justify-between">
<div class="left-content flex flex-col">
<div class="card preview-wrapper">
<img src="/" alt="" style="width: 100%; height: 100%" />
<img :src="newsDetail.coverImage || ''" alt="" class="wh-100" />
</div>
<div class="flex-1">
<NewsDetail :article="newsDetail" />
@ -34,21 +39,21 @@
<div class="card swiper-box">
<el-carousel :autoplay="false" height="140px">
<el-carousel-item v-for="(item, i) in banner" :key="i">
<img :src="item.imageUrl || ''" alt="" style="height: 140px; width: 100%;" />
<img :src="item.imageUrl || ''" alt="" class="swiper-img" />
</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" alt=""/>
Latest Article
</div>
<div class="list-scroll">
@ -60,9 +65,9 @@
</div>
</div>
</div>
<div style="margin-top: 44px">
<div class="mt-44">
<div class="comment-title">Related news</div>
<div class="flex" style="gap: 20px">
<div class="flex gap-20 justify-between">
<NewsCardItem v-for="it in relatedNewsList" :key="it.id" :item="it" @refresh="goToToolDetail" />
</div>
</div>
@ -99,6 +104,14 @@ export default {
type: '',
commentCount: 0,
fullscreenLoading: false,
titleKey: {
tool: 'AI Tools',
framework: 'Frameworks',
news: 'AI Days News',
observer: 'AI Observer',
analysis: 'In-depth Analysis',
pioneer: 'Pioneer In The Field',
},
}
},
methods: {
@ -173,7 +186,7 @@ export default {
if (this.news_slug && this.type) {
await this.$store.dispatch('getBannerConfig');
await this.getNewsDetail(this.news_slug);
await this.getArticleListData(1, 4, this.type);
await this.getArticleListData(1, 6, this.type);
await this.getLatestArticleListData();
}
this.fullscreenLoading = false;
@ -211,34 +224,73 @@ export default {
</script>
<style scoped lang="scss">
.gap-16 {
gap: 16px;
}
.gap-20 {
gap: 20px;
}
.pad-24 {
padding: 24px 4px;
}
.date-text {
font-size: 14px; color: #869EC2; font-family: 'Poppins-Regular'; line-height: 18px; white-space: nowrap;
}
.swiper-img {
height: 140px; width: 100%;
}
.img-16 {
height: 16px;
width: 16px;
}
.pad-7 {
padding: 0 7px;
}
.card {
padding: 16px;
background-color: #FFFFFF;
border-radius: 12px;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}
.mt-44 {
margin-top: 44px;
}
.content {
padding-top: 192px;
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;
}
}
.views-title {
font-family: 'Poppins-Bold', serif;
font-family: 'Poppins-Bold';
font-size: 40px;
font-weight: 700;
margin-top: 78px;
}
.views-header {
margin-top: 10px;
.description {
margin-right: 350px;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
font-size: 18px;
color: #64748B;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
.container {
gap: 20px;
margin-top: 114px;
margin-bottom: 40px;
margin-top: 30px;
margin-bottom: 30px;
.right-content {
width: 372px;
display: flex;
@ -291,7 +343,10 @@ export default {
margin-bottom: 20px;
font-size: $larg-font-size;
font-weight: bold;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
img {
margin-right: 6px;
}
}
.pop-list {
.pop-item {
@ -324,7 +379,7 @@ export default {
}
.tool-name {
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
color: #64748B;
}
}
@ -344,7 +399,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;
@ -364,7 +419,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;