Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front

2026-05-27 09:29:48 +08:00
parent d0dc9b2af0 ec4c3bc81f
commit a4441c6107
20 changed files with 617 additions and 418 deletions
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -7,145 +7,152 @@ h1,
 h2,
 h3,
 p {
-  margin: 0;
-  padding: 0;
+	margin: 0;
+	padding: 0;
 }
 * {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 html,
 body,
 #app {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  font-family: 'KaiseiOpti-Medium';
-  color: #232323;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	font-family: 'KaiseiOpti-Medium';
+	color: #232323;
 }
@keyframes loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
 }
@keyframes opacity-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
@keyframes z-index-10to-1 {
-  0% {
-    z-index: 10;
-  }
-  100% {
-    z-index: -1;
-  }
+	0% {
+		z-index: 10;
+	}
+	100% {
+		z-index: -1;
+	}
 }
 .flex {
-  display: flex;
+	display: flex;
 }
 .flex-center {
-  justify-content: center;
-  align-items: center;
+	justify-content: center;
+	align-items: center;
 }
 .flex-1 {
-  flex: 1;
+	flex: 1;
 }
 .flex-col {
-  flex-direction: column;
+	flex-direction: column;
 }
 .align-center {
-  align-items: center;
+	align-items: center;
 }
 .space-between {
-  justify-content: space-between;
+	justify-content: space-between;
 }
 .justify-center {
-  justify-content: center;
+	justify-content: center;
 }
 .relative {
-  position: relative;
+	position: relative;
 }
 .el-overlay {
-  --el-color-primary: #ff7a51;
-  --el-color-primary-light-3: #ffa785;
-  --el-color-primary-light-5: #ffc2aa;
-  --el-color-primary-light-7: #ffddcf;
-  --el-color-primary-light-8: #ffe8df;
-  --el-color-primary-light-9: #fff2ec;
-  --el-color-primary-dark-2: #cc6241;
+	--el-color-primary: #ff7a51;
+	--el-color-primary-light-3: #ffa785;
+	--el-color-primary-light-5: #ffc2aa;
+	--el-color-primary-light-7: #ffddcf;
+	--el-color-primary-light-8: #ffe8df;
+	--el-color-primary-light-9: #fff2ec;
+	--el-color-primary-dark-2: #cc6241;
 }
 .el-select,
 .el-popper {
-  --el-color-primary: #6c6c6c;
-  /* 主灰色 */
-  --el-color-primary-light-3: #8a8a8a;
-  /* 较浅的灰色（混合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%） */
+	--el-color-primary: #6c6c6c;
+	/* 主灰色 */
+	--el-color-primary-light-3: #8a8a8a;
+	/* 较浅的灰色（混合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%） */
 }
 .mini-scrollbar {
-  --mini-scrollbar-width: 0.4rem;
+	--mini-scrollbar-width: 0.4rem;
 }
 .mini-scrollbar::-webkit-scrollbar {
-  width: var(--mini-scrollbar-width);
+	width: var(--mini-scrollbar-width);
 }
 .mini-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 0.4rem;
-  background: rgba(0, 0, 0, 0.2);
+	border-radius: 0.4rem;
+	background: rgba(0, 0, 0, 0.2);
 }
 .mosaic-bg {
-  --mosaic-bg-size: 1rem;
-  --mosaic-bg-color1: #efefef;
-  --mosaic-bg-color2: #fff;
-  background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
-  background-repeat: repeat;
-  background-position: 50% 50%;
-  background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
+	--mosaic-bg-size: 1rem;
+	--mosaic-bg-color1: #efefef;
+	--mosaic-bg-color2: #fff;
+	background-image: repeating-conic-gradient(
+		var(--mosaic-bg-color1) 0% 25%,
+		var(--mosaic-bg-color2) 0% 50%
+	);
+	background-repeat: repeat;
+	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;
-  font-family: KaiseiOpti-Bold;
-  font-size: var(--button-font-size, 2rem);
-  color: var(--button-color, #232323);
-  background: var(--button-bgcolor, #fff);
-  border: var(--button-border, none);
-  cursor: pointer;
+button[custom='white'] {
+	min-width: 19.4rem;
+	height: 5rem;
+	padding: 0 1rem;
+	border-radius: 0;
+	font-family: KaiseiOpti-Bold;
+	font-size: var(--button-font-size, 2rem);
+	color: var(--button-color, #232323);
+	background: var(--button-bgcolor, #fff);
+	border: var(--button-border, none);
+	cursor: pointer;
 }
 button[custom]:active,
-button[custom="white"]:active {
-  background: var(--button-click-bgcolor, #e4e4e4);
-  color: var(--button-click-color, #232323);
+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;
+button[custom='black'] {
+	--button-bgcolor: #232323;
+	--button-color: #fff;
+	--button-click-bgcolor: #333;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
 }
-button[custom="black-box"] {
-  --button-bgcolor: transparent;
-  --button-color: #232323;
-  --button-border: 0.2rem solid #979797;
-  --button-click-bgcolor: #979797;
-  --button-click-color: #fff;
-  --button-font-size: 1.6rem;
+button[custom='black-box'] {
+	--button-bgcolor: transparent;
+	--button-color: #232323;
+	--button-border: 0.2rem solid #979797;
+	--button-click-bgcolor: #979797;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
+}
+
+.el-select-dropdown .el-select-dropdown__item {
+	padding: 0 2rem;
 }
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -2,11 +2,11 @@
 	<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>{{ $t('footer.About') }}</div>
+				<div>{{ $t('footer.PrivacyPolicy') }}</div>
+				<div>{{ $t('footer.TermsOfUse') }}</div>
+				<div>{{ $t('footer.Disclaimer') }}</div>	
+				<div>{{ $t('footer.SiteMap') }}</div>
 			</div>
 			<div class="right">
 				<img src="@/assets/images/icons/xiaohongshu.png" />
--- a/src/components/checked.vue
+++ b/src/components/checked.vue
@@ -58,7 +58,7 @@ const {} = toRefs(data);
 			v-model="checkAll"
 			@change="handleCheckAllChange"
 		>
-			All
+			{{ $t('checked.All') }}
 		</el-checkbox>
 	</div>
 	<el-checkbox-group v-model="checkList" @change="handleChange">
--- a/src/directives/avatarLoad.js
+++ b/src/directives/avatarLoad.js
@@ -2,7 +2,7 @@
 import avatar from '@/assets/images/avatar.png'
 export default {
 	name: 'avatarLoad',
-	mmounted(el, binding) {
+	mounted(el, binding) {
 		loadImage(el, binding.value)
 	},
 	updated(el, binding) {
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -142,7 +142,6 @@ export default {
 		sort: {
 			label: 'Sort by',
 			placeholder: 'Select',
-			default: 'Default',
 			dateAdded: 'Date Added',
 			selectedFirst: 'Selected First'
 		},
@@ -194,5 +193,62 @@ export default {
 		bottoms: 'Bottoms',
 		outwear: 'Outwear',
 		others: 'Others'
+	},
+	collectionStory: {
+		back: 'Back to Home',
+		title: 'We’re Seeking',
+		description: 'Fashion Voice Worth Featuring.',
+		button: 'Contact Us if Interested',
+		joinUs: {
+			title: 'Join Our Designer Community',
+			info: 'Join our community of visionaries and publish your collection story.',
+			info2: 'We are currently seeking collections that deeply integrate the AiDA creative workflow, specifically those that resonate through powerful core concepts and evocative inspiration. ',
+			info3: 'This architecture is designed to elevate your exposure through profound "propositional expression," ensuring that soulful, story-driven designs achieve higher market premiums and superior sales conversion.'
+		}
+	},
+	footer:{
+		About: 'About',
+		PrivacyPolicy: 'Privacy Policy',
+		TermsOfUse: 'Terms of Use',
+		Disclaimer: 'Disclaimer',
+		SiteMap: 'Site Map',
+	},
+	brand:{
+		title: 'Brand',
+		description: "Every brand, every story — discover who's behind the collections.",
+		search: 'Search brand',
+		noFound: 'Brand No Found',
+		noFoundTip: 'Try using another keywords.',
+		searchHistory: 'Searching History',
+		brandItem:{
+			viewProfile: 'View Profile',
+		}
+	},
+	brandDetail:{
+		addShoppingTip: 'Please log in first.',
+		merchantInfo: {
+			Contact: 'Contact',
+			About: 'About',
+		},
+		All: 'All',
+	},
+	digitalItem:{
+		BestSelling: 'Best Selling',
+		Price: 'Price: Low to High',
+		NewestFirst: 'Newest First',
+		title: 'Digital Item',
+		info: 'Virtual fashion creations collected in your personal archive',
+		sortBy: 'Sort By',
+		noData: 'Nothing in Digital Item',
+		noDataTip: 'Try adjusting your filters or refreshing the page.',
+		MerchantInfo: {
+			Filters: 'Filters',
+			Clear: 'Clear',
+			Categories: 'Categories',
+			Gender: 'Gender',
+		}
+	},
+	checked: {
+		All: 'All',
 	}
-}
+}
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -142,7 +142,6 @@ export default {
 		sort: {
 			label: '排序',
 			placeholder: '请选择',
-			default: '默认',
 			dateAdded: '添加日期',
 			selectedFirst: '已选优先'
 		},
@@ -194,5 +193,62 @@ export default {
 		bottoms: '下装',
 		outwear: '外套',
 		others: '其他'
+	},
+	collectionStory: {
+		back: '返回首页',
+		title: "我们在寻找",
+		description: "值得被听见的时尚之声",
+		button: "如有兴趣，请联系我们",
+		joinUs: {
+			title: '加入我们的设计师社区，',
+			info: "加入我们的远见者社区，发表你的系列故事。",
+			info2: "我们目前正在寻找深度整合 AiDA 创意工作流程的系列作品，特别是那些通过强大的核心理念和富有感染力的灵感而产生共鸣的作品。",
+			info3: "这一架构旨在通过深刻的‘命题式表达’提升你的曝光度，确保那些有灵魂、由故事驱动的设计能获得更高的市场溢价和卓越的销售转化率。"
+		}
+	},
+	footer:{
+		About: '关于我们',
+		PrivacyPolicy: '隐私政策',
+		TermsOfUse: '条款与条件',
+		Disclaimer: '免责声明',
+		SiteMap: '地图',
+	},
+	brand:{
+		title: "品牌",
+		description: "每一个品牌，每一个故事 — 发现系列作品背后的缔造者。",
+		search: "搜索品牌",
+		noFound: "未找到品牌",
+		noFoundTip: "请尝试使用其他关键词。",
+		searchHistory: "搜索历史",
+		brandItem: {
+			viewProfile: "查看简介"
+		}
+	},
+	brandDetail:{
+		addShoppingTip: "请先登录。",
+		merchantInfo: {
+			Contact: "联系方式",
+			About: "关于我们"
+		},
+		All: "全部"
+	},
+	digitalItem: {
+		BestSelling: "畅销优先",
+		Price: "价格：从低到高",
+		NewestFirst: "最新优先",
+		title: "数字藏品",
+		info: "收藏于个人档案中的虚拟时装作品",
+		sortBy: "排序方式",
+		noData: "暂无数字藏品",
+		noDataTip: "请尝试调整筛选条件或刷新页面。",
+		MerchantInfo: {
+			Filters: "筛选",
+			Clear: "清空",
+			Categories: "分类",
+			Gender: "适用性别"
+		}
+	},
+	checked: {
+		All: "全部"
 	}
 }
--- a/src/views/brand/brand-item.vue
+++ b/src/views/brand/brand-item.vue
@@ -33,7 +33,7 @@ const {} = toRefs(data);
 					{{ item.ownerName }} | 
 					{{ item?.listingTotal || 0 }} Collections
 				</div>
-				<div class="view-profile" @click="viewProfile(item)">View Profile</div>
+				<div class="view-profile" @click="viewProfile(item)">{{ $t('brand.brandItem.viewProfile') }}</div>
 			</div>
 		</div>
 		<div class="right">
--- a/src/views/brand/index.vue
+++ b/src/views/brand/index.vue
@@ -29,11 +29,11 @@ const searchHistory = ref([

 let changeSearchBrandTime = null
 const changeSearchBrand = () => {
+	merchantList.value = []
 	clearTimeout(changeSearchBrandTime)
 	getDesignerList({
 		keyword: searchBrand.value,
 	}).then((res)=>{
-		merchantList.value = []
 		merchantList.value.push(...res)
 	})
 	// changeSearchBrandTime = setTimeout(()=>{
@@ -103,6 +103,11 @@ const viewProfile = (item) => {
 	})
 }

+const setSearchHistory = (item) => {
+	searchBrand.value = item
+	changeSearchBrand()
+}
+
 onMounted(()=>{
 	const value = localStorage.getItem('brandSearchHistory');
 	if(value)searchHistory.value = JSON.parse(value)
@@ -113,23 +118,23 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<div class="brand">
+		<div class="brand">
 		<div class="header-img" :class="{'active': searchBrand.length > 0}">
 			<img src="@/assets/images/brand/brandBg.png" alt="">
 			<div class="text-box">
-				<div class="title">Brand</div>
-				<span>Every brand, every story — discover who's behind the collections.</span>
+				<div class="title">{{ $t('brand.title') }}</div>
+				<span>{{ $t('brand.description') }}</span>
 			</div>
 		</div>
 		<div class="content">
 			<div class="input">
-				<input type="text" v-model="searchBrand" @input="changeSearchBrand" placeholder="Search brand">
+				<input type="text" v-model="searchBrand" @input="changeSearchBrand" :placeholder="$t('brand.search')">
 				<div class="icon">
 					<SvgIcon name="brand-search" size="32" />
 				</div>
 			</div>
 			<div class="merchantList" v-if="searchBrand.length > 0">
-				<brand-item v-for="item in merchantList" :key="item.name" :item="item" @viewProfile="viewProfile"></brand-item>
+				<brand-item v-for="item in merchantList" :key="item.sellerId" :item="item" @viewProfile="viewProfile"></brand-item>
 				<div class="end" v-show="!getMerchantData.isNoData && !getMerchantData.isShowMark">- The End-</div>
 				<!-- <div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
 					<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span>
@@ -140,8 +145,8 @@ const {} = toRefs(data);
 					<sc-list-null 
 						nullImage="brand"
 						:showButton="false" 
-						title="Brand No Found"
-						tip="Try using another keywords."
+						:title="$t('brand.noFound')"
+						:tip="$t('brand.noFoundTip')"
 					/>
 				</div>
 			</div>
@@ -150,10 +155,10 @@ const {} = toRefs(data);
 					<div class="icon">
 						<SvgIcon name="brand-time" size="20" />
 					</div>
-					<span>Searching History</span>
+					<span>{{ $t('brand.searchHistory') }}</span>
 				</div>
 				<div class="history">
-					<div v-for="item in searchHistory" :key="item" @click.stop="searchBrand = item" class="item">
+					<div v-for="item in searchHistory" :key="item" @click.stop="setSearchHistory(item)" class="item">
 						<span>{{item}}</span>
 						<div class="icon" @click.stop="deleteHistory(item)">
 							<SvgIcon name="brand-delete" size="18" />
@@ -287,7 +292,7 @@ const {} = toRefs(data);
 				.end{
 					font-family: 'KaiseiOpti-Regular';
 					font-weight: 400;
-					font-size: 12px;
+					font-size: 1.2rem;
 					line-height: 140%;
 					height: 7rem;
 					display: flex;
--- a/src/views/brandDetail/commodity-list.vue
+++ b/src/views/brandDetail/commodity-list.vue
@@ -73,9 +73,9 @@ defineExpose({})
 				Items
 			</div>
 			<div class="menu">
-				<div :class="{'active': type === 'all'}" @click="setType('all')">All</div>
-				<div :class="{'active': type === 'male'}" @click="setType('male')">Male</div>
-				<div :class="{'active': type === 'female'}" @click="setType('female')">Female</div>	
+				<div :class="{'active': type === 'all'}" @click="setType('all')">{{ $t('brandDetail.All') }}</div>
+				<div :class="{'active': type === 'male'}" @click="setType('male')">{{ $t('Wardrobe.assets.genders.male') }}</div>
+				<div :class="{'active': type === 'female'}" @click="setType('female')">{{ $t('Wardrobe.assets.genders.female') }}</div>	
 			</div>
 		</div>
 		<div class="list">
--- a/src/views/brandDetail/index.vue
+++ b/src/views/brandDetail/index.vue
@@ -8,6 +8,7 @@ import { ElMessage } from 'element-plus'
 import { getDesignerDetail } from '@/api/brand'
 import { AddShoppingCart } from '@/api/shoppingCart'
 import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'
+import { useI18n } from 'vue-i18n'

 //const props = defineProps({
 //})
@@ -15,6 +16,7 @@ import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'
 //])
 const router = useRouter()
 const route = useRoute()
+const { t, locale } = useI18n()

 const designerDetail = ref({
 	avatar: '',
@@ -28,7 +30,7 @@ const designerDetail = ref({
 })

 const addShopping = (item) => {
-	if(!item.price) return ElMessage.warning('Please log in first.')
+	if(!item.price) return ElMessage.warning(t('brandDetail.addShoppingTip'))
 	AddShoppingCart({listingIds:[item.id]}).then((res)=>{
 		item.shopName = designerDetail.value.shopName
 		myEvent.emit('addShopping', item)
--- a/src/views/brandDetail/merchant-info.vue
+++ b/src/views/brandDetail/merchant-info.vue
@@ -39,7 +39,7 @@ const {} = toRefs(data);
 				<div class="title">{{ designerDetail.shopName }}</div>
 			</div>
 			<div class="contact">
-				<div class="title">Contact</div>
+				<div class="title">{{ $t('brandDetail.merchantInfo.Contact') }}</div>
 				<div class="email label">
 					<div class="icon">
 						<svg-icon name="brand-email" size="24" />
@@ -60,7 +60,7 @@ const {} = toRefs(data);
 				</div>
 			</div>
 			<div class="about">
-				<div class="title">About</div>
+				<div class="title">{{ $t('brandDetail.merchantInfo.About') }}</div>
 				<div class="content">
 					{{ designerDetail.description }}
 				</div>
--- a/src/views/collectionStory/detail/join-us.vue
+++ b/src/views/collectionStory/detail/join-us.vue
@@ -15,17 +15,17 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="joinUs">
-		<div class="title">Join Our Designer Community</div>
+		<div class="title">{{ $t('collectionStory.joinUs.title') }}</div>
 		<div class="info">
 			<div>
-				Join our community of visionaries and publish your collection story.
+				{{ $t('collectionStory.joinUs.info') }}
 			</div>
 			<div>
-				We are currently seeking collections that deeply integrate the AiDA creative workflow, specifically those that resonate through powerful core concepts and evocative inspiration. 
+				{{ $t('collectionStory.joinUs.info2') }}
 			</div>
 			<br />
 			<div>
-				This architecture is designed to elevate your exposure through profound "propositional expression," ensuring that soulful, story-driven designs achieve higher market premiums and superior sales conversion.
+				{{ $t('collectionStory.joinUs.info3') }}
 			</div>
 		</div>
 	</div>
--- a/src/views/collectionStory/index.vue
+++ b/src/views/collectionStory/index.vue
@@ -24,19 +24,21 @@ const {} = toRefs(data);
 			<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 class="text">{{ $t('collectionStory.back') }}</div>	
 			</div>
 			<div class="title-content">
 				<div class="title-box">
 					<div class="title">
-						We’re Seeking 
+						 {{ $t('collectionStory.title') }}
 					</div>
 					<div class="info">
-						Fashion Voice Worth Featuring.
+						 {{ $t('collectionStory.description') }}
 					</div>
 				</div>
 				<div class="button">
-					<a href="mailto:info@code-create.com.hk">Contact Us if Interested</a>
+					<a href="mailto:info@code-create.com.hk">
+						 {{ $t('collectionStory.button') }}
+					</a>
 				</div>
 			</div>
 		</div>
--- a/src/views/digitalDetail/index.vue
+++ b/src/views/digitalDetail/index.vue
@@ -222,7 +222,7 @@ defineExpose({})
 				> .left{
 					border-right: 0.5px solid #C4C4C4;
 					.imgBox{
-						padding: 0 30px;
+						padding: 0 3rem;
 					}
 				}
 				> .right{
--- a/src/views/digitalItem/index.vue
+++ b/src/views/digitalItem/index.vue
@@ -4,7 +4,7 @@ import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
 import { useRouter } from "vue-router";
 import scListNull from '@/views/shoppingCart/sc-list-null.vue'
-import { getListingMallListApi } from '@/api/listing'
+import { useI18n } from 'vue-i18n'	

 // 定义组件名称
 defineOptions({
@@ -14,6 +14,7 @@ defineOptions({
 //})
 //const emit = defineEmits([
 //])
+const { t } = useI18n()
 const categories = ref(['all'])
 const gender = ref(['all'])
 const digitalItemRef = ref(null)
@@ -24,13 +25,13 @@ const commodityListRef = ref(null)
 const searechTypeList = ref([
 	{
 		value:'salesVolume',
-		label:'Best Selling'
+		label:t('digitalItem.BestSelling')
 	},{
 		value:'price',
-		label:'Price: Low to High'
+		label:t('digitalItem.Price')
 	},{
 		value:'updateTime',
-		label:'Newest First'
+		label:t('digitalItem.NewestFirst')
 	},
 ])

@@ -64,15 +65,15 @@ defineExpose({})
 		<div class="header-img">
 			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
 			<div class="text">
-				<div class="title">Digital Item</div>
-				<p class="info">Virtual fashion creations collected in your personal archive</p>
+				<div class="title">{{ $t('digitalItem.title') }}</div>
+				<p class="info">{{ $t('digitalItem.info') }}</p>
 			</div>
 		</div>
 		<div class="filters">
 			<div class="filter-item">
-				<el-select v-model="searechType" @change="updateSort" placeholder="Sort By" :teleported="false">
+				<el-select v-model="searechType" @change="updateSort" :placeholder="$t('digitalItem.sortBy')" :teleported="false">
 					<template #label="{ label }">
-						<span class="header-label">Sort By</span>
+						<span class="header-label">{{ $t('digitalItem.sortBy') }}</span>
 						<span class="header-value">{{ label }}</span>
 					</template>
 					<el-option
@@ -103,8 +104,8 @@ defineExpose({})
 					<sc-list-null 
 						nullImage="shopping-cart"
 						:showButton="false" 
-						title="Nothing in Digital Item"
-						tip="Try adjusting your filters or refreshing the page."
+						:title="$t('digitalItem.noData')"
+						:tip="$t('digitalItem.noDataTip')"
 					/>
 				</div>
 				
--- a/src/views/digitalItem/merchant-info.vue
+++ b/src/views/digitalItem/merchant-info.vue
@@ -36,15 +36,15 @@ defineExpose({})
 <template>
 	<div class="filters">
 		<div class="title">
-			<div class="left">Filters</div>
-			<div class="right" @click="clearFilters">Clear</div>
+			<div class="left">{{ $t('digitalItem.MerchantInfo.Filters') }}</div>
+			<div class="right" @click="clearFilters">{{ $t('digitalItem.MerchantInfo.Clear') }}</div>
 		</div>
-		<div class="categories">Categories</div>
+		<div class="categories">{{ $t('digitalItem.MerchantInfo.Categories') }}</div>
 		<div class="line"></div>
 		<div class="multiple">
 			<checked :list="categoriesList" @change="handleChange" v-model:selected="categories" />
 		</div>
-		<div class="categories">Gender</div>
+		<div class="categories">{{ $t('digitalItem.MerchantInfo.Gender') }}</div>	
 		<div class="line"></div>
 		<div class="multiple">
 			<checked :list="genderList" @change="handleChange" v-model:selected="gender" />
--- a/src/views/wardrobe/Assets.vue
+++ b/src/views/wardrobe/Assets.vue
@@ -14,7 +14,7 @@
 			<div class="assets-toolbar">
 				<div class="assets-toolbar__selection">
 					<div class="select-count flex align-center">
-						<img src="@/assets/images/wardrobe/select.png" />
+						<img loading="lazy" src="@/assets/images/wardrobe/select.png" />
 						<span class="assets-toolbar__count">
 							{{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }}
 						</span>
@@ -38,7 +38,12 @@
 					</div>
 				</div>
 			</div>
-			<div ref="assetsScrollRef" v-if="dataList.length" class="data-list-container" @scroll.passive="handleAssetsScroll">
+			<div
+				ref="assetsScrollRef"
+				v-if="dataList.length"
+				class="data-list-container"
+				@scroll.passive="handleAssetsScroll"
+			>
 				<div ref="dataListRef" class="data-list">
 					<div
 						v-for="(item, index) in dataList"
@@ -67,7 +72,7 @@
 				</div>
 			</div>

-			<Empty v-else @explore="goToDigitalItems" />
+			<Empty v-else />
 		</section>
 	</div>
 </template>
@@ -92,6 +97,14 @@

 	import { debounce } from 'lodash-es'

+	interface Props {
+		sortType?: number
+	}
+
+	const props = withDefaults(defineProps<Props>(), {
+		sortType: 1
+	})
+
 	const buyerId = useUserInfoStore().state.userInfo?.userId

 	interface FilterOption {
@@ -126,6 +139,7 @@
 	)

 	const dataList = ref([])
+	const rawDataList = ref([]) // Store the original API data
 	const dataListRef = ref<HTMLDivElement | null>(null)
 	const assetsScrollRef = ref<HTMLDivElement | null>(null)
 	const gridColumnCount = shallowRef(1)
@@ -169,15 +183,18 @@

 			const content = res.content ?? []
 			if (pageParams.page === 1) {
-				dataList.value = content
+				rawDataList.value = content
 			} else {
-				dataList.value = [...dataList.value, ...content]
+				rawDataList.value = [...rawDataList.value, ...content]
 			}

 			hasMoreAssets.value = content.length >= pageParams.size
 			if (hasMoreAssets.value) {
 				pageParams.page += 1
 			}
+
+			// Apply sorting after fetching data
+			applySorting()
 		} finally {
 			if (requestId === assetsRequestId.value) {
 				isLoadingAssets.value = false
@@ -185,6 +202,29 @@
 		}
 	}

+	// Function to apply sorting based on sortType
+	const applySorting = () => {
+		if (props.sortType === 1) {
+			// Date Added - use original API order
+			dataList.value = [...rawDataList.value]
+		} else if (props.sortType === 2) {
+			// Selected First - sort by checked status
+			dataList.value = [...rawDataList.value].sort((a, b) => {
+				if (a.checked && !b.checked) return -1
+				if (!a.checked && b.checked) return 1
+				return 0
+			})
+		}
+	}
+
+	// Watch for sortType changes
+	watch(
+		() => props.sortType,
+		() => {
+			applySorting()
+		}
+	)
+
 	watch(
 		() => filters,
 		debounce(() => {
@@ -264,12 +304,20 @@

 	const handleSelectItem = (item) => {
 		item.checked = !item.checked
+		// Re-apply sorting when selection changes and sortType is "Selected First"
+		if (props.sortType === 2) {
+			applySorting()
+		}
 	}

 	const handleSelectAll = (flag) => {
 		dataList.value.forEach((item) => {
 			item.checked = flag
 		})
+		// Re-apply sorting when selection changes and sortType is "Selected First"
+		if (props.sortType === 2) {
+			applySorting()
+		}
 	}

 	const handleDownloadSelected = () => {
@@ -306,10 +354,6 @@
 		return (index + 1) % gridColumnCount.value === 0
 	}

-	const goToDigitalItems = () => {
-		router.push('/digitalItem')
-	}
-
 	watch(
 		() => dataList.value.length,
 		async (len) => {
--- a/src/views/wardrobe/Empty.vue
+++ b/src/views/wardrobe/Empty.vue
@@ -1,60 +1,66 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+	import { useI18n } from 'vue-i18n'
+	import { useRouter } from 'vue-router'

-const { t } = useI18n({ useScope: 'global' })
+	const { t } = useI18n({ useScope: 'global' })
+	const router = useRouter()

-const emit = defineEmits<{
-  (event: 'explore'): void
-}>()
+	const handleExplore = () => {
+		router.push('/digitalItem')
+	}
 </script>

 <template>
-  <div class="wardrobe-empty flex flex-col flex-center">
-    <img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" />
+	<div class="wardrobe-empty flex flex-col flex-center">
+		<img
+			src="@/assets/images/wardrobe/empty-wardrobe.png"
+			class="wardrobe-empty__image"
+			alt=""
+		/>

-    <h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
-    <p class="wardrobe-empty__description">
-      {{ t('Wardrobe.empty.description') }}
-    </p>
-    <button class="wardrobe-empty__button" type="button" @click="emit('explore')">
-      {{ t('Wardrobe.empty.action') }}
-    </button>
-  </div>
+		<h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
+		<p class="wardrobe-empty__description">
+			{{ t('Wardrobe.empty.description') }}
+		</p>
+		<button class="wardrobe-empty__button" type="button" @click="handleExplore">
+			{{ t('Wardrobe.empty.action') }}
+		</button>
+	</div>
 </template>

 <style lang="less" scoped>
-.wardrobe-empty {
-  flex: 1;
-  color: #979797;
+	.wardrobe-empty {
+		flex: 1;
+		color: #979797;

-  > .wardrobe-empty__image {
-    width: 14.2rem;
-    height: 18.8rem;
-  }
+		> .wardrobe-empty__image {
+			width: 14.2rem;
+			height: 18.8rem;
+		}

-  > .wardrobe-empty__title {
-    font-family: 'KaiseiOpti-Bold';
-    font-size: 1.6rem;
-    margin: 2.4rem 0 0.8rem;
-  }
+		> .wardrobe-empty__title {
+			font-family: 'KaiseiOpti-Bold';
+			font-size: 1.6rem;
+			margin: 2.4rem 0 0.8rem;
+		}

-  > .wardrobe-empty__description {
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.4rem;
-  }
+		> .wardrobe-empty__description {
+			font-family: 'KaiseiOpti-Regular';
+			font-size: 1.4rem;
+		}

-  > .wardrobe-empty__button {
-    margin-top: 3rem;
-    height: 4.4rem;
-    line-height: 4.4rem;
-    padding: 0 3.8rem;
-    border: 0.1rem solid #c4c4c4;
-    background: #ffffff;
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.6rem;
-    text-transform: uppercase;
-    color: #585858;
-    cursor: pointer;
-  }
-}
+		> .wardrobe-empty__button {
+			margin-top: 3rem;
+			height: 4.4rem;
+			line-height: 4.4rem;
+			padding: 0 3.8rem;
+			border: 0.1rem solid #c4c4c4;
+			background: #ffffff;
+			font-family: 'KaiseiOpti-Regular';
+			font-size: 1.6rem;
+			text-transform: uppercase;
+			color: #585858;
+			cursor: pointer;
+		}
+	}
 </style>
--- a/src/views/wardrobe/Orders.vue
+++ b/src/views/wardrobe/Orders.vue
@@ -13,7 +13,7 @@
 			</button>
 		</div>

-		<div class="orders-list">
+		<div class="orders-list" v-if="filteredOrders.length">
 			<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
 				<button
 					class="order-card__toggle"
@@ -27,7 +27,9 @@
 					<div class="order-card__meta">
 						<h3 class="order-card__id">{{ order.orderId }}</h3>
 						<div class="brand flex align-center">
-							<span class="icon"><svg-icon name="order-shop" size="24" /></span>
+							<span class="icon">
+								<svg-icon name="order-shop" size="24" />
+							</span>
 							<span class="text">{{ order.shopName }}</span>
 						</div>
 						<p class="order-card__date">{{ order.formatUpdatetime }}</p>
@@ -39,7 +41,7 @@
 							:key="item.id"
 							class="order-card__thumb"
 							:style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
-						></span>
+						/>
 						<span v-if="getExtraCount(order)" class="order-card__extra">
 							{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
 						</span>
@@ -83,6 +85,7 @@
 				</div>
 			</article>
 		</div>
+		<Empty v-else />
 	</div>
 </template>

@@ -91,6 +94,7 @@
 	import { useI18n } from 'vue-i18n'
 	import { fetchMyOrders } from '@/api/user'
 	import ScItem from '@/views/shoppingCart/sc-item.vue'
+	import Empty from './Empty.vue'

 	type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
 	type ActualOrderStatus = Exclude<OrderStatus, 'all'>
@@ -192,21 +196,21 @@
 		const dateLocale = isChinese ? 'zh-CN' : 'en-US'
 		const options: Intl.DateTimeFormatOptions = isChinese
 			? {
-				year: 'numeric',
-				month: 'long',
-				day: 'numeric',
-				hour: '2-digit',
-				minute: '2-digit',
-				hour12: false
-			}
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric',
+					hour: '2-digit',
+					minute: '2-digit',
+					hour12: false
+			  }
 			: {
-				month: 'short',
-				day: 'numeric',
-				year: 'numeric',
-				hour: 'numeric',
-				minute: '2-digit',
-				hour12: true
-			}
+					month: 'short',
+					day: 'numeric',
+					year: 'numeric',
+					hour: 'numeric',
+					minute: '2-digit',
+					hour12: true
+			  }

 		return new Intl.DateTimeFormat(dateLocale, options).format(date)
 	}
@@ -232,7 +236,9 @@
 				page: orderParams.value.page,
 				size: orderParams.value.size
 			}
-			const currentStatus = statusOptions.value.find((option) => option.key === activeStatus.value)
+			const currentStatus = statusOptions.value.find(
+				(option) => option.key === activeStatus.value
+			)

 			if (currentStatus?.value !== undefined) {
 				params.status = currentStatus.value
--- a/src/views/wardrobe/index.vue
+++ b/src/views/wardrobe/index.vue
@@ -1,234 +1,248 @@
 <template>
-  <div class="wardrobe-page">
-    <div class="wardrobe-hero flex flex-col flex-center">
-      <div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
-      <div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
-    </div>
+	<div class="wardrobe-page">
+		<div class="wardrobe-hero flex flex-col flex-center">
+			<div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
+			<div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
+		</div>

-    <div class="wardrobe-shell">
-      <div class="wardrobe-tabs">
-        <div class="wardrobe-tabs__nav" role="tablist" :aria-label="t('Wardrobe.tabs.ariaLabel')">
-          <button
-            v-for="tab in tabs"
-            :key="tab.key"
-            class="wardrobe-tabs__item"
-            :class="{ 'is-active': activeTab === tab.key }"
-            type="button"
-            role="tab"
-            :aria-selected="activeTab === tab.key"
-            @click="activeTab = tab.key"
-          >
-            {{ tab.label }}
-          </button>
-        </div>
+		<div class="wardrobe-shell">
+			<div class="wardrobe-tabs">
+				<div
+					class="wardrobe-tabs__nav"
+					role="tablist"
+					:aria-label="t('Wardrobe.tabs.ariaLabel')"
+				>
+					<button
+						v-for="tab in tabs"
+						:key="tab.key"
+						class="wardrobe-tabs__item"
+						:class="{ 'is-active': activeTab === tab.key }"
+						type="button"
+						role="tab"
+						:aria-selected="activeTab === tab.key"
+						@click="activeTab = tab.key"
+					>
+						{{ tab.label }}
+					</button>
+				</div>

-        <div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
-          <div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
-          <el-select v-model="activeSort" :placeholder="t('Wardrobe.sort.placeholder')">
-            <el-option
-              v-for="option in sortOptions"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-            />
-          </el-select>
-        </div>
-      </div>
+				<div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
+					<div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
+					<el-select
+						v-model="activeSort"
+						popper-class="wardrobe-sort-dropdown"
+						:placeholder="t('Wardrobe.sort.placeholder')"
+					>
+						<el-option
+							v-for="option in sortOptions"
+							:key="option.value"
+							:label="option.label"
+							:value="option.value"
+						/>
+					</el-select>
+				</div>
+			</div>

-      <component :is="activePanel" class="wardrobe-shell__panel" />
-    </div>
-    <Footer />
-  </div>
+			<component :is="activePanel" class="wardrobe-shell__panel" :sort-type="activeSort" />
+		</div>
+		<Footer />
+	</div>
 </template>
 <script setup lang="ts">
-import { computed, shallowRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-import Assets from './Assets.vue'
-import Orders from './Orders.vue'
+	import { computed, shallowRef } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import Assets from './Assets.vue'
+	import Orders from './Orders.vue'

-type WardrobeTab = 'assets' | 'orders'
+	type WardrobeTab = 'assets' | 'orders'

-interface TabItem {
-  key: WardrobeTab
-  label: string
-}
+	interface TabItem {
+		key: WardrobeTab
+		label: string
+	}

-interface SortOption {
-  label: string
-  value: number
-}
+	interface SortOption {
+		label: string
+		value: number
+	}

-const { t } = useI18n({ useScope: 'global' })
+	const { t } = useI18n({ useScope: 'global' })

-const tabs = computed<TabItem[]>(() => [
-  {
-    key: 'assets',
-    label: t('Wardrobe.tabs.assets')
-  },
-  {
-    key: 'orders',
-    label: t('Wardrobe.tabs.orders')
-  }
-])
+	const tabs = computed<TabItem[]>(() => [
+		{
+			key: 'assets',
+			label: t('Wardrobe.tabs.assets')
+		},
+		{
+			key: 'orders',
+			label: t('Wardrobe.tabs.orders')
+		}
+	])

-const sortOptions = computed<SortOption[]>(() => [
-  {
-    label: t('Wardrobe.sort.default'),
-    value: 0
-  },
-  {
-    label: t('Wardrobe.sort.dateAdded'),
-    value: 1
-  },
-  {
-    label: t('Wardrobe.sort.selectedFirst'),
-    value: 2
-  }
-])
+	const sortOptions = computed<SortOption[]>(() => [
+		{
+			label: t('Wardrobe.sort.dateAdded'),
+			value: 1
+		},
+		{
+			label: t('Wardrobe.sort.selectedFirst'),
+			value: 2
+		}
+	])

-const activeTab = shallowRef<WardrobeTab>('assets')
-const activeSort = shallowRef(1)
+	const activeTab = shallowRef<WardrobeTab>('assets')
+	const activeSort = shallowRef(1)

-const activePanel = computed(() => {
-  return activeTab.value === 'assets' ? Assets : Orders
-})
+	const activePanel = computed(() => {
+		return activeTab.value === 'assets' ? Assets : Orders
+	})
 </script>

 <style lang="less" scoped>
-.wardrobe-page {
-  --wardrobe-border-color: #d9d4cd;
-  --wardrobe-text-main: #232323;
-  --wardrobe-text-secondary: #7a746d;
-  --wardrobe-surface: #fffdf8;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #ffffff;
-  overflow: hidden;
+	.wardrobe-page {
+		--wardrobe-border-color: #d9d4cd;
+		--wardrobe-text-main: #232323;
+		--wardrobe-text-secondary: #7a746d;
+		--wardrobe-surface: #fffdf8;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background: #ffffff;
+		overflow: hidden;

-  .wardrobe-hero {
-    height: 14.8rem;
-    // background-color: #f5f5f5;
-    background: url('@/assets/images/background.png') no-repeat;
-    background-size: cover;
-    position: relative;
-    // &::before {
-    //   position: absolute;
-    //   top: 0;
-    //   right: 0;
-    //   bottom: 0;
-    //   left: 0;
-    //   background-color: rgba(0, 0, 0, 0.2);
-    // }
-    .wardrobe-hero__title {
-      margin: 0;
-      font-family: 'KaiseiOpti-Bold';
-      font-size: 4rem;
-      color: #232323;
-      line-height: 3.6rem;
-    }
+		.wardrobe-hero {
+			height: 14.8rem;
+			// background-color: #f5f5f5;
+			background: url('@/assets/images/background.png') no-repeat;
+			background-size: cover;
+			position: relative;
+			// &::before {
+			//   position: absolute;
+			//   top: 0;
+			//   right: 0;
+			//   bottom: 0;
+			//   left: 0;
+			//   background-color: rgba(0, 0, 0, 0.2);
+			// }
+			.wardrobe-hero__title {
+				margin: 0;
+				font-family: 'KaiseiOpti-Bold';
+				font-size: 4rem;
+				color: #232323;
+				line-height: 3.6rem;
+			}

-    .wardrobe-hero__subtitle {
-      margin-top: 1rem;
-      font-family: 'KaiseiOpti-Regular';
-      font-size: 1.4rem;
-      line-height: 2.4rem;
-      color: #585858;
-    }
-  }
+			.wardrobe-hero__subtitle {
+				margin-top: 1rem;
+				font-family: 'KaiseiOpti-Regular';
+				font-size: 1.4rem;
+				line-height: 2.4rem;
+				color: #585858;
+			}
+		}

-  > .wardrobe-shell {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+		> .wardrobe-shell {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;

-    > .wardrobe-tabs {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 2rem;
-      padding: 0 9rem;
-      border-bottom: 0.1rem solid var(--wardrobe-border-color);
-      background: #ffffff;
+			> .wardrobe-tabs {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 2rem;
+				padding: 0 9rem;
+				border-bottom: 0.1rem solid var(--wardrobe-border-color);
+				background: #ffffff;

-      > .wardrobe-tabs__nav {
-        display: flex;
-        align-items: center;
+				> .wardrobe-tabs__nav {
+					display: flex;
+					align-items: center;

-        > .wardrobe-tabs__item {
-          position: relative;
-          height: 6rem;
-          padding: 0 1.8rem;
-          border: 0;
-          background: transparent;
-          font-family: 'KaiseiOpti-Regular';
-          font-size: 1.4rem;
-          line-height: 1;
-          color: #7d766f;
-          cursor: pointer;
-          width: 13.9rem;
+					> .wardrobe-tabs__item {
+						position: relative;
+						height: 6rem;
+						padding: 0 1.8rem;
+						border: 0;
+						background: transparent;
+						font-family: 'KaiseiOpti-Regular';
+						font-size: 1.4rem;
+						line-height: 1;
+						color: #7d766f;
+						cursor: pointer;
+						width: 13.9rem;

-          &::after {
-            content: '';
-            position: absolute;
-            left: 1.8rem;
-            right: 1.8rem;
-            bottom: -0.1rem;
-            height: 0.2rem;
-            background: transparent;
-            transition: background-color 0.2s ease;
-          }
+						&::after {
+							content: '';
+							position: absolute;
+							left: 1.8rem;
+							right: 1.8rem;
+							bottom: -0.1rem;
+							height: 0.2rem;
+							background: transparent;
+							transition: background-color 0.2s ease;
+						}

-          &.is-active {
-            font-family: 'KaiseiOpti-Bold';
-            color: var(--wardrobe-text-main);
+						&.is-active {
+							font-family: 'KaiseiOpti-Bold';
+							color: var(--wardrobe-text-main);

-            &::after {
-              background: var(--wardrobe-text-main);
-            }
-          }
-        }
-      }
+							&::after {
+								background: var(--wardrobe-text-main);
+							}
+						}
+					}
+				}

-      > .wardrobe-tabs__sort {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        flex-shrink: 0;
+				> .wardrobe-tabs__sort {
+					display: flex;
+					align-items: center;
+					gap: 1rem;
+					flex-shrink: 0;

-        > .wardrobe-tabs__sort-label {
-          font-family: 'KaiseiOpti-Regular';
-          font-size: 1.4rem;
-          line-height: 2.4rem;
-          color: #7d766f;
-          white-space: nowrap;
-        }
+					> .wardrobe-tabs__sort-label {
+						font-family: 'KaiseiOpti-Regular';
+						font-size: 1.4rem;
+						line-height: 2.4rem;
+						color: #7d766f;
+						white-space: nowrap;
+					}

-        :deep(.el-select) {
-          width: 13rem;
-        }
+					:deep(.el-select) {
+						width: 13rem;
+					}

-        :deep(.el-select__wrapper) {
-          min-height: 3.6rem;
-          padding: 0 1.2rem;
-          background: #ffffff;
-          box-shadow: none;
-        }
+					:deep(.el-select__wrapper) {
+						min-height: 3.6rem;
+						padding: 0 1.2rem;
+						background: #ffffff;
+						box-shadow: none;
+					}

-        :deep(.el-select__selected-item) {
-          font-family: 'KaiseiOpti-Regular';
-          font-size: 1.4rem;
-          color: #232323;
-        }
-      }
-    }
+					:deep(.el-select__selected-item) {
+						font-family: 'KaiseiOpti-Regular';
+						font-size: 1.4rem;
+						color: #232323;
+					}
+				}
+			}

-    > .wardrobe-shell__panel {
-      flex: 1;
-      min-height: 0;
-    }
-  }
-}
+			> .wardrobe-shell__panel {
+				flex: 1;
+				min-height: 0;
+			}
+		}
+	}
+</style>
+
+<style lang="less">
+	.wardrobe-sort-dropdown {
+		.el-select-dropdown__list {
+			.el-select-dropdown__item {
+				padding: 0 2rem;
+			}
+		}
+	}
 </style>