digital 过滤调整

src/views/digitalItem/index.vue

@@ -16,6 +16,20 @@ const scrollTop = ref(0)
 const router = useRouter()
 let data = reactive({
 })
+
+const categoriesList = ref([
+	{
+		value:'Best Selling',
+		label:'Best Selling'
+	},{
+		value:'Price: Low to High',
+		label:'Price: Low to High'
+	},{
+		value:'Newest First',
+		label:'Newest First'
+	},
+])
+const categories = ref('Newest First')
 const addShopping = (item) => {}
 const openDetail = (item) => {
 	scrollTop.value = digitalItemRef.value.scrollTop
@@ -42,6 +56,22 @@ const {} = toRefs(data);
 				<p class="info">Virtual fashion creations collected in your personal archive</p>
 			</div>
 		</div>
+		<div class="filters">
+			<div class="filter-item">
+				<el-select v-model="categories" placeholder="Sort By" :teleported="false">
+					<template #label="{ label }">
+						<span class="header-label">Sort By</span>
+						<span class="header-value">{{ label }}</span>
+					</template>
+					<el-option
+						v-for="item in categoriesList"
+						:key="item.label"
+						:value="item.value"
+						:label="item.label"
+					/>
+				</el-select>
+			</div>
+		</div>
 		<div class="content">
 			<div class="merchant-info">
 				<MerchantInfo></MerchantInfo>
@@ -89,12 +119,67 @@ const {} = toRefs(data);
 				}
 			}
 		}
-		.content{
+		> .filters{
+			width: 100%;
+			height: 6rem;
+			display: flex;
+			align-items: center;
+			padding: 0 9rem;
+			justify-content: flex-end;
+			> .filter-item{	
+				:deep(.el-select) {
+					width: 15rem;
+					--el-border-radius-base: 0;
+					--el-select-input-color: rgba(0, 0, 0, 0.5);
+					--el-select-input-font-size: 1rem;
+					.el-select__wrapper {
+						font-size: 1.07rem;
+						padding: 0 0.7rem;
+						line-height: 1;
+						min-height: 0;
+						height: 2.2rem;
+
+						.header-label {
+							font-family: KaiseiOpti-Regular;
+							color: rgba(0, 0, 0, 0.5);
+							margin-right: 0.6rem;
+						}
+						.header-value {
+							font-family: KaiseiOpti-Bold;
+							color: #232323;
+						}
+					}
+					.el-select__popper {
+						--el-popper-border-radius: 0;
+						border: 0.1rem solid #d0d0d0;
+						.el-select-dropdown__list {
+							padding: 0;
+							> .el-select-dropdown__item {
+								margin-bottom: 0.89rem;
+								color: #232323;
+								font-size: 1.069rem;
+								height: 2.68rem;
+								line-height: 2.68rem;
+								padding: 0 1.4rem;
+								&:last-child {
+									margin-bottom: 0;
+								}
+								&.is-selected {
+									font-family: KaiseiOpti-Bold;
+									background-color: #f4f4f4;
+								}
+							}
+						}
+					}
+				}
+
+			}
+		}
+		> .content{
 			display: flex;
 			height: auto;
 			align-items: flex-start;
 			border-top: 0.5px solid #585858;
-			margin-top: 6rem;
 			.merchant-info{
 				width: 38.5rem;
 				padding-left: 10.2rem;