fix

src/App.vue

@@ -33,6 +33,10 @@
 	}
 </style>
 <style lang="less" scoped>
+	* {
+		--header-height: 8rem;
+		--footer-height: 7rem;
+	}
 	.view {
 		flex: 1;
 		overflow: hidden;

src/assets/icons/add.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5433 11.5224H3.45666C3.20445 11.5224 3 11.7269 3 11.9791C3 12.2313 3.20445 12.4357 3.45666 12.4357H20.5433C20.7955 12.4357 21 12.2313 21 11.9791C21 11.7269 20.7955 11.5224 20.5433 11.5224Z" fill="black"/>
+<path d="M12.4688 20.5433V3.45666C12.4688 3.20445 12.2643 3 12.0121 3C11.7599 3 11.5554 3.20445 11.5554 3.45666V20.5433C11.5554 20.7955 11.7599 21 12.0121 21C12.2643 21 12.4688 20.7955 12.4688 20.5433Z" fill="black"/>
+</svg>

src/assets/icons/brand/call.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29289 7.20711L8.09256 8.40744C7.74975 8.75025 7.7025 9.29107 7.98245 9.68688C10.3435 13.025 11.3355 14.027 14.32 16.045C14.7142 16.3115 15.2419 16.2581 15.5783 15.9217L17.2929 14.2071C17.6834 13.8166 18.3166 13.8166 18.7071 14.2071L20.5144 16.0144C20.8069 16.3069 20.8892 16.7492 20.686 17.1096C20.2788 17.8317 19.5007 18.9997 18.5 19.5C17.2062 20.1469 15.9123 20.0498 15.5811 20.0109C15.5264 20.0045 15.4735 20.0001 15.4185 19.9972C14.8712 19.9681 11.6429 19.643 8 16C4 12 4 8.5 4 8.5C4 8.5 4 7.5 4.5 6C4.81932 5.04205 5.75042 4.28802 6.38166 3.86816C6.74005 3.62978 7.20529 3.70529 7.50965 4.00965L9.29289 5.79289C9.68342 6.18342 9.68342 6.81658 9.29289 7.20711Z" stroke="#232323" stroke-linecap="round"/>
+</svg>

src/assets/icons/brand/email.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1571 5H4.84294C3.82753 5 3 5.82753 3 6.84294V17.5785C3 18.5939 3.82753 19.4215 4.84294 19.4215H19.1571C20.1725 19.4215 21 18.5939 21 17.5785V6.84742C21 5.83201 20.1725 5.00447 19.1571 5.00447V5ZM4.00199 7.6168L11.6421 15.257C11.83 15.4493 12.1655 15.4448 12.3534 15.257L19.9935 7.6168V17.583C19.9935 18.0437 19.6178 18.424 19.1526 18.424H4.84294C4.38221 18.424 4.00199 18.0482 4.00199 17.583V7.6168ZM19.5507 6.63718L12.2773 13.9105C12.1297 14.0582 11.8703 14.0582 11.7227 13.9105L4.4493 6.63718C4.36431 6.55219 4.32406 6.41799 4.35089 6.29722C4.37326 6.18539 4.4493 6.1004 4.54771 6.06014C4.64165 6.02435 4.74006 6.00646 4.83847 6.00646H19.1526C19.251 6.00646 19.3494 6.02435 19.4433 6.06014C19.5462 6.1004 19.6178 6.18539 19.6446 6.29722C19.6715 6.41799 19.6312 6.54771 19.5462 6.63718H19.5507Z" fill="#232323"/>
+</svg>

src/assets/icons/brand/link.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.93 17.1099L10.07 18.9699C9.4 19.6399 8.5 20.0199 7.55 20.0199C6.6 20.0199 5.7 19.6499 5.03 18.9699C4.36 18.2999 3.98 17.3999 3.98 16.4499C3.98 15.4999 4.35 14.5999 5.03 13.9299L8.74 10.2199C9.41 9.54994 10.31 9.16994 11.26 9.16994C12.21 9.16994 13.11 9.53994 13.78 10.2199C14.21 10.6499 14.53 11.1899 14.69 11.7699C14.73 11.8999 14.81 11.9999 14.92 12.0699C15.03 12.1399 15.17 12.1499 15.29 12.1099C15.55 12.0399 15.71 11.7599 15.63 11.4999C15.42 10.7499 15.02 10.0699 14.47 9.51994C13.61 8.65994 12.47 8.18994 11.25 8.18994C10.03 8.18994 8.89 8.65994 8.03 9.51994L4.32 13.2299C3.47 14.0799 3 15.2299 3 16.4499C3 17.6699 3.47 18.8099 4.33 19.6699C5.19 20.5299 6.33 20.9999 7.55 20.9999C8.77 20.9999 9.91 20.5299 10.77 19.6699L12.63 17.8099C12.72 17.7199 12.77 17.5899 12.77 17.4599C12.77 17.3299 12.72 17.1999 12.63 17.1099C12.44 16.9199 12.12 16.9199 11.93 17.1099Z" fill="#232323"/>
+<path d="M19.6687 4.33C18.7987 3.47 17.6587 3 16.4487 3C15.2387 3 14.0887 3.47 13.2287 4.33L11.3787 6.18C11.2887 6.27 11.2387 6.4 11.2387 6.53C11.2387 6.66 11.2887 6.79 11.3787 6.88C11.5687 7.07 11.8787 7.07 12.0787 6.88L13.9387 5.03C14.6087 4.36 15.5087 3.98 16.4587 3.98C17.4087 3.98 18.3087 4.35 18.9787 5.03C19.6487 5.7 20.0287 6.6 20.0287 7.55C20.0287 8.5 19.6587 9.4 18.9787 10.07L15.2687 13.78C14.5987 14.45 13.6987 14.83 12.7487 14.83C11.7987 14.83 10.8987 14.46 10.2287 13.78C9.79874 13.35 9.47874 12.81 9.31874 12.23C9.27874 12.1 9.19874 12 9.07874 11.93C8.96874 11.87 8.82874 11.85 8.70874 11.89C8.44874 11.96 8.29874 12.24 8.36874 12.5C8.57874 13.25 8.97874 13.93 9.52874 14.48C10.3887 15.34 11.5287 15.81 12.7487 15.81C13.9687 15.81 15.1087 15.34 15.9687 14.48L19.6787 10.77C20.5387 9.91 21.0087 8.77 21.0087 7.55C21.0087 6.33 20.5387 5.19 19.6787 4.33H19.6687Z" fill="#232323"/>
+</svg>

src/components/CommodityItem.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	url: {
+		type: String,
+		default: ''
+	},
+	name: {
+		type: String,
+		default: 'aaa'
+	},
+	price: {
+		type: String,
+		default: '111'
+	}
+})
+const emit = defineEmits([
+	'addShopping'
+])
+let data = reactive({
+})
+const addShopping = () => {
+	emit('addShopping')
+}
+ 
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="commodity-item">
+		<img :src="props.url" alt="">
+		<div class="detail">
+			<div calss="text">
+				<div class="name">
+					{{ props.name }}
+				</div>
+				<div class="price">
+					{{ props.price }}
+				</div>
+			</div>
+			<div class="btn" @click="addShopping">
+				<div class="text">
+					<SvgIcon name="add" size="24"></SvgIcon>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.commodity-item{
+		width: var(--commodity-width,100%);
+		> img{
+			width: 100%;
+			height: var(--commodity-height,auto);
+			margin-bottom: var(--commodity-marginBottom,1rem);
+		}
+		> .detail{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.text{
+				color: #232323;
+				> .name{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: var(--commodity-name-fontSize,1.6rem);
+					line-height: var(--commodity-name-lineHeight,2.3rem);
+				}
+				> .price{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: var(--commodity-price-fontSize,1.4rem);
+					line-height: var(--commodity-price-lineHeight,2.3rem);
+				}
+			}
+		}
+	}
+</style>

src/components/Footer.vue

@@ -0,0 +1,62 @@
+<template>
+	<section class="section-footer">
+		<div class="footer">
+			<div class="left">
+				<div>About</div>
+				<div>Privacy Policy</div>
+				<div>Terms of Use</div>
+				<div>Disclaimer</div>
+				<div>Site Map</div>
+			</div>
+			<div class="right">
+				<img src="@/assets/images/icons/xiaohongshu.png" />
+				<img src="@/assets/images/icons/linkedin.png" />
+				<img src="@/assets/images/icons/instagram.png" />
+				<img src="@/assets/images/icons/facebook.png" />
+				<img src="@/assets/images/icons/douyin.png" />
+				<img src="@/assets/images/icons/wechat.png" />
+				<div class="text">© Code-Create 2026</div>
+			</div>
+		</div>
+	</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;
+		> .footer {
+			padding: 0 9rem;
+			height: var(--footer-height);
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			> .left {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.4rem;
+				color: #585858;
+				display: flex;
+				gap: 4.5rem;
+			}
+			> .right {
+				display: flex;
+				align-items: center;
+				> img {
+					width: 2rem;
+					height: 2rem;
+					margin-left: 2rem;
+				}
+				.text{
+					margin-left: 4rem;
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.2rem;
+					color: #585858;
+				}
+			}
+		}
+	}
+</style>

src/router/index.ts

@@ -20,6 +20,11 @@ const router = createRouter({
 			name: 'collectionStory',
 			component: () => import('../views/collectionStory/index.vue'),
 		},
+		{
+			path: '/brand',
+			name: 'brand',
+			component: () => import('../views/brand/index.vue'),
+		},
 		{
 			path: '/:pathMatch(.*)',
 			name: '404',

src/views/brand/commodity-list.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+//const props = defineProps({
+//})
+const emit = defineEmits([
+	'addShopping'
+])
+let data = reactive({
+})
+const list = ref([
+	{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},
+])
+const type = ref('All')
+const addShopping = (item) => {
+	emit('addShopping', item)
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="commodityList">
+		<div class="header">
+			<div class="title">
+				Items
+			</div>
+			<div class="menu">
+				<div :class="{'active': type === 'All'}" @click="type = 'All'">All</div>
+				<div :class="{'active': type === 'Male'}" @click="type = 'Male'">Male</div>
+				<div :class="{'active': type === 'Female'}" @click="type = 'Female'">Female</div>	
+			</div>
+		</div>
+		<div class="list">
+			<div class="item" v-for="item in list" :key="item.url">
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.commodityList{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.header{
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			background-color: #fff;
+			.title{
+				font-family: "KaiseiOpti-Bold";
+				font-weight: 700;
+				font-size: 3.6rem;
+				line-height: 6rem;
+				color: #121212;
+				padding: 4rem 0 3.6rem 1.2rem;
+			}
+			.menu{
+				padding: 0 1.2rem;
+				display: flex;
+				gap: 2rem;
+				margin-bottom: 6rem;
+				> div{
+					min-width: 6rem;
+					text-align: center;
+					font-family: "KaiseiOpti-Bold";
+					font-weight: 700;
+					font-size: 1.98rem;
+					line-height: 100%;
+					position: relative;
+					color: #7B7B7B;
+					cursor: pointer;
+					&::after{
+						content: '';
+						position: absolute;
+						bottom: -5px;
+						left: 0;
+						display: block;
+						width: 100%;
+						border-bottom: 1px solid #232323;
+						display: none;
+					}
+					&.active{
+						color: #232323;
+						&::after{
+							display: block;
+						}
+					}
+				}
+			}
+		}
+		.list{
+			border-top: 0.5px solid #585858;
+			width: 100%;
+			flex: 1;
+			display: grid;
+			align-content: start;
+			grid-template-columns: repeat(3, 1fr);
+			overflow-y: auto;
+			/* 垂直线（右边框） */
+			.item{
+				position: relative;
+				padding: 1.2rem;
+			}
+			.item::before {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 0;
+				height: 100%;
+				border-right: 0.5px solid #585858;
+				z-index: 1;
+			}
+
+				/* 水平线（下边框） */
+			.item::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				border-bottom: 0.5px solid #585858;
+				z-index: 1;
+			}
+				/* 移除最后一列的右边框 */
+			.item:nth-child(3n)::before {
+				display: none;
+			}
+		}
+	}
+</style>

src/views/brand/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import CommodityList from "./commodity-list.vue";
+import MerchantInfo from "./merchant-info.vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const addShopping = (item) => {}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="brand">
+		<div class="header-img">
+			<img src="@/assets/images/brand/brandBg.png" alt="">
+		</div>
+		<div class="content">
+			<div class="merchant-info">
+				<MerchantInfo></MerchantInfo>
+			</div>
+			<div class="commodity-list">
+				<CommodityList @addShopping="addShopping"></CommodityList>
+			</div>
+		</div>
+		<Footer></Footer>
+	</div>
+</template>
+<style lang="less" scoped>
+	.brand{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow-y: auto;
+		.header-img{
+			width: 100%;
+			>img{
+				width: 100%;
+			}
+		}
+		.content{
+			display: flex;
+			height: auto;
+			align-items: flex-start;
+			.merchant-info{
+				width: 40rem;
+				padding-left: 12.7rem;
+				padding-right: 2.7rem;
+			}
+			.commodity-list{
+				flex: 1;
+				border-left: 0.5px solid #585858;
+				border-right: 0.5px solid #585858;
+				margin-right: 9rem;
+			}
+		}
+	}
+</style>

src/views/brand/merchant-info.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="merchantInfo">
+		<div class="profile">
+			<img src="@/assets/images/collectionStory/Rectangle.png" alt="">
+		</div>
+		<div class="info">
+			<div class="detail">
+				<div class="name">Lian Su</div>
+				<div class="title">Roaming Clouds</div>
+			</div>
+			<div class="contact">
+				<div class="title">Contact</div>
+				<div class="email label">
+					<div class="icon">
+						<svg-icon name="brand-email" size="24" />
+					</div>
+					<div>lian.su@urieworweoo.com</div>
+				</div>
+				<div class="phone label">
+					<div class="icon">
+						<svg-icon name="brand-call" size="24" />
+					</div>
+					<div>+86 139 4829 7710</div>
+				</div>
+				<div class="address label">
+					<div class="icon">
+						<svg-icon name="brand-link" size="24" />
+					</div>
+					<div>746312432</div>
+				</div>
+				<div class="website label">
+					<div class="icon">
+						<svg-icon name="brand-link" size="24" />
+					</div>
+					<div>https://urieworweoo.com</div>
+				</div>
+			</div>
+			<div class="about">
+				<div class="title">About</div>
+				<div class="content">Lian Su’s work weaves understated ethnic influences into contemporary minimalism. She explores materials and silhouettes that bridge heritage and modern sensibilities. Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.merchantInfo{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-top: 4rem;
+		padding-bottom: 4rem;
+		.profile{
+			width: 20rem;
+			height: 20rem;
+			margin-left: 1.8rem;
+			>img{
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+		.info{
+			display: flex;
+			flex-direction: column;
+			gap: 6rem;
+			margin-top: 4rem;
+			.title{
+				font-family: "KaiseiOpti-Bold";
+				font-weight: 700;
+				font-size: 3.4rem;
+				line-height: 3.6rem;
+			}
+			> .detail{
+				.name{
+					margin-bottom: .8rem;
+					font-weight: 500;
+					font-size: 1.8rem;
+					line-height: 100%;
+					color: #232323;
+				}
+			}
+			> .contact{
+				.title{
+					margin-bottom: 2rem;
+				}
+				.label{
+					display: flex;
+					gap: 2rem;
+					margin-bottom: .6rem;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					line-height: 100%;
+					color: #585858;
+					&:last-child{
+						margin-bottom: 0;
+					}
+				}
+			}
+			> .about{
+				.title{
+					margin-bottom: 2rem;
+				}
+				.content{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.6rem;
+					line-height: 2.3rem;
+					color: #585858;
+				}
+			}
+		}
+	}
+</style>

src/views/collectionStory/detail/coreConcept.vue

@@ -5,7 +5,11 @@ import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import { Navigation, Pagination, Autoplay } from 'swiper/modules'
-import img from "@/assets/images/collectionStory/Rectangle.png";
+import coreconcept_1 from "@/assets/images/collectionStory/coreconcept_1.png";
+import coreconcept_2 from "@/assets/images/collectionStory/coreconcept_2.png";
+import coreconcept_3 from "@/assets/images/collectionStory/coreconcept_3.png";
+import coreconcept_4 from "@/assets/images/collectionStory/coreconcept_4.png";
+import coreconcept_5 from "@/assets/images/collectionStory/coreconcept_5.png";
 
 //const props = defineProps({
 //})
@@ -15,11 +19,11 @@ const modules = [Navigation, Pagination, Autoplay]
 let data = reactive({
 })
 let slides = [
-	{ image: img, text: 'Layered Heritage, Coastal Stillness' },
-	{ image: img, text: 'Nomadic Silhouettes, Golden Wandering' },
-	{ image: img, text: 'Pastoral Communion, Woven Earth' },
-	{ image: img, text: 'Pastoral Communion, Woven Earth' },
-	{ image: img, text: 'Pastoral Communion, Woven Earth' },
+	{ image: coreconcept_1, text: 'Layered Heritage, Coastal Stillness' },
+	{ image: coreconcept_2, text: 'Nomadic Silhouettes, Golden Wandering' },
+	{ image: coreconcept_3, text: 'Pastoral Communion, Woven Earth' },
+	{ image: coreconcept_4, text: 'Layered winter silhouettes' },
+	{ image: coreconcept_5, text: 'Insulated winterwear inspired by high-altitude traditions' },
 ]
 onMounted(()=>{
 })
@@ -116,6 +120,7 @@ const {} = toRefs(data);
 				right: 0;
 			}
 			.slide-content{
+				width: min-content;
 				> img{
 					height: 34.2rem;
 					width: auto;

src/views/collectionStory/detail/feelingWithAiDA.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import img from "@/assets/images/collectionStory/Rectangle.png";
+import feeling_1 from "@/assets/images/collectionStory/feeling_1.png";
+import feeling_2 from "@/assets/images/collectionStory/feeling_2.png";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -8,8 +9,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 let data = reactive({
 })
 let slides = [
-	{ image: img, text: 'Web interface in AiDA - the process of apparel edit' },
-	{ image: img, text: 'Web interface in AiDA-Sketchboard' },
+	{ image: feeling_1, text: 'Web interface in AiDA - the process of apparel edit' },
+	{ image: feeling_2, text: 'Web interface in AiDA-Sketchboard' },
 ]
 onMounted(()=>{
 })

src/views/collectionStory/detail/index.vue

@@ -4,6 +4,7 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 import coreConcept from "./coreConcept.vue";
 import inspiration from "./inspiration.vue";
 import feelingWithAiDA from "./feelingWithAiDA.vue";
+import CommodityItem from "@/components/CommodityItem.vue";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -25,6 +26,9 @@ const list = ref([
 		price: "$100.00",
 	},
 ])
+const addShopping = (item) => {
+	console.log(item);
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -53,23 +57,28 @@ const {} = toRefs(data);
 			<feelingWithAiDA ></feelingWithAiDA>
 		</div>
 		<div class="right">
-			
+			<div class="item" v-for="item in list" :key="item.url">
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
+			</div>
 		</div>
 	</div>
 </template>
 <style lang="less" scoped>
 	.detail{
 		width: 100%;
-		height: 100%;
+		height: auto;
 		position: relative;
 		display: flex;
+		align-items: flex-start;
 		> div{
-			height: 100%;
+			// height: 100%;
 		}
 		> .left{
 			width: 23rem;
 			padding-top: 6.3rem;
 			padding-left: 3rem;
+			position: sticky;
+			top: 0;
 			> .personal{
 				display: flex;
 				flex-direction: column;
@@ -98,8 +107,10 @@ const {} = toRefs(data);
 			flex: 1;
 			border-left: 0.5px solid #585858;
 			border-right: 0.5px solid #585858;
-			overflow-y: auto;
-			height: 100%;
+			// overflow-y: auto;
+			overflow: hidden;
+			// height: 100%;
+			height: auto;
 			.line{
 				border: 0.5px solid #58585899;
 				width: 100%;
@@ -111,6 +122,21 @@ const {} = toRefs(data);
 		> .right{
 			width: 25.4rem;
 			padding-top: 6rem;
+			position: sticky;
+			top: 0;
+			height: calc(100vh - var(--header-height));
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 4rem;
+			overflow-y: auto;
+			&::-webkit-scrollbar{
+				display: none;
+			}
+			> .item{
+				margin-bottom: 2.3rem;
+				width: 20rem;
+			}
 		}
 	}
 </style>

src/views/collectionStory/detail/inspiration.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import img from "@/assets/images/collectionStory/Rectangle.png";
+import inspiration_1 from "@/assets/images/collectionStory/inspiration_1.png";
+import inspiration_2 from "@/assets/images/collectionStory/inspiration_1.png";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -8,8 +9,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 let data = reactive({
 })
 let slides = [
-	{ image: img, text: 'Moodboard 1 for this Collection' },
-	{ image: img, text: 'Moodboard 2 for this Collection' },
+	{ image: inspiration_1, text: 'Moodboard 1 for this Collection' },
+	{ image: inspiration_2, text: 'Moodboard 2 for this Collection' },
 ]
 onMounted(()=>{
 })

src/views/collectionStory/index.vue

@@ -49,6 +49,7 @@ const {} = toRefs(data);
 		<div class="content">
 			<Detail></Detail>
 		</div>
+		<Footer></Footer>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -121,6 +122,18 @@ const {} = toRefs(data);
 				display: flex;
 				flex-direction: column;
 				color: #fff;
+				animation: scroll 3s linear infinite;
+				@keyframes scroll {
+					0% {
+						transform: translateY(0);
+					}
+					50% {
+						transform: translateY(-20%);
+					}
+					100% {
+						transform: translateY(0%);
+					}
+				}
 				> div{
 					font-family: 'KaiseiOpti-Regular';
 					font-weight: 400;
@@ -139,8 +152,8 @@ const {} = toRefs(data);
 		}
 		.content{
 			width: 100%;
-			min-height: 100%;
-			height: 100%;
+			// min-height: 100%;
+			// height: 100%;
 		}
 		
 	}

src/views/main-header.vue

@@ -74,7 +74,7 @@
 
 <style lang="less">
 	#main-header {
-		height: 8rem;
+		height: var(--header-height);
 		display: flex;
 		align-items: center;
 		justify-content: space-between;