home主页和AiTools页

pages/Home/Toolbar.vue

@@ -0,0 +1,153 @@
+<template>
+	<div :id="id">
+		<div class="bar-list">
+			<div class="top-box">
+				<div>
+					<img :src="`/logo/${tool.img}_check.png`" />
+					<span class="title-text .gradient-color">
+						{{tool.name}}
+					</span>
+				</div>
+				<div class="more pointer" v-if="!tagList.length">
+					View more<i class="el-icon-arrow-right"></i>
+				</div>
+			</div>
+			<div v-if="tagList.length">
+				<div class="tags" ref="tagsContainer" @mousedown="startDrag" @mousemove="onDrag" @mouseup="stopDrag"
+					@mouseleave="stopDrag">
+					<div class="tag-item" v-for="(item,index) in 10">
+						AI Image & illustration Generation
+					</div>
+				</div>
+				<div class="line"></div>
+			</div>
+			<div>
+				<div class="more pointer" v-if="tagList.length">
+					View more<i class="el-icon-arrow-right"></i>
+				</div>
+				<div class="item-card">
+					<div class="card-caontainer" v-for="(item,index) in 8">
+						<div class="title">
+							<img src="/logo/collect.png" />
+							<span>
+								Skywork
+							</span>
+						</div>
+						<div class="content">
+							Latest ToolsLatest ToolsLatest ToolsLatest Tools
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: ['tool','id'],
+		data() {
+			return {
+				isDragging: false,
+				startX: 0,
+				scrollLeft: 0,
+				tagList: [],
+			}
+		},
+		methods: {
+			startDrag(e) {
+				this.isDragging = true;
+				this.startX = e.pageX - this.$refs.tagsContainer.offsetLeft;
+				this.scrollLeft = this.$refs.tagsContainer.scrollLeft;
+			},
+			onDrag(e) {
+				if (!this.isDragging) return;
+				e.preventDefault();
+				const x = e.pageX - this.$refs.tagsContainer.offsetLeft;
+				const walk = (x - this.startX) * 2; // 调整滑动速度
+				this.$refs.tagsContainer.scrollLeft = this.scrollLeft - walk;
+			},
+			stopDrag() {
+				this.isDragging = false;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bar-list {
+		margin: 50px 0;
+	}
+
+	.top-box {
+		@include display-flex;
+		justify-content: space-between;
+
+		.title-text {
+		
+			font-weight: 600;
+			font-size: $larg-font-size;
+		}
+	}
+
+	.tags {
+		display: flex;
+		overflow-x: auto;
+		gap: 12px;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		// cursor: grab;
+		user-select: none;
+
+	}
+
+	.tag-item {
+		flex-shrink: 0;
+		padding: 10px;
+		@include gradient-border($linear-gradient-start, $linear-gradient-end);
+		// cursor: grab;
+		/* 显示抓取手势 */
+
+		&:active {
+			// cursor: grabbing;
+			/* 抓取中状态 */
+		}
+	}
+
+	.more {
+		text-align: right;
+		color: $grey-color;
+		font-size: $mid-font-size;
+	}
+
+	.item-card {
+		display: grid;
+		gap: 20px;
+		grid-template-columns: repeat(4, 1fr);
+		margin-top: 30px;
+	}
+
+	.card-caontainer {
+		background: #FFFFFF;
+		box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
+		border-radius: 8px;
+		padding: 16px;
+		border: 1px solid #E2E8F0;
+
+		.title {
+			display: flex;
+			align-items: center;
+
+			span {
+				color: $main-font-color;
+				font-size: $big-font-size;
+				font-weight: 600;
+			}
+		}
+
+		.content {
+			color: $grey-color;
+			// line-height: 30px;
+		}
+	}
+</style>