home修改

src/views/home/section-index.vue

@@ -1,74 +1,58 @@
 <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>
+		<img src="@/assets/images/home/bg.png" class="bg" />
 		<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/logos/aida.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 class="title" v-html="title"></div>
+			<div class="tip">
+				Discover collections through the stories behind their creation. A curated space connecting
+				designers, narratives, and fashion commerce.
+			</div>
+			<button custom="black-box" @click="handleClickArrow">
+				<svg-icon name="arrow_right" size="34" />
+			</button>
 		</div>
 	</section>
 </template>
 
 <script setup lang="ts">
 	import { computed } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const title =
+		'We’re Seeking<br /><span>Fashion Voice</span><br /><span class="small">Worth Featuring.</span>'
+	const handleClickArrow = () => {
+		router.push({ name: 'collectionStory' })
+	}
 </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;
+			top: 13.7rem;
 			left: 9rem;
-			color: #fff;
+			color: #232323;
 			> .title {
 				font-family: KaiseiOpti-Bold;
-				font-size: 6rem;
+				font-size: 7rem;
 				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;
+				span {
+					font-family: KaiseiOpti-Medium;
+					&.small {
+						font-size: 6rem;
+					}
 				}
 			}
-			> p.tip {
-				font-family: KaiseiOpti-Regular;
-				font-size: 1.2rem;
-				line-height: 2rem;
-				color: #ededed;
+			> .tip {
+				width: 50rem;
+				font-size: 1.8rem;
+				line-height: 2.6rem;
+				color: #585858;
+			}
+			> button {
+				margin-top: 12rem;
+				min-width: 0;
+				width: 8rem;
+				height: 8rem;
 			}
 		}
 	}