From 8c8ec7846d39d46e882cba29e83bb8483328b00e Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Tue, 12 May 2026 17:02:49 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=B7=BB=E5=8A=A0=E8=B4=AD?=
 =?UTF-8?q?=E7=89=A9=E8=BD=A6=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/shop.svg      |   5 +
 src/assets/icons/statement.svg |   4 +
 src/views/shopping-drawer.vue  | 186 ++++++++++++++++++++++++++++++++-
 3 files changed, 190 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/shop.svg
 create mode 100644 src/assets/icons/statement.svg

diff --git a/src/assets/icons/shop.svg b/src/assets/icons/shop.svg
new file mode 100644
index 0000000..b52e7fe
--- /dev/null
+++ b/src/assets/icons/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-width="0.75" 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/assets/icons/statement.svg b/src/assets/icons/statement.svg
new file mode 100644
index 0000000..80c5207
--- /dev/null
+++ b/src/assets/icons/statement.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.32919 0C3.73406 0 0 3.7382 0 8.33333C0 12.9285 3.7382 16.6667 8.32919 16.6667C12.9202 16.6667 16.6584 12.9285 16.6584 8.33333C16.6584 3.7382 12.9243 0 8.32919 0ZM8.32919 15.7352C4.24739 15.7352 0.927306 12.4151 0.927306 8.33333C0.927306 4.25153 4.24739 0.931445 8.32919 0.931445C12.411 0.931445 15.7311 4.25153 15.7311 8.33333C15.7311 12.4151 12.411 15.7352 8.32919 15.7352Z" fill="#979797"/>
+<path d="M8.84744 7.50551C8.84744 7.21972 8.61576 6.98804 8.32997 6.98804C8.04418 6.98804 7.8125 7.21972 7.8125 7.50551V12.4732C7.8125 12.759 8.04418 12.9907 8.32997 12.9907C8.61576 12.9907 8.84744 12.759 8.84744 12.4732V7.50551Z" fill="#979797"/>
+</svg>
diff --git a/src/views/shopping-drawer.vue b/src/views/shopping-drawer.vue
index 572cde2..2ff3664 100644
--- a/src/views/shopping-drawer.vue
+++ b/src/views/shopping-drawer.vue
@@ -1,7 +1,9 @@
 <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'
+// import scList from '@/views/shoppingCart/sc-list.vue'
+import { useRouter } from "vue-router";
+import img from '@/assets/images/brand-null.png'
 
 //const props = defineProps({
 //})
@@ -9,11 +11,17 @@ import scList from '@/views/shoppingCart/sc-list.vue'
 //])
 let data = reactive({
 })
-const isShoppingShow = ref(false)
+const router = useRouter()
+const isShoppingShow = ref(true)
 const shoppingClose = () => {
 	isShoppingShow.value = false
 }
 
+const goShopping = () => {
+	router.push({path: '/shoppingCart'})
+	isShoppingShow.value = false
+}
+
 onMounted(()=>{
 	myEvent.add('addShopping', (item) => {
 		isShoppingShow.value = true
@@ -27,14 +35,182 @@ 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 v-model="isShoppingShow" width="50rem" class="addShoppingDrawer"  :close-on-click-modal="false" title="I am the title" :with-header="false">
+		<div class="addShoppingInfo">
+			<div class="header">
+				<div class="title">Added to your Shopping Cart</div>
+				<span class="close" @click="shoppingClose"
+					><svg-icon name="close" size="13"
+				/></span>
+			</div>
+			<div class="content">
+				<div class="img-list">
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+				</div>
+				<div class="inf-box">
+					<div class="name">North Outfit Set</div>
+					<div class="shopping-name">
+						<div class="icon">
+							<SvgIcon name="shop" size="24" />
+						</div>
+						Roaming Clouds
+					</div>
+					<div class="price">$15 <span class="currency">HKD</span></div>
+				</div>
+				<div class="statement">
+					<div class="icon">
+						<SvgIcon name="statement" size="16.6" />
+					</div>
+					Digital Assets Only. No physical product included.
+				</div>
+			</div>
+			<div class="button" @click="goShopping">
+				SeE Shopping Cart
+			</div>
+		</div>
+		<!-- <sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/> -->
 	</el-drawer>
 </template>
+<style lang="less">
+	.el-drawer.addShoppingDrawer{
+		--el-drawer-padding-primary: 2.4rem 3.4rem;
+	}
+</style>
 <style lang="less" scoped>
-	.homeNavBox{
+	
+	.addShoppingInfo{
 		width: 100%;
 		height: 100%;
 		position: relative;
+		display: flex;
+		flex-direction: column;
+		> .header{
+			border-bottom: 0.1rem solid #c4c4c4;
+			display: flex;
+			padding-bottom: 2.4rem;
+			align-items: center;
+			justify-content: space-between;
+			> .title{
+				font-family: KaiseiOpti-Bold;
+				font-size: 2rem;
+				line-height: 120%;
+				color: #121212;
+				font-weight: 400;
+			}
+			> .close{
+				cursor: pointer;
+			}
+		}
+		> .content{
+			flex: 1;
+			padding-top: 9.6rem;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> .img-list{
+				height: 37.5rem;
+				width: 33.7rem;
+				position: relative;
+				> .img-box{
+					position: absolute;
+					overflow: hidden;
+					width: 26.9rem;
+					height: 34.1rem;
+					border: 1px solid #EFEFEF;
+					top: 1.7rem;
+					right: 0;
+					left: auto;
+					transform-origin: bottom;
+					box-shadow: 1rem .8rem 2.4rem 0px #4D4D4D0A;
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+					&:nth-child(1){
+						transform: rotate(-8deg);
+						background-color: #eaeaea;
+						right: 2rem;
+					}
+					&:nth-child(2){
+						transform: rotate(-4deg);
+						background-color: #eeeeee;
+						right: 1rem;
+					}
+					&:nth-child(3){
+						transform: rotate(0);
+						background-color: #fafafa;
+					}
+				}
+			}
+			> .inf-box{
+				margin-top: 5.18rem;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				> .name{
+					font-family: KaiseiOpti-Bold;
+					font-weight: 700;
+					font-size: 2.4rem;
+					line-height: 140%;
+				}
+				> .shopping-name{
+					margin-top: 1.3rem;
+					font-weight: 500;
+					font-size: 1.6rem;
+					line-height: 140%;
+					display: flex;
+					align-items: center;
+					> .icon{
+						margin-right: 0.8rem;
+					}
+				}
+				> .price{
+					margin-top: 1.2rem;
+					font-family: KaiseiOpti-Bold;
+					font-weight: 700;
+					font-style: Bold;
+					font-size: 1.8rem;
+					line-height: 140%;
+					> .currency{
+						font-size: 1.2rem;
+						font-weight: 500;
+						line-height: 140%;
+					}
+				}
+			}
+			> .statement{
+				margin-top: 5rem;
+				font-family: KaiseiOpti-Regular;
+				color: #979797;
+				display: flex;
+				font-weight: 400;
+				font-size: 1.2rem;
+				line-height: 140%;
+				> .icon{
+					margin-right: 0.8rem;
+				}
+			}
+		}
+		> .button{
+			font-family: KaiseiOpti-Regular;
+			font-weight: 400;
+			font-size: 14px;
+			line-height: 4.6rem;
+			letter-spacing: 3%;
+			text-align: center;
+			width: 100%;
+			border: 1px solid #232323;
+			margin-bottom: calc(6rem - 2.4rem);
+			cursor: pointer;
+		}
 	}
 </style>
\ No newline at end of file