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