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

70
pages/ToolDetail/Product/index.vue
View File

@ -6,9 +6,9 @@
</div>
<div class="law-text-box">
<div class="law-title flex items-center justify-center">
<div style="width: 130px; height: 2px; border-top: 2px solid #1e293b"></div>
<div class="diver"></div>
<span>Special Announcement</span>
<div style="width: 130px; height: 2px; border-top: 2px solid #1e293b"></div>
<div class="diver"></div>
</div>
<p class="law-text">Without the explicit written permission of this platform, no unit or individual may copy, reprint, quote, modify, disseminate or use all or part of the content of this website in any way. It is strictly prohibited to establish a mirror image or conduct illegal collection on any unofficially authorized server. For any infringement, this platform will hold the offender legally responsible in accordance with the law.</p>
</div>
@ -17,23 +17,25 @@
<!--表头-->
<div class="flex-between-center">
<div class="flex-center similar-nav-title-box">
<img src="/ToolDetail/icon_pack.png" alt="" style="width: 24px; height: 24px" />
<img src="/ToolDetail/icon_pack.png" alt="" />
<span class="similar-nav-title">Similar Tools</span>
</div>
<NuxtLink :to="'/home/more?category_slug=' + categorySlug" class="more pointer">
<NuxtLink :to="'/home/more?category_slug=' + categorySlug + '&tag_name=' + categoryName" class="more pointer">
View more<i class="el-icon-arrow-right"></i>
</NuxtLink>
</div>
<!--列表-->
<div class="similar-nav-list">
<SimilarToolCard v-for="it in filteredOtherTools" :key="it.id" :config="it" />
<div class="item" v-for="it in filteredOtherTools" :key="it.id">
<SimilarToolCard :config="it" />
</div>
</div>
</div>
<!--滚动预览图-->
<div class="tools-preview-box">
<el-carousel autoplay height="300px">
<el-carousel autoplay>
<el-carousel-item v-for="(item, i) in banner" :key="i">
<img :src="item.imageUrl || ''" alt="" style="height: 300px; width: 100%; border-radius: 12px" />
<img :src="item.imageUrl || ''" alt="" class="img" />
</el-carousel-item>
</el-carousel>
</div>
@ -68,6 +70,10 @@ export default {
type: String,
default: "",
},
categoryName: {
type: String,
default: "",
}
},
data() {
return {}
@ -97,7 +103,7 @@ export default {
if (this.categorySlug) {
this.$router.push('/home/more?category_slug=' + this.categorySlug)
}
}
},
},
mounted() {
this.$store.dispatch('getBannerConfig');
@ -106,13 +112,16 @@ export default {
</script>
<style scoped lang="scss">
.img {
height: 100%; width: 100%; border-radius: 12px;
}
.product-content {
padding-top: 50px;
//padding-top: 40px;
.product-title {
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;
@ -134,7 +143,7 @@ export default {
color: #1E293B;
font-size: 24px;
font-weight: 600;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
display: flex;
align-items: center;
margin-bottom: 12px;
@ -155,41 +164,45 @@ export default {
margin-top: 20px;
}
.content-text {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
}
.content-text-semi-bold {
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
color: #64748B;
}
.content-text-url {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #7B61FF;
}
}
.law-text-box {
background-color: #FFF8F1;
padding: 50px;
margin-top: 60px;
margin-top: 40px;
.law-title {
font-size: 24px;
color: #1E293B;
font-weight: 600;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
text-align: center;
margin-bottom: 22px;
gap: 22px;
.diver {
width: 130px; height: 2px; border-top: 2px solid #1e293b
}
}
.law-text {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
}
}
.similar-nav-box {
margin-top: 60px;
margin-top: 40px;
.similar-nav-title-box {
padding: 10px 16px;
@ -197,11 +210,16 @@ export default {
background: $header-backgroungd;
gap: 8px;
img {
width: 24px;
height: 24px;
}
.similar-nav-title {
color: #fff;
font-size: 24px;
font-weight: 600;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
line-height: 24px;
}
}
@ -211,7 +229,7 @@ export default {
text-align: right;
color: $grey-color;
font-size: $mid-font-size;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
&:active {
opacity: 0.8;
@ -220,11 +238,16 @@ export default {
.similar-nav-list {
display: grid;
//grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
justify-content: space-between;
gap: 20px;
margin-top: 30px;
.item {
min-height: 110px;
width: 100%;
overflow: hidden;
}
}
}
.tools-preview-box {
@ -232,9 +255,12 @@ export default {
border-radius: 16px;
box-shadow: 0 18px 33px 0 #0000000d;
padding: 35px 20px;
margin-top: 60px;
margin-top: 40px;
::v-deep .el-carousel {
.el-carousel__container {
height: 300px;
}
.el-carousel__arrow {
opacity: 0 !important;
transition: none !important;