修复bug

pages/ToolDetail/components/ThumbBtn.vue

@@ -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>