diff --git a/src/views/shoppingCart/sc-list-null.vue b/src/views/shoppingCart/sc-list-null.vue
new file mode 100644
index 0000000..fde1efd
--- /dev/null
+++ b/src/views/shoppingCart/sc-list-null.vue
@@ -0,0 +1,55 @@
+<template>
+	<div class="sc-list-null">
+		<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-show="showButton" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, onMounted } from 'vue'
+	const props = defineProps({
+		showButton: { type: Boolean, default: true }
+	})
+	const handleExploreClick = () => {
+		console.log('探索')
+	}
+</script>
+
+<style lang="less" scoped>
+	.sc-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;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
index 769b106..9717385 100644
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -37,12 +37,7 @@
 			</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>
+			<sc-list-null v-show="list.length === 0" :show-button="!isMini" />
 			<sc-item
 				v-for="v in list"
 				:key="v.id"
@@ -59,13 +54,13 @@
 			</sc-item>
 		</div>
 		<div class="footer" v-if="isMini">
-			<div class="total size" v-show="list.length > 0">
+			<div class="total size" v-show="isView">
 				<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">
+			<div class="total" v-show="list.length > 0 || isView">
 				<span class="label">Total</span>
 				<span class="value">${{ allAmount }}<span> HKD</span></span>
 			</div>
@@ -80,6 +75,7 @@
 	import { computed, ref, onMounted } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	import scItem from './sc-item.vue'
+	import scListNull from './sc-list-null.vue'
 	const emit = defineEmits(['close', 'selected-change'])
 	const props = defineProps({
 		title: { type: String, default: '' },
@@ -286,7 +282,7 @@
 				}
 			}
 			> .list {
-				> .list-null {
+				> .sc-list-null {
 					margin-top: 10rem;
 				}
 			}
@@ -340,41 +336,6 @@
 			}
 		}
 		> .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;
-				}
-			}
 		}
 		> .footer {
 			margin-top: 3rem;