From 09909552bc158a3677410a5cc0592d1239f1686b Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Tue, 12 May 2026 13:27:30 +0800
Subject: [PATCH] =?UTF-8?q?digital=20=E8=BF=87=E6=BB=A4=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/digital/pullIcon.svg    |  5 ++
 src/components/checked.vue               | 29 +++++++-
 src/views/digitalItem/commodity-list.vue | 40 +++--------
 src/views/digitalItem/index.vue          | 89 +++++++++++++++++++++++-
 src/views/digitalItem/merchant-info.vue  | 16 ++---
 5 files changed, 133 insertions(+), 46 deletions(-)
 create mode 100644 src/assets/icons/digital/pullIcon.svg

diff --git a/src/assets/icons/digital/pullIcon.svg b/src/assets/icons/digital/pullIcon.svg
new file mode 100644
index 0000000..8275dbf
--- /dev/null
+++ b/src/assets/icons/digital/pullIcon.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.82684 8.7465L7.13386 6.43947L9.44089 8.7465C9.67278 8.97839 10.0474 8.97839 10.2793 8.7465C10.5112 8.51461 10.5112 8.14001 10.2793 7.90812L7.55008 5.17893C7.31819 4.94704 6.94359 4.94704 6.7117 5.17893L3.98251 7.90812C3.75062 8.14001 3.75062 8.51461 3.98251 8.7465C4.2144 8.97244 4.59495 8.97839 4.82684 8.7465Z" fill="black"/>
+</g>
+</svg>
diff --git a/src/components/checked.vue b/src/components/checked.vue
index 4954620..e55331f 100644
--- a/src/components/checked.vue
+++ b/src/components/checked.vue
@@ -14,11 +14,23 @@ const emit = defineEmits([
 	'update:selected'
 ])
 const checkList = computed(()=>{
-	return [props.selected]
+	if(props.selected[0] === ''){
+		return props.list.map(item => item.value)
+	}else{
+		return [...props.selected]
+	}
 })
 const handleChange = (val) => {
-	if (val.length > 1) {
-		emit('update:selected', val[val.length - 1])
+	emit('update:selected', val)
+}
+const checkAll = computed(()=>{
+	return checkList.value.length === props.list.length
+})
+const handleCheckAllChange = (val) => {
+	if(val){
+		emit('update:selected', props.list.map(item => item.value))
+	}else{
+		emit('update:selected', [])
 	}
 }
 let data = reactive({
@@ -31,6 +43,14 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
+	<div class="all">
+		<el-checkbox
+			v-model="checkAll"
+			@change="handleCheckAllChange"
+		>
+			All
+		</el-checkbox>
+	</div>
 	<el-checkbox-group v-model="checkList" @change="handleChange">
 		<el-checkbox 
 			v-for="item in props.list" 
@@ -42,6 +62,9 @@ const {} = toRefs(data);
 	</el-checkbox-group>
 </template>
 <style lang="less" scoped>
+	.all{
+		margin-bottom: 1.2rem;
+	}
 	.el-checkbox-group{
 		display: flex;
 		flex-direction: column;
diff --git a/src/views/digitalItem/commodity-list.vue b/src/views/digitalItem/commodity-list.vue
index 199ec6a..f72437e 100644
--- a/src/views/digitalItem/commodity-list.vue
+++ b/src/views/digitalItem/commodity-list.vue
@@ -77,42 +77,24 @@ const {} = toRefs(data);
 		.list{
 			width: 100%;
 			flex: 1;
+			// display: grid;
+			// align-content: start;
+			// grid-template-columns: repeat(3, 1fr);
+			overflow: hidden;
+
 			display: grid;
 			align-content: start;
-			grid-template-columns: repeat(3, 1fr);
-			overflow-y: auto;
+			grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+			border-top: 0.5px solid #585858;
+			padding: .5px 0 0 .5px;
 			/* 垂直线（右边框） */
 			.item{
 				position: relative;
 				padding: 1.2rem;
-				--commodity-marginBottom: 2rem;
-				--commodity-name-fontSize: 2rem;
-				--commodity-name-marginBottom: .8rem;
-				--commodity-price-fontSize: 1.6rem;
-			}
-			.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;
+				border-right: 0.5px solid #585858;
+				margin-right: -1px;
+				margin-bottom: -1px;
 			}
 		}
 	}
diff --git a/src/views/digitalItem/index.vue b/src/views/digitalItem/index.vue
index 897cbc5..db156d3 100644
--- a/src/views/digitalItem/index.vue
+++ b/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;
diff --git a/src/views/digitalItem/merchant-info.vue b/src/views/digitalItem/merchant-info.vue
index 2063f15..996598f 100644
--- a/src/views/digitalItem/merchant-info.vue
+++ b/src/views/digitalItem/merchant-info.vue
@@ -7,10 +7,6 @@ import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 let data = reactive({
 })
 const categoriesList = ref([
-	{
-		label: 'All',
-		value: 'All'
-	},
 	{
 		label: 'Outwear',
 		value: 'Outwear'
@@ -37,10 +33,6 @@ const categoriesList = ref([
 	},
 ]);
 const genderList = ref([
-	{
-		label: 'All',
-		value: 'All'
-	},
 	{
 		label: 'Male',
 		value: 'Male'
@@ -50,12 +42,12 @@ const genderList = ref([
 		value: 'Female'
 	},
 ])
-const categories = ref('All')
-const gender = ref('All')
+const categories = ref([''])
+const gender = ref([''])
 
 const clearFilters = () => {
-	categories.value = 'All'
-	gender.value = 'All'
+	categories.value = ['']
+	gender.value = ['']
 }
 onMounted(()=>{
 })