首页

src/views/home/section-designers.vue

@@ -0,0 +1,130 @@
+<template>
+	<section class="section-designers">
+		<div class="title">Popular Designers</div>
+		<div class="tip">
+			Discover the designers shaping AiDA’s creative landscape,<br />as we present their most
+			distinguished works each month.
+		</div>
+		<div class="content">
+			<img src="@/assets/images/home/designers-left.jpg" />
+			<div class="box">
+				<div class="intro">
+					<span>{{ list[index]?.intro || '' }}</span>
+					<img src="@/assets/images/home/designers-right.jpg" />
+				</div>
+				<div
+					class="name-item"
+					v-for="(v, i) in list"
+					:key="i"
+					:class="{ active: i === index }"
+					@click="index = i"
+				>
+					<span class="name">{{ v.name }}</span>
+					<span class="icon">
+						<svg-icon name="arrow_right" size="20" />
+					</span>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const index = ref(0)
+	const list = ref([
+		{
+			name: 'Ji-Yeon Park',
+			intro:
+				'Through its fragile tulle layers over a grounded silhouette, the garment reflects the tension between vulnerability and strength within one’s journey.'
+		},
+		{
+			name: 'Lian Su',
+			intro: '阿巴阿巴~'
+		},
+		{
+			name: 'Céline Moreau',
+			intro: '这是Céline Moreau的设计~'
+		}
+	])
+</script>
+
+<style lang="less">
+	.section-designers {
+		padding: 9rem 8rem;
+		> .title {
+			font-family: KaiseiOpti-Bold;
+			font-size: 5.6rem;
+			line-height: 6.2rem;
+			text-align: center;
+			margin-bottom: 1rem;
+		}
+		> .tip {
+			font-family: KaiseiOpti-Regular;
+			font-size: 2rem;
+			line-height: 2.8rem;
+			text-align: center;
+			color: #979797;
+		}
+		> .content {
+			margin-top: 5rem;
+			border: 0.1rem solid #979797;
+			border-left: none;
+			border-left: none;
+			border-right: none;
+			box-sizing: content-box;
+			--height: 45rem;
+			min-height: var(--height);
+			display: flex;
+			> img {
+				width: var(--height);
+				height: var(--height);
+				margin: 2.4rem 2.4rem 2.4rem 0;
+			}
+			> .box {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				> .intro {
+					display: flex;
+					margin: 2rem 2rem 2rem 0;
+					> span {
+						flex: 1;
+						font-family: KaiseiOpti-Regular;
+						font-size: 2rem;
+						line-height: 3rem;
+						color: #232323;
+						margin-right: 9rem;
+					}
+					> img {
+						width: 25rem;
+						height: 25rem;
+					}
+				}
+				> .name-item {
+					flex: 1;
+					min-height: 5rem;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					border-top: 0.1rem solid #7b7b7b;
+					padding: 0 2.1rem;
+					font-family: KaiseiOpti-Regular;
+					font-size: 2.4rem;
+					color: #7b7b7b;
+					> .icon {
+						transform: rotate(-45deg);
+					}
+					&.active {
+						font-family: KaiseiOpti-Bold;
+						color: #232323;
+						background: #f6f6f6;
+						> .icon {
+							transform: rotate(0);
+						}
+					}
+				}
+			}
+		}
+	}
+</style>