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

修复bug

Browse Source
This commit is contained in:
qiuxiao
2025-10-31 15:58:11 +08:00
parent d3375a347f
commit c54f9c9976
29 changed files with 823 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,11 +30,23 @@
placeholder="Please express your opinions"
v-model="commentText"
:maxlength="1000"
show-word-limit
class="comment-textarea"
>
</el-input>
<div class="information-container flex-between-center">
<el-input v-model="nickName" placeholder="NickName" :maxlength="50" />
<el-input v-model="email" placeholder="Email" :maxlength="50" />
<el-input
v-model="nickName"
placeholder="NickName"
:maxlength="50"
class="nickname-input"
/>
<el-input
v-model="email"
placeholder="Email"
:maxlength="50"
class="email-input"
/>
</div>
<div class="submit-button flex-center" @click="submitComment">
<span>Submit</span>
@ -42,7 +54,7 @@
</div>
</div>
<!--评论列表-->
<div class="comment-list card">
<div class="comment-list card" v-if="commentList.length">
<div class="list-header flex-between-center">
<h2 class="content-title">All comments <span class="little-text">（{{commentList.length}} comments）</span></h2>
<div class="more pointer" v-if="!checkMore" @click="checkMore = true">
@ -250,6 +262,9 @@ export default {
border-color: #E2E8F0 !important;
padding: 30px !important;
height: 320px !important;
&::placeholder {
color: #E2E8F0 !important;
}
}
}
.information-container {
@ -258,6 +273,9 @@ export default {
::v-deep .el-input {
.el-input__inner {
border-color: #E2E8F0 !important;
&::placeholder {
color: #64748B !important;
}
}
}
}

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

@ -5,7 +5,11 @@
<div v-html="tool_content || ''"></div>
</div>
<div class="law-text-box">
<div class="law-title">——————— Special Announcement ———————</div>
<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>
<!--其他相似导航-->
@ -176,6 +180,7 @@ export default {
font-family: 'Poppins-SemiBold', serif;
text-align: center;
margin-bottom: 22px;
gap: 22px;
}
.law-text {

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

@ -9,17 +9,48 @@ export default {
data() {
return {
isActive: false,
isHovered: false,
}
},
computed: {
// 根据状态返回不同的图片路径
getImageSrc() {
// 如果已经点赞，显示选中的图片
if (this.isActive) {
return '/ToolDetail/icon_comment_selected.png';
}
// 如果鼠标悬停或点击，显示高亮的图片
if (this.isHovered) {
return '/ToolDetail/icon_comment_selected.png';
}
// 默认显示普通图片
return '/ToolDetail/icon_comment.png';
}
},
methods: {
// 鼠标悬停
onMouseEnter() {
this.isHovered = true;
},
// 鼠标离开
onMouseLeave() {
this.isHovered = false;
},
// 点击事件
onClick() {
const commentElement = document.querySelector('.comment-content');
if (commentElement) {
commentElement.scrollIntoView({ behavior: 'smooth' });
}
}
}
}
</script>
<template>
<div class="box flex flex-col items-center" :style="{background: !isActive && '#FFFFFF'}">
<img :src="isActive ? '/ToolDetail/icon_comment_selected.png' : '/ToolDetail/icon_comment.png'" alt="" />
<span :style="{color: isActive ? '#ffffffcc' : '#64748b'}">{{ commentCount }}</span>
<div class="box flex flex-col items-center" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="onClick">
<img :src="getImageSrc" alt="" />
<span>{{ commentCount }}</span>
</div>
</template>
@ -29,13 +60,30 @@ export default {
height: 48px;
border-radius: 12px;
box-shadow: 0 4px 6px 0 #0000000d;
background: $header-backgroungd;
background: #fff;
padding: 5px;
font-family: 'Poppins-Regular', serif;
font-size: 12px;
cursor: pointer;
img {
width: 20px;
height: 20px;
}
span {
color: #64748b;
}
&:hover {
background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
span {
color: #ffffffcc;
}
}
&:active {
background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
opacity: 0.8;
span {
color: #ffffffcc;
}
}
}
</style>

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

@ -34,7 +34,9 @@ export default {
<template>
<div class="similar-card-container" @click="goToToolDetail">
<div class="title">
<img :src="config.iconUrl || ''" alt="" />
<div class="icon">
<img :src="config.iconUrl || '/'" alt="" />
</div>
<span style="font-size: 18px">
{{ config.name || '' }}
</span>
@ -67,10 +69,17 @@ export default {
display: flex;
align-items: center;
img {
.icon {
width: 40px;
height: 40px;
margin-right: 4px;
border-radius: 6px;
background: #f9fafc;
padding: 6px;
img {
width: 28px;
height: 28px;
flex-shrink: 0;
}
}
span {

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

@ -18,6 +18,22 @@ export default {
return {
isActive: false,
throttleTimer: null,
isHovered: false,
}
},
computed: {
// 根据状态返回不同的图片路径
getImageSrc() {
// 如果已经点赞，显示选中的图片
if (this.isActive) {
return '/ToolDetail/icon_thumb_selected.png';
}
// 如果鼠标悬停或点击，显示高亮的图片
if (this.isHovered) {
return '/ToolDetail/icon_thumb_selected.png';
}
// 默认显示普通图片
return '/ToolDetail/icon_thumb.png';
}
},
methods: {
@ -63,15 +79,23 @@ export default {
this.throttleTimer = null;
}
}
},
// 鼠标悬停
onMouseEnter() {
this.isHovered = true;
},
// 鼠标离开
onMouseLeave() {
this.isHovered = false;
}
}
}
</script>
<template>
<div class="box flex flex-col items-center" :style="{background: !isActive && '#FFFFFF'}" @click="addLike">
<img :src="isActive ? '/ToolDetail/icon_thumb_selected.png' : '/ToolDetail/icon_thumb.png'" alt="" />
<span :style="{color: isActive ? '#ffffffcc' : '#64748b'}">{{ likeCount }}</span>
<div class="box flex flex-col items-center" @click="addLike" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<img :src="getImageSrc" alt="" />
<span>{{ likeCount }}</span>
</div>
</template>
@ -81,7 +105,7 @@ export default {
height: 48px;
border-radius: 12px;
box-shadow: 0 4px 6px 0 #0000000d;
background: $header-backgroungd;
background: #fff;
padding: 5px;
font-family: 'Poppins-Regular', serif;
font-size: 12px;
@ -90,8 +114,21 @@ export default {
width: 20px;
height: 20px;
}
span {
color: #64748b;
}
&:hover {
background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
span {
color: #ffffffcc;
}
}
&:active {
background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
opacity: 0.8;
span {
color: #ffffffcc;
}
}
}
</style>

16
pages/ToolDetail/index.vue
View File

@ -59,8 +59,8 @@
</div>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="Product information" name="product">
<MyTabs v-model="activeName" @tab-click="handleClick">
<MyTabPane label="Product information" name="product">
<Product
:other-tools="other_tools"
:tool-id="tool_detail.id || 0"
@ -68,9 +68,9 @@
:category-slug="category_slug || ''"
:tool_content="tool_detail.description || ''"
/>
</el-tab-pane>
<el-tab-pane label="Comment" name="comment"></el-tab-pane>
</el-tabs>
</MyTabPane>
<MyTabPane label="Comment" name="comment"></MyTabPane>
</MyTabs>
<Comment comment-type="tool" :id="tool_detail.id" @update:commentCount="handleCommentCountUpdate" />
</div>
@ -84,6 +84,8 @@ import Comment from "@/pages/ToolDetail/Comment/index.vue";
import ThumbBtn from "@/pages/ToolDetail/components/ThumbBtn.vue";
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
import Rate from "@/components/Rate.vue";
import MyTabs from '@/components/MyTabs/MyTabs.vue';
import MyTabPane from '@/components/MyTabs/MyTabPane.vue';
export default {
components: {
@ -92,6 +94,8 @@ export default {
ThumbBtn,
CommentBtn,
Rate,
MyTabs,
MyTabPane,
},
data() {
return {
@ -169,7 +173,7 @@ export default {
if (code === 0 && data.list) {
this.other_tools = data.list;
}
}
},
},
computed: {
tagList() {