对接数据

pages/ToolDetail/components/SimilarToolCard.vue

@@ -0,0 +1,96 @@
+<script>
+export default {
+	data() {
+		return {
+			category_slug: '',
+		};
+	},
+	props: {
+		config: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		},
+	},
+	methods: {
+		goToToolDetail() {
+			if (this.config.slug && this.category_slug) {
+				this.$router.push('/detail?tool_slug=' + this.config.slug + '&category_slug=' + this.category_slug);
+			}
+		}
+	},
+	mounted() {
+		this.category_slug = this.$route.query.category_slug;
+	},
+	watch: {
+		'$route': function (newVal) {
+			this.category_slug = newVal.query.category_slug;
+		},
+	}
+}
+</script>
+
+<template>
+	<div class="similar-card-container" @click="goToToolDetail">
+		<div class="title">
+			<img :src="config.iconUrl || ''" alt="" />
+			<span style="font-size: 18px">
+								{{ config.name || '' }}
+							</span>
+		</div>
+		<div class="text">
+			{{ config.memo || '' }}
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.similar-card-container {
+	background: #FFFFFF;
+	box-shadow: 0 10px 30px 0 #0000000d;
+	border-radius: 8px;
+	padding: 16px 16px 10px;
+	border: 1px solid #BACFFF;
+	max-width: 305px;
+	cursor: pointer;
+
+	&:hover {
+		@include gradient-border($linear-gradient-start, $linear-gradient-end);
+	}
+
+	&:active {
+		opacity: 0.8;
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+
+		img {
+			width: 40px;
+			height: 40px;
+			margin-right: 4px;
+		}
+
+		span {
+			color: $main-font-color;
+			font-size: $big-font-size;
+			font-weight: 600;
+			font-family: 'Poppins-SemiBold', serif;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.text {
+		color: $grey-color;
+		font-family: 'Poppins-Regular', serif;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+}
+</style>