home主页和AiTools页

pages/Home/ToolList.vue

@@ -0,0 +1,71 @@
+<template>
+	<div class="list">
+		<div v-for="item in list" class="tools" @click="checkTool(item)">
+			<span class="tool-card" :class="item.active?'checkedBg':''">
+				<span class="content">
+					<img :src="`/logo/${item.img}_${item.active ? 'checkd' : 'un'}.png`" />
+					<span>{{ item.name }}</span>
+				</span>
+
+			</span>
+
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: ['list'],
+		data() {
+			return {
+				ischeck: 'check',
+			}
+		},
+		created() {
+			this.list.forEach(item => {
+				this.$set(item, 'active', false)
+			})
+		},
+		methods: {
+			checkTool(item) {
+				this.list.forEach(i => this.$set(i, 'active', false)) // 重置其他项
+				this.$set(item, 'active', true)
+				 this.$emit('tool-selected', item.name) // 发送工具名称
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.list {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr); // 4列布局
+		gap: 20px; // 网格间距
+
+		.tools {
+			max-width: 300px;
+		}
+
+		.tool-card {
+			background: #FFFFFF;
+			box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
+			border-radius: 12px;
+			padding: 10px 16px;
+			display: inline-block;
+
+			.content {
+				@include display-flex;
+
+				img {
+					margin-right: 5px;
+				}
+			}
+
+		}
+
+		.tools .checkedBg {
+			color: $white;
+			background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
+		}
+	}
+</style>