diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/App.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9d3ff636bc0217da4d990145fc4d0e15d4051911
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/App.vue"
@@ -0,0 +1,68 @@
+<script>
+import left from './components/goods/left.vue';
+import right from './components/goods/right.vue';
+
+export default {
+  data: function () {
+    return {
+      show:[true,false,false,false,false],
+      lists: ["首页", "用户信息", "添加用户", "修改数据", "删除用户"],
+      users: [
+        {
+          name: "小明",
+          sex: "男",
+          age: 18
+        },
+        {
+          name: "小红",
+          sex: "女",
+          age: 19
+        },
+      ],
+
+    }
+  },
+  components: {
+    leftvue: left,
+    rightvue: right,
+  }
+}
+</script>
+
+<template>
+  <div class="main">
+    <div class="left">
+      <leftvue :lists="lists" :show="show"></leftvue>
+    </div>
+    <div class="right">
+      <div v-show="show[0]"><rightvue>当前页为首页还未设置样式</rightvue></div>
+      <div v-show="show[1]"><rightvue><div v-for="user,index in users">{{ index+1 }}. 姓名:{{ user.name }}&nbsp;性别:{{ user.sex }}&nbsp;年龄:{{ user.age }}&nbsp;</div></rightvue></div>
+      <div v-show="show[2]"><rightvue>当前页为添加用户页面</rightvue></div>
+      <div v-show="show[3]"><rightvue>当前页为修改数据页面</rightvue></div>
+      <div v-show="show[4]"><rightvue>当前页为删除用户页面</rightvue></div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main {
+  display: flex;
+
+}
+
+.left {
+  display: flex;
+  width: 20vw;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.right {
+  display: flex;
+  width: 80vw;
+  height: 100vh;
+  background-color: burlywood;
+  flex-direction: column;
+
+}</style>
diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/goods/left.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/goods/left.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4b5a3b214b3b4c703e4119eda4c2eff87bc57e59
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/goods/left.vue"
@@ -0,0 +1,63 @@
+<script>
+
+export default {
+    props:['lists','show'],
+    data:function(){
+        return {
+        }
+    },
+    methods:{
+        changeShow:function(index){
+            if(index==0){
+                this.$parent.show = [true,false,false,false,false ]
+            }else if(index==1){
+                this.$parent.show = [false,true,false,false,false ]
+            }else if(index==2){
+                this.$parent.show = [false,false,true,false,false ]
+            }else if(index==3){
+                this.$parent.show = [false,false,false,true,false ]
+            }else if(index==4){
+                this.$parent.show = [false,false,false,false,true ]
+            }else{
+                return ;
+            }
+        }
+    },
+
+}
+</script>
+
+<template>
+    <div class="leftTop">后台管理系统</div>
+    <ul v-for="list,index in lists">
+        <li  @click="changeShow(index)">{{ list }}</li>
+    </ul>
+</template>
+
+<style scoped>
+.leftTop{
+    display: flex;
+    width: 20vw;
+    height: 10vh;
+    justify-content: center;
+    align-items: center;
+    background-color:gray;
+}
+
+ul{
+    margin: 0;
+    padding: 0;
+}
+
+li{
+    list-style: none;
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+    background-color: skyblue;
+}
+
+li:hover{
+    background-color: pink;
+}
+</style>
diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/goods/right.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/goods/right.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..d6e65c152910d23f12a9e38c6b15962d579dd14a
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/goods/right.vue"
@@ -0,0 +1,26 @@
+<script>
+
+export default {
+    data:function(){
+        return {
+            
+        }
+    }
+}
+</script>
+
+<template>
+<div class="rightTop">右侧头部</div>
+<slot></slot>
+</template>
+
+<style scoped>
+.rightTop{
+    display: flex;
+    width: 80vw;
+    height: 5vh;
+    background-color:tomato;
+    justify-content: center;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconCommunity.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconDocumentation.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconEcosystem.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconSupport.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconTooling.vue" "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230410-Vue\346\217\222\346\247\275/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/App.vue" "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7c6366221c301f5b61c0b0e2fffb662f9d788b59
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/App.vue"
@@ -0,0 +1,45 @@
+<script setup>
+import top from './components/goods/top.vue'
+import center from './components/goods/center.vue'
+import { ref } from 'vue'
+
+let goods =
+  ref([
+    {
+      img: 'https://img14.360buyimg.com/n1/jfs/t1/106985/17/39864/63408/642bf423F9904c391/d8ea2bbdafe38617.jpg',
+      ms: 'ROG枪神7 Plus 超竞版 第13代英特尔酷睿i9 18英寸 星云屏 游戏本笔记本电脑(i9-13980HX 液金导热 32G 1T RTX4080 2.5K 240Hz P3广色域)',
+      price: 20999.00,
+      buyNum: 0
+    },
+    {
+      img: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/46236/25/22864/20696/63de2872F7cc3e4d0/cb1b177a3ca0c552.jpg',
+      ms: 'Apple iPhone 14 Pro Max (A2896) 256GB 暗紫色 支持移动联通电信5G 双卡双待手机',
+      price: 9899.00,
+      buyNum: 0
+    },
+    {
+      img: 'https://img10.360buyimg.com/n1/jfs/t1/145138/17/33605/97250/641c13a5F57d4c41b/8eda140361cc9dde.jpg',
+      ms: 'Apple iPad Pro 12.9英寸(第 6 代)平板电脑 2022年款(256G WLAN版/M2芯片Liquid视网膜XDR屏/MNXR3CH/A) 深空灰色',
+      price: 6799.00,
+      buyNum: 0
+    }
+  ])
+
+</script>
+  
+  <template>
+  <div>
+    <top></top>
+    <div class="content">
+      <center :goods="goods"></center>
+    </div>
+  </div>
+</template>
+  
+  <style scoped>
+  .content {
+    width: 100vw;
+    display: flex;
+    justify-content: space-around;
+  }
+  </style>
\ No newline at end of file
diff --git "a/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/center.vue" "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/center.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5fb8777c9f13319298288f7891af338d12bc7891
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/center.vue"
@@ -0,0 +1,126 @@
+<script setup>
+import { ref } from 'vue'
+let data = defineProps({
+    goods: Array
+})
+let goods = data.goods
+
+let Total = ref(0);
+let flag = ref(false);
+let fkmflag = ref(false);
+function sub(good) {
+    if (good.buyNum == 0) {
+        let total = ref(0);
+        for (let value of goods) {
+            total.value += (value.price) * (value.buyNum)
+        }
+        Total.value = total;
+        return
+    } else {
+        good.buyNum--;
+        let total = ref(0);
+        for (let value of goods) {
+            total.value += (value.price) * (value.buyNum)
+        }
+        Total.value = total;
+    }
+};
+function add(good) {
+    good.buyNum++;
+    let total = ref(0);
+    for (let value of goods) {
+        total.value += (value.price) * (value.buyNum)
+    }
+    Total.value = total;
+};
+function result() {
+    flag.value = true;
+    let total = ref(0);
+    for (let value of goods) {
+        total.value += (value.price) * (value.buyNum)
+    }
+    Total.value = total;
+};
+function show() {
+    fkmflag.value = true
+}
+
+function hidden(){
+    fkmflag.value = false
+}
+</script>
+<template>
+    <div style="width: 200px;position: relative;padding: 10px;" v-for="good, index in goods" v-show="!flag">
+        <img :src="good.img" alt="" width="200">
+        <p style="color: red; font-size: 18px; font-weight: 800;">￥ {{ good.price }}</p>
+        <p id="text">{{ good.ms }}</p>
+        <span style="text-align: center;display: block;"><button @click="sub(good)">-</button><input type="number"
+                :value="good.buyNum" style="width: 50px;margin-left: 5px;margin-right: 5px;"><button
+                @click="add(good)">+</button></span>
+    </div>
+    <button v-show="!flag" @click="result"
+        style="position: absolute; top:500px; background-color: pink;padding: 10px;border-radius: 1vw;">加入购物车</button>
+
+    <!-- //点击加入购物车时触发的 -->
+    <div v-show="flag" id="result">
+        <span style="position:absolute;left:0;top: 0;">购物车结算</span>
+        <span style="position:absolute;right:0;top:0;" @click="flag = !flag">X</span>
+        <div id="res" v-for="good in goods">
+            <img :src="good.img" alt="" width="200">
+            <div>
+                <p id="buytext">{{ good.ms }}</p>
+                <p>￥ {{ good.price }}</p>
+                <span style="display: block;"><button @click="sub(good)">-</button><input type="number"
+                        :value="good.buyNum" style="width: 50px;margin-left: 5px;margin-right: 5px;"><button
+                        @click="add(good)">+</button></span>
+            </div>
+            <span style="position: absolute;bottom: 10px;right: 75px;">总价：￥{{ Total }}</span>
+        </div>
+        <button @click="show"
+            style="background-color: red;color: white;border: 0;padding: 10px;border-radius: 1.5vw;position: absolute;right: 0;bottom: 0;">去结算</button>
+    </div>
+
+    <!-- //点击去结算时触发的 -->
+    <div v-show="fkmflag" @click="hidden()"><img src="../goods/收款码.jpg" alt="" width="600"
+            style="position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto;"></div>
+</template>
+    
+<style scoped>
+#result {
+    background-color: wheat;
+    position: relative;
+    margin-top: 5vw;
+    padding: 50px;
+}
+
+#res {
+    display: flex;
+    width: 70vw;
+    height: 200px;
+    background-color: white;
+    padding: 10px;
+}
+
+#res div {
+    display: flex;
+    flex-direction: column;
+}
+
+#text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+#buytext {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+}
+
+div:hover {
+    box-shadow: 0px 0px 1px gray
+}
+</style>
\ No newline at end of file
diff --git "a/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/top.vue" "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/top.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a545735b579cdc10c5c92ecc7caf2d8868daebf6
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/top.vue"
@@ -0,0 +1,19 @@
+<script setup>
+
+</script>
+    
+    <template>
+        <div class="header">
+            <h3>商品列表</h3>
+        </div>
+    </template>
+    
+    <style>
+    .header{
+        width: 100vw;
+        height: 5vh;
+        line-height: 5vh;
+        background-color:burlywood;
+        text-align: center;
+    }
+    </style>
\ No newline at end of file
diff --git "a/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/\346\224\266\346\254\276\347\240\201.jpg" "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/\346\224\266\346\254\276\347\240\201.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..42c2a141b65fed979a8bfe9b02e41b617124be59
Binary files /dev/null and "b/\346\210\264\344\275\263\350\276\211/20230413-VueSetup/components/goods/\346\224\266\346\254\276\347\240\201.jpg" differ
diff --git "a/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/App.vue" "b/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7fea2c30a107e25fa736a9fc668b01ce12aa2729
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/App.vue"
@@ -0,0 +1,44 @@
+<script setup>
+import top from './components/goods/top.vue'
+import center from './components/goods/center.vue'
+import { ref } from 'vue'
+
+let goods =
+  ref([
+    {
+      img: 'https://img14.360buyimg.com/n1/jfs/t1/106985/17/39864/63408/642bf423F9904c391/d8ea2bbdafe38617.jpg',
+      ms: 'ROG枪神7 Plus 超竞版 第13代英特尔酷睿i9 18英寸 星云屏 游戏本笔记本电脑(i9-13980HX 液金导热 32G 1T RTX4080 2.5K 240Hz P3广色域)',
+      price: 20999.00,
+      buyNum: 0
+    },
+    {
+      img: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/46236/25/22864/20696/63de2872F7cc3e4d0/cb1b177a3ca0c552.jpg',
+      ms: 'Apple iPhone 14 Pro Max (A2896) 256GB 暗紫色 支持移动联通电信5G 双卡双待手机',
+      price: 9899.00,
+      buyNum: 0
+    },
+    {
+      img: 'https://img10.360buyimg.com/n1/jfs/t1/145138/17/33605/97250/641c13a5F57d4c41b/8eda140361cc9dde.jpg',
+      ms: 'Apple iPad Pro 12.9英寸(第 6 代)平板电脑 2022年款(256G WLAN版/M2芯片Liquid视网膜XDR屏/MNXR3CH/A) 深空灰色',
+      price: 6799.00,
+      buyNum: 0
+    }
+  ])
+</script>
+  
+<template>
+  <div>
+    <top></top>
+    <div class="content">
+      <center :goods="goods"></center>
+    </div>
+  </div>
+</template>
+  
+<style scoped>
+.content {
+  width: 100vw;
+  display: flex;
+  justify-content: space-around;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/components/goods/center.vue" "b/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/components/goods/center.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..0f6e2e148949c353256c0163def3566bad14b25b
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/components/goods/center.vue"
@@ -0,0 +1,108 @@
+<script >
+import emitter from '../../utils/mitter';
+export default {
+    props: ['goods'],
+    created: function () {
+        let _this = this
+        emitter.on('change', function (value) {
+            _this.item[value.price] = value.buyNum;
+            let totalprice = 0;
+            for (let key in _this.item) {
+                totalprice += Number(key) * Number(_this.item[key])
+            }
+            _this.totalPrice = totalprice;
+        })
+    },
+    data: function () {
+        return {
+            totalPrice: 0,
+            item: [],
+            flag: false
+        }
+    },
+    methods: {
+        change(ms, price, buyNum) {
+            emitter.emit('change', { ms, price, buyNum })
+        },
+        result() {
+            this.flag = true;
+
+        }
+    },
+}
+
+</script>
+<template>
+    <div class="goods" v-for="good, index in goods" v-show="!flag">
+        <img :src="good.img" alt="" width="200">
+        <p style="color: red; font-size: 18px; font-weight: 800;">￥ {{ good.price }}</p>
+        <p id="text">{{ good.ms }}</p>
+        <span style="text-align: center;display: block;"><input type="number" v-model="good.buyNum"
+                style="width: 50px;margin-left: 5px;margin-right: 5px;"
+                @click="change(good.ms, good.price, good.buyNum)"></span>
+    </div>
+    <button @click="result"
+        style="position: absolute; top:450px; background-color: pink;padding: 10px;border-radius: 1vw;">加入购物车</button>
+
+
+    <div v-show="flag" id="result">
+        <span style="position:absolute;left:0;top: 0;">购物车结算</span>
+        <span style="position:absolute;right:0;top:0;" @click="flag = !flag">X</span>
+        <div id="res" v-for="good in goods">
+            <img :src="good.img" alt="" width="200">
+            <div>
+                <p id="buytext">{{ good.ms }}</p>
+                <p>￥ {{ good.price }}</p>
+                <span style="display: block;"><input type="number" v-model="good.buyNum"
+                        style="width: 50px;margin-left: 5px;margin-right: 5px;"
+                        @click="change(good.ms, good.price, good.buyNum)"></span>
+            </div>
+            <span style="position: absolute;bottom: 10px;right: 75px;">总价：￥{{ this.totalPrice }}</span>
+        </div>
+    </div>
+</template>
+    
+<style scoped>
+.goods {
+    width: 200px;
+    padding: 10px;
+}
+
+#text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+#result {
+    background-color: wheat;
+    position: relative;
+    margin-top: 5vw;
+    padding: 50px;
+}
+
+#res {
+    display: flex;
+    width: 70vw;
+    height: 200px;
+    background-color: white;
+    padding: 10px;
+}
+
+#res div {
+    display: flex;
+    flex-direction: column;
+}
+
+#buytext {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+}
+
+div:hover {
+    box-shadow: 0px 0px 1px gray
+}
+</style>
\ No newline at end of file
diff --git "a/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/components/goods/top.vue" "b/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/components/goods/top.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..fb8e7bb92ab0c2d3125238903f1a657f29ffcfd6
--- /dev/null
+++ "b/\346\210\264\344\275\263\350\276\211/20230415-Vue\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/components/goods/top.vue"
@@ -0,0 +1,25 @@
+<script>
+export default {
+    data: function () {
+        return {
+
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="header">
+        <h3>商品列表</h3>
+    </div>
+</template>
+
+<style>
+.header{
+    width: 100vw;
+    height: 5vh;
+    line-height: 5vh;
+    background-color:burlywood;
+    text-align: center;
+}
+</style>
\ No newline at end of file