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

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>