对接数据

pages/Home/components/PopularToolList.vue

@@ -0,0 +1,110 @@
+<script>
+export default {
+	data() {
+		return {
+			pop_tools: [],
+		}
+	},
+	methods: {
+		async getToolsAsyncData() {
+			const {data: res} = await this.$api.tool.getToolsList({isHot: 1, page: 1, limit: 6});
+			const {code, data} = res;
+			if (code === 0 && data.list) {
+				this.pop_tools = data.list;
+			}
+		},
+		// 跳转工具详情页
+		goToToolDetail(item) {
+			if (item.slug && item.categorySlug) {
+				this.recordToolClick(item);
+				this.$router.push(`/detail?tool_slug=${item.slug}&category_slug=${item.categorySlug}`);
+			}
+		},
+		// 记录工具点击次数
+		async recordToolClick(item) {
+			if (item.id) {
+				await this.$api.tool.recordToolClickNum(item.id);
+			}
+		}
+	},
+	created() {
+		this.getToolsAsyncData();
+	}
+}
+</script>
+
+<template>
+	<div>
+		<div class="clearfix">
+			<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
+			Popular Tools
+		</div>
+		<div class="line" />
+		<div class="pop-item">
+			<div v-for="item in pop_tools" class="box" @click="goToToolDetail(item)">
+				<div class="img-box">
+					<img :src="item.iconUrl || ''" alt=""/>
+				</div>
+				<div class="tool-name">
+					{{ item.name }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.clearfix {
+	display: flex;
+	align-items: center;
+	margin-bottom: 20px;
+	font-size: $larg-font-size;
+	font-weight: bold;
+	font-family: 'Poppins-SemiBold', serif;
+}
+
+.img-box {
+	width: 50px;
+	height: 50px;
+	margin: 15px 0 12px;
+	background: #FFFFFF;
+	border-radius: 12px;
+	border: 1px solid #E2E8F0;
+	@include flex-center;
+
+	&:hover {
+		transform: scale(1.15);
+		cursor: pointer;
+		@include gradient-border($linear-gradient-start, $linear-gradient-end);
+		box-shadow: 0 5px 7px 0 #00000014;
+	}
+}
+
+.pop-item {
+	display: grid;
+	grid-auto-rows: 1fr;
+	grid-template-columns: repeat(3, 1fr);
+	justify-content: space-between;
+	gap: 12px;
+
+	.box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		&:active {
+			opacity: 0.8;
+		}
+
+		.tool-name {
+			font-family: 'Poppins-Medium', serif;
+			color: #64748B;
+			text-align: center;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 100px;
+		}
+	}
+}
+</style>