对接数据

pages/Home/components/Toolbar.vue

@@ -0,0 +1,142 @@
+<template>
+	<div :id="id">
+		<div class="bar-list">
+			<div class="top-box">
+				<div class="title-wrap">
+					<img :src="`/logo/${tool.img}_check.png`" alt="" />
+					<span class="title-text gradient-color">
+						{{tool.categoryName}}
+					</span>
+				</div>
+				<div @click="goToViewMore" class="more pointer" v-if="!tool.tagList">
+					View more<i class="el-icon-arrow-right"></i>
+				</div>
+			</div>
+			<div v-if="tool.tagList && tool.tagList.length">
+				<ScrollList>
+					<div class="tags">
+						<div class="tag-item" v-for="(item,index) in tool.tagList" :key="index">
+							{{ item }}
+						</div>
+					</div>
+				</ScrollList>
+				<div class="line"></div>
+			</div>
+			<div>
+				<div @click="goToViewMore" class="more pointer" v-if="tool.tagList && tool.tagList.length">
+					View more<i class="el-icon-arrow-right"></i>
+				</div>
+				<div class="item-card" v-if="tool.tools && tool.tools.length">
+					<div v-for="(item, index) in tool.tools" :key="index" style="min-height: 110px">
+						<ToolItemCard :config="item" :categorySlug="categorySlug" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import ScrollList from "~/pages/Home/components/ScrollList.vue";
+	import ToolItemCard from "~/pages/Home/components/ToolItemCard.vue";
+
+	export default {
+		components: {ToolItemCard, ScrollList},
+		props: {
+			tool: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			id: {
+				type: String,
+				default: '',
+			},
+			categorySlug: {
+				type: String,
+				default: '',
+			}
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			// 查看更多
+			goToViewMore() {
+				if (this.categorySlug) {
+					this.$router.push('/home/more?category_slug=' + this.categorySlug)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.title-wrap {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.bar-list {
+		margin: 50px 0;
+	}
+
+	.top-box {
+		@include display-flex;
+		justify-content: space-between;
+
+		.title-text {
+			font-weight: 600;
+			font-size: $larg-font-size;
+			font-family: 'Poppins-SemiBold', serif;
+		}
+	}
+
+	.tags {
+		margin-top: 27px;
+		display: flex;
+		overflow-x: auto;
+		gap: 12px;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		user-select: none;
+		width: max-content;
+	}
+
+	.tag-item {
+		flex-shrink: 0;
+		padding: 10px;
+		@include gradient-border($linear-gradient-start, $linear-gradient-end);
+		/* 显示抓取手势 */
+		font-family: 'Poppins-SemiBold', sans-serif;
+		color: #64748B;
+		font-weight: 600;
+
+		&:active {
+			// cursor: grabbing;
+			/* 抓取中状态 */
+		}
+	}
+
+	.more {
+		display: block;
+		text-align: right;
+		color: $grey-color;
+		font-size: $mid-font-size;
+		font-family: 'Poppins-Regular', serif;
+
+		&:active {
+			opacity: 0.8;
+		}
+	}
+
+	.item-card {
+		display: grid;
+		gap: 20px;
+		grid-template-columns: repeat(4, 1fr);
+		margin-top: 30px;
+	}
+</style>