对接数据

pages/ToolDetail/components/CommentBtn.vue

@@ -0,0 +1,41 @@
+<script>
+export default {
+	props: {
+		commentCount: {
+			type: Number,
+			default: 0,
+		}
+	},
+	data() {
+		return {
+			isActive: false,
+		}
+	},
+	methods: {
+	}
+}
+</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>
+</template>
+
+<style scoped lang="scss">
+.box {
+	width: 48px;
+	height: 48px;
+	border-radius: 12px;
+	box-shadow: 0 4px 6px 0 #0000000d;
+	background: $header-backgroungd;
+	padding: 5px;
+	font-family: 'Poppins-Regular', serif;
+	font-size: 12px;
+	img {
+		width: 20px;
+		height: 20px;
+	}
+}
+</style>