首页

src/App.vue

@@ -18,7 +18,6 @@
 		font-size: 1.6rem;
 		display: flex;
 		flex-direction: column;
-		font-family: 'KaiseiOpti-Regular', sans-serif;
 	}
 	#loading {
 		position: fixed;

src/assets/css/style.css

@@ -111,3 +111,28 @@ body,
   background-position: 50% 50%;
   background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
+button[custom],
+button[custom="white"] {
+  min-width: 19.4rem;
+  height: 5rem;
+  padding: 0 1rem;
+  border-radius: 0;
+  border: none;
+  font-family: KaiseiOpti-Bold;
+  font-size: var(--button-font-size, 2rem);
+  color: var(--button-color, #232323);
+  background: var(--button-bgcolor, #fff);
+  cursor: pointer;
+}
+button[custom]:active,
+button[custom="white"]:active {
+  background: var(--button-click-bgcolor, #e4e4e4);
+  color: var(--button-click-color, #232323);
+}
+button[custom="black"] {
+  --button-bgcolor: #232323;
+  --button-color: #fff;
+  --button-click-bgcolor: #333;
+  --button-click-color: #fff;
+  --button-font-size: 1.6rem;
+}

src/assets/css/style.less

@@ -88,22 +88,31 @@ body,
 }
 
 .el-overlay {
-	--el-color-primary: #ff7a51;              // 主橙红色
+	--el-color-primary: #ff7a51; // 主橙红色
-	--el-color-primary-light-3: #ffa785;       // 较浅的橙红（混合20%白）
+	--el-color-primary-light-3: #ffa785; // 较浅的橙红（混合20%白）
-	--el-color-primary-light-5: #ffc2aa;       // 更浅的橙红（混合33%白）
+	--el-color-primary-light-5: #ffc2aa; // 更浅的橙红（混合33%白）
-	--el-color-primary-light-7: #ffddcf;       // 浅橙红（混合47%白）
+	--el-color-primary-light-7: #ffddcf; // 浅橙红（混合47%白）
-	--el-color-primary-light-8: #ffe8df;       // 很浅的橙红（混合53%白）
+	--el-color-primary-light-8: #ffe8df; // 很浅的橙红（混合53%白）
-	--el-color-primary-light-9: #fff2ec;       // 极浅的橙红（混合60%白）
+	--el-color-primary-light-9: #fff2ec; // 极浅的橙红（混合60%白）
-	--el-color-primary-dark-2: #cc6241;        // 深橙红（加深20%）
+	--el-color-primary-dark-2: #cc6241; // 深橙红（加深20%）
 }
-.el-select, .el-popper{
+
-	--el-color-primary: #6c6c6c;                    /* 主灰色 */
+.el-select,
-	--el-color-primary-light-3: #8a8a8a;            /* 较浅的灰色（混合20%白） */
+.el-popper {
-	--el-color-primary-light-5: #a8a8a8;            /* 更浅的灰色（混合33%白） */
+	--el-color-primary: #6c6c6c;
-	--el-color-primary-light-7: #c6c6c6;            /* 浅灰色（混合47%白） */
+	/* 主灰色 */
-	--el-color-primary-light-8: #d4d4d4;            /* 很浅的灰色（混合53%白） */
+	--el-color-primary-light-3: #8a8a8a;
-	--el-color-primary-light-9: #e3e3e3;            /* 极浅的灰色（混合60%白） */
+	/* 较浅的灰色（混合20%白） */
-	--el-color-primary-dark-2: #565656;             /* 深灰色（加深20%） */
+	--el-color-primary-light-5: #a8a8a8;
+	/* 更浅的灰色（混合33%白） */
+	--el-color-primary-light-7: #c6c6c6;
+	/* 浅灰色（混合47%白） */
+	--el-color-primary-light-8: #d4d4d4;
+	/* 很浅的灰色（混合53%白） */
+	--el-color-primary-light-9: #e3e3e3;
+	/* 极浅的灰色（混合60%白） */
+	--el-color-primary-dark-2: #565656;
+	/* 深灰色（加深20%） */
 }
 
 
@@ -112,13 +121,14 @@ body,
 	&::-webkit-scrollbar {
 		width: 0.4rem;
 	}
+
 	&::-webkit-scrollbar-thumb {
 		border-radius: 0.4rem;
 		background: rgba(0, 0, 0, 0.2);
 	}
 }
 
-.mosaic-bg{
+.mosaic-bg {
 	--mosaic-bg-size: 1rem;
 	--mosaic-bg-color1: #efefef;
 	--mosaic-bg-color2: #fff;
@@ -126,4 +136,33 @@ body,
 	background-repeat: repeat;
 	background-position: 50% 50%;
 	background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
+}
+
+
+// 自定义button按钮
+button[custom],
+button[custom="white"] {
+	min-width: 19.4rem;
+	height: 5rem;
+	padding: 0 1rem;
+	border-radius: 0;
+	border: none;
+	font-family: KaiseiOpti-Bold;
+	font-size: var(--button-font-size, 2rem);
+	color: var(--button-color, #232323);
+	background: var(--button-bgcolor, #fff);
+	cursor: pointer;
+
+	&:active {
+		background: var(--button-click-bgcolor, #e4e4e4);
+		color: var(--button-click-color, #232323);
+	}
+}
+
+button[custom="black"] {
+	--button-bgcolor: #232323;
+	--button-color: #fff;
+	--button-click-bgcolor: #333;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
 }

src/assets/icons/arrow_right.svg

@@ -0,0 +1,4 @@
+<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.998359 12.0798L24.1266 12.0798" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1094 1.0332L25.3052 12.2291L14.0357 23.2039" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/views/home/index.vue

@@ -1,18 +1,22 @@
 <template>
 	<div class="home-index">
-		<section class="index">
+		<section-index />
-			<img src="@/assets/images/home-bg.jpg" class="bg" />
+		<section-designers />
-		</section>
+		<section-design />
-		<section class="designers"></section>
+		<section-digital-items1 />
-		<section class="design"></section>
+		<section-digital-items2 />
-		<section class="digital-items"></section>
+		<section-footer />
-		<section class="digital-items"></section>
-		<section class="footer"></section>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { computed } from 'vue'
+	import SectionIndex from './section-index.vue'
+	import SectionDesigners from './section-designers.vue'
+	import SectionDesign from './section-design.vue'
+	import SectionDigitalItems1 from './section-digital-items1.vue'
+	import SectionDigitalItems2 from './section-digital-items2.vue'
+	import SectionFooter from './section-footer.vue'
 </script>
 
 <style lang="less">
@@ -22,14 +26,18 @@
 		overflow: hidden;
 		overflow-y: auto;
 		> section {
-			position: relative;
 			width: 100%;
 			height: auto;
 		}
-		> section.index {
+		> section.bgw {
+			position: relative;
 			> .bg {
 				width: 100%;
 				height: auto;
+				display: block;
+			}
+			> .content {
+				position: absolute;
 			}
 		}
 	}

src/views/home/section-design.vue

@@ -0,0 +1,49 @@
+<template>
+	<section class="section-design bgw">
+		<img src="@/assets/images/home/design-bg.jpg" class="bg" />
+		<div class="content">
+			<div class="aida-logo"><img src="@/assets/images/aida-logo.png" /></div>
+			<div class="title">Design with AiDA</div>
+			<div class="tip">
+				Each garment on this platform is where designer vision blooms through AiDA. A tool that
+				nurtures your creativity, never overshadows it. Let your ideas flourish.
+			</div>
+			<button custom>Try Now</button>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+</script>
+
+<style lang="less">
+	.section-design {
+		> .content {
+			width: 55rem;
+			top: 12rem;
+			left: 9rem;
+			> .aida-logo {
+				margin-bottom: 6rem;
+				> img {
+					width: auto;
+					height: 6.9rem;
+				}
+			}
+			> .title {
+				font-family: KaiseiOpti-Bold;
+				font-size: 5.6rem;
+				line-height: 6.2rem;
+				margin-bottom: 2rem;
+				color: #fff;
+			}
+			> .tip {
+				font-family: KaiseiOpti-Regular;
+				font-size: 2rem;
+				line-height: 2.8rem;
+				color: #fff;
+				margin-bottom: 10rem;
+			}
+		}
+	}
+</style>

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>

src/views/home/section-digital-items1.vue

@@ -0,0 +1,101 @@
+<template>
+	<section class="digital-items1 bgw">
+		<img src="@/assets/images/home/digital-items-1.jpg" class="bg" />
+		<div class="content">
+			<div class="title">Digital Items</div>
+			<div class="tip">
+				AiDA captures your boldest thoughts and transforms them into vivid
+				<br />
+				digital visions—a virtual realm where creativity collides and evolves.
+			</div>
+			<button custom="black">Shop All</button>
+			<div class="list">
+				<div v-for="v in list" :key="v.url">
+					<img :src="v.url" alt="" />
+					<div class="title">{{ v.title }}</div>
+					<div class="tip">{{ v.tip }}</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const list = ref([
+		{
+			title: 'Women’s Itemk',
+			tip: 'Blue Pleat Aria',
+			url: 'http://118.31.39.42:3000/falls/digital-items-1.png'
+		},
+		{
+			title: 'Girls’ Item',
+			tip: 'Candy Riot',
+			url: 'http://118.31.39.42:3000/falls/digital-items-2.jpg'
+		},
+		{
+			title: 'Men’s Item',
+			tip: 'Void Armour',
+			url: 'http://118.31.39.42:3000/falls/digital-items-3.png'
+		},
+		{
+			title: 'Boys’ Item',
+			tip: 'Jester Edit',
+			url: 'http://118.31.39.42:3000/falls/digital-items-4.png'
+		}
+	])
+</script>
+
+<style lang="less">
+	.digital-items1 {
+		> .content {
+			top: 8rem;
+			left: 0;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> .title {
+				font-family: KaiseiOpti-Bold;
+				font-size: 5.6rem;
+				line-height: 6.2rem;
+				margin-bottom: 2rem;
+			}
+			> .tip {
+				font-family: KaiseiOpti-Regular;
+				font-size: 2rem;
+				line-height: 2.8rem;
+				margin-bottom: 2rem;
+				color: #585858;
+				text-align: center;
+			}
+			> .list {
+				margin-top: 6rem;
+				display: flex;
+				gap: 2.4rem;
+				> div {
+					padding: 1rem;
+					border: 0.1rem solid #979797;
+					> img {
+						width: 27.4rem;
+						height: 34.6rem;
+						margin-bottom: 1.2rem;
+					}
+					> .title {
+						font-family: KaiseiOpti-Regular;
+						font-size: 1.8rem;
+						line-height: 2.2rem;
+						color: #232323;
+						margin-bottom: 0.6rem;
+					}
+					> .tip {
+						font-family: KaiseiOpti-Regular;
+						font-size: 1.2rem;
+						line-height: 2.2rem;
+						color: #979797;
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/home/section-digital-items2.vue

@@ -0,0 +1,94 @@
+<template>
+	<section class="digital-items2 bgw">
+		<img src="@/assets/images/home/digital-items-1.jpg" class="bg" />
+		<div class="content">
+			<div class="tip">
+				AiDA accelerates style innovation, shaping daily pieces that keep
+				<br />
+				your wardrobe in sync with modern fashion’s rhythm.
+			</div>
+			<div class="list">
+				<div v-for="v in list" :key="v.url">
+					<img :src="v.url" alt="" />
+					<div class="title">{{ v.title }}</div>
+					<div class="tip">{{ v.tip }}</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const list = ref([
+		{
+			title: 'Women’s Itemk',
+			tip: 'Blue Pleat Aria',
+			url: 'http://118.31.39.42:3000/falls/digital-items-1.png'
+		},
+		{
+			title: 'Girls’ Item',
+			tip: 'Candy Riot',
+			url: 'http://118.31.39.42:3000/falls/digital-items-2.jpg'
+		},
+		{
+			title: 'Men’s Item',
+			tip: 'Void Armour',
+			url: 'http://118.31.39.42:3000/falls/digital-items-3.png'
+		},
+		{
+			title: 'Boys’ Item',
+			tip: 'Jester Edit',
+			url: 'http://118.31.39.42:3000/falls/digital-items-4.png'
+		}
+	])
+</script>
+
+<style lang="less">
+	.digital-items2 {
+		> .content {
+			top: 8rem;
+			left: 0;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			> .tip {
+				font-family: KaiseiOpti-Regular;
+				font-size: 2rem;
+				line-height: 2.8rem;
+				margin-bottom: 2rem;
+				color: #585858;
+				text-align: center;
+			}
+			> .list {
+				margin-top: 6rem;
+				display: flex;
+				gap: 2.4rem;
+				> div {
+					padding: 1rem;
+					border: 0.1rem solid #979797;
+					> img {
+						width: 27.4rem;
+						height: 34.6rem;
+						margin-bottom: 1.2rem;
+					}
+					> .title {
+						font-family: KaiseiOpti-Regular;
+						font-size: 1.8rem;
+						line-height: 2.2rem;
+						color: #232323;
+						margin-bottom: 0.6rem;
+					}
+					> .tip {
+						font-family: KaiseiOpti-Regular;
+						font-size: 1.2rem;
+						line-height: 2.2rem;
+						color: #979797;
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/home/section-footer.vue

@@ -0,0 +1,14 @@
+<template>
+	<section class="section-footer"></section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+</script>
+
+<style lang="less">
+	.section-footer {
+		background-color: #f6f6f6;
+		border-top: 0.1rem solid #232323;
+	}
+</style>

src/views/home/section-index.vue

@@ -0,0 +1,75 @@
+<template>
+	<section class="section-index bgw">
+		<img src="@/assets/images/home/bg.jpg" class="bg" />
+		<div class="shade-1"></div>
+		<div class="shade-2"></div>
+		<div class="content">
+			<div class="title">Windswept Burden</div>
+			<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div>
+			<button custom>View More</button>
+			<div class="aida-logo"><img src="@/assets/images/aida-logo.png" /></div>
+			<p class="tip">
+				What you wear is how you present yourself to the world, especially today, when human
+				contacts are so quick. Fashion is instant language
+			</p>
+			<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+</script>
+
+<style lang="less">
+	.section-index {
+		> .shade-1 {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 96rem;
+			height: 100%;
+			background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
+		}
+		> .shade-2 {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 30rem;
+			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
+		}
+		> .content {
+			top: 16rem;
+			left: 9rem;
+			color: #fff;
+			> .title {
+				font-family: KaiseiOpti-Bold;
+				font-size: 6rem;
+				margin-bottom: 3rem;
+			}
+			> div.tip {
+				font-family: KaiseiOpti-Regular;
+				font-size: 3.2rem;
+				line-height: 4.3rem;
+			}
+			> button {
+				margin-top: 11.6rem;
+				margin-bottom: 13.9rem;
+			}
+			> .aida-logo {
+				margin-bottom: 3rem;
+				> img {
+					width: auto;
+					height: 5rem;
+				}
+			}
+			> p.tip {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.2rem;
+				line-height: 2rem;
+				color: #ededed;
+			}
+		}
+	}
+</style>