fix

src/views/collectionStory/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import Detail from "./detail/index.vue";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -15,8 +17,37 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="collectionStory">
-		<div class="title">
-			collection Story
+		<div class="first-screen">
+			<img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt="">
+			<div class="back">
+				<SvgIcon name="collectionStory-back" size="20" />
+				<div class="text">Back to Home</div>
+			</div>
+			<div class="title-content">
+				<div class="title-box">
+					<div class="left">
+						<div class="title">
+							Windswept Burden
+						</div>
+						<div class="info">
+							Publish Date: 24th Nov 2025
+						</div>
+					</div>
+					<div class="right">
+						<div class="info">
+							“We are spiritual nomads carrying what wind cannot take. <br />
+							Inspired by those who knew home is not a place, but what you wear.”
+						</div>
+					</div>
+				</div>
+				<div class="scrolling-learn-more">
+					<div>Scrolling Learn More</div>
+					<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
+				</div>
+			</div>
+		</div>
+		<div class="content">
+			<Detail></Detail>
 		</div>
 	</div>
 </template>
@@ -25,5 +56,92 @@ const {} = toRefs(data);
 		width: 100%;
 		height: 100%;
 		position: relative;
+		overflow-y: auto;
+		.first-screen{
+			position: relative;
+			height: auto;
+			display: flex;
+			overflow: hidden;
+			> .back{
+				position: absolute;
+				top: 2.4rem;
+				left: 2.4rem;
+				display: flex;
+				align-items: center;
+				gap: .8rem;
+				color: #fff;
+				cursor: pointer;
+				> .text{
+					font-size: 2rem;
+					font-weight: 500;
+					white-space: nowrap;
+				}
+			}
+			> .title-content{
+				width: 100%;
+				height: 63.2rem;
+				margin-top: 24.8rem;
+				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
+				padding: 0 4rem;
+				> .title-box{
+					margin-top: 36.7rem;
+					color: #fff;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					> .left{
+						font-family: 'KaiseiOpti-Bold';
+						font-weight: 700;
+						> .title{
+							font-size: 6rem;
+							line-height: 6rem;
+						}
+						> .info{
+							margin-top: 1.7rem;
+							font-size: 1.8rem;
+							line-height: 100%;
+							vertical-align: bottom;
+						}
+					}
+					> .right{
+						> .info{
+							font-weight: 500;
+							font-size: 1.8rem;
+							line-height: 100%;
+							text-align: right;
+						}
+					}
+				}	
+			}
+			.scrolling-learn-more{
+				position: absolute;
+				bottom: 2.1rem;
+				left: 50%;
+				transform: translateX(-50%);
+				display: flex;
+				flex-direction: column;
+				color: #fff;
+				> div{
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 1.4rem;	
+					line-height: 100%;
+					text-align: center;
+					margin-bottom: 1.5rem;
+					white-space: nowrap;
+				}
+			}
+			.banner{
+				width: 100%;
+				position: absolute;
+				z-index: -1;
+			}
+		}
+		.content{
+			width: 100%;
+			min-height: 100%;
+			height: 100%;
+		}
+		
 	}
 </style>