From b0ee5a07839e088c50991e12547184b85988e613 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 23 Apr 2026 11:48:22 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                              |   7 +
 src/assets/css/style.css                 |  42 +--
 src/assets/css/style.less                |   4 +-
 src/assets/icons/order/delete.svg        |   5 +
 src/assets/icons/order/file.svg          |   8 +
 src/assets/icons/order/shop.svg          |   5 +
 src/router/index.ts                      |   5 +
 src/views/main-header.vue                |   4 +-
 src/views/shoppingCart/index.vue         |  45 +++
 src/views/shoppingCart/order-summary.vue | 160 ++++++++
 src/views/shoppingCart/sc-list.vue       | 441 +++++++++++++++++++++++
 11 files changed, 689 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/icons/order/delete.svg
 create mode 100644 src/assets/icons/order/file.svg
 create mode 100644 src/assets/icons/order/shop.svg
 create mode 100644 src/views/shoppingCart/index.vue
 create mode 100644 src/views/shoppingCart/order-summary.vue
 create mode 100644 src/views/shoppingCart/sc-list.vue

diff --git a/src/App.vue b/src/App.vue
index 9280810..d70a322 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,10 +25,17 @@
 	})
 	onMounted(() => {
 		observer.observe(viewRef.value)
+		console.log('onMounted')
 	})
 	onBeforeUnmount(() => {
 		observer.disconnect()
 	})
+	window['onClickPrivacy'] = () => {
+		const e = window.event || event
+		e.stopPropagation()
+		e.preventDefault()
+		console.log('点击了隐私政策')
+	}
 </script>
 
 <style lang="less">
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index a936de1..a2f284e 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -96,8 +96,11 @@ body,
   --el-color-primary-dark-2: #565656;
   /* 深灰色（加深20%） */
 }
+.mini-scrollbar {
+  --mini-scrollbar-width: 0.4rem;
+}
 .mini-scrollbar::-webkit-scrollbar {
-  width: 0.4rem;
+  width: var(--mini-scrollbar-width);
 }
 .mini-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 0.4rem;
@@ -107,42 +110,13 @@ body,
   --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-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);
 }
-
-.flex {
-  display: flex;
-}
-.flex-center {
-  justify-content: center;
-  align-items: center;
-}
-.flex-1 {
-  flex: 1;
-}
-.flex-col {
-  flex-direction: column;
-}
-.align-center {
-  align-items: center;
-}
-.space-between {
-  justify-content: space-between;
-}
-.justify-center {
-  justify-content: center;
-}
-.relative {
-  position: relative;
-}
 button[custom],
-button[custom='white'] {
+button[custom="white"] {
   min-width: 19.4rem;
   height: 5rem;
   padding: 0 1rem;
@@ -155,11 +129,11 @@ button[custom='white'] {
   cursor: pointer;
 }
 button[custom]:active,
-button[custom='white']:active {
+button[custom="white"]:active {
   background: var(--button-click-bgcolor, #e4e4e4);
   color: var(--button-click-color, #232323);
 }
-button[custom='black'] {
+button[custom="black"] {
   --button-bgcolor: #232323;
   --button-color: #fff;
   --button-click-bgcolor: #333;
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index 9aad643..aa2c38d 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -118,8 +118,10 @@ body,
 
 // 迷你滚动条
 .mini-scrollbar {
+	--mini-scrollbar-width: 0.4rem;
+
 	&::-webkit-scrollbar {
-		width: 0.4rem;
+		width: var(--mini-scrollbar-width);
 	}
 
 	&::-webkit-scrollbar-thumb {
diff --git a/src/assets/icons/order/delete.svg b/src/assets/icons/order/delete.svg
new file mode 100644
index 0000000..4958ffd
--- /dev/null
+++ b/src/assets/icons/order/delete.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.678 5.85487H13.4861V4.03579C13.4861 3.18961 12.7965 2.5 11.9503 2.5H7.47716C6.63099 2.5 5.94138 3.18961 5.94138 4.03579V5.85487H3.74953C3.51841 5.85487 3.33203 6.04125 3.33203 6.27237C3.33203 6.50348 3.51841 6.68986 3.74953 6.68986H4.45032V15.9642C4.45032 16.8104 5.13993 17.5 5.98611 17.5H13.4414C14.2875 17.5 14.9772 16.8104 14.9772 15.9642V6.69359H15.678C15.9091 6.69359 16.0954 6.50721 16.0954 6.27609C16.0954 6.04498 15.9091 5.8586 15.678 5.8586V5.85487ZM7.47716 3.33872H11.9503C12.3343 3.33872 12.6511 3.65184 12.6511 4.03951V5.69831C12.6511 5.78777 12.5803 5.8586 12.4908 5.8586H6.94038C6.85092 5.8586 6.78009 5.78777 6.78009 5.69831V4.03951C6.78009 3.65557 7.09321 3.33872 7.48089 3.33872H7.47716ZM13.4414 16.6687H5.98611C5.60216 16.6687 5.28531 16.3556 5.28531 15.9679V6.69359H14.1384V15.9679C14.1384 16.3519 13.8253 16.6687 13.4376 16.6687H13.4414Z" fill="#808080"/>
+<path d="M8.22287 8.83685C7.95448 8.83685 7.73828 9.05306 7.73828 9.32145V13.6641C7.73828 13.9325 7.95448 14.1487 8.22287 14.1487C8.49126 14.1487 8.70747 13.9325 8.70747 13.6641V9.32145C8.70747 9.05306 8.49126 8.83685 8.22287 8.83685Z" fill="#808080"/>
+<path d="M11.2072 8.83685C10.9389 8.83685 10.7227 9.05306 10.7227 9.32145V13.6641C10.7227 13.9325 10.9389 14.1487 11.2072 14.1487C11.4756 14.1487 11.6918 13.9325 11.6918 13.6641V9.32145C11.6918 9.05306 11.4756 8.83685 11.2072 8.83685Z" fill="#808080"/>
+</svg>
diff --git a/src/assets/icons/order/file.svg b/src/assets/icons/order/file.svg
new file mode 100644
index 0000000..5c38930
--- /dev/null
+++ b/src/assets/icons/order/file.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.5C13.0376 0.5 15.5 2.96243 15.5 6V17.5H0.5V0.5H10Z" stroke="#232323" stroke-linejoin="round"/>
+<path d="M10.5 0.5C10.5 5 10.7 5 15.5 5" stroke="#232323"/>
+<path d="M4 8H12" stroke="#232323" stroke-linecap="round"/>
+<path d="M4 5H8" stroke="#232323" stroke-linecap="round"/>
+<path d="M4 11H12" stroke="#232323" stroke-linecap="round"/>
+<path d="M4 14H12" stroke="#232323" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/order/shop.svg b/src/assets/icons/order/shop.svg
new file mode 100644
index 0000000..2aa4cae
--- /dev/null
+++ b/src/assets/icons/order/shop.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6.4C20 5.3 19.1 4 18 4H7.5C7.4 4 7.2 4 7.1 4C5.9 4.2 5 5.2 5 6.4L4 9C4 10.4 5.1 11.5 6.5 11.5C7.9 11.5 8.1 11.1 8.5 10.5C8.9 11.1 9.7 11.5 10.5 11.5C11.3 11.5 12.1 11.1 12.5 10.5C12.9 11.1 13.7 11.5 14.5 11.5C15.3 11.5 16.1 11.1 16.5 10.5C16.9 11.1 17.7 11.5 18.5 11.5C19.9 11.5 21 10.4 21 9M5.9 6.4C5.9 5.6 6.5 5 7.2 4.9C7.2 4.9 7.3 4.9 7.4 4.9H17.9C18.5 4.9 19 5.8 19 6.4C19 7 20 9.1 20 9.1C20 10 19.3 10.7 18.4 10.7C17.5 10.7 16.8 10 16.8 9.1V7.6H15.9V9.1C15.9 10 15.2 10.7 14.3 10.7C13.4 10.7 12.7 10 12.7 9.1V7.6H11.8V9.1C11.8 10 11.1 10.7 10.2 10.7C9.3 10.7 8.6 10 8.6 9.1V7.6H7.7V9.1C7.7 10 7.50938 10.7 6.60938 10.7C5.48438 10.7 4.9 9.9 4.9 9L5.9 6.4Z" fill="#232323"/>
+<path d="M6 11.2V19.3C6 19.9 6.4 20.3 7 20.3H18C18.6 20.3 19 19.9 19 19.3V13.5" stroke="#232323" stroke-linecap="round"/>
+<path d="M17 15.5V13.5C17 13.2239 16.7761 13 16.5 13C16.2239 13 16 13.2239 16 13.5V15.5C16 15.7761 16.2239 16 16.5 16C16.7761 16 17 15.7761 17 15.5Z" fill="#232323"/>
+</svg>
diff --git a/src/router/index.ts b/src/router/index.ts
index 7c94de4..1bff1b5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -29,6 +29,11 @@ const router = createRouter({
       component: () => import('@/views/setting/index.vue'),
       meta: { cache: true }
     },
+    {
+      path: '/shoppingCart',// 购物车
+      name: 'shoppingCart',
+      component: () => import('@/views/shoppingCart/index.vue')
+    },
     {
       path: '/:pathMatch(.*)',
       name: '404',
diff --git a/src/views/main-header.vue b/src/views/main-header.vue
index 406d949..c700cfb 100644
--- a/src/views/main-header.vue
+++ b/src/views/main-header.vue
@@ -95,7 +95,7 @@
 		{
 			icon: 'cart_0',
 			active_icon: 'cart_1',
-			path: '/cart'
+			path: '/shoppingCart'
 		},
 		{
 			icon: 'user_0',
@@ -132,7 +132,7 @@
 	}
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 	#main-header {
 		height: var(--header-height);
 		display: flex;
diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue
new file mode 100644
index 0000000..c4c7e0f
--- /dev/null
+++ b/src/views/shoppingCart/index.vue
@@ -0,0 +1,45 @@
+<template>
+	<div class="shopping-cart">
+		<div class="content">
+			<sc-list />
+			<sc-list is-mini style="flex: 0.6; height: var(--app-view-height)" />
+			<!-- <order-summary /> -->
+		</div>
+		<my-footer />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, defineComponent, onActivated } from 'vue'
+	import orderSummary from './order-summary.vue'
+	import scList from './sc-list.vue'
+	import myFooter from '@/components/Footer.vue'
+</script>
+
+<style lang="less" scoped>
+	.shopping-cart {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		overflow-y: auto;
+		--content-top: 4.8rem;
+		> .content {
+			max-width: 126rem;
+			padding-top: var(--content-top);
+			margin: 0 auto;
+			min-height: var(--app-view-height);
+			display: flex;
+			align-items: flex-start;
+			> .sc-list {
+				flex: 1;
+				margin-right: 7.5rem;
+				--sc-list-header-top: var(--content-top);
+			}
+			> .order-summary {
+				position: sticky;
+				top: var(--content-top);
+				max-height: var(--app-view-height);
+			}
+		}
+	}
+</style>
diff --git a/src/views/shoppingCart/order-summary.vue b/src/views/shoppingCart/order-summary.vue
new file mode 100644
index 0000000..f42b138
--- /dev/null
+++ b/src/views/shoppingCart/order-summary.vue
@@ -0,0 +1,160 @@
+<template>
+	<div class="order-summary">
+		<div class="title">Order Summary</div>
+		<div class="count">
+			<span class="label">Selected</span>
+			<span class="value">3</span>
+		</div>
+		<div class="hr"></div>
+		<div class="brands-header">
+			<span class="icon"><svg-icon name="order-shop" size="18" /></span>
+			<span class="text">Brands</span>
+		</div>
+		<div class="brands-item" v-for="v in brandsList" :key="v.name">
+			<span class="label">{{ v.name }}</span>
+			<span class="value"
+				><span>{{ v.count }}</span
+				>item</span
+			>
+		</div>
+		<br />
+		<div class="total-file-size">
+			<span class="label">
+				<span class="icon"><svg-icon name="order-file" size="18" /></span>
+				<span class="text">Total File Size</span>
+			</span>
+			<span class="value">36 <span>mb</span></span>
+		</div>
+		<div class="hr"></div>
+		<br />
+		<div class="total">
+			<span class="label">Total</span>
+			<span class="value"><span>$45.00</span> HKD</span>
+		</div>
+		<div class="hr"></div>
+		<button class="checkout-btn" custom="black">CHECKOUT SELECTED</button>
+		<div class="tip">Digital assets. Creator retains copyright.</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const brandsList = ref([
+		{
+			name: 'Roaming Clouds',
+			count: 1
+		},
+		{
+			name: 'Off Grid Apparel',
+			count: 1
+		},
+		{
+			name: 'Ivory Muse Studio',
+			count: 1
+		}
+	])
+</script>
+
+<style lang="less" scoped>
+	.order-summary {
+		width: 39.8rem;
+		padding: 3rem 2rem 3rem 2.4rem;
+		height: auto;
+		background-color: #f6f6f6;
+		> .title {
+			font-family: KaiseiOpti-Bold;
+			font-size: 2.4rem;
+			line-height: 2.3rem;
+			color: #232323;
+			margin-bottom: 1.8rem;
+		}
+		> div {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+		> .count {
+			color: #232323;
+			> .label {
+				font-size: 1.6rem;
+			}
+			> .value {
+				font-size: 1.4rem;
+			}
+		}
+		> .hr {
+			margin: 1.2rem 0;
+			width: 100%;
+			height: 0;
+			border-top: 0.1rem solid #c4c4c4;
+		}
+		> .brands-header {
+			justify-content: flex-start;
+
+			margin-bottom: 1rem;
+			> .icon {
+				width: 2.4rem;
+				height: 2.4rem;
+				margin-right: 0.4rem;
+			}
+			> .text {
+				font-size: 1.4rem;
+				color: #232323;
+			}
+		}
+		> .brands-item {
+			margin-bottom: 0.8rem;
+			padding-left: 1rem;
+			font-size: 1.2rem;
+			> .label {
+				text-decoration: underline;
+				color: #585858;
+			}
+			> .value {
+				color: #808080;
+				&:deep(span) {
+					font-size: 1.4rem;
+					color: #585858;
+					margin-right: 0.8rem;
+				}
+			}
+		}
+		> .total-file-size {
+			> .label {
+				display: flex;
+				align-items: center;
+
+				> .icon {
+					width: 2.4rem;
+					height: 2.4rem;
+					margin-right: 0.4rem;
+				}
+			}
+			> .value {
+				> span {
+					color: #808080;
+				}
+			}
+		}
+		> .total {
+			> .value {
+				color: #585858;
+				> span {
+					font-size: 2.2rem;
+					color: #232323;
+				}
+			}
+		}
+		> .checkout-btn {
+			width: 100%;
+			margin-top: 3rem;
+		}
+		> .tip {
+			margin-top: 1rem;
+			font-family: KaiseiOpti-Regular;
+			font-size: 1.2rem;
+			justify-content: center;
+			color: #808080;
+		}
+	}
+</style>
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
new file mode 100644
index 0000000..6458175
--- /dev/null
+++ b/src/views/shoppingCart/sc-list.vue
@@ -0,0 +1,441 @@
+<template>
+	<!-- 购物车列表 -->
+	<div class="sc-list" :class="{ mini: isMini }">
+		<div class="header">
+			<div class="title">
+				<span class="text">Shopping Cart</span>
+				<span class="close" v-if="isMini" @click="onClose"
+					><svg-icon name="close" size="13"
+				/></span>
+			</div>
+			<div class="options" v-if="!isMini">
+				<div class="left">
+					<el-checkbox v-model="check" :indeterminate="true" />
+					<span class="count">3 Selected</span>
+					<div class="hr"></div>
+					<div class="btn">Select All</div>
+					<div class="btn">Deselect All</div>
+				</div>
+				<div class="right">
+					<el-select v-model="sortBy" 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 sortByOptions"
+							:key="item.label"
+							:value="item.value"
+							:label="item.label"
+						/>
+					</el-select>
+				</div>
+			</div>
+		</div>
+		<div class="list">
+			<div class="item" v-for="v in list" :key="v.id">
+				<el-checkbox v-model="v.checked" v-if="!isMini" />
+				<img :src="v.url" />
+				<div class="content">
+					<div class="title">{{ v.title }}</div>
+					<div class="brand">
+						<span class="icon"><svg-icon name="order-shop" size="24" /></span>
+						<span class="text">{{ v.brand }}</span>
+					</div>
+					<div class="tags" v-if="!isMini">
+						<span v-for="tag in v.tags" :key="tag" class="tag">{{ tag }}</span>
+					</div>
+					<div class="size">
+						<div class="icon"><svg-icon name="order-file" size="18" /></div>
+						<div class="text">
+							{{ v.fileSize }}kb{{
+								isMini ? '' : ` &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;${v.date}`
+							}}
+						</div>
+					</div>
+				</div>
+				<div class="right">
+					<div class="amount">${{ v.amount }}<span> HKD</span></div>
+					<div class="remove">
+						<span class="icon"><svg-icon name="order-delete" size="18" /></span>
+						<span class="text">Remove</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="footer" v-if="isMini">
+			<div class="total">
+				<span class="label">Total</span>
+				<span class="value">$45.00<span> HKD</span></span>
+			</div>
+			<button custom="black">CHECKOUT</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const emit = defineEmits(['close'])
+
+	const props = defineProps({
+		isMini: {
+			type: Boolean,
+			default: false
+		}
+	})
+	const check = ref(true)
+	const sortBy = ref('')
+	const sortByOptions = ref([
+		{
+			label: 'Default',
+			value: 'Default'
+		},
+		{
+			label: 'Selected First',
+			value: 'Selected First'
+		},
+		{
+			label: 'Date Added',
+			value: 'Date Added'
+		}
+	])
+
+	const list = ref([
+		{
+			id: 1,
+			url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
+			title: 'North Outfit Set',
+			brand: 'Roaming Clouds',
+			fileSize: 1024, // kb
+			date: 'Feb 16, 2026, 11:34 PM',
+			amount: 49.99,
+			tags: ['female', 'skirt', 'blouse', 'outwear'],
+			checked: true
+		},
+		{
+			id: 2,
+			url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
+			title: 'Weekend Drift Co-ord',
+			brand: 'Urban Line Edit',
+			fileSize: 100, // kb
+			date: 'Feb 16, 2026, 11:34 PM',
+			amount: 9.99,
+			tags: ['female', 'skirt', 'blouse', 'outwear'],
+			checked: false
+		}
+	])
+	const onClose = () => {
+		emit('close')
+	}
+</script>
+
+<style lang="less" scoped>
+	.sc-list {
+		display: flex;
+		flex-direction: column;
+		&.mini {
+			height: 100%;
+			overflow: hidden;
+			--sc-list-title-font-size: 2rem;
+			--sc-list-list-item-padding: 2rem 0;
+			--sc-list-list-item-img-width: 10.4rem;
+			--sc-list-list-item-img-height: 13.2rem;
+			--sc-list-list-item-content-margin: 0 2rem;
+			--sc-list-list-item-margin-bottom: 0.8rem;
+			--sc-list-list-item-title-font-size: 1.6rem;
+			--sc-list-list-item-brand-font-size: 1.4rem;
+			--sc-list-list-item-amount-font-size: 1.8rem;
+			--sc-list-list-item-currency-font-size: 1.6rem;
+			> .list {
+				flex: 1;
+				min-height: 30rem;
+				overflow-y: auto;
+				> .item {
+					> .content {
+						align-self: baseline;
+					}
+					> .right {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: flex-end;
+						height: var(--sc-list-list-item-img-height);
+					}
+				}
+			}
+		}
+		&:not(.mini) {
+			> .header {
+				position: sticky;
+				top: var(--sc-list-header-top, 0);
+				background-color: #fff;
+				z-index: 999;
+				&:after {
+					content: '';
+					position: absolute;
+					top: 1px;
+					left: 0;
+					width: 100%;
+					height: calc(var(--sc-list-header-top, 0) + 2px);
+					transform: translateY(-100%);
+					background-color: #fff;
+				}
+			}
+		}
+		> .header {
+			border-bottom: 0.1rem solid #c4c4c4;
+			padding-bottom: 3rem;
+			> .title {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				> .text {
+					font-family: KaiseiOpti-Bold;
+					font-size: var(--sc-list-title-font-size, 4rem);
+					color: #121212;
+				}
+				> .close {
+					width: 2.4rem;
+					height: 2.4rem;
+					cursor: pointer;
+				}
+			}
+			> .options {
+				margin-top: 1rem;
+				display: flex;
+				justify-content: space-between;
+				> .left {
+					display: flex;
+					align-items: center;
+					> .count {
+						font-family: KaiseiOpti-Regular;
+						font-size: 1.8rem;
+						color: #232323;
+					}
+					> .hr {
+						width: 0;
+						height: 100%;
+						border-left: 0.1rem solid #c4c4c4;
+						margin: 0 2rem;
+					}
+					> .btn {
+						margin-right: 1.2rem;
+						font-family: KaiseiOpti-Regular;
+						font-size: 1.8rem;
+						color: #979797;
+						text-decoration: underline;
+						user-select: none;
+						cursor: pointer;
+					}
+				}
+			}
+		}
+		> .list {
+			// height: 1000px;
+			> .item {
+				border-bottom: 0.1rem solid #c4c4c4;
+				padding: var(--sc-list-list-item-padding, 2.4rem 0);
+				display: flex;
+				align-items: center;
+				> img {
+					width: var(--sc-list-list-item-img-width, 14.8rem);
+					height: var(--sc-list-list-item-img-height, 18.8rem);
+					object-fit: contain;
+					background-color: #f6f6f6;
+				}
+				> .content {
+					flex: 1;
+					margin: var(--sc-list-list-item-content-margin, 0 4rem);
+					> * {
+						margin-bottom: var(--sc-list-list-item-margin-bottom, 1.6rem);
+						&:last-child {
+							margin-bottom: 0;
+						}
+					}
+					> .title {
+						font-family: KaiseiOpti-Bold;
+						font-size: var(--sc-list-list-item-title-font-size, 2.4rem);
+						color: #232323;
+					}
+					> .brand {
+						display: flex;
+						align-items: center;
+						> .icon {
+							width: 2.4rem;
+							height: 2.4rem;
+							margin-right: 1rem;
+						}
+						> .text {
+							font-size: var(--sc-list-list-item-brand-font-size, 1.6rem);
+							text-decoration: underline;
+							color: #232323;
+						}
+					}
+					> .tags {
+						display: flex;
+						flex-wrap: wrap;
+						gap: 0.8rem;
+						> .tag {
+							min-width: 8.8rem;
+							height: 2.4rem;
+							line-height: 2.4rem;
+							border-radius: 2.4rem;
+							font-size: 1.4rem;
+							padding: 0 1rem;
+							text-align: center;
+							color: #8f8f8f;
+							background-color: #eee;
+						}
+					}
+					> .size {
+						display: flex;
+						align-items: center;
+						> .icon {
+							width: 2.4rem;
+							height: 2.4rem;
+							margin-right: 1rem;
+							color: #808080;
+						}
+
+						> .text {
+							font-family: KaiseiOpti-Regular;
+							font-size: 1.4rem;
+							color: #808080;
+						}
+					}
+				}
+				> .right {
+					align-self: end;
+					> .amount {
+						font-family: KaiseiOpti-Bold;
+						font-size: var(--sc-list-list-item-amount-font-size, 2.2rem);
+						color: #232323;
+						> span {
+							font-size: var(--sc-list-list-item-currency-font-size, 1.4rem);
+							color: #585858;
+							vertical-align: bottom;
+						}
+					}
+					> .remove {
+						margin-top: var(--sc-list-list-item-remove-margin-top, 9rem);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						user-select: none;
+						cursor: pointer;
+						> .icon {
+							width: 2rem;
+							height: 2rem;
+							margin-right: 0.4rem;
+						}
+						> .text {
+							font-family: KaiseiOpti-Regular;
+							font-size: 1.4rem;
+							color: #808080;
+						}
+					}
+				}
+			}
+		}
+		> .footer {
+			margin-top: 3rem;
+			> .total {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				> .label {
+					font-family: KaiseiOpti-Bold;
+					font-size: 1.6rem;
+					color: #121212;
+				}
+				> .value {
+					font-family: KaiseiOpti-Bold;
+					font-size: 2rem;
+					color: #232323;
+					> span {
+						font-family: KaiseiOpti-Medium;
+						font-size: 1.6rem;
+						color: #585858;
+						vertical-align: bottom;
+					}
+				}
+			}
+			> button {
+				width: 100%;
+				height: 4.6rem;
+				--button-font-size: 1.4rem;
+				margin-top: 2rem;
+			}
+		}
+	}
+	.sc-list:deep(.el-checkbox) {
+		margin-right: 3rem;
+		height: auto;
+		--el-checkbox-font-size: 1.4rem;
+		--el-checkbox-input-width: 2.4rem;
+		--el-checkbox-input-height: 2.4rem;
+		--el-checkbox-checked-bg-color: #000;
+		--el-checkbox-checked-input-border-color: #000;
+		--el-checkbox-input-border: 0.1rem solid #232323;
+		--el-checkbox-bg-color: #fff;
+		--el-checkbox-border-radius: 0;
+		.el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
+			height: 0.2rem;
+			width: 65%;
+			top: 50%;
+			left: 50%;
+			transform: scale(1) translate(-50%, -50%);
+			border-radius: 0.1rem;
+		}
+		.el-checkbox__inner:after {
+			width: 0.6rem;
+			height: 1.3rem;
+			border-width: 0.2rem;
+		}
+	}
+	.sc-list: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;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file

From 45298e5f23946b63e90a451b78db88898628ecfe Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Thu, 23 Apr 2026 14:08:35 +0800
Subject: [PATCH 2/6] =?UTF-8?q?digital=20item=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.css                 |   1 +
 src/assets/css/style.less                |   1 +
 src/assets/icons/digital/Info.svg        |   5 +
 src/assets/icons/digital/back.svg        |   4 +
 src/assets/icons/digital/document.svg    |   8 +
 src/components/CommodityItem.vue         |  13 +-
 src/router/index.ts                      |   6 +
 src/views/brand/index.vue                |   7 +-
 src/views/digitalDetail/index.vue        | 319 +++++++++++++++++++++++
 src/views/digitalItem/commodity-list.vue |   8 +-
 src/views/digitalItem/index.vue          |  23 +-
 src/views/shoppingCart/sc-list.vue       |   3 +-
 12 files changed, 388 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/digital/Info.svg
 create mode 100644 src/assets/icons/digital/back.svg
 create mode 100644 src/assets/icons/digital/document.svg
 create mode 100644 src/views/digitalDetail/index.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index a2f284e..ef2ec9c 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -20,6 +20,7 @@ body,
   height: 100%;
   overflow: hidden;
   font-family: 'KaiseiOpti-Medium';
+  color: #232323;
 }
 @keyframes loading {
   0% {
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index aa2c38d..1557dc7 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -22,6 +22,7 @@ body,
 	height: 100%;
 	overflow: hidden;
 	font-family: 'KaiseiOpti-Medium';
+	color: #232323;
 }
 
 @keyframes loading {
diff --git a/src/assets/icons/digital/Info.svg b/src/assets/icons/digital/Info.svg
new file mode 100644
index 0000000..2f8a672
--- /dev/null
+++ b/src/assets/icons/digital/Info.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.995 2C6.48087 2 2 6.48584 2 12C2 17.5142 6.48584 22 11.995 22C17.5042 22 21.9901 17.5142 21.9901 12C21.9901 6.48584 17.5092 2 11.995 2ZM11.995 20.8823C7.09687 20.8823 3.11277 16.8982 3.11277 12C3.11277 7.10184 7.09687 3.11773 11.995 3.11773C16.8932 3.11773 20.8773 7.10184 20.8773 12C20.8773 16.8982 16.8932 20.8823 11.995 20.8823Z" fill="#585858"/>
+<path d="M12.6169 11.0065C12.6169 10.6636 12.3389 10.3856 11.996 10.3856C11.653 10.3856 11.375 10.6636 11.375 11.0065V16.9678C11.375 17.3107 11.653 17.5887 11.996 17.5887C12.3389 17.5887 12.6169 17.3107 12.6169 16.9678V11.0065Z" fill="#585858"/>
+<path d="M11.9935 8.02584C12.54 8.02584 12.9871 7.57875 12.9871 7.0323C12.9871 6.48585 12.54 6.03876 11.9935 6.03876C11.4471 6.03876 11 6.48585 11 7.0323C11 7.57875 11.4471 8.02584 11.9935 8.02584Z" fill="#585858"/>
+</svg>
diff --git a/src/assets/icons/digital/back.svg b/src/assets/icons/digital/back.svg
new file mode 100644
index 0000000..714ef99
--- /dev/null
+++ b/src/assets/icons/digital/back.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.583333" y="0.583333" width="26.8333" height="26.8333" stroke="#232323" stroke-width="1.16667"/>
+<path d="M17.2441 19.3639C17.4438 19.5645 17.4438 19.8889 17.2441 20.0895C17.0442 20.2903 16.7205 20.2903 16.5205 20.0895L10.709 14.2506L10.707 14.2477C10.5752 14.1088 10.5718 13.8877 10.709 13.7496L16.5205 7.91077C16.7205 7.70981 17.0441 7.70981 17.2441 7.91077C17.4438 8.11136 17.4438 8.43576 17.2441 8.63635L12.0029 13.902V13.9078L11.9639 13.9489C11.9326 13.982 11.9358 14.0298 11.9619 14.0563L17.2441 19.3639Z" fill="#232323" stroke="#232323" stroke-width="0.28"/>
+</svg>
diff --git a/src/assets/icons/digital/document.svg b/src/assets/icons/digital/document.svg
new file mode 100644
index 0000000..41fc0db
--- /dev/null
+++ b/src/assets/icons/digital/document.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3.5C17.0376 3.5 19.5 5.96243 19.5 9V20.5H4.5V3.5H14Z" stroke="#585858" stroke-linejoin="round"/>
+<path d="M14.5 3.5C14.5 8 14.7 8 19.5 8" stroke="#585858"/>
+<path d="M8 11H16" stroke="#585858" stroke-linecap="round"/>
+<path d="M8 8H12" stroke="#585858" stroke-linecap="round"/>
+<path d="M8 14H16" stroke="#585858" stroke-linecap="round"/>
+<path d="M8 17H16" stroke="#585858" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/CommodityItem.vue b/src/components/CommodityItem.vue
index 281c18b..97e58d8 100644
--- a/src/components/CommodityItem.vue
+++ b/src/components/CommodityItem.vue
@@ -15,14 +15,17 @@ const props = defineProps({
 	}
 })
 const emit = defineEmits([
-	'addShopping'
+	'addShopping',
+	'openDetail'
 ])
 let data = reactive({
 })
 const addShopping = () => {
 	emit('addShopping')
 }
- 
+const openDetail = () => {
+	emit('openDetail')
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -32,7 +35,7 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="commodity-item">
-		<img :src="props.url" alt="">
+		<img :src="props.url" alt="" @click="openDetail">
 		<div class="detail">
 			<div class="text">
 				<div class="name">
@@ -55,6 +58,7 @@ const {} = toRefs(data);
 		width: var(--commodity-width,100%);
 		> img{
 			width: 100%;
+			cursor: pointer;
 			height: var(--commodity-height,auto);
 			margin-bottom: var(--commodity-marginBottom,1rem);
 		}
@@ -79,5 +83,8 @@ const {} = toRefs(data);
 				}
 			}
 		}
+		.btn{
+			cursor: pointer;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index be8cbea..212aab6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -27,6 +27,12 @@ const router = createRouter({
 		path: '/digitalItem',
 		name: 'digitalItem',
 		component: () => import('../views/digitalItem/index.vue'),
+		meta: { cache: true }
+	},
+	{
+		path: '/digitalItem/:id',
+		name: 'digitalItemDetail',
+		component: () => import('../views/digitalDetail/index.vue'),
 	},
     {
       path: '/settings',
diff --git a/src/views/brand/index.vue b/src/views/brand/index.vue
index 9e2999d..b96b418 100644
--- a/src/views/brand/index.vue
+++ b/src/views/brand/index.vue
@@ -2,13 +2,18 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
+import { useRouter } from "vue-router";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const router = useRouter()
 let data = reactive({
 })
 const addShopping = (item) => {}
+const openDetail = (item) => {	
+	router.push({name: 'digitalDetail', params: {id: item.id}})
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -26,7 +31,7 @@ const {} = toRefs(data);
 				<MerchantInfo></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping"></CommodityList>
+				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
 			</div>
 		</div>
 		<Footer></Footer>
diff --git a/src/views/digitalDetail/index.vue b/src/views/digitalDetail/index.vue
new file mode 100644
index 0000000..d1776aa
--- /dev/null
+++ b/src/views/digitalDetail/index.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { useRouter } from "vue-router";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+import scList from '@/views/shoppingCart/sc-list.vue'
+
+
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+const router = useRouter()
+let data = reactive({
+})
+const isShoppingShow = ref(false)
+const addShopping = (item) => {
+	isShoppingShow.value = true
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="digitalItemDetail">
+		<div class="center">
+			<div class="img-list">
+				<div class="title">
+					<div>Sketch</div>
+					<div>Illustration</div>
+					<div>Product</div>
+				</div>
+				<div class="img">
+					<div class="sketch">
+						<img :src="img" v-for="item in 4" :key="item" alt="">
+					</div>
+					<div class="illustration">
+						<img :src="img" v-for="item in 4" :key="item" alt="">
+					</div>
+					<div class="product">
+						<img :src="img" v-for="item in 4" :key="item" alt="">
+					</div>
+				</div>
+				
+			</div>
+			<div class="img-detail">
+				<div class="back" @click="router.back()">
+					<div class="icon">
+						<svg-icon name="digital-back" size="28"></svg-icon>
+					</div>
+					<span>Back</span>
+				</div>
+				<div class="img-info">
+					<div class="img-type">FEMALE / skirt, blouse, Outwear</div>
+					<div class="img-name">Heritage Layered Set</div>
+					<div class="img-price">$100 <span class="mini-scrollbar">HKD</span></div>
+				</div>
+				<div class="commodity">
+					<div class="info">
+						<img class="profile" :src="img" alt="">
+						<div class="detail">
+							<div class="name">Roaming Clouds</div>
+							<div class="release-time">
+								<div class="icon">
+									<svg-icon name="digital-document" size="24"></svg-icon>
+								</div>
+								<span>12mb  |  Release in Feb 26, 2026</span>
+							</div>
+						</div>
+					</div>
+					<div class="introduce">
+						This ensemble artfully merges traditional folk heritage with contemporary tailoring, creating a timeless silhouette that honors ancestral craftsmanship while embracing modern sophistication.
+					</div>
+				</div>
+				<div class="notice">
+					<div class="title">Copyright & License Notice</div>
+					<div class="conter">
+						<div class="contet-title">
+							<div class="icon">
+								<svg-icon name="digital-Info" size="24"></svg-icon>
+							</div>
+							<span>License Included in Asset</span>
+						</div>
+						<div class="info">
+							All products on this platform are digital assets, not physical goods. Purchase grants a usage license only; copyright and intellectual property rights remain with the original creator, unless otherwise stated.
+						</div>
+					</div>
+				</div>
+				<div class="button">
+					<div class="buy-now">Buy Now</div>
+					<div class="add-cart" @click="addShopping(item)">
+						<div class="icon">
+							<svg-icon name="cart_0" size="24"></svg-icon>
+						</div>
+						Add to Cart 
+					</div>
+				</div>
+			</div>
+		</div>
+		<Footer></Footer>
+		<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
+			<sc-list is-mini style="flex: 0.6;" @close="isShoppingShow = false"/>
+	  	</el-drawer>
+	</div>
+</template>
+<style lang="less" scoped>
+	:deep(.el-drawer__body){
+		--el-drawer-padding-primary: 2.4rem 3.4rem 2.4rem 6rem;
+	}
+	.digitalItemDetail{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.center{
+			flex: 1;
+			display: flex;
+			overflow: hidden;
+			.img-list{
+				display: flex;
+				flex: 1;
+				flex-direction: column;
+				--row-width: 33.333%;
+				// --row-width: 29.3rem;
+				overflow-y: auto;
+				&::-webkit-scrollbar{
+					display: none;
+				}
+				> .title{
+					display: flex;
+					position: sticky;
+					top: 0;
+					> div{
+						width: var(--row-width);
+						line-height: 8.6rem;
+						padding-left: 2.4rem;
+						border-right: 0.5px solid #C4C4C4;
+						font-weight: 500;
+						font-size: 1.6rem;
+						background-color: #f5f5f5;
+						&:last-child{
+							border: none;
+						}
+					}
+				}
+				> .img{
+					display: flex;
+					
+					> div{
+						display: flex;
+						width: var(--row-width);
+						border-right: 0.5px solid #C4C4C4;
+						flex-direction: column;
+						&:last-child{
+							border: none;
+						}
+					}
+				}
+			}
+			.img-detail{
+				border-left: 0.5px solid #585858;
+				padding-left: 3.2rem;
+				width: 57rem;
+				display: flex;
+				flex-direction: column;
+				overflow-y: auto;
+				&::-webkit-scrollbar{
+					display: none;
+				}
+				.back{
+					display: flex;
+					margin-top: 2.8rem;
+					gap: 1.4rem;
+					align-items: center;
+					width: min-content;
+					cursor: pointer;
+					> span{
+						font-weight: 500;
+						font-size: 1.6rem;
+						line-height: 120%;
+					}
+				}
+				.img-info{
+					margin-top: 2.8rem;
+					.img-type{
+						font-weight: 500;
+						font-size: 1.2rem;
+						line-height: 120%;
+						color: #808080;
+						margin-bottom: 1rem;
+					}
+					.img-name{
+						font-family: KaiseiOpti-Bold;
+						font-weight: 700;
+						font-size: 3rem;
+						line-height: 120%;
+						margin-bottom: 1rem;
+					}
+					.img-price{
+						font-family: KaiseiOpti-Bold;
+						font-weight: 700;
+						font-size: 3rem;
+						line-height: 120%;
+						> span{
+							font-weight: 500;
+							font-size: 2rem;
+							line-height: 120%;
+							color: #585858;
+						}
+					}
+				}
+				.commodity{
+					margin-top: 4rem;
+					.info{
+						display: flex;
+						gap: 1.4rem;
+						margin-bottom: 1.4rem;
+						> .profile{
+							width: 5.4rem;
+							height: 5.4rem;
+							object-fit: cover;
+						}
+						> .detail{
+							.name{
+								text-decoration: underline;
+								font-weight: 500;
+								font-size: 1.8rem;
+								line-height: 100%;
+								margin-bottom: .8rem;
+							}
+							.release-time{
+								font-family: KaiseiOpti-Regular;
+								font-weight: 400;
+								font-size: 1.4rem;
+								line-height: 140%;
+								color: #585858;
+								display: flex;
+								align-items: center;
+								> span{
+									margin-left: 1rem;
+								}
+							}
+						}
+					}
+					.introduce{
+						font-family: KaiseiOpti-Regular;
+						font-weight: 400;
+						font-size: 14px;
+						line-height: 140%;
+						color: #585858;
+						width: 50.8rem;
+					}
+				}
+				.notice{
+					margin-top: 6rem;
+					.title{
+						margin-bottom: 1rem;
+						font-weight: 500;
+						font-size: 1.8rem;
+						line-height: 140%;
+					}
+					.conter{
+						width: 50.8rem;
+						background-color: #f6f6f6;
+						padding: 2rem;
+						.contet-title{
+							margin-bottom: 1.2rem;
+							display: flex;
+							gap: .8rem;
+							align-items: center;
+							> span{
+								font-family: KaiseiOpti-Regular;
+								font-weight: 400;
+								font-size: 1.4rem;
+								line-height: 140%;
+							}
+						}
+						.info{
+							font-family: KaiseiOpti-Regular;
+							font-weight: 400;
+							font-size: 1.2rem;
+							line-height: 140%;
+							color: #585858;
+						}
+					}
+				}
+				.button{
+					width: 50.8rem;
+					margin-top: auto;
+					> div{
+						width: 100%;
+						font-weight: 500;
+						font-size: 1.6rem;
+						line-height: 120%;
+						letter-spacing: 3%;
+						border: 1px solid #232323;
+						line-height: 4.8rem;
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin-bottom: 2rem;
+					}
+					.buy-now{
+						background-color: #232323;
+						color: #fff;
+					}
+					.add-cart{
+						background-color: #fff;
+						color: #000;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/digitalItem/commodity-list.vue b/src/views/digitalItem/commodity-list.vue
index 9c99b70..199ec6a 100644
--- a/src/views/digitalItem/commodity-list.vue
+++ b/src/views/digitalItem/commodity-list.vue
@@ -4,7 +4,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 //const props = defineProps({
 //})
 const emit = defineEmits([
-	'addShopping'
+	'addShopping',
+	'openDetail'
 ])
 let data = reactive({
 })
@@ -47,6 +48,9 @@ const type = ref('All')
 const addShopping = (item) => {
 	emit('addShopping', item)
 }
+const openDetail = (item) => {
+	emit('openDetail', item)
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -58,7 +62,7 @@ const {} = toRefs(data);
 	<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>
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
 			</div>
 		</div>
 	</div>
diff --git a/src/views/digitalItem/index.vue b/src/views/digitalItem/index.vue
index dcfb1cd..897cbc5 100644
--- a/src/views/digitalItem/index.vue
+++ b/src/views/digitalItem/index.vue
@@ -1,14 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, reactive, toRefs, onActivated } from "vue";
 import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
+import { useRouter } from "vue-router";
+// 定义组件名称
+defineOptions({
+  name: 'digitalItem'
+})
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const digitalItemRef = ref(null)
+const scrollTop = ref(0)
+const router = useRouter()
 let data = reactive({
 })
 const addShopping = (item) => {}
+const openDetail = (item) => {
+	scrollTop.value = digitalItemRef.value.scrollTop
+	router.push({
+		path: '/digitalItem/' + 123,
+	})
+}
+onActivated(()=>{
+	digitalItemRef.value.scrollTop = scrollTop.value
+})
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -17,7 +34,7 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<div class="digitalItem">
+	<div class="digitalItem" ref="digitalItemRef">
 		<div class="header-img">
 			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
 			<div class="text">
@@ -30,7 +47,7 @@ const {} = toRefs(data);
 				<MerchantInfo></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping"></CommodityList>
+				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
 			</div>
 		</div>
 		<Footer></Footer>
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
index 6458175..7a1748f 100644
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -137,6 +137,7 @@
 			height: 100%;
 			overflow: hidden;
 			--sc-list-title-font-size: 2rem;
+			--sc-list-title-padding-bottom: 3rem;
 			--sc-list-list-item-padding: 2rem 0;
 			--sc-list-list-item-img-width: 10.4rem;
 			--sc-list-list-item-img-height: 13.2rem;
@@ -184,7 +185,7 @@
 		}
 		> .header {
 			border-bottom: 0.1rem solid #c4c4c4;
-			padding-bottom: 3rem;
+			padding-bottom: var(--sc-list-title-padding-bottom, 3rem);
 			> .title {
 				display: flex;
 				justify-content: space-between;

From 829f164833ca2186df541c8c6307e78cd1530920 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 23 Apr 2026 14:28:26 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/shopping-cart-null.png | Bin 0 -> 14965 bytes
 src/utils/tools.ts                       |  78 ++++++++++--------
 src/views/shoppingCart/index.vue         |   8 +-
 src/views/shoppingCart/order-summary.vue |  52 +++++++-----
 src/views/shoppingCart/sc-list.vue       | 100 +++++++++++++++++++----
 5 files changed, 164 insertions(+), 74 deletions(-)
 create mode 100644 src/assets/images/shopping-cart-null.png

diff --git a/src/assets/images/shopping-cart-null.png b/src/assets/images/shopping-cart-null.png
new file mode 100644
index 0000000000000000000000000000000000000000..545cee801bbf78da6c8196d0b6c9f2c17afd859d
GIT binary patch
literal 14965
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
A4gdfE

literal 0
HcmV?d00001

diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 69403ed..738e4b2 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -53,9 +53,9 @@ export function generateUUID(): string {
 	if (typeof crypto !== 'undefined' && crypto.randomUUID) {
 		return crypto.randomUUID()
 	}
-	
+
 	// 备用方案：手动生成UUID v4
-	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
 		const r = Math.random() * 16 | 0
 		const v = c === 'x' ? r : (r & 0x3 | 0x8)
 		return v.toString(16)
@@ -70,39 +70,37 @@ export {
 
 /** 时间格式化-自定义格式
  * @param value 时间对象|时间戳|时间字符串
- * @param format 格式化字符串，默认值为 'yyyy-MM-dd HH:mm:ss'
+ * @param format 格式化字符串，默认值为 'YYYY-MM-DD HH:mm:ss'
  * @returns 格式化后的时间字符串
  */
-export function FormatDate(value: Date | number | string, format: string = 'yyyy-MM-dd HH:mm:ss') {
-	const date = new Date(value);
-	const yyyy = String(date.getFullYear());
-	const yy = String(date.getFullYear()).slice(-2);
-	const MM = String(date.getMonth() + 1).padStart(2, '0');
-	const M = String(date.getMonth() + 1);
-	const dd = String(date.getDate()).padStart(2, '0');
-	const d = String(date.getDate());
-	const HH = String(date.getHours()).padStart(2, '0');
-	const H = String(date.getHours());
-	const mm = String(date.getMinutes()).padStart(2, '0');
-	const m = String(date.getMinutes());
-	const ss = String(date.getSeconds()).padStart(2, '0');
-	const s = String(date.getSeconds());
-	const str = format.replaceAll('yyyy', yyyy)
-		.replaceAll('yy', yy)
-		.replaceAll('MM', MM)
-		.replaceAll('M', M)
-		.replaceAll('dd', dd)
-		.replaceAll('d', d)
-		.replaceAll('HH', HH)
-		.replaceAll('H', H)
-		.replaceAll('mm', mm)
-		.replaceAll('m', m)
-		.replaceAll('ss', ss)
-		.replaceAll('s', s);
-	return str;
+export function FormatDate(value: Date | number | string, format: string = 'YYYY-MM-DD HH:mm:ss') {
+	const d = new Date(value);
+	if (!d || isNaN(d.getTime())) return 'Invalid Date';
+	const pad = (n) => String(n).padStart(2, '0');
+	const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+	const tokens = {
+		YYYY: d.getFullYear(),
+		YY: String(d.getFullYear()).slice(-2),
+		MM: pad(d.getMonth() + 1),
+		M: d.getMonth() + 1,
+		SM: months[d.getMonth()],
+		DD: pad(d.getDate()),
+		D: d.getDate(),
+		HH: pad(d.getHours()),
+		H: d.getHours(),
+		hh: pad(d.getHours() % 12 || 12),
+		h: d.getHours() % 12 || 12,
+		mm: pad(d.getMinutes()),
+		m: d.getMinutes(),
+		ss: pad(d.getSeconds()),
+		s: d.getSeconds(),
+		A: d.getHours() < 12 ? 'AM' : 'PM',
+		a: d.getHours() < 12 ? 'am' : 'pm'
+	}
+	const reg = new RegExp(Object.keys(tokens).join('|'), 'g')
+	return format.replace(reg, match => tokens[match]);
 }
 
-
 /**
  * 下载图片
  * @param list 图片列表
@@ -163,7 +161,7 @@ export function encryptPassword(password: string): string {
  * @param url 图片URL
  * @returns 无
  */
-export async function shareImageToWhatsapp (url: string){
+export async function shareImageToWhatsapp(url: string) {
 	// 把图片 URL 转为 Blob
 	const blob = await fetch(url).then((res) => res.blob())
 
@@ -195,3 +193,19 @@ export function CountDown(time: number) {
 	const ss = String(time % 60).padStart(2, '0');
 	return `${mm}:${ss}`;
 }
+
+/**
+ * 字节转换为可读格式
+ * @param {number} bytes - 字节数
+ * @param {number} decimals - 保留小数位数，默认2位
+ * @returns {string} 格式化后的字符串
+ */
+export function FormatBytes(bytes, decimals = 2) {
+	if (bytes === 0) return '0 B';
+	if (!bytes || isNaN(bytes)) return '0 B';
+	const k = 1024;
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	const value = bytes / Math.pow(k, i);
+	return `${Number(value.toFixed(decimals))} ${sizes[i]}`;
+}
diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue
index c4c7e0f..961ee40 100644
--- a/src/views/shoppingCart/index.vue
+++ b/src/views/shoppingCart/index.vue
@@ -1,19 +1,19 @@
 <template>
 	<div class="shopping-cart">
 		<div class="content">
-			<sc-list />
-			<sc-list is-mini style="flex: 0.6; height: var(--app-view-height)" />
-			<!-- <order-summary /> -->
+			<sc-list @selected-change="(v) => (selectedList = v)" />
+			<order-summary :brands-list="selectedList" />
 		</div>
 		<my-footer />
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { computed, onMounted, defineComponent, onActivated } from 'vue'
+	import { computed, onMounted, ref } from 'vue'
 	import orderSummary from './order-summary.vue'
 	import scList from './sc-list.vue'
 	import myFooter from '@/components/Footer.vue'
+	const selectedList = ref([])
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/shoppingCart/order-summary.vue b/src/views/shoppingCart/order-summary.vue
index f42b138..9111d6b 100644
--- a/src/views/shoppingCart/order-summary.vue
+++ b/src/views/shoppingCart/order-summary.vue
@@ -10,12 +10,9 @@
 			<span class="icon"><svg-icon name="order-shop" size="18" /></span>
 			<span class="text">Brands</span>
 		</div>
-		<div class="brands-item" v-for="v in brandsList" :key="v.name">
-			<span class="label">{{ v.name }}</span>
-			<span class="value"
-				><span>{{ v.count }}</span
-				>item</span
-			>
+		<div class="brands-item" v-for="v in brandsList" :key="v.brand">
+			<span class="label">{{ v.brand }}</span>
+			<span class="value"><span>1</span>item</span>
 		</div>
 		<br />
 		<div class="total-file-size">
@@ -23,36 +20,47 @@
 				<span class="icon"><svg-icon name="order-file" size="18" /></span>
 				<span class="text">Total File Size</span>
 			</span>
-			<span class="value">36 <span>mb</span></span>
+			<span class="value"
+				>{{ totalSize.size }} <span>{{ totalSize.unit }}</span></span
+			>
 		</div>
 		<div class="hr"></div>
 		<br />
 		<div class="total">
 			<span class="label">Total</span>
-			<span class="value"><span>$45.00</span> HKD</span>
+			<span class="value"
+				><span>${{ totalAmount }}</span> HKD</span
+			>
 		</div>
 		<div class="hr"></div>
-		<button class="checkout-btn" custom="black">CHECKOUT SELECTED</button>
+		<button class="checkout-btn" custom="black" @click="handleCheckout">CHECKOUT SELECTED</button>
 		<div class="tip">Digital assets. Creator retains copyright.</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
-	const brandsList = ref([
-		{
-			name: 'Roaming Clouds',
-			count: 1
-		},
-		{
-			name: 'Off Grid Apparel',
-			count: 1
-		},
-		{
-			name: 'Ivory Muse Studio',
-			count: 1
+	import { FormatBytes, FormatDate } from '@/utils/tools'
+	const props = defineProps({
+		brandsList: {
+			type: Array,
+			default: () => []
 		}
-	])
+	})
+	const totalSize = computed(() => {
+		const total = props.brandsList.reduce((pre, cur) => pre + cur.fileSize, 0)
+		const str = FormatBytes(total)
+		return {
+			size: str.split(' ')[0],
+			unit: str.split(' ')[1]
+		}
+	})
+	const totalAmount = computed(() =>
+		props.brandsList.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2)
+	)
+	const handleCheckout = () => {
+		console.log('购买：', props.brandsList)
+	}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
index 6458175..dce5fc6 100644
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -10,11 +10,15 @@
 			</div>
 			<div class="options" v-if="!isMini">
 				<div class="left">
-					<el-checkbox v-model="check" :indeterminate="true" />
-					<span class="count">3 Selected</span>
+					<el-checkbox
+						:model-value="allSelected"
+						:indeterminate="selectedCount === 0 ? false : selectedCount < list.length"
+						@click="handleAllAllClick"
+					/>
+					<span class="count">{{ selectedCount }}&nbsp;&nbsp;Selected</span>
 					<div class="hr"></div>
-					<div class="btn">Select All</div>
-					<div class="btn">Deselect All</div>
+					<div class="btn" @click="handleAllAllClick(true)">Select All</div>
+					<div class="btn" @click="handleAllAllClick(false)">Deselect All</div>
 				</div>
 				<div class="right">
 					<el-select v-model="sortBy" placeholder="Sort By" :teleported="false">
@@ -33,8 +37,14 @@
 			</div>
 		</div>
 		<div class="list">
+			<div class="list-null" v-show="list.length === 0">
+				<img src="@/assets/images/shopping-cart-null.png" alt="" />
+				<div class="title">Your Cart is empty</div>
+				<div class="tip">Discover new fashion assets and add them to your cart.</div>
+				<button custom v-if="!isMini" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
+			</div>
 			<div class="item" v-for="v in list" :key="v.id">
-				<el-checkbox v-model="v.checked" v-if="!isMini" />
+				<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
 				<img :src="v.url" />
 				<div class="content">
 					<div class="title">{{ v.title }}</div>
@@ -48,9 +58,12 @@
 					<div class="size">
 						<div class="icon"><svg-icon name="order-file" size="18" /></div>
 						<div class="text">
-							{{ v.fileSize }}kb{{
-								isMini ? '' : ` &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;${v.date}`
-							}}
+							<span>{{ FormatBytes(v.fileSize) }}</span>
+							<span v-if="!isMini"
+								>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
+									FormatDate(v.date, 'SM D, YYYY, h:mm A')
+								}}</span
+							>
 						</div>
 					</div>
 				</div>
@@ -64,7 +77,7 @@
 			</div>
 		</div>
 		<div class="footer" v-if="isMini">
-			<div class="total">
+			<div class="total" v-show="list.length > 0">
 				<span class="label">Total</span>
 				<span class="value">$45.00<span> HKD</span></span>
 			</div>
@@ -74,16 +87,17 @@
 </template>
 
 <script setup lang="ts">
-	import { computed, ref } from 'vue'
-	const emit = defineEmits(['close'])
-
+	import { computed, ref, onMounted } from 'vue'
+	import { FormatBytes, FormatDate } from '@/utils/tools'
+	const emit = defineEmits(['close', 'selected-change'])
 	const props = defineProps({
 		isMini: {
 			type: Boolean,
 			default: false
 		}
 	})
-	const check = ref(true)
+	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
+	const allSelected = computed(() => list.value.every((v) => v.checked))
 	const sortBy = ref('')
 	const sortByOptions = ref([
 		{
@@ -107,7 +121,7 @@
 			title: 'North Outfit Set',
 			brand: 'Roaming Clouds',
 			fileSize: 1024, // kb
-			date: 'Feb 16, 2026, 11:34 PM',
+			date: '2026-5-20 5:20',
 			amount: 49.99,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
 			checked: true
@@ -117,16 +131,31 @@
 			url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
 			title: 'Weekend Drift Co-ord',
 			brand: 'Urban Line Edit',
-			fileSize: 100, // kb
-			date: 'Feb 16, 2026, 11:34 PM',
+			fileSize: 1225, // kb
+			date: '2026-5-21 13:14',
 			amount: 9.99,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
 			checked: false
 		}
 	])
+	const handleAllAllClick = (checked?: boolean) => {
+		const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
+		list.value.forEach((v) => (v.checked = checked_))
+		handleSelectedChange()
+	}
+	const handleSelectedChange = () => {
+		const arr = list.value.filter((v) => v.checked)
+		emit('selected-change', arr)
+	}
 	const onClose = () => {
 		emit('close')
 	}
+	onMounted(() => {
+		handleSelectedChange()
+	})
+	const handleExploreClick = () => {
+		console.log('探索')
+	}
 </script>
 
 <style lang="less" scoped>
@@ -181,6 +210,11 @@
 					background-color: #fff;
 				}
 			}
+			> .list {
+				> .list-null {
+					margin-top: 10rem;
+				}
+			}
 		}
 		> .header {
 			border-bottom: 0.1rem solid #c4c4c4;
@@ -232,6 +266,40 @@
 		}
 		> .list {
 			// height: 1000px;
+			> .list-null {
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				text-align: center;
+				> img {
+					width: 14rem;
+					height: auto;
+					margin-bottom: 2.4rem;
+				}
+				> .title {
+					font-family: KaiseiOpti-Bold;
+					font-size: 1.6rem;
+					color: #979797;
+					margin-bottom: 0.8rem;
+				}
+				> .tip {
+					width: 50%;
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					color: #979797;
+				}
+				> button {
+					min-width: 30rem;
+					height: 4.4rem;
+					border: 0.1rem solid #c4c4c4;
+					font-family: KaiseiOpti-Medium;
+					font-size: 1.6rem;
+					color: #979797;
+					margin-top: 4.2rem;
+				}
+			}
 			> .item {
 				border-bottom: 0.1rem solid #c4c4c4;
 				padding: var(--sc-list-list-item-padding, 2.4rem 0);

From 66b019eb2a1f09104629c5f96078e1e8a8d59cd2 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Thu, 23 Apr 2026 14:30:09 +0800
Subject: [PATCH 4/6] fix

---
 src/App.vue                                |  2 ++
 src/views/brand/index.vue                  |  5 ++-
 src/views/collectionStory/detail/index.vue |  7 ++--
 src/views/collectionStory/index.vue        |  7 ++--
 src/views/digitalDetail/index.vue          |  8 ++---
 src/views/shopping-drawer.vue              | 40 ++++++++++++++++++++++
 6 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 src/views/shopping-drawer.vue

diff --git a/src/App.vue b/src/App.vue
index d70a322..ff5e167 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
 	<div class="view" ref="viewRef" :style="viewStyle"><RouteCache /></div>
 	<login-dialog />
 	<div id="loading" v-if="loading" v-loading="true"></div>
+	<shopping-drawer />
 </template>
 
 <script setup lang="ts">
@@ -11,6 +12,7 @@
 	import MainHeader from '@/views/main-header.vue'
 	import LoginDialog from '@/views/login/login-dialog.vue'
 	import { useGlobalStore } from '@/stores'
+	import ShoppingDrawer from '@/views/shopping-drawer.vue'
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
 	const viewRef = ref()
diff --git a/src/views/brand/index.vue b/src/views/brand/index.vue
index b96b418..e8350d5 100644
--- a/src/views/brand/index.vue
+++ b/src/views/brand/index.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
 import { useRouter } from "vue-router";
+import myEvent from '@/utils/myEvent'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -10,7 +11,9 @@ import { useRouter } from "vue-router";
 const router = useRouter()
 let data = reactive({
 })
-const addShopping = (item) => {}
+const addShopping = (item) => {
+	myEvent.emit('addShopping', item)
+}
 const openDetail = (item) => {	
 	router.push({name: 'digitalDetail', params: {id: item.id}})
 }
diff --git a/src/views/collectionStory/detail/index.vue b/src/views/collectionStory/detail/index.vue
index 9633a5f..2605e1c 100644
--- a/src/views/collectionStory/detail/index.vue
+++ b/src/views/collectionStory/detail/index.vue
@@ -7,8 +7,9 @@ import feelingWithAiDA from "./feelingWithAiDA.vue";
 import CommodityItem from "@/components/CommodityItem.vue";
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
+const emit = defineEmits([
+	'addShopping'
+])
 let data = reactive({
 })
 const list = ref([
@@ -27,7 +28,7 @@ const list = ref([
 	},
 ])
 const addShopping = (item) => {
-	console.log(item);
+	emit('addShopping', item)
 }
 onMounted(()=>{
 })
diff --git a/src/views/collectionStory/index.vue b/src/views/collectionStory/index.vue
index 3fc0a59..701a696 100644
--- a/src/views/collectionStory/index.vue
+++ b/src/views/collectionStory/index.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import Detail from "./detail/index.vue";
+import myEvent from '@/utils/myEvent'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
-
+const addShopping = (item) => {	
+	myEvent.emit('addShopping', item)
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -47,7 +50,7 @@ const {} = toRefs(data);
 			</div>
 		</div>
 		<div class="content">
-			<Detail></Detail>
+			<Detail @addShopping="addShopping"></Detail>
 		</div>
 		<Footer></Footer>
 	</div>
diff --git a/src/views/digitalDetail/index.vue b/src/views/digitalDetail/index.vue
index d1776aa..e18c3fb 100644
--- a/src/views/digitalDetail/index.vue
+++ b/src/views/digitalDetail/index.vue
@@ -2,7 +2,7 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { useRouter } from "vue-router";
 import img from "@/assets/images/collectionStory/Rectangle.png";
-import scList from '@/views/shoppingCart/sc-list.vue'
+import myEvent from '@/utils/myEvent'
 
 
 //const props = defineProps({
@@ -12,9 +12,8 @@ import scList from '@/views/shoppingCart/sc-list.vue'
 const router = useRouter()
 let data = reactive({
 })
-const isShoppingShow = ref(false)
 const addShopping = (item) => {
-	isShoppingShow.value = true
+	myEvent.emit('addShopping', item)
 }
 onMounted(()=>{
 })
@@ -100,9 +99,6 @@ const {} = toRefs(data);
 			</div>
 		</div>
 		<Footer></Footer>
-		<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
-			<sc-list is-mini style="flex: 0.6;" @close="isShoppingShow = false"/>
-	  	</el-drawer>
 	</div>
 </template>
 <style lang="less" scoped>
diff --git a/src/views/shopping-drawer.vue b/src/views/shopping-drawer.vue
new file mode 100644
index 0000000..572cde2
--- /dev/null
+++ b/src/views/shopping-drawer.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import myEvent from '@/utils/myEvent'
+import scList from '@/views/shoppingCart/sc-list.vue'
+
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const isShoppingShow = ref(false)
+const shoppingClose = () => {
+	isShoppingShow.value = false
+}
+
+onMounted(()=>{
+	myEvent.add('addShopping', (item) => {
+		isShoppingShow.value = true
+		console.log(item)
+	})
+})
+onUnmounted(()=>{
+	myEvent.remove('addShopping')
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
+		<sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/>
+	</el-drawer>
+</template>
+<style lang="less" scoped>
+	.homeNavBox{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

From 017d052cd8f53c5620fe33f3870700c9a8625c6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 23 Apr 2026 15:15:43 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/shoppingCart/index.vue         |   3 +-
 src/views/shoppingCart/order-summary.vue |  32 ++++--
 src/views/shoppingCart/sc-list.vue       | 126 +++++++++++++++++++++--
 3 files changed, 141 insertions(+), 20 deletions(-)

diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue
index 961ee40..76d1cd0 100644
--- a/src/views/shoppingCart/index.vue
+++ b/src/views/shoppingCart/index.vue
@@ -2,7 +2,8 @@
 	<div class="shopping-cart">
 		<div class="content">
 			<sc-list @selected-change="(v) => (selectedList = v)" />
-			<order-summary :brands-list="selectedList" />
+			<!-- <sc-list is-mini is-view title="Order Summary" /> -->
+			<order-summary :list="selectedList" />
 		</div>
 		<my-footer />
 	</div>
diff --git a/src/views/shoppingCart/order-summary.vue b/src/views/shoppingCart/order-summary.vue
index 9111d6b..e3ba7b3 100644
--- a/src/views/shoppingCart/order-summary.vue
+++ b/src/views/shoppingCart/order-summary.vue
@@ -3,7 +3,7 @@
 		<div class="title">Order Summary</div>
 		<div class="count">
 			<span class="label">Selected</span>
-			<span class="value">3</span>
+			<span class="value">{{ brandsList.length }}</span>
 		</div>
 		<div class="hr"></div>
 		<div class="brands-header">
@@ -12,7 +12,10 @@
 		</div>
 		<div class="brands-item" v-for="v in brandsList" :key="v.brand">
 			<span class="label">{{ v.brand }}</span>
-			<span class="value"><span>1</span>item</span>
+			<span class="value"
+				><span>{{ v.children.length }}</span
+				>item</span
+			>
 		</div>
 		<br />
 		<div class="total-file-size">
@@ -42,24 +45,37 @@
 	import { computed, ref } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	const props = defineProps({
-		brandsList: {
+		list: {
 			type: Array,
 			default: () => []
 		}
 	})
+	const brandsList = computed(() => {
+		const arr = []
+		props.list.forEach((v) => {
+			const index = arr.findIndex((v_) => v_.brand === v.brand)
+			if (index === -1) {
+				arr.push({
+					brand: v.brand,
+					children: [v]
+				})
+			} else {
+				arr[index].children.push(v)
+			}
+		})
+		return arr
+	})
 	const totalSize = computed(() => {
-		const total = props.brandsList.reduce((pre, cur) => pre + cur.fileSize, 0)
+		const total = props.list.reduce((pre, cur) => pre + cur.fileSize, 0)
 		const str = FormatBytes(total)
 		return {
 			size: str.split(' ')[0],
 			unit: str.split(' ')[1]
 		}
 	})
-	const totalAmount = computed(() =>
-		props.brandsList.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2)
-	)
+	const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const handleCheckout = () => {
-		console.log('购买：', props.brandsList)
+		console.log('购买：', props.list)
 	}
 </script>
 
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
index e9094ae..c7909b8 100644
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -1,10 +1,10 @@
 <template>
 	<!-- 购物车列表 -->
-	<div class="sc-list" :class="{ mini: isMini }">
+	<div class="sc-list" :class="{ mini: isMini, view: isView }">
 		<div class="header">
 			<div class="title">
-				<span class="text">Shopping Cart</span>
-				<span class="close" v-if="isMini" @click="onClose"
+				<span class="text">{{ title || 'Shopping Cart' }}</span>
+				<span class="close" v-if="isMini && !isView" @click="onClose"
 					><svg-icon name="close" size="13"
 				/></span>
 			</div>
@@ -52,10 +52,10 @@
 						<span class="icon"><svg-icon name="order-shop" size="24" /></span>
 						<span class="text">{{ v.brand }}</span>
 					</div>
-					<div class="tags" v-if="!isMini">
+					<div class="tags" v-if="!isMini || isView">
 						<span v-for="tag in v.tags" :key="tag" class="tag">{{ tag }}</span>
 					</div>
-					<div class="size">
+					<div class="size" v-if="!isView">
 						<div class="icon"><svg-icon name="order-file" size="18" /></div>
 						<div class="text">
 							<span>{{ FormatBytes(v.fileSize) }}</span>
@@ -69,7 +69,7 @@
 				</div>
 				<div class="right">
 					<div class="amount">${{ v.amount }}<span> HKD</span></div>
-					<div class="remove">
+					<div class="remove" v-if="!isView">
 						<span class="icon"><svg-icon name="order-delete" size="18" /></span>
 						<span class="text">Remove</span>
 					</div>
@@ -77,11 +77,19 @@
 			</div>
 		</div>
 		<div class="footer" v-if="isMini">
+			<div class="total size" v-show="list.length > 0">
+				<span class="label">Total File Size</span>
+				<span class="value"
+					>{{ allTotalSize.size }}<span>&nbsp;{{ allTotalSize.unit }}</span></span
+				>
+			</div>
 			<div class="total" v-show="list.length > 0">
 				<span class="label">Total</span>
-				<span class="value">$45.00<span> HKD</span></span>
+				<span class="value">${{ allAmount }}<span> HKD</span></span>
 			</div>
-			<button custom="black">CHECKOUT</button>
+
+			<div class="tip" v-if="isView">Digital assets. Creator retains copyright.</div>
+			<button custom="black" v-if="!isView">CHECKOUT</button>
 		</div>
 	</div>
 </template>
@@ -91,11 +99,19 @@
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	const emit = defineEmits(['close', 'selected-change'])
 	const props = defineProps({
-		isMini: {
-			type: Boolean,
-			default: false
+		title: { type: String, default: '' },
+		isMini: { type: Boolean, default: false },
+		isView: { type: Boolean, default: false }
+	})
+	const allTotalSize = computed(() => {
+		const total = list.value.reduce((pre, cur) => pre + cur.fileSize, 0)
+		const str = FormatBytes(total)
+		return {
+			size: str.split(' ')[0],
+			unit: str.split(' ')[1]
 		}
 	})
+	const allAmount = computed(() => list.value.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
 	const allSelected = computed(() => list.value.every((v) => v.checked))
 	const sortBy = ref('')
@@ -136,6 +152,39 @@
 			amount: 9.99,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
 			checked: false
+		},
+		{
+			id: 3,
+			url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png',
+			title: 'Static Street Suit',
+			brand: 'Off Grid Apparel',
+			fileSize: 1024 * 18, // kb
+			date: '2026-5-21 13:14',
+			amount: 12,
+			tags: ['female', 'skirt', 'blouse', 'outwear'],
+			checked: true
+		},
+		{
+			id: 4,
+			url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png',
+			title: 'Maison Contour Suit',
+			brand: 'Ivory Muse Studio',
+			fileSize: 100, // kb
+			date: '2026-5-21 13:14',
+			amount: 18,
+			tags: ['female', 'skirt', 'blouse', 'outwear'],
+			checked: true
+		},
+		{
+			id: 5,
+			url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png',
+			title: 'Prime Atelier Set',
+			brand: 'Ivory Muse Studio',
+			fileSize: 1024 * 24, // kb
+			date: '2026-5-21 13:14',
+			amount: 20,
+			tags: ['female', 'skirt', 'blouse', 'outwear'],
+			checked: false
 		}
 	])
 	const handleAllAllClick = (checked?: boolean) => {
@@ -194,6 +243,61 @@
 				}
 			}
 		}
+		&.mini.view {
+			--sc-list-title-padding-bottom: 2.4rem;
+			--sc-list-list-item-img-width: 9.6rem;
+			--sc-list-list-item-img-height: 12.2rem;
+			--sc-list-list-item-padding: 1.6rem;
+			--sc-list-list-item-margin-bottom: 0.8rem;
+			--sc-list-list-item-title-font-size: 2rem;
+			> .header {
+				border: none;
+			}
+			> .list {
+				> .item {
+					> .content {
+						margin-top: 1.2rem;
+						> .tags {
+							> .tag {
+								min-width: 0;
+								height: 2rem;
+								line-height: 2rem;
+								font-size: 1.2rem;
+								padding: 0 0.8rem;
+							}
+						}
+					}
+					> .right {
+						margin-top: 1.2rem;
+					}
+				}
+			}
+			> .footer {
+				margin-top: 4.1rem;
+				> .total {
+					margin-bottom: 1.7rem;
+					> .label {
+						font-family: KaiseiOpti-Medium;
+						font-size: 2rem;
+						color: #232323;
+					}
+					> .value {
+						font-family: KaiseiOpti-Medium;
+						font-size: 2.2rem;
+						> span {
+							font-family: KaiseiOpti-Regular;
+							font-size: 1.8rem;
+						}
+					}
+				}
+				> .tip {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.2rem;
+					color: #808080;
+					margin-top: 2.4rem;
+				}
+			}
+		}
 		&:not(.mini) {
 			> .header {
 				position: sticky;

From 98e2548f015738549ecb028567ec29cebef42f53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Thu, 23 Apr 2026 15:18:30 +0800
Subject: [PATCH 6/6] 11

---
 src/views/shoppingCart/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue
index 76d1cd0..9056171 100644
--- a/src/views/shoppingCart/index.vue
+++ b/src/views/shoppingCart/index.vue
@@ -32,8 +32,8 @@
 			display: flex;
 			align-items: flex-start;
 			> .sc-list {
-				flex: 1;
 				margin-right: 7.5rem;
+				margin-bottom: 8rem;
 				--sc-list-header-top: var(--content-top);
 			}
 			> .order-summary {