diff --git a/src/assets/images/digitalItem/digital_item_banner.png b/src/assets/images/digitalItem/digital_item_banner.png
new file mode 100644
index 0000000..d2ee914
Binary files /dev/null and b/src/assets/images/digitalItem/digital_item_banner.png differ
diff --git a/src/components/CommodityItem.vue b/src/components/CommodityItem.vue
index 55eb813..281c18b 100644
--- a/src/components/CommodityItem.vue
+++ b/src/components/CommodityItem.vue
@@ -34,7 +34,7 @@ const {} = toRefs(data);
 	<div class="commodity-item">
 		<img :src="props.url" alt="">
 		<div class="detail">
-			<div calss="text">
+			<div class="text">
 				<div class="name">
 					{{ props.name }}
 				</div>
@@ -44,7 +44,7 @@ const {} = toRefs(data);
 			</div>
 			<div class="btn" @click="addShopping">
 				<div class="text">
-					<SvgIcon name="add" size="24"></SvgIcon>
+					<SvgIcon name="add" size="26"></SvgIcon>
 				</div>
 			</div>
 		</div>
@@ -62,13 +62,14 @@ const {} = toRefs(data);
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			.text{
+			> .text{
 				color: #232323;
 				> .name{
 					font-family: "KaiseiOpti-Regular";
 					font-weight: 400;
 					font-size: var(--commodity-name-fontSize,1.6rem);
 					line-height: var(--commodity-name-lineHeight,2.3rem);
+					margin-bottom: var(--commodity-name-marginBottom,0rem);
 				}
 				> .price{
 					font-family: "KaiseiOpti-Regular";
diff --git a/src/components/checked.vue b/src/components/checked.vue
new file mode 100644
index 0000000..4954620
--- /dev/null
+++ b/src/components/checked.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
+const props = defineProps({
+	list:{
+		type:Array,
+		default:()=>[]
+	},
+	selected:{
+		type:String,
+		default:()=>''
+	}
+})
+const emit = defineEmits([
+	'update:selected'
+])
+const checkList = computed(()=>{
+	return [props.selected]
+})
+const handleChange = (val) => {
+	if (val.length > 1) {
+		emit('update:selected', val[val.length - 1])
+	}
+}
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<el-checkbox-group v-model="checkList" @change="handleChange">
+		<el-checkbox 
+			v-for="item in props.list" 
+			:key="item.value"
+			:value="item.value"
+		>
+			{{ item.label }}
+		</el-checkbox>
+	</el-checkbox-group>
+</template>
+<style lang="less" scoped>
+	.el-checkbox-group{
+		display: flex;
+		flex-direction: column;
+		gap: 1.2rem;
+	}
+	label{
+		--el-checkbox-font-size: 1.6rem;
+		--el-checkbox-checked-text-color: #232323;
+		--el-checkbox-font-weight: 400;
+		--el-checkbox-height: 2rem;
+		--el-checkbox-checked-bg-color: #232323;
+		--el-checkbox-checked-input-border-color: #232323;
+		--el-checkbox-input-border: 1px solid #232323;
+		font-family: "KaiseiOpti-Regular";
+		line-height: 2rem;
+		.el-checkbox__label{
+			padding-left: 1.4rem;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 7858deb..a2e30c1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,6 +25,11 @@ const router = createRouter({
 			name: 'brand',
 			component: () => import('../views/brand/index.vue'),
 		},
+		{
+			path: '/digitalItem',
+			name: 'digitalItem',
+			component: () => import('../views/digitalItem/index.vue'),
+		},
 		{
 			path: '/:pathMatch(.*)',
 			name: '404',
diff --git a/src/views/digitalItem/commodity-list.vue b/src/views/digitalItem/commodity-list.vue
new file mode 100644
index 0000000..9c99b70
--- /dev/null
+++ b/src/views/digitalItem/commodity-list.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+//const props = defineProps({
+//})
+const emit = defineEmits([
+	'addShopping'
+])
+let data = reactive({
+})
+const list = ref([
+	{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},
+])
+const type = ref('All')
+const addShopping = (item) => {
+	emit('addShopping', item)
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="commodityList">
+		<div class="list">
+			<div class="item" v-for="item in list" :key="item.url">
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.commodityList{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.list{
+			width: 100%;
+			flex: 1;
+			display: grid;
+			align-content: start;
+			grid-template-columns: repeat(3, 1fr);
+			overflow-y: auto;
+			/* 垂直线（右边框） */
+			.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;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/digitalItem/index.vue b/src/views/digitalItem/index.vue
new file mode 100644
index 0000000..dcfb1cd
--- /dev/null
+++ b/src/views/digitalItem/index.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import CommodityList from "./commodity-list.vue";
+import MerchantInfo from "./merchant-info.vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const addShopping = (item) => {}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="digitalItem">
+		<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>
+		</div>
+		<div class="content">
+			<div class="merchant-info">
+				<MerchantInfo></MerchantInfo>
+			</div>
+			<div class="commodity-list">
+				<CommodityList @addShopping="addShopping"></CommodityList>
+			</div>
+		</div>
+		<Footer></Footer>
+	</div>
+</template>
+<style lang="less" scoped>
+	.digitalItem{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow-y: auto;
+		.header-img{
+			width: 100%;
+			position: relative;
+			>img{
+				width: 100%;
+			}
+			> .text{
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				> .title{
+					font-family: KaiseiOpti-Bold;
+					color: #232323;
+					font-weight: 700;
+					font-size: 4rem;
+					line-height: 2.3rem;
+					letter-spacing: 0%;
+					text-align: center;
+				}
+				> .info{
+					font-family: KaiseiOpti-Regular;
+					color: #585858;
+					font-size: 1.6rem;
+					line-height: 140%;
+					margin-top: 1.2rem;
+					text-align: center;
+				}
+			}
+		}
+		.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;
+				height: var(--app-view-height);
+				overflow-y: auto;
+				position: sticky;
+				top: 0;
+				&::-webkit-scrollbar{
+					width: 0;
+					height: 0;
+				}
+			}
+			.commodity-list{
+				flex: 1;
+				border-left: 0.5px solid #585858;
+				border-right: 0.5px solid #585858;
+				margin-right: 9rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/digitalItem/merchant-info.vue b/src/views/digitalItem/merchant-info.vue
new file mode 100644
index 0000000..2063f15
--- /dev/null
+++ b/src/views/digitalItem/merchant-info.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const categoriesList = ref([
+	{
+		label: 'All',
+		value: 'All'
+	},
+	{
+		label: 'Outwear',
+		value: 'Outwear'
+	},
+	{
+		label: 'Dress',
+		value: 'Dress'
+	},
+	{
+		label: 'Trousers',
+		value: 'Trousers'
+	},
+	{
+		label: 'Blouse',
+		value: 'Blouse'
+	},
+	{
+		label: 'Skirt',
+		value: 'Skirt'
+	},
+	{
+		label: 'Accessories',
+		value: 'Accessories'
+	},
+]);
+const genderList = ref([
+	{
+		label: 'All',
+		value: 'All'
+	},
+	{
+		label: 'Male',
+		value: 'Male'
+	},
+	{
+		label: 'Female',
+		value: 'Female'
+	},
+])
+const categories = ref('All')
+const gender = ref('All')
+
+const clearFilters = () => {
+	categories.value = 'All'
+	gender.value = 'All'
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="filters">
+		<div class="title">
+			<div class="left">Filters</div>
+			<div class="right" @click="clearFilters">Clear</div>
+		</div>
+		<div class="categories">Categories</div>
+		<div class="line"></div>
+		<div class="multiple">
+			<checked :list="categoriesList" v-model:selected="categories" />
+		</div>
+		<div class="categories">Gender</div>
+		<div class="line"></div>
+		<div class="multiple">
+			<checked :list="genderList" v-model:selected="gender" />
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.filters{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-top: 4rem;
+		padding-bottom: 4rem;
+		.title{
+			margin-bottom: 3rem;
+			display: flex;
+			padding: 0 1.2rem;
+			.left{
+				margin-right: 12.2rem;
+				font-family: "KaiseiOpti-Bold";
+				font-weight: 700;
+				font-size: 2.4rem;
+				line-height: 3.5rem;
+				color: #232323;
+			}
+			.right{
+				text-decoration: underline;
+				font-family: "KaiseiOpti-Regular";
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 2.4rem;
+				letter-spacing: -0.48px;
+				text-align: right;
+				color: #979797;
+				cursor: pointer;
+			}
+		}
+		.categories{
+			font-family: "KaiseiOpti-Bold";
+			font-weight: 700;
+			font-size: 1.8rem;
+			line-height: 2.3rem;
+			color: #585858;
+			margin-bottom: 1.1rem;
+			padding: 0 1.2rem;
+		}
+		.line{
+			border-top: 0.5px solid #C4C4C4;
+			width: 27.1rem;
+			margin-bottom: 2.2rem;
+		}
+		.multiple{
+			padding: 0 2.3rem;
+			margin-bottom: 2.9rem;
+		}
+	}
+</style>
\ No newline at end of file