aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
李志鹏
2026-05-27 09:29:48 +08:00
parent d0dc9b2af0 ec4c3bc81f
commit a4441c6107
20 changed files with 617 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/assets/css/style.css
View File

@@ -7,145 +7,152 @@ h1,
h2, h2,
h3, h3,
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html, html,
body, body,
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: 'KaiseiOpti-Medium'; font-family: 'KaiseiOpti-Medium';
color: #232323; color: #232323;
} }
@keyframes loading { @keyframes loading {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes opacity-in { @keyframes opacity-in {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes z-index-10to-1 { @keyframes z-index-10to-1 {
0% { 0% {
z-index: 10; z-index: 10;
} }
100% { 100% {
z-index: -1; z-index: -1;
} }
} }
.flex { .flex {
display: flex; display: flex;
} }
.flex-center { .flex-center {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
} }
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
.align-center { .align-center {
align-items: center; align-items: center;
} }
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
} }
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
.relative { .relative {
position: relative; position: relative;
} }
.el-overlay { .el-overlay {
--el-color-primary: #ff7a51; --el-color-primary: #ff7a51;
--el-color-primary-light-3: #ffa785; --el-color-primary-light-3: #ffa785;
--el-color-primary-light-5: #ffc2aa; --el-color-primary-light-5: #ffc2aa;
--el-color-primary-light-7: #ffddcf; --el-color-primary-light-7: #ffddcf;
--el-color-primary-light-8: #ffe8df; --el-color-primary-light-8: #ffe8df;
--el-color-primary-light-9: #fff2ec; --el-color-primary-light-9: #fff2ec;
--el-color-primary-dark-2: #cc6241; --el-color-primary-dark-2: #cc6241;
} }
.el-select, .el-select,
.el-popper { .el-popper {
--el-color-primary: #6c6c6c; --el-color-primary: #6c6c6c;
/* 主灰色 */ /* 主灰色 */
--el-color-primary-light-3: #8a8a8a; --el-color-primary-light-3: #8a8a8a;
/* 较浅的灰色（混合20%白） */ /* 较浅的灰色（混合20%白） */
--el-color-primary-light-5: #a8a8a8; --el-color-primary-light-5: #a8a8a8;
/* 更浅的灰色（混合33%白） */ /* 更浅的灰色（混合33%白） */
--el-color-primary-light-7: #c6c6c6; --el-color-primary-light-7: #c6c6c6;
/* 浅灰色（混合47%白） */ /* 浅灰色（混合47%白） */
--el-color-primary-light-8: #d4d4d4; --el-color-primary-light-8: #d4d4d4;
/* 很浅的灰色（混合53%白） */ /* 很浅的灰色（混合53%白） */
--el-color-primary-light-9: #e3e3e3; --el-color-primary-light-9: #e3e3e3;
/* 极浅的灰色（混合60%白） */ /* 极浅的灰色（混合60%白） */
--el-color-primary-dark-2: #565656; --el-color-primary-dark-2: #565656;
/* 深灰色（加深20%） */ /* 深灰色（加深20%） */
} }
.mini-scrollbar { .mini-scrollbar {
--mini-scrollbar-width: 0.4rem; --mini-scrollbar-width: 0.4rem;
} }
.mini-scrollbar::-webkit-scrollbar { .mini-scrollbar::-webkit-scrollbar {
width: var(--mini-scrollbar-width); width: var(--mini-scrollbar-width);
} }
.mini-scrollbar::-webkit-scrollbar-thumb { .mini-scrollbar::-webkit-scrollbar-thumb {
border-radius: 0.4rem; border-radius: 0.4rem;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
.mosaic-bg { .mosaic-bg {
--mosaic-bg-size: 1rem; --mosaic-bg-size: 1rem;
--mosaic-bg-color1: #efefef; --mosaic-bg-color1: #efefef;
--mosaic-bg-color2: #fff; --mosaic-bg-color2: #fff;
background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%); background-image: repeating-conic-gradient(
background-repeat: repeat; var(--mosaic-bg-color1) 0% 25%,
background-position: 50% 50%; var(--mosaic-bg-color2) 0% 50%
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); );
background-repeat: repeat;
background-position: 50% 50%;
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
} }
button[custom], button[custom],
button[custom="white"] { button[custom='white'] {
min-width: 19.4rem; min-width: 19.4rem;
height: 5rem; height: 5rem;
padding: 0 1rem; padding: 0 1rem;
border-radius: 0; border-radius: 0;
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
font-size: var(--button-font-size, 2rem); font-size: var(--button-font-size, 2rem);
color: var(--button-color, #232323); color: var(--button-color, #232323);
background: var(--button-bgcolor, #fff); background: var(--button-bgcolor, #fff);
border: var(--button-border, none); border: var(--button-border, none);
cursor: pointer; cursor: pointer;
} }
button[custom]:active, button[custom]:active,
button[custom="white"]:active { button[custom='white']:active {
background: var(--button-click-bgcolor, #e4e4e4); background: var(--button-click-bgcolor, #e4e4e4);
color: var(--button-click-color, #232323); color: var(--button-click-color, #232323);
} }
button[custom="black"] { button[custom='black'] {
--button-bgcolor: #232323; --button-bgcolor: #232323;
--button-color: #fff; --button-color: #fff;
--button-click-bgcolor: #333; --button-click-bgcolor: #333;
--button-click-color: #fff; --button-click-color: #fff;
--button-font-size: 1.6rem; --button-font-size: 1.6rem;
} }
button[custom="black-box"] { button[custom='black-box'] {
--button-bgcolor: transparent; --button-bgcolor: transparent;
--button-color: #232323; --button-color: #232323;
--button-border: 0.2rem solid #979797; --button-border: 0.2rem solid #979797;
--button-click-bgcolor: #979797; --button-click-bgcolor: #979797;
--button-click-color: #fff; --button-click-color: #fff;
--button-font-size: 1.6rem; --button-font-size: 1.6rem;
}
.el-select-dropdown .el-select-dropdown__item {
padding: 0 2rem;
} }

10
src/components/Footer.vue
View File

@@ -2,11 +2,11 @@
<section class="section-footer"> <section class="section-footer">
<div class="footer"> <div class="footer">
<div class="left"> <div class="left">
<div>About</div> <div>{{ $t('footer.About') }}</div>
<div>Privacy Policy</div> <div>{{ $t('footer.PrivacyPolicy') }}</div>
<div>Terms of Use</div> <div>{{ $t('footer.TermsOfUse') }}</div>
<div>Disclaimer</div> <div>{{ $t('footer.Disclaimer') }}</div>
<div>Site Map</div> <div>{{ $t('footer.SiteMap') }}</div>
</div> </div>
<div class="right"> <div class="right">
<img src="@/assets/images/icons/xiaohongshu.png" /> <img src="@/assets/images/icons/xiaohongshu.png" />

2
src/components/checked.vue
View File

@@ -58,7 +58,7 @@ const {} = toRefs(data);
v-model="checkAll" v-model="checkAll"
@change="handleCheckAllChange" @change="handleCheckAllChange"
> >
All {{ $t('checked.All') }}
</el-checkbox> </el-checkbox>
</div> </div>
<el-checkbox-group v-model="checkList" @change="handleChange"> <el-checkbox-group v-model="checkList" @change="handleChange">

2
src/directives/avatarLoad.js
View File

@@ -2,7 +2,7 @@
import avatar from '@/assets/images/avatar.png' import avatar from '@/assets/images/avatar.png'
export default { export default {
name: 'avatarLoad', name: 'avatarLoad',
mmounted(el, binding) { mounted(el, binding) {
loadImage(el, binding.value) loadImage(el, binding.value)
}, },
updated(el, binding) { updated(el, binding) {

58
src/lang/en.ts
View File

@@ -142,7 +142,6 @@ export default {
sort: { sort: {
label: 'Sort by', label: 'Sort by',
placeholder: 'Select', placeholder: 'Select',
default: 'Default',
dateAdded: 'Date Added', dateAdded: 'Date Added',
selectedFirst: 'Selected First' selectedFirst: 'Selected First'
}, },
@@ -194,5 +193,62 @@ export default {
bottoms: 'Bottoms', bottoms: 'Bottoms',
outwear: 'Outwear', outwear: 'Outwear',
others: 'Others' 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',
} }
} }

58
src/lang/zh-cn.ts
View File

@@ -142,7 +142,6 @@ export default {
sort: { sort: {
label: '排序', label: '排序',
placeholder: '请选择', placeholder: '请选择',
default: '默认',
dateAdded: '添加日期', dateAdded: '添加日期',
selectedFirst: '已选优先' selectedFirst: '已选优先'
}, },
@@ -194,5 +193,62 @@ export default {
bottoms: '下装', bottoms: '下装',
outwear: '外套', outwear: '外套',
others: '其他' 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: "全部"
} }
} }

2
src/views/brand/brand-item.vue
View File

@@ -33,7 +33,7 @@ const {} = toRefs(data);
{{ item.ownerName }} | {{ item.ownerName }} |
{{ item?.listingTotal || 0 }} Collections {{ item?.listingTotal || 0 }} Collections
</div> </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> </div>
<div class="right"> <div class="right">

27
src/views/brand/index.vue
View File

@@ -29,11 +29,11 @@ const searchHistory = ref([
let changeSearchBrandTime = null let changeSearchBrandTime = null
const changeSearchBrand = () => { const changeSearchBrand = () => {
merchantList.value = []
clearTimeout(changeSearchBrandTime) clearTimeout(changeSearchBrandTime)
getDesignerList({ getDesignerList({
keyword: searchBrand.value, keyword: searchBrand.value,
}).then((res)=>{ }).then((res)=>{
merchantList.value = []
merchantList.value.push(...res) merchantList.value.push(...res)
}) })
// changeSearchBrandTime = setTimeout(()=>{ // changeSearchBrandTime = setTimeout(()=>{
@@ -103,6 +103,11 @@ const viewProfile = (item) => {
}) })
} }
const setSearchHistory = (item) => {
searchBrand.value = item
changeSearchBrand()
}
onMounted(()=>{ onMounted(()=>{
const value = localStorage.getItem('brandSearchHistory'); const value = localStorage.getItem('brandSearchHistory');
if(value)searchHistory.value = JSON.parse(value) if(value)searchHistory.value = JSON.parse(value)
@@ -113,23 +118,23 @@ defineExpose({})
const {} = toRefs(data); const {} = toRefs(data);
</script> </script>
<template> <template>
<div class="brand"> <div class="brand">
<div class="header-img" :class="{'active': searchBrand.length > 0}"> <div class="header-img" :class="{'active': searchBrand.length > 0}">
<img src="@/assets/images/brand/brandBg.png" alt=""> <img src="@/assets/images/brand/brandBg.png" alt="">
<div class="text-box"> <div class="text-box">
<div class="title">Brand</div> <div class="title">{{ $t('brand.title') }}</div>
<span>Every brand, every story — discover who's behind the collections.</span> <span>{{ $t('brand.description') }}</span>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="input"> <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"> <div class="icon">
<SvgIcon name="brand-search" size="32" /> <SvgIcon name="brand-search" size="32" />
</div> </div>
</div> </div>
<div class="merchantList" v-if="searchBrand.length > 0"> <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 class="end" v-show="!getMerchantData.isNoData && !getMerchantData.isShowMark">- The End-</div>
<!-- <div v-show="!getMerchantData.isNoData" class="material_content_list_loding"> <!-- <div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span> <span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span>
@@ -140,8 +145,8 @@ const {} = toRefs(data);
<sc-list-null <sc-list-null
nullImage="brand" nullImage="brand"
:showButton="false" :showButton="false"
title="Brand No Found" :title="$t('brand.noFound')"
tip="Try using another keywords." :tip="$t('brand.noFoundTip')"
/> />
</div> </div>
</div> </div>
@@ -150,10 +155,10 @@ const {} = toRefs(data);
<div class="icon"> <div class="icon">
<SvgIcon name="brand-time" size="20" /> <SvgIcon name="brand-time" size="20" />
</div> </div>
<span>Searching History</span> <span>{{ $t('brand.searchHistory') }}</span>
</div> </div>
<div class="history"> <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> <span>{{item}}</span>
<div class="icon" @click.stop="deleteHistory(item)"> <div class="icon" @click.stop="deleteHistory(item)">
<SvgIcon name="brand-delete" size="18" /> <SvgIcon name="brand-delete" size="18" />
@@ -287,7 +292,7 @@ const {} = toRefs(data);
.end{ .end{
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 1.2rem;
line-height: 140%; line-height: 140%;
height: 7rem; height: 7rem;
display: flex; display: flex;

6
src/views/brandDetail/commodity-list.vue
View File

@@ -73,9 +73,9 @@ defineExpose({})
Items Items
</div> </div>
<div class="menu"> <div class="menu">
<div :class="{'active': type === 'all'}" @click="setType('all')">All</div> <div :class="{'active': type === 'all'}" @click="setType('all')">{{ $t('brandDetail.All') }}</div>
<div :class="{'active': type === 'male'}" @click="setType('male')">Male</div> <div :class="{'active': type === 'male'}" @click="setType('male')">{{ $t('Wardrobe.assets.genders.male') }}</div>
<div :class="{'active': type === 'female'}" @click="setType('female')">Female</div> <div :class="{'active': type === 'female'}" @click="setType('female')">{{ $t('Wardrobe.assets.genders.female') }}</div>
</div> </div>
</div> </div>
<div class="list"> <div class="list">

4
src/views/brandDetail/index.vue
View File

@@ -8,6 +8,7 @@ import { ElMessage } from 'element-plus'
import { getDesignerDetail } from '@/api/brand' import { getDesignerDetail } from '@/api/brand'
import { AddShoppingCart } from '@/api/shoppingCart' import { AddShoppingCart } from '@/api/shoppingCart'
import brandDetailBg from '@/assets/images/brand/brandDetailBg.png' import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'
import { useI18n } from 'vue-i18n'
//const props = defineProps({ //const props = defineProps({
//}) //})
@@ -15,6 +16,7 @@ import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'
//]) //])
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const { t, locale } = useI18n()
const designerDetail = ref({ const designerDetail = ref({
avatar: '', avatar: '',
@@ -28,7 +30,7 @@ const designerDetail = ref({
}) })
const addShopping = (item) => { 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)=>{ AddShoppingCart({listingIds:[item.id]}).then((res)=>{
item.shopName = designerDetail.value.shopName item.shopName = designerDetail.value.shopName
myEvent.emit('addShopping', item) myEvent.emit('addShopping', item)

4
src/views/brandDetail/merchant-info.vue
View File

@@ -39,7 +39,7 @@ const {} = toRefs(data);
<div class="title">{{ designerDetail.shopName }}</div> <div class="title">{{ designerDetail.shopName }}</div>
</div> </div>
<div class="contact"> <div class="contact">
<div class="title">Contact</div> <div class="title">{{ $t('brandDetail.merchantInfo.Contact') }}</div>
<div class="email label"> <div class="email label">
<div class="icon"> <div class="icon">
<svg-icon name="brand-email" size="24" /> <svg-icon name="brand-email" size="24" />
@@ -60,7 +60,7 @@ const {} = toRefs(data);
</div> </div>
</div> </div>
<div class="about"> <div class="about">
<div class="title">About</div> <div class="title">{{ $t('brandDetail.merchantInfo.About') }}</div>
<div class="content"> <div class="content">
{{ designerDetail.description }} {{ designerDetail.description }}
</div> </div>

8
src/views/collectionStory/detail/join-us.vue
View File

@@ -15,17 +15,17 @@ const {} = toRefs(data);
</script> </script>
<template> <template>
<div class="joinUs"> <div class="joinUs">
<div class="title">Join Our Designer Community</div> <div class="title">{{ $t('collectionStory.joinUs.title') }}</div>
<div class="info"> <div class="info">
<div> <div>
Join our community of visionaries and publish your collection story. {{ $t('collectionStory.joinUs.info') }}
</div> </div>
<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> </div>
<br /> <br />
<div> <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> </div>
</div> </div>

10
src/views/collectionStory/index.vue
View File

@@ -24,19 +24,21 @@ const {} = toRefs(data);
<img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt=""> <img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt="">
<div class="back"> <div class="back">
<SvgIcon name="collectionStory-back" size="20" /> <SvgIcon name="collectionStory-back" size="20" />
<div class="text">Back to Home</div> <div class="text">{{ $t('collectionStory.back') }}</div>
</div> </div>
<div class="title-content"> <div class="title-content">
<div class="title-box"> <div class="title-box">
<div class="title"> <div class="title">
We’re Seeking {{ $t('collectionStory.title') }}
</div> </div>
<div class="info"> <div class="info">
Fashion Voice Worth Featuring. {{ $t('collectionStory.description') }}
</div> </div>
</div> </div>
<div class="button"> <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> </div>
</div> </div>

2
src/views/digitalDetail/index.vue
View File

@@ -222,7 +222,7 @@ defineExpose({})
> .left{ > .left{
border-right: 0.5px solid #C4C4C4; border-right: 0.5px solid #C4C4C4;
.imgBox{ .imgBox{
padding: 0 30px; padding: 0 3rem;
} }
} }
> .right{ > .right{

21
src/views/digitalItem/index.vue
View File

@@ -4,7 +4,7 @@ import CommodityList from "./commodity-list.vue";
import MerchantInfo from "./merchant-info.vue"; import MerchantInfo from "./merchant-info.vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import scListNull from '@/views/shoppingCart/sc-list-null.vue' import scListNull from '@/views/shoppingCart/sc-list-null.vue'
import { getListingMallListApi } from '@/api/listing' import { useI18n } from 'vue-i18n'
// 定义组件名称 // 定义组件名称
defineOptions({ defineOptions({
@@ -14,6 +14,7 @@ defineOptions({
//}) //})
//const emit = defineEmits([ //const emit = defineEmits([
//]) //])
const { t } = useI18n()
const categories = ref(['all']) const categories = ref(['all'])
const gender = ref(['all']) const gender = ref(['all'])
const digitalItemRef = ref(null) const digitalItemRef = ref(null)
@@ -24,13 +25,13 @@ const commodityListRef = ref(null)
const searechTypeList = ref([ const searechTypeList = ref([
{ {
value:'salesVolume', value:'salesVolume',
label:'Best Selling' label:t('digitalItem.BestSelling')
},{ },{
value:'price', value:'price',
label:'Price: Low to High' label:t('digitalItem.Price')
},{ },{
value:'updateTime', value:'updateTime',
label:'Newest First' label:t('digitalItem.NewestFirst')
}, },
]) ])
@@ -64,15 +65,15 @@ defineExpose({})
<div class="header-img"> <div class="header-img">
<img src="@/assets/images/digitalItem/digital_item_banner.png" alt=""> <img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
<div class="text"> <div class="text">
<div class="title">Digital Item</div> <div class="title">{{ $t('digitalItem.title') }}</div>
<p class="info">Virtual fashion creations collected in your personal archive</p> <p class="info">{{ $t('digitalItem.info') }}</p>
</div> </div>
</div> </div>
<div class="filters"> <div class="filters">
<div class="filter-item"> <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 }"> <template #label="{ label }">
<span class="header-label">Sort By</span> <span class="header-label">{{ $t('digitalItem.sortBy') }}</span>
<span class="header-value">{{ label }}</span> <span class="header-value">{{ label }}</span>
</template> </template>
<el-option <el-option
@@ -103,8 +104,8 @@ defineExpose({})
<sc-list-null <sc-list-null
nullImage="shopping-cart" nullImage="shopping-cart"
:showButton="false" :showButton="false"
title="Nothing in Digital Item" :title="$t('digitalItem.noData')"
tip="Try adjusting your filters or refreshing the page." :tip="$t('digitalItem.noDataTip')"
/> />
</div> </div>

8
src/views/digitalItem/merchant-info.vue
View File

@@ -36,15 +36,15 @@ defineExpose({})
<template> <template>
<div class="filters"> <div class="filters">
<div class="title"> <div class="title">
<div class="left">Filters</div> <div class="left">{{ $t('digitalItem.MerchantInfo.Filters') }}</div>
<div class="right" @click="clearFilters">Clear</div> <div class="right" @click="clearFilters">{{ $t('digitalItem.MerchantInfo.Clear') }}</div>
</div> </div>
<div class="categories">Categories</div> <div class="categories">{{ $t('digitalItem.MerchantInfo.Categories') }}</div>
<div class="line"></div> <div class="line"></div>
<div class="multiple"> <div class="multiple">
<checked :list="categoriesList" @change="handleChange" v-model:selected="categories" /> <checked :list="categoriesList" @change="handleChange" v-model:selected="categories" />
</div> </div>
<div class="categories">Gender</div> <div class="categories">{{ $t('digitalItem.MerchantInfo.Gender') }}</div>
<div class="line"></div> <div class="line"></div>
<div class="multiple"> <div class="multiple">
<checked :list="genderList" @change="handleChange" v-model:selected="gender" /> <checked :list="genderList" @change="handleChange" v-model:selected="gender" />

62
src/views/wardrobe/Assets.vue
View File

@@ -14,7 +14,7 @@
<div class="assets-toolbar"> <div class="assets-toolbar">
<div class="assets-toolbar__selection"> <div class="assets-toolbar__selection">
<div class="select-count flex align-center"> <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"> <span class="assets-toolbar__count">
{{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }} {{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }}
</span> </span>
@@ -38,7 +38,12 @@
</div> </div>
</div> </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 ref="dataListRef" class="data-list">
<div <div
v-for="(item, index) in dataList" v-for="(item, index) in dataList"
@@ -67,7 +72,7 @@
</div> </div>
</div> </div>
<Empty v-else @explore="goToDigitalItems" /> <Empty v-else />
</section> </section>
</div> </div>
</template> </template>
@@ -92,6 +97,14 @@
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
interface Props {
sortType?: number
}
const props = withDefaults(defineProps<Props>(), {
sortType: 1
})
const buyerId = useUserInfoStore().state.userInfo?.userId const buyerId = useUserInfoStore().state.userInfo?.userId
interface FilterOption { interface FilterOption {
@@ -126,6 +139,7 @@
) )
const dataList = ref([]) const dataList = ref([])
const rawDataList = ref([]) // Store the original API data
const dataListRef = ref<HTMLDivElement | null>(null) const dataListRef = ref<HTMLDivElement | null>(null)
const assetsScrollRef = ref<HTMLDivElement | null>(null) const assetsScrollRef = ref<HTMLDivElement | null>(null)
const gridColumnCount = shallowRef(1) const gridColumnCount = shallowRef(1)
@@ -169,15 +183,18 @@
const content = res.content ?? [] const content = res.content ?? []
if (pageParams.page === 1) { if (pageParams.page === 1) {
dataList.value = content rawDataList.value = content
} else { } else {
dataList.value = [...dataList.value, ...content] rawDataList.value = [...rawDataList.value, ...content]
} }
hasMoreAssets.value = content.length >= pageParams.size hasMoreAssets.value = content.length >= pageParams.size
if (hasMoreAssets.value) { if (hasMoreAssets.value) {
pageParams.page += 1 pageParams.page += 1
} }
// Apply sorting after fetching data
applySorting()
} finally { } finally {
if (requestId === assetsRequestId.value) { if (requestId === assetsRequestId.value) {
isLoadingAssets.value = false 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( watch(
() => filters, () => filters,
debounce(() => { debounce(() => {
@@ -264,12 +304,20 @@
const handleSelectItem = (item) => { const handleSelectItem = (item) => {
item.checked = !item.checked item.checked = !item.checked
// Re-apply sorting when selection changes and sortType is "Selected First"
if (props.sortType === 2) {
applySorting()
}
} }
const handleSelectAll = (flag) => { const handleSelectAll = (flag) => {
dataList.value.forEach((item) => { dataList.value.forEach((item) => {
item.checked = flag item.checked = flag
}) })
// Re-apply sorting when selection changes and sortType is "Selected First"
if (props.sortType === 2) {
applySorting()
}
} }
const handleDownloadSelected = () => { const handleDownloadSelected = () => {
@@ -306,10 +354,6 @@
return (index + 1) % gridColumnCount.value === 0 return (index + 1) % gridColumnCount.value === 0
} }
const goToDigitalItems = () => {
router.push('/digitalItem')
}
watch( watch(
() => dataList.value.length, () => dataList.value.length,
async (len) => { async (len) => {

96
src/views/wardrobe/Empty.vue
View File

@@ -1,60 +1,66 @@
<script setup lang="ts"> <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<{ const handleExplore = () => {
(event: 'explore'): void router.push('/digitalItem')
}>() }
</script> </script>
<template> <template>
<div class="wardrobe-empty flex flex-col flex-center"> <div class="wardrobe-empty flex flex-col flex-center">
<img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" /> <img
src="@/assets/images/wardrobe/empty-wardrobe.png"
class="wardrobe-empty__image"
alt=""
/>
<h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2> <h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
<p class="wardrobe-empty__description"> <p class="wardrobe-empty__description">
{{ t('Wardrobe.empty.description') }} {{ t('Wardrobe.empty.description') }}
</p> </p>
<button class="wardrobe-empty__button" type="button" @click="emit('explore')"> <button class="wardrobe-empty__button" type="button" @click="handleExplore">
{{ t('Wardrobe.empty.action') }} {{ t('Wardrobe.empty.action') }}
</button> </button>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.wardrobe-empty { .wardrobe-empty {
flex: 1; flex: 1;
color: #979797; color: #979797;
> .wardrobe-empty__image { > .wardrobe-empty__image {
width: 14.2rem; width: 14.2rem;
height: 18.8rem; height: 18.8rem;
} }
> .wardrobe-empty__title { > .wardrobe-empty__title {
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
font-size: 1.6rem; font-size: 1.6rem;
margin: 2.4rem 0 0.8rem; margin: 2.4rem 0 0.8rem;
} }
> .wardrobe-empty__description { > .wardrobe-empty__description {
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
} }
> .wardrobe-empty__button { > .wardrobe-empty__button {
margin-top: 3rem; margin-top: 3rem;
height: 4.4rem; height: 4.4rem;
line-height: 4.4rem; line-height: 4.4rem;
padding: 0 3.8rem; padding: 0 3.8rem;
border: 0.1rem solid #c4c4c4; border: 0.1rem solid #c4c4c4;
background: #ffffff; background: #ffffff;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.6rem; font-size: 1.6rem;
text-transform: uppercase; text-transform: uppercase;
color: #585858; color: #585858;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>

42
src/views/wardrobe/Orders.vue
View File

@@ -13,7 +13,7 @@
</button> </button>
</div> </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"> <article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
<button <button
class="order-card__toggle" class="order-card__toggle"
@@ -27,7 +27,9 @@
<div class="order-card__meta"> <div class="order-card__meta">
<h3 class="order-card__id">{{ order.orderId }}</h3> <h3 class="order-card__id">{{ order.orderId }}</h3>
<div class="brand flex align-center"> <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> <span class="text">{{ order.shopName }}</span>
</div> </div>
<p class="order-card__date">{{ order.formatUpdatetime }}</p> <p class="order-card__date">{{ order.formatUpdatetime }}</p>
@@ -39,7 +41,7 @@
:key="item.id" :key="item.id"
class="order-card__thumb" class="order-card__thumb"
:style="{ backgroundImage: `url(${item.thumbnailUrl})` }" :style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
></span> />
<span v-if="getExtraCount(order)" class="order-card__extra"> <span v-if="getExtraCount(order)" class="order-card__extra">
{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }} {{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
</span> </span>
@@ -83,6 +85,7 @@
</div> </div>
</article> </article>
</div> </div>
<Empty v-else />
</div> </div>
</template> </template>
@@ -91,6 +94,7 @@
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { fetchMyOrders } from '@/api/user' import { fetchMyOrders } from '@/api/user'
import ScItem from '@/views/shoppingCart/sc-item.vue' import ScItem from '@/views/shoppingCart/sc-item.vue'
import Empty from './Empty.vue'
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled' type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
type ActualOrderStatus = Exclude<OrderStatus, 'all'> type ActualOrderStatus = Exclude<OrderStatus, 'all'>
@@ -192,21 +196,21 @@
const dateLocale = isChinese ? 'zh-CN' : 'en-US' const dateLocale = isChinese ? 'zh-CN' : 'en-US'
const options: Intl.DateTimeFormatOptions = isChinese const options: Intl.DateTimeFormatOptions = isChinese
? { ? {
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
hour12: false hour12: false
} }
: { : {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
hour12: true hour12: true
} }
return new Intl.DateTimeFormat(dateLocale, options).format(date) return new Intl.DateTimeFormat(dateLocale, options).format(date)
} }
@@ -232,7 +236,9 @@
page: orderParams.value.page, page: orderParams.value.page,
size: orderParams.value.size 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) { if (currentStatus?.value !== undefined) {
params.status = currentStatus.value params.status = currentStatus.value

416
src/views/wardrobe/index.vue
View File

@@ -1,234 +1,248 @@
<template> <template>
<div class="wardrobe-page"> <div class="wardrobe-page">
<div class="wardrobe-hero flex flex-col flex-center"> <div class="wardrobe-hero flex flex-col flex-center">
<div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div> <div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
<div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div> <div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
</div> </div>
<div class="wardrobe-shell"> <div class="wardrobe-shell">
<div class="wardrobe-tabs"> <div class="wardrobe-tabs">
<div class="wardrobe-tabs__nav" role="tablist" :aria-label="t('Wardrobe.tabs.ariaLabel')"> <div
<button class="wardrobe-tabs__nav"
v-for="tab in tabs" role="tablist"
:key="tab.key" :aria-label="t('Wardrobe.tabs.ariaLabel')"
class="wardrobe-tabs__item" >
:class="{ 'is-active': activeTab === tab.key }" <button
type="button" v-for="tab in tabs"
role="tab" :key="tab.key"
:aria-selected="activeTab === tab.key" class="wardrobe-tabs__item"
@click="activeTab = tab.key" :class="{ 'is-active': activeTab === tab.key }"
> type="button"
{{ tab.label }} role="tab"
</button> :aria-selected="activeTab === tab.key"
</div> @click="activeTab = tab.key"
>
{{ tab.label }}
</button>
</div>
<div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort"> <div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
<div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div> <div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
<el-select v-model="activeSort" :placeholder="t('Wardrobe.sort.placeholder')"> <el-select
<el-option v-model="activeSort"
v-for="option in sortOptions" popper-class="wardrobe-sort-dropdown"
:key="option.value" :placeholder="t('Wardrobe.sort.placeholder')"
:label="option.label" >
:value="option.value" <el-option
/> v-for="option in sortOptions"
</el-select> :key="option.value"
</div> :label="option.label"
</div> :value="option.value"
/>
</el-select>
</div>
</div>
<component :is="activePanel" class="wardrobe-shell__panel" /> <component :is="activePanel" class="wardrobe-shell__panel" :sort-type="activeSort" />
</div> </div>
<Footer /> <Footer />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, shallowRef } from 'vue' import { computed, shallowRef } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Assets from './Assets.vue' import Assets from './Assets.vue'
import Orders from './Orders.vue' import Orders from './Orders.vue'
type WardrobeTab = 'assets' | 'orders' type WardrobeTab = 'assets' | 'orders'
interface TabItem { interface TabItem {
key: WardrobeTab key: WardrobeTab
label: string label: string
} }
interface SortOption { interface SortOption {
label: string label: string
value: number value: number
} }
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: 'global' })
const tabs = computed<TabItem[]>(() => [ const tabs = computed<TabItem[]>(() => [
{ {
key: 'assets', key: 'assets',
label: t('Wardrobe.tabs.assets') label: t('Wardrobe.tabs.assets')
}, },
{ {
key: 'orders', key: 'orders',
label: t('Wardrobe.tabs.orders') label: t('Wardrobe.tabs.orders')
} }
]) ])
const sortOptions = computed<SortOption[]>(() => [ const sortOptions = computed<SortOption[]>(() => [
{ {
label: t('Wardrobe.sort.default'), label: t('Wardrobe.sort.dateAdded'),
value: 0 value: 1
}, },
{ {
label: t('Wardrobe.sort.dateAdded'), label: t('Wardrobe.sort.selectedFirst'),
value: 1 value: 2
}, }
{ ])
label: t('Wardrobe.sort.selectedFirst'),
value: 2
}
])
const activeTab = shallowRef<WardrobeTab>('assets') const activeTab = shallowRef<WardrobeTab>('assets')
const activeSort = shallowRef(1) const activeSort = shallowRef(1)
const activePanel = computed(() => { const activePanel = computed(() => {
return activeTab.value === 'assets' ? Assets : Orders return activeTab.value === 'assets' ? Assets : Orders
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.wardrobe-page { .wardrobe-page {
--wardrobe-border-color: #d9d4cd; --wardrobe-border-color: #d9d4cd;
--wardrobe-text-main: #232323; --wardrobe-text-main: #232323;
--wardrobe-text-secondary: #7a746d; --wardrobe-text-secondary: #7a746d;
--wardrobe-surface: #fffdf8; --wardrobe-surface: #fffdf8;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #ffffff; background: #ffffff;
overflow: hidden; overflow: hidden;
.wardrobe-hero { .wardrobe-hero {
height: 14.8rem; height: 14.8rem;
// background-color: #f5f5f5; // background-color: #f5f5f5;
background: url('@/assets/images/background.png') no-repeat; background: url('@/assets/images/background.png') no-repeat;
background-size: cover; background-size: cover;
position: relative; position: relative;
// &::before { // &::before {
// position: absolute; // position: absolute;
// top: 0; // top: 0;
// right: 0; // right: 0;
// bottom: 0; // bottom: 0;
// left: 0; // left: 0;
// background-color: rgba(0, 0, 0, 0.2); // background-color: rgba(0, 0, 0, 0.2);
// } // }
.wardrobe-hero__title { .wardrobe-hero__title {
margin: 0; margin: 0;
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
font-size: 4rem; font-size: 4rem;
color: #232323; color: #232323;
line-height: 3.6rem; line-height: 3.6rem;
} }
.wardrobe-hero__subtitle { .wardrobe-hero__subtitle {
margin-top: 1rem; margin-top: 1rem;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2.4rem; line-height: 2.4rem;
color: #585858; color: #585858;
} }
} }
> .wardrobe-shell { > .wardrobe-shell {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
> .wardrobe-tabs { > .wardrobe-tabs {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 2rem; gap: 2rem;
padding: 0 9rem; padding: 0 9rem;
border-bottom: 0.1rem solid var(--wardrobe-border-color); border-bottom: 0.1rem solid var(--wardrobe-border-color);
background: #ffffff; background: #ffffff;
> .wardrobe-tabs__nav { > .wardrobe-tabs__nav {
display: flex; display: flex;
align-items: center; align-items: center;
> .wardrobe-tabs__item { > .wardrobe-tabs__item {
position: relative; position: relative;
height: 6rem; height: 6rem;
padding: 0 1.8rem; padding: 0 1.8rem;
border: 0; border: 0;
background: transparent; background: transparent;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1; line-height: 1;
color: #7d766f; color: #7d766f;
cursor: pointer; cursor: pointer;
width: 13.9rem; width: 13.9rem;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
left: 1.8rem; left: 1.8rem;
right: 1.8rem; right: 1.8rem;
bottom: -0.1rem; bottom: -0.1rem;
height: 0.2rem; height: 0.2rem;
background: transparent; background: transparent;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
&.is-active { &.is-active {
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
color: var(--wardrobe-text-main); color: var(--wardrobe-text-main);
&::after { &::after {
background: var(--wardrobe-text-main); background: var(--wardrobe-text-main);
} }
} }
} }
} }
> .wardrobe-tabs__sort { > .wardrobe-tabs__sort {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
flex-shrink: 0; flex-shrink: 0;
> .wardrobe-tabs__sort-label { > .wardrobe-tabs__sort-label {
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2.4rem; line-height: 2.4rem;
color: #7d766f; color: #7d766f;
white-space: nowrap; white-space: nowrap;
} }
:deep(.el-select) { :deep(.el-select) {
width: 13rem; width: 13rem;
} }
:deep(.el-select__wrapper) { :deep(.el-select__wrapper) {
min-height: 3.6rem; min-height: 3.6rem;
padding: 0 1.2rem; padding: 0 1.2rem;
background: #ffffff; background: #ffffff;
box-shadow: none; box-shadow: none;
} }
:deep(.el-select__selected-item) { :deep(.el-select__selected-item) {
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
color: #232323; color: #232323;
} }
} }
} }
> .wardrobe-shell__panel { > .wardrobe-shell__panel {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
} }
} }
</style>
<style lang="less">
.wardrobe-sort-dropdown {
.el-select-dropdown__list {
.el-select-dropdown__item {
padding: 0 2rem;
}
}
}
</style> </style>