273 lines
6.4 KiB
Vue
273 lines
6.4 KiB
Vue
<template>
|
||
<div class="product-content">
|
||
<h1 class="product-title">Product information</h1>
|
||
<div class="content-card article-content">
|
||
<div v-html="tool_content || ''"></div>
|
||
</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>
|
||
<span>Special Announcement</span>
|
||
<div style="width: 130px; height: 2px; border-top: 2px solid #1e293b"></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>
|
||
<!--其他相似导航-->
|
||
<div v-if="otherTools.length" class="similar-nav-box">
|
||
<!--表头-->
|
||
<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" />
|
||
<span class="similar-nav-title">Similar Tools</span>
|
||
</div>
|
||
<NuxtLink :to="'/home/more?category_slug=' + categorySlug" 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>
|
||
</div>
|
||
<!--滚动预览图-->
|
||
<div class="tools-preview-box">
|
||
<el-carousel autoplay height="300px">
|
||
<el-carousel-item v-for="(item, i) in banner" :key="i">
|
||
<img :src="item.imageUrl || ''" alt="" style="height: 300px; width: 100%; border-radius: 12px" />
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SimilarToolCard from "@/pages/ToolDetail/components/SimilarToolCard.vue";
|
||
|
||
export default {
|
||
components: {
|
||
SimilarToolCard
|
||
},
|
||
props: {
|
||
otherTools: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
toolId: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
toolSlug: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
categorySlug: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
tool_content: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {},
|
||
computed: {
|
||
filteredOtherTools() {
|
||
// 检查传入的列表中是否有id等于toolId的项
|
||
const toolIndex = this.otherTools.findIndex(tool => tool.id === this.toolId);
|
||
if (toolIndex !== -1) {
|
||
// 如果有，则返回去掉该id的列表
|
||
return this.otherTools.filter((tool, index) => index !== toolIndex);
|
||
} else {
|
||
// 如果没有，则截取传入列表的前八个选项
|
||
return this.otherTools.slice(0, 8);
|
||
}
|
||
},
|
||
banner() {
|
||
const bannerConfig = this.$store.getters.bannerConfig;
|
||
if (bannerConfig.tools && bannerConfig.tools.length > 0) {
|
||
return bannerConfig.tools;
|
||
}
|
||
return [];
|
||
},
|
||
// 查看更多
|
||
goToViewMore() {
|
||
if (this.categorySlug) {
|
||
this.$router.push('/home/more?category_slug=' + this.categorySlug)
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$store.dispatch('getBannerConfig');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.product-content {
|
||
padding-top: 50px;
|
||
.product-title {
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
margin-bottom: 30px;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
color: #1E293B;
|
||
display: flex;
|
||
align-items: center;
|
||
&::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 26px;
|
||
background: $header-backgroungd;
|
||
margin-right: 8px;
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
}
|
||
.content-card {
|
||
background-color: #fff;
|
||
padding: 60px 30px;
|
||
box-shadow: 0 10px 30px 0 #0000000d;
|
||
.content-title {
|
||
color: #1E293B;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
&::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: $header-backgroungd;
|
||
margin-right: 13px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.diver {
|
||
height: 1px;
|
||
border-top: 2px solid #f3f8fe;
|
||
margin-bottom: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
.content-text {
|
||
font-family: 'Poppins-Regular', serif;
|
||
color: #64748B;
|
||
}
|
||
.content-text-semi-bold {
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
font-weight: 600;
|
||
color: #64748B;
|
||
}
|
||
.content-text-url {
|
||
font-family: 'Poppins-Regular', serif;
|
||
color: #7B61FF;
|
||
}
|
||
}
|
||
.law-text-box {
|
||
background-color: #FFF8F1;
|
||
padding: 50px;
|
||
margin-top: 60px;
|
||
|
||
.law-title {
|
||
font-size: 24px;
|
||
color: #1E293B;
|
||
font-weight: 600;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
text-align: center;
|
||
margin-bottom: 22px;
|
||
gap: 22px;
|
||
}
|
||
|
||
.law-text {
|
||
font-family: 'Poppins-Regular', serif;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
.similar-nav-box {
|
||
margin-top: 60px;
|
||
|
||
.similar-nav-title-box {
|
||
padding: 10px 16px;
|
||
border-radius: 12px;
|
||
background: $header-backgroungd;
|
||
gap: 8px;
|
||
|
||
.similar-nav-title {
|
||
color: #fff;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
display: block;
|
||
text-align: right;
|
||
color: $grey-color;
|
||
font-size: $mid-font-size;
|
||
font-family: 'Poppins-Regular', serif;
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.similar-nav-list {
|
||
display: grid;
|
||
//grid-auto-rows: 1fr;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
margin-top: 30px;
|
||
}
|
||
}
|
||
.tools-preview-box {
|
||
background-color: #ffffff4d;
|
||
border-radius: 16px;
|
||
box-shadow: 0 18px 33px 0 #0000000d;
|
||
padding: 35px 20px;
|
||
margin-top: 60px;
|
||
|
||
::v-deep .el-carousel {
|
||
.el-carousel__arrow {
|
||
opacity: 0 !important;
|
||
transition: none !important;
|
||
}
|
||
.el-carousel__indicators {
|
||
.el-carousel__indicator {
|
||
height: 4px !important;
|
||
width: 12px !important;
|
||
border-radius: 2.66px !important;
|
||
border: 0.66px solid #2563eb !important;
|
||
background: transparent !important;
|
||
margin: 0 3px 0 3px !important;
|
||
padding: 0 !important;
|
||
|
||
.el-carousel__button {
|
||
background-color: transparent;
|
||
}
|
||
|
||
&.is-active {
|
||
border: none !important;
|
||
width: 20px !important;
|
||
background: linear-gradient(0deg, #2563EB 22%, #7B61FF 73%) !important;
|
||
}
|
||
|
||
// 重置其他可能的默认样式
|
||
&:before,
|
||
&:after {
|
||
display: none !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|