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

41
pages/ToolDetail/Comment/index.vue
View File

@ -6,17 +6,17 @@
</div>
<!--写评论-->
<div class="write-comment-box card">
<div class="flex-between-center" style="margin-bottom: 30px">
<div class="flex-between-center mb-30">
<div class="flex-1">
<h2 class="content-title">Would you recommend Skywork?</h2>
<div class="rate-box flex-between-center">
<div class="flex items-center">
<Rate v-model="rate" />
<span style="margin-left: 30px; display: block">Full score: 5 points</span>
<span class="little-text">Full score: 5 points</span>
</div>
<div class="flex items-center" style="gap: 16px" v-if="alarmText">
<img src="/logo/icon_alarm.png" alt="" style="width: 16px; height: 16px;" />
<p style="color: #CD0E4AFF">{{ alarmText }}</p>
<div class="flex items-center gap-16" v-if="alarmText">
<img src="/logo/icon_alarm.png" alt="" />
<p class="color-01">{{ alarmText }}</p>
</div>
</div>
</div>
@ -225,6 +225,15 @@ export default {
</script>
<style scoped lang="scss">
.mb-30 {
margin-bottom: 30px;
}
.gap-16 {
gap: 16px;
}
.color-01 {
color: #CD0E4AFF;
}
.card {
background-color: #fff;
border-radius: 12px;
@ -232,12 +241,12 @@ export default {
box-shadow: 0 10px 30px 0 #0000000d;
}
.comment-content {
padding-top: 50px;
padding-top: 40px;
.comment-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;
@ -254,8 +263,16 @@ export default {
.write-comment-box {
.rate-box {
margin-top: 14px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #E2E8F0;
.little-text {
margin-left: 30px;
display: block;
}
img {
width: 16px;
height: 16px;
}
}
::v-deep .el-textarea {
.el-textarea__inner {
@ -287,7 +304,7 @@ export default {
margin-top: 30px;
color: #fff;
font-size: 18px;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
width: fit-content;
margin-left: auto;
cursor: pointer;
@ -324,7 +341,7 @@ export default {
}
.little-text {
font-size: 14px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
vertical-align: middle;
margin-left: 8px;
@ -332,7 +349,7 @@ export default {
.content-title {
font-size: 24px;
font-weight: 600;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
color: #1E293B;
line-height: 24px;
margin: 0;
@ -342,6 +359,6 @@ export default {
text-align: right;
color: $grey-color;
font-size: $mid-font-size;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
}
</style>

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;

8
pages/ToolDetail/components/CommentBtn.vue
View File

@ -17,14 +17,14 @@ export default {
getImageSrc() {
// 如果已经点赞，显示选中的图片
if (this.isActive) {
return '/ToolDetail/icon_comment_selected.png';
return require('/static/ToolDetail/icon_comment_selected.png');
}
// 如果鼠标悬停或点击，显示高亮的图片
if (this.isHovered) {
return '/ToolDetail/icon_comment_selected.png';
return require('/static/ToolDetail/icon_comment_selected.png');
}
// 默认显示普通图片
return '/ToolDetail/icon_comment.png';
return require('/static/ToolDetail/icon_comment.png');
}
},
methods: {
@ -62,7 +62,7 @@ export default {
box-shadow: 0 4px 6px 0 #0000000d;
background: #fff;
padding: 5px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
font-size: 12px;
cursor: pointer;
img {

17
pages/ToolDetail/components/CommentItem.vue
View File

@ -8,8 +8,8 @@
{{item.username || ''}}
</div>
<div class="date-wrap flex-top-left">
<img src="/ToolDetail/icon_clock1.png" alt="" style="width: 16px; height: 16px;" />
<span style="line-height: 18px">{{ item.createdAt || '' }}</span>
<img src="/ToolDetail/icon_clock1.png" alt="" />
<span class="line-h-18">{{ item.createdAt || '' }}</span>
</div>
<p class="comment-text">
{{ item.content || '' }}
@ -38,6 +38,9 @@ export default {
</script>
<style scoped lang="scss">
.line-h-18 {
line-height: 18px;
}
.comment-item-box {
gap: 15px;
padding: 30px 0;
@ -54,22 +57,26 @@ export default {
.comment-author {
font-size: 18px;
font-weight: 600;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
color: #1E293B;
line-height: 27px;
height: 27px;
}
.date-wrap {
gap: 8px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
font-size: 14px;
color: #869EC2;
margin-top: 3px;
img {
width: 16px;
height: 16px;
}
}
.comment-text {
margin-bottom: 0;
margin-top: 13px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
}
}

41
pages/ToolDetail/components/SimilarToolCard.vue
View File

@ -15,8 +15,8 @@ export default {
},
methods: {
goToToolDetail() {
if (this.config.slug && this.category_slug) {
this.$router.push('/detail?tool_slug=' + this.config.slug + '&category_slug=' + this.category_slug);
if (this.config.slug && this.config.categoryName && this.category_slug) {
this.$router.push('/detail?tool_slug=' + this.config.slug + '&category_slug=' + this.category_slug + '&category_name=' + this.config.categoryName);
}
}
},
@ -37,12 +37,12 @@ export default {
<div class="icon">
<img :src="config.iconUrl || '/'" alt="" />
</div>
<span style="font-size: 18px">
{{ config.name || '' }}
</span>
<span class="title-text">
{{ config.name || '' }}
</span>
</div>
<div class="text">
{{ config.memo || '' }}
{{ config.memo ? config.memo : '' }}
</div>
</div>
</template>
@ -50,12 +50,12 @@ export default {
<style scoped lang="scss">
.similar-card-container {
background: #FFFFFF;
box-shadow: 0 10px 30px 0 #0000000d;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
padding: 16px 16px 10px;
border: 1px solid #BACFFF;
max-width: 305px;
cursor: pointer;
padding: 16px;
border: 1px solid #E2E8F0;
height: 100%;
box-sizing: border-box;
&:hover {
@include gradient-border($linear-gradient-start, $linear-gradient-end);
@ -68,6 +68,14 @@ export default {
.title {
display: flex;
align-items: center;
gap: 10px;
.title-text {
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
width: 40px;
@ -86,20 +94,23 @@ export default {
color: $main-font-color;
font-size: $big-font-size;
font-weight: 600;
font-family: 'Poppins-SemiBold', serif;
white-space: nowrap;
font-family: 'Poppins-SemiBold';
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.text {
color: $grey-color;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
</style>

8
pages/ToolDetail/components/ThumbBtn.vue
View File

@ -26,14 +26,14 @@ export default {
getImageSrc() {
// 如果已经点赞，显示选中的图片
if (this.isActive) {
return '/ToolDetail/icon_thumb_selected.png';
return require('/static/ToolDetail/icon_thumb_selected.png');
}
// 如果鼠标悬停或点击，显示高亮的图片
if (this.isHovered) {
return '/ToolDetail/icon_thumb_selected.png';
return require('/static/ToolDetail/icon_thumb_selected.png');
}
// 默认显示普通图片
return '/ToolDetail/icon_thumb.png';
return require('/static/ToolDetail/icon_thumb.png');
}
},
methods: {
@ -107,7 +107,7 @@ export default {
box-shadow: 0 4px 6px 0 #0000000d;
background: #fff;
padding: 5px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
font-size: 12px;
cursor: pointer;
img {

129
pages/ToolDetail/index.vue
View File

@ -12,22 +12,18 @@
</div>
<!--标题-->
<p class="title-text">{{ tool_detail.name || '' }}</p>
<!--评分-->
<div class="rate-box">
<Rate v-model="tool_detail.rating" readonly />
<div class="flex" style="gap: 20px">
<ThumbBtn
:like-count="tool_detail.likeCount || 0"
:id="tool_detail.id"
type="tool"
@like-success="refreshToolDetail"
/>
<CommentBtn :comment-count="commentCount" />
</div>
</div>
<!--工具内容-->
<div class="tool-content">
<div class="left-content flex flex-col">
<div class="terms-item">
<div class="item-title">
<img src="/ToolDetail/icon_star.png" alt="">
<span>Score: </span>
</div>
<div class="item-content color-01">
{{ (tool_detail.rating || 0).toFixed(1) }}
</div>
</div>
<div class="terms-item">
<div class="item-title">
<img src="/ToolDetail/icon_note.png" alt="">
@ -42,20 +38,31 @@
<img src="/ToolDetail/icon_clock.png" alt="">
<span>Data update: </span>
</div>
<div class="item-content">{{ tool_detail.updatedAt || '' }}</div>
<div class="item-content">{{ formatPublishTime(tool_detail.updatedAt || '') }}</div>
</div>
<div class="tags">
<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it }}</div>
<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it.value }}</div>
</div>
</div>
<div class="right-content">
<div class="card-website-view">
<iframe :src="tool_detail.url || ''" style="width: 100%; height: 100%; pointer-events: none"></iframe>
<div class="flex flex-top-right mb-20 mr-25">
<div class="flex gap-20">
<ThumbBtn
:like-count="tool_detail.likeCount || 0"
:id="tool_detail.id"
type="tool"
@like-success="refreshToolDetail"
/>
<CommentBtn :comment-count="commentCount" />
<a :href="tool_detail.url || ''" class="link-button">
<img src="/ToolDetail/icon_link.png" alt="" class="wh-16" />
<span>Visit website</span>
</a>
</div>
</div>
<div class="card-website-view">
<iframe :src="tool_detail.url || ''" class="scaled-iframe"></iframe>
</div>
<a :href="tool_detail.url || ''" class="link-button">
<img src="/ToolDetail/icon_link.png" alt="" style="width: 16px; height: 16px" />
<span>Visit website</span>
</a>
</div>
</div>
@ -67,6 +74,7 @@
:tool-slug="tool_slug || ''"
:category-slug="category_slug || ''"
:tool_content="tool_detail.description || ''"
:category-name="category_name || ''"
/>
</MyTabPane>
<MyTabPane label="Comment" name="comment"></MyTabPane>
@ -100,16 +108,18 @@ export default {
data() {
return {
activeName: 'product',
tool_slug: null,
tool_slug: '',
tool_detail: {},
commentCount: 0,
other_tools: [],
category_slug: null,
category_slug: '',
category_name: '',
}
},
mounted() {
this.tool_slug = this.$route.query.tool_slug;
this.category_slug = this.$route.query.category_slug;
this.category_name = this.$route.query.category_name || '';
this.getAsyncToolDetailData();
this.getAsyncOtherTools();
},
@ -119,6 +129,7 @@ export default {
if (to.query.tool_slug !== from.query.tool_slug) {
this.tool_slug = to.query.tool_slug;
this.category_slug = to.query.category_slug;
this.category_name = to.query.category_name || '';
this.resetAndReloadData();
}
}
@ -128,6 +139,21 @@ export default {
async refreshToolDetail() {
await this.getAsyncToolDetailData();
},
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}`;
},
// 获取详情数据
async getAsyncToolDetailData() {
if (this.tool_slug) {
@ -184,22 +210,34 @@ export default {
</script>
<style scoped lang="scss">
.gap-20 {
gap: 20px;
}
.mb-20 {
margin-bottom: 20px;
}
.mr-25 {
margin-right: 25px;
}
.color-01 {
color: #7B61FF;
}
.tool-detail {
flex: 1;
overflow-y: auto;
position: relative;
.content {
padding-top: 100px;
padding-top: 25px;
padding-bottom: 100px;
min-height: 100vh;
.bread-menu {
font-size: $mid-font-size;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
font-weight: 600;
.crumbs {
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
}
}
@ -207,37 +245,23 @@ export default {
.title-text {
font-size: 34px;
color: #1E293B;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
margin-top: 55px;
}
.rate-box {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
.btn-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
margin-top: 16px;
margin-bottom: 20px;
}
.tool-content {
display: flex;
margin-top: 20px;
margin-bottom: 20px;
gap: 50px;
.left-content {
padding-top: 12px;
gap: 50px;
gap: 20px;
flex: 1;
.terms-item {
margin-bottom: 30px;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
gap: 7px;
@ -247,7 +271,7 @@ export default {
align-items: center;
gap: 8px;
color: #1E293B;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
img {
width: 24px;
@ -256,7 +280,7 @@ export default {
}
.item-content {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
}
}
@ -290,7 +314,14 @@ export default {
border-radius: 16px;
box-shadow: 0 10px 30px 0 #0000000d;
padding: 19px 25px;
margin-bottom: 28px;
.scaled-iframe {
width: 1000%;
height: 1000%;
transform: scale(0.1);
transform-origin: 0 0;
pointer-events: none;
border: none;
}
}
.link-button {
@ -300,7 +331,7 @@ export default {
border-radius: 12px;
margin: auto;
color: #fff;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
display: flex;
align-items: center;