diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</span
+        ><span><input type="number" v-model="cnum" @change="changeNum" /></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CartItem",
+  props: {
+    id: Number,
+    img: String,
+    name: String,
+    num: Number,
+    price: Number,
+  },
+  data: function () {
+    return {
+      cnum: 0,
+    };
+  },
+  mounted: function () {
+    this.cnum = this.num;
+  },
+  methods: {
+    changeNum: function () {
+      console.log("儿子出发了修改事件");
+      //this.$emit('changeFatherNum',this.cnum,1,2,3,4,5,6);
+      this.$emit("fromChildren", this.cnum, this.id);
+    },
+    tofather() {
+      console.log("tofather from son");
+      this.$emit("click");
+    },
+  },
+  created: function () {
+    console.log("cartitem 创建了");
+  },
+};
+</script>
+
+<style scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/components/HeaderBase.vue"
@@ -0,0 +1,88 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/main.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <scroller :on-refresh="refresh" :on-infinite="infinite">
+      <div v-for="(item, index) in products" :item="item" :key="index">
+        <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+        <router-link
+          :to="{
+            name: 'detail',
+            params: {
+              id: item.id,
+              name: item.name,
+              price: item.price,
+              img: item.img,
+              num: item.num,
+            },
+          }"
+        >
+          <div class="ym">
+            <img :src="item.img" alt="" />
+            <h4>{{ item.name }}</h4>
+            <br />
+            <div class="a">
+              <span class="count">{{ item.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+  name: "AdvList",
+  data() {
+    return {
+      products: [
+        {
+          id: 1,
+          name: "韩国三熹玉3CE彩妆香水专场",
+          img: "../assets/header.jpg",
+          num: 80,
+          price: 1000,
+        },
+        {
+          id: 2,
+          name: "阿迪达斯三叶草运动户外专场",
+          img: "../assets/center.jpg",
+          num: 90,
+          price: 2000,
+        },
+        {
+          id: 3,
+          name: "UGG专场",
+          img: "../assets/bottom.jpg",
+          num: 80,
+          price: 3000,
+        },
+        {
+          id: 4,
+          name: "伊芙丽eifini女装专场",
+          img: "../assets/yfl.jpg",
+          num: 67,
+          price: 3000,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <div class="ce">
+      <div class="shoping">
+        <div class="xq">
+          <img :src="img" />
+        </div>
+
+        <div class="discount">
+          <div class="price">
+            <span class="zhehoujia">￥{{ price }}</span
+            ><br />
+            <span class="yuanjia">￥499</span><span>5.2折</span>
+          </div>
+          <div class="shenghuoguan">
+            <img src="../../public/assets/shenghuoguan.webp" alt="" />
+          </div>
+        </div>
+        <div class="mingchen">
+          <span class="biaoti">{{ name }}</span>
+          <div class="green">
+            <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+          </div>
+        </div>
+        <div class="zhengpin">
+          <img src="../../public/assets/zhengpin.webp" alt="" />
+          <span>100%正品·专业鉴定·正品险</span>
+          <span class="jiantou">></span>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="tubiao">
+          <img src="../../public/assets/kefu.png" alt="" /><br /><span
+            >客服</span
+          >
+        </div>
+        <div class="tubiao">
+          <img src="../../public/assets/gouwuche.png" alt="" /><br /><span
+            >购物车</span
+          >
+        </div>
+        <div class="count">
+          <div class="jiage1">
+            <span>￥499</span>
+          </div>
+          <div class="jiage2" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      let key = 'cart';
+      let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:1};
+      let allProducts = localStorage.getItem(key);
+      allProducts = JSON.parse(allProducts);
+
+      if(allProducts){
+        let inPro = false;
+        for(let key in allProducts){
+          let detailPro = allProducts[key];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      this.$router.push({path:'/cartList'})  
+    }
+  }
+};
+</script>
+<style scoped>
+ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-left: 2px solid #ddd;
+}
+.xq img {
+  width: 100%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/plugins/plugin1.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-03vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认的商品首页
+import BodyBase from '../pages/BodyBase'
+//活动列表页
+import AdvList from '../pages/AdvList'
+//活动商品详情页
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component:BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path:'/adv',
+            component:AdvList
+        },
+        {
+            name:'detail',
+            path:'/detail/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</span
+        ><span><input type="number" v-model="cnum" @change="changeNum" /></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CartItem",
+  props: {
+    id: Number,
+    img: String,
+    name: String,
+    num: Number,
+    price: Number,
+  },
+  data: function () {
+    return {
+      cnum: 0,
+    };
+  },
+  mounted: function () {
+    this.cnum = this.num;
+  },
+  methods: {
+    changeNum: function () {
+      console.log("儿子出发了修改事件");
+      //this.$emit('changeFatherNum',this.cnum,1,2,3,4,5,6);
+      this.$emit("fromChildren", this.cnum, this.id);
+    },
+    tofather() {
+      console.log("tofather from son");
+      this.$emit("click");
+    },
+  },
+  created: function () {
+    console.log("cartitem 创建了");
+  },
+};
+</script>
+
+<style scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/components/HeaderBase.vue"
@@ -0,0 +1,88 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/main.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <scroller :on-refresh="refresh" :on-infinite="infinite">
+      <div v-for="(item, index) in products" :item="item" :key="index">
+        <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+        <router-link
+          :to="{
+            name: 'detail',
+            params: {
+              id: item.id,
+              name: item.name,
+              price: item.price,
+              img: item.img,
+              num: item.num,
+            },
+          }"
+        >
+          <div class="ym">
+            <img :src="item.img" alt="" />
+            <h4>{{ item.name }}</h4>
+            <br />
+            <div class="a">
+              <span class="count">{{ item.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+  name: "AdvList",
+  data() {
+    return {
+      products: [
+        {
+          id: 1,
+          name: "韩国三熹玉3CE彩妆香水专场",
+          img: "../assets/header.jpg",
+          num: 80,
+          price: 1000,
+        },
+        {
+          id: 2,
+          name: "阿迪达斯三叶草运动户外专场",
+          img: "../assets/center.jpg",
+          num: 90,
+          price: 2000,
+        },
+        {
+          id: 3,
+          name: "UGG专场",
+          img: "../assets/bottom.jpg",
+          num: 80,
+          price: 3000,
+        },
+        {
+          id: 4,
+          name: "伊芙丽eifini女装专场",
+          img: "../assets/yfl.jpg",
+          num: 67,
+          price: 3000,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <div class="ce">
+      <div class="shoping">
+        <div class="xq">
+          <img :src="img" />
+        </div>
+
+        <div class="discount">
+          <div class="price">
+            <span class="zhehoujia">￥{{ price }}</span
+            ><br />
+            <span class="yuanjia">￥499</span><span>5.2折</span>
+          </div>
+          <div class="shenghuoguan">
+            <img src="../../public/assets/shenghuoguan.webp" alt="" />
+          </div>
+        </div>
+        <div class="mingchen">
+          <span class="biaoti">{{ name }}</span>
+          <div class="green">
+            <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+          </div>
+        </div>
+        <div class="zhengpin">
+          <img src="../../public/assets/zhengpin.webp" alt="" />
+          <span>100%正品·专业鉴定·正品险</span>
+          <span class="jiantou">></span>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="tubiao">
+          <img src="../../public/assets/kefu.png" alt="" /><br /><span
+            >客服</span
+          >
+        </div>
+        <div class="tubiao">
+          <img src="../../public/assets/gouwuche.png" alt="" /><br /><span
+            >购物车</span
+          >
+        </div>
+        <div class="count">
+          <div class="jiage1">
+            <span>￥499</span>
+          </div>
+          <div class="jiage2" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      let key = 'cart';
+      let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:1};
+      let allProducts = localStorage.getItem(key);
+      allProducts = JSON.parse(allProducts);
+
+      if(allProducts){
+        let inPro = false;
+        for(let key in allProducts){
+          let detailPro = allProducts[key];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      this.$router.push({path:'/cartList'})  
+    }
+  }
+};
+</script>
+<style scoped>
+ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-left: 2px solid #ddd;
+}
+.xq img {
+  width: 100%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/plugins/plugin1.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-05vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认的商品首页
+import BodyBase from '../pages/BodyBase'
+//活动列表页
+import AdvList from '../pages/AdvList'
+//活动商品详情页
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component:BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path:'/adv',
+            component:AdvList
+        },
+        {
+            name:'detail',
+            path:'/detail/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</span
+        ><span><input type="number" v-model="cnum" @change="changeNum" /></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CartItem",
+  props: {
+    id: Number,
+    img: String,
+    name: String,
+    num: Number,
+    price: Number,
+  },
+  data: function () {
+    return {
+      cnum: 0,
+    };
+  },
+  mounted: function () {
+    this.cnum = this.num;
+  },
+  methods: {
+    changeNum: function () {
+      console.log("儿子出发了修改事件");
+      //this.$emit('changeFatherNum',this.cnum,1,2,3,4,5,6);
+      this.$emit("fromChildren", this.cnum, this.id);
+    },
+    tofather() {
+      console.log("tofather from son");
+      this.$emit("click");
+    },
+  },
+  created: function () {
+    console.log("cartitem 创建了");
+  },
+};
+</script>
+
+<style scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/components/HeaderBase.vue"
@@ -0,0 +1,88 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/main.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <scroller :on-refresh="refresh" :on-infinite="infinite">
+      <div v-for="(item, index) in products" :item="item" :key="index">
+        <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+        <router-link
+          :to="{
+            name: 'detail',
+            params: {
+              id: item.id,
+              name: item.name,
+              price: item.price,
+              img: item.img,
+              num: item.num,
+            },
+          }"
+        >
+          <div class="ym">
+            <img :src="item.img" alt="" />
+            <h4>{{ item.name }}</h4>
+            <br />
+            <div class="a">
+              <span class="count">{{ item.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+  name: "AdvList",
+  data() {
+    return {
+      products: [
+        {
+          id: 1,
+          name: "韩国三熹玉3CE彩妆香水专场",
+          img: "../assets/header.jpg",
+          num: 80,
+          price: 1000,
+        },
+        {
+          id: 2,
+          name: "阿迪达斯三叶草运动户外专场",
+          img: "../assets/center.jpg",
+          num: 90,
+          price: 2000,
+        },
+        {
+          id: 3,
+          name: "UGG专场",
+          img: "../assets/bottom.jpg",
+          num: 80,
+          price: 3000,
+        },
+        {
+          id: 4,
+          name: "伊芙丽eifini女装专场",
+          img: "../assets/yfl.jpg",
+          num: 67,
+          price: 3000,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <div class="ce">
+      <div class="shoping">
+        <div class="xq">
+          <img :src="img" />
+        </div>
+
+        <div class="discount">
+          <div class="price">
+            <span class="zhehoujia">￥{{ price }}</span
+            ><br />
+            <span class="yuanjia">￥499</span><span>5.2折</span>
+          </div>
+          <div class="shenghuoguan">
+            <img src="../../public/assets/shenghuoguan.webp" alt="" />
+          </div>
+        </div>
+        <div class="mingchen">
+          <span class="biaoti">{{ name }}</span>
+          <div class="green">
+            <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+          </div>
+        </div>
+        <div class="zhengpin">
+          <img src="../../public/assets/zhengpin.webp" alt="" />
+          <span>100%正品·专业鉴定·正品险</span>
+          <span class="jiantou">></span>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="tubiao">
+          <img src="../../public/assets/kefu.png" alt="" /><br /><span
+            >客服</span
+          >
+        </div>
+        <div class="tubiao">
+          <img src="../../public/assets/gouwuche.png" alt="" /><br /><span
+            >购物车</span
+          >
+        </div>
+        <div class="count">
+          <div class="jiage1">
+            <span>￥499</span>
+          </div>
+          <div class="jiage2" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      let key = 'cart';
+      let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:1};
+      let allProducts = localStorage.getItem(key);
+      allProducts = JSON.parse(allProducts);
+
+      if(allProducts){
+        let inPro = false;
+        for(let key in allProducts){
+          let detailPro = allProducts[key];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      this.$router.push({path:'/cartList'})  
+    }
+  }
+};
+</script>
+<style scoped>
+ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-left: 2px solid #ddd;
+}
+.xq img {
+  width: 100%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/plugins/plugin1.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-06vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认的商品首页
+import BodyBase from '../pages/BodyBase'
+//活动列表页
+import AdvList from '../pages/AdvList'
+//活动商品详情页
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component:BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path:'/adv',
+            component:AdvList
+        },
+        {
+            name:'detail',
+            path:'/detail/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/components/CartItem.vue"
@@ -0,0 +1,85 @@
+<template>
+ <div >
+  <div class="ym">
+    <img :src="img" alt="" />
+    <h4>{{name}}</h4>
+    <br />
+    <div class="a">
+      <span class="count">{{price}}</span><span>折起</span>
+      <input type="number" v-model="cnum" >
+      <button @click="pay">付款</button>
+    </div>
+  </div>
+ </div>
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+        cnum:this.num
+      }
+    },
+    props:{
+      id:Number,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      pay:function(){
+        console.log('付款商品数量',this.cnum);
+        console.log(this.id,this.cnum);
+        // this.$bus 进行了一个触发事件，接受的这个事件的也必须是同一个实例
+        this.$bus.$emit('confirmOder',this.id,this.cnum);
+      }
+    },
+    mounted:function(){
+      console.log(this)
+    }
+    
+};
+</script>
+
+<style>
+.shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+
+input:-internal-autofill-previewed,input:-internal-autofill-selected {
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..56b1927836121838ac601f9fc7e60810b999a687
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/components/HeaderBase.vue"
@@ -0,0 +1,109 @@
+<template>
+  <div>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     
+    </div>
+    <div id="body">
+       <div class="ly">
+       <!-- <keep-alive :include="include">
+          <router-view></router-view>
+       </keep-alive> -->
+       <keep-alive>
+          <router-view v-if="$route.meta.keepalive"></router-view>
+       </keep-alive>
+        <router-view v-if="!$route.meta.keepalive"></router-view>
+     </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  data(){
+    return {
+      include:'AdvList'
+    }
+  },
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+#body{
+  position: relative;
+  text-align: center;
+}
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/data/product.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/main.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..6cb9215cca06b6a19beb23aa0cdff394a1b98d8d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/main.js"
@@ -0,0 +1,98 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+import Vuex from 'vuex';
+
+import VueScroller from 'vue-scroller'
+Vue.use(VueScroller)
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+Vue.use(Vuex);
+
+
+
+const store = new Vuex.Store({
+   state: {  
+        name:'外卖系统',
+        cart:[],
+        buyNums:0,//购买的数量，每次点击购买时，把对应购买数量+1
+
+    },    
+
+    mutations:{
+      changeName(state,name){
+          state.name=name;
+        
+      },
+      changeBuyNum(state,num){
+          console.log('change buynum');
+          //请求后台数据,
+          axios.get('https://question.llblog.cc/api.php').then(res=>{
+            console.log(res);
+            state.buyNums = state.buyNums+num; //0+1    1+1    0
+            console.log(state.buyNums);
+          });
+        
+      },
+      addToCart(state,product){
+        let inCart = false;
+         state.cart.forEach(el=>{
+            if(el.id==product.id){
+               el.num++
+               inCart=true;
+            }
+         })
+         if(!inCart){
+           state.push(product);
+         }
+      },
+     
+    
+    },
+    actions:{
+      changeNumByAction (context,num) {
+        console.log(context);//context 是store的精简版
+        context.commit('changeBuyNum',num)
+      }
+    },
+    getters:{
+      getBuyNums(state){
+         return state.buyNums+' ====数量';
+      }
+    }
+
+ })
+
+//引入路由器
+import router from './router/index';
+
+
+
+// axios.defaults.baseURL='http://123.207.32.32:8000';
+
+Vue.prototype.$axios=axios;
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate.
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   beforeCreate:function(){
+     Vue.prototype.$bus=this;
+   },
+   router,
+   store
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..278aa02541b85b2678d29fb87606bbd8548c7be2
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/AdvList.vue"
@@ -0,0 +1,142 @@
+<template>
+
+  <div class="shoping" >
+      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <!-- <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }"> -->
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
+                </div>
+            <!-- </router-link> -->
+         </div>
+         </scroller>
+     </div>
+
+     
+ 
+</template>
+
+<script>
+// import axios from 'axios';
+import {mapState} from 'vuex';
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1,
+          page:1,//页数
+          pageSize:20,
+      }
+  },
+  mounted:function(){
+      console.log(this.$store)
+    //   this.products=product.products;
+    //   this.$bus.$on('confirmOder',(id,num)=>{
+    //       console.log('adv 收到change');
+    //     //   console.log(id);
+    //     //   console.log(num);
+    //      this.products.forEach(el=>{
+    //          if(el.id==id){
+    //              el.num = el.num-num;
+    //          }
+    //      })
+    //   })
+      let url = 'https://question.llblog.cc/api.php?page=1&pageSize=20';
+      this.$axios.get(url).then(res=>{
+            this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+            }
+            
+        })
+  },
+  computed:{
+      ...mapState(['name'])
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+    //   let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+    //   //methos get post delete patch
+    //   axios.get(url).then(res=>{
+    //       console.log(res.data);
+          
+    //   });
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  methods:{
+      refresh:function(done){//scroller 插件的 refresh 方法，会有各 done 参数，done 插件用来描述这次事件的结束
+          console.log('refresh')
+          done()
+      },
+      infinite:function(done){
+        //console.log('infinite');
+        //question.llblog.cc/api.php?page=1&pageSize=20
+        //  setTimeout(()=>{
+		// 				//this.$refs.myscroller.finishInfinite(true);
+        //                 done();
+		// 			},1500)
+        let url = 'https://question.llblog.cc/api.php?page'+this.page+'&pageSize='+this.pageSize;
+        this.$axios.get(url).then(res=>{
+            console.log(res.data.data);
+            //this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+                res.data.data.forEach(el => {
+                    console.log(el);
+                    this.products.push(el);
+                });
+            }
+        })
+         done();
+      }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+     margin:0 auto;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ad7281f8b79b0f897ef609c00155ab672409dc89
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/pages/Detail.vue"
@@ -0,0 +1,244 @@
+<template>
+  <div >
+        {{this.$store.state.buyNums}}
+        {{getBuyNums}}
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" @click='add2Card(id)'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+import { mapState,mapMutations,mapActions,mapGetters} from 'vuex'
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  computed:{
+    ...mapGetters(['getBuyNums']),  
+    ...mapState(['buyNums']),
+  },
+  methods:{
+    ...mapActions(['changeNumByAction']),
+    // changeNumByAction:function(){
+    //     this.$store.dispatch('changeNumByAction')
+    // },
+    ...mapMutations(['changeBuyNum']),//`this.changeBuyNum()` 映射为 `this.$store.commit('changeBuyNum')`
+    // changeBuyNum:function(){
+    //     this.$store.commit('changeBuyNum');
+    // },
+    add2Card:function(){
+        //product.addToCart(id);
+        //this.$bus.$emit('change');
+        //this.$store.commit('changeBuyNum',1); 
+        //this.changeBuyNum(1);
+        //this.$store.dispatch('changeNumByAction');
+        this.changeNumByAction(1);
+    }
+  },
+  mounted(){
+      console.log(this);
+      console.log(this.$store.getters.getBuyNums)
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..e894839a98442b4a7ec971344bf48e4c5d824e14
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/router/index.js"
@@ -0,0 +1,49 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'listName',
+            path: '/adv',
+            component: AdvList,
+            meta:{
+                keepalive:true
+            }
+        },
+        {
+            name:'detail',
+            //path:'/detail',
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/vuex.md" "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/vuex.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5dfe881c43fd202302f30e39d314953033fe6f8f
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-10vue/src/vuex.md"
@@ -0,0 +1 @@
+## mutioan 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，mutation 中的函数必须是同步的
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/components/CartItem.vue"
@@ -0,0 +1,85 @@
+<template>
+ <div >
+  <div class="ym">
+    <img :src="img" alt="" />
+    <h4>{{name}}</h4>
+    <br />
+    <div class="a">
+      <span class="count">{{price}}</span><span>折起</span>
+      <input type="number" v-model="cnum" >
+      <button @click="pay">付款</button>
+    </div>
+  </div>
+ </div>
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+        cnum:this.num
+      }
+    },
+    props:{
+      id:Number,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      pay:function(){
+        console.log('付款商品数量',this.cnum);
+        console.log(this.id,this.cnum);
+        // this.$bus 进行了一个触发事件，接受的这个事件的也必须是同一个实例
+        this.$bus.$emit('confirmOder',this.id,this.cnum);
+      }
+    },
+    mounted:function(){
+      console.log(this)
+    }
+    
+};
+</script>
+
+<style>
+.shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+
+input:-internal-autofill-previewed,input:-internal-autofill-selected {
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..56b1927836121838ac601f9fc7e60810b999a687
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/components/HeaderBase.vue"
@@ -0,0 +1,109 @@
+<template>
+  <div>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     
+    </div>
+    <div id="body">
+       <div class="ly">
+       <!-- <keep-alive :include="include">
+          <router-view></router-view>
+       </keep-alive> -->
+       <keep-alive>
+          <router-view v-if="$route.meta.keepalive"></router-view>
+       </keep-alive>
+        <router-view v-if="!$route.meta.keepalive"></router-view>
+     </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  data(){
+    return {
+      include:'AdvList'
+    }
+  },
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+#body{
+  position: relative;
+  text-align: center;
+}
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/data/product.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/main.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..4753647c6caa881dafab5f28ccfc9a0d6b0404c2
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/main.js"
@@ -0,0 +1,61 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+//全局引入
+// import ElementUI from 'element-ui';
+// import 'element-ui/lib/theme-chalk/index.css';
+// Vue.use(ElementUI);
+
+//按需引入
+import {Button,Row,Input,Carousel,CarouselItem} from 'element-ui';
+
+//全局注册
+Vue.component(Button.name,Button);
+Vue.component(Input.name,Input);
+Vue.component(Carousel.name,Carousel);
+Vue.component(CarouselItem.name,CarouselItem);
+Vue.component(Row.name,Row);
+
+Vue.component('class7-button',Button);
+
+import VueScroller from 'vue-scroller'
+Vue.use(VueScroller)
+// 在js es2015，有优先级别，优先级别比较好的是 import
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+import store from './store';
+//引入路由器
+import router from './router/index';
+
+
+
+// axios.defaults.baseURL='http://123.207.32.32:8000';
+
+Vue.prototype.$axios=axios;
+
+
+
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate.
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   beforeCreate:function(){
+     Vue.prototype.$bus=this;
+   },
+   router,
+   store
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..bb5ef312701a881754ba1be890f5c7be152ad8f8
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/AdvList.vue"
@@ -0,0 +1,120 @@
+<template>
+
+  <div class="shoping" >
+      <scroller 
+  :on-refresh="refresh"
+  :on-infinite="infinite" ref="myscroller">
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
+                </div>
+            </router-link>
+         </div>
+         </scroller>
+     </div>
+
+     
+ 
+</template>
+
+<script>
+import product from '../data/product';
+import axios from 'axios';
+import {mapState} from 'vuex';
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1
+      }
+  },
+  mounted:function(){
+      console.log(this.$store)
+      this.products=product.products;
+      this.$bus.$on('confirmOder',(id,num)=>{
+          console.log('adv 收到change');
+        //   console.log(id);
+        //   console.log(num);
+         this.products.forEach(el=>{
+             if(el.id==id){
+                 el.num = el.num-num;
+             }
+         })
+      })
+  },
+  computed:{
+      ...mapState(['name'])
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+      let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+      //methos get post delete patch
+      axios.get(url).then(res=>{
+          console.log(res.data);
+      });
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  methods:{
+      refresh:function(done){
+          console.log('refresh')
+          done()
+      },
+      infinite:function(done){
+          console.log('infinite');
+         setTimeout(()=>{
+						//this.$refs.myscroller.finishInfinite(true);
+                        done();
+					},1500)
+      }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+     margin:0 auto;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..162b9e0199820068748f0aca273961d03a79951a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/Detail.vue"
@@ -0,0 +1,263 @@
+<template>
+  <div >
+
+        {{this.$store.getters.getName}}
+        {{this.$store.state.user.userInfo.name}}
+        {{this.$store.state.money}}
+        <h3 @click='change'>{{userInfo}}</h3>
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" @click='add2Card(id)'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+
+
+import {mapGetters,mapMutations,mapState} from 'vuex';
+
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  methods:{
+    ...mapMutations(['addToCart']),   //将 `this.addToCart()` 映射为 `this.$store.commit('addToCart')`
+    ...mapMutations('user',['changeUser']),
+
+    add2Card:function(){
+        //product.addToCart(id);
+        //this.$bus.$emit('change');
+        // 调用 vuex中的 mutation的方法
+
+        //this.$router.push({path:'/cartList'});
+        let product ={
+            id:this.id,
+            name:this.name,
+            num:1,
+            price:this.price,
+            img:this.img
+        }
+        //怎么去调用mutation 的方法？
+        //this.$store.commit('addToCart',product);
+        //this.addToCart(product)
+        //console.log(this);
+        this.$store.dispatch('add2Cart',product);
+    },
+    change(){
+        //this.$store.commit('user/changeUser',{name:'张亦希',age:18});
+        //this.changeUser({name:'未知',age:99});
+        this.$store.dispatch('user/changeUserByAction',1000);
+    }
+  },
+  mounted(){
+      console.log(this);
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  },
+  computed:{
+      ...mapState('user',['userInfo']),
+      ...mapGetters(['getName']),
+      getNames:function(){
+          return 'hello vuex';
+      }
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/Ele.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/Ele.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7b291ae8b807809511b308092576672492c8f16f
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/pages/Ele.vue"
@@ -0,0 +1,114 @@
+<template>
+  <div>
+           <el-row>
+  <el-button>默认按钮</el-button>
+  <el-button type="primary">主要按钮</el-button>
+  <el-button type="success" color-primary: red>成功按钮</el-button>
+  <el-button type="info">信息按钮</el-button>
+  <el-button type="warning">警告按钮</el-button>
+  <el-button type="danger">危险按钮</el-button>
+  <class7-button type='primary'>自定义标签</class7-button>
+  <el-row>
+  <el-button icon="el-icon-money" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
+    </el-row>
+     <el-input  placeholder="请输入内容"></el-input>
+     <div class="block">
+    <span class="demonstration">默认 Hover 指示器触发</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Click 指示器触发</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  </div>
+
+
+  
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+      };
+    }
+  };
+</script>
+
+<style>
+.el-button--primary{
+  color:red;
+  background-color:azure
+ }
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..7d33edbc86271d7f5f6792839098e943ea819422
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/router/index.js"
@@ -0,0 +1,54 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+import Ele from '../pages/Ele'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/ele',
+            component: Ele,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'listName',
+            path: '/adv',
+            component: AdvList,
+            meta:{
+                keepalive:true
+            }
+        },
+        {
+            name:'detail',
+            //path:'/detail',
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/actions.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/actions.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fb14e72b726522cf3e294f62a89fda109fcf2e4b
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/actions.js"
@@ -0,0 +1,7 @@
+const actions={
+    add2Cart(context,product) {
+      console.log(product);
+      context.commit('addToCart',product);
+   }
+ };
+ export default actions;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fe67add79b72b94016134af2805b8540c641bcd7
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/index.js"
@@ -0,0 +1,29 @@
+import Vuex from 'vuex';
+import Vue from 'vue';
+import mutations from './mutations'
+import actions from './actions'
+import user from './modules/user'
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state: {  
+         name:'外卖系统',
+         cart:[],
+         buyNums:0,
+         money:0
+     },    
+ 
+     mutations,
+     actions,
+     
+     getters:{
+        getName:(state)=>{
+          return state.name+'----我们的项目';
+        }
+     },
+     modules:{
+          user
+     }
+ 
+  })
+  export default store;
+ 
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/modules/user.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/modules/user.js"
new file mode 100644
index 0000000000000000000000000000000000000000..68d1b2507c029352b964ad8016d034ad9d1b0f34
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/modules/user.js"
@@ -0,0 +1,22 @@
+const user={
+    namespaced: true,
+    //每个模块都有自己的 state mutation ....
+    state:{
+      userInfo:{name:'刘斌明天要准备',age:29}
+    },
+    mutations:{
+      changeUser(state,payload){
+        state.userInfo=payload;
+        
+      }
+    },
+    actions:{
+      changeUserByAction({commit},payload){
+           commit('changeUser',payload)
+           //触发全局的mutation的修改
+           commit('makeMoney',1000,{ root: true })
+      }
+    }
+    
+  }
+  export default user;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/mutations.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/mutations.js"
new file mode 100644
index 0000000000000000000000000000000000000000..eee0d474fb15c7e64f26d898d8c1175d6b0c7829
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/2022-5-12vue/src/store/mutations.js"
@@ -0,0 +1,26 @@
+const mutations={
+    changeName(state,name){
+        state.name=name
+    },
+    //加入到购物车
+    addToCart(state,product){
+      console.log('购物商品修改');
+      console.log(state.buyNums)
+        let inCart = false;
+        state.cart.forEach(el=>{
+           if(el.id==product.id){
+              el.num++
+              inCart=true;
+           }
+        })
+        if(!inCart){
+          state.cart.push(product);
+        }
+        state.buyNums++;      
+        console.log(state.buyNums,111);
+    },
+    makeMoney(state,payload){
+        state.money = state.money+payload
+    }
+  };
+  export default mutations;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/components/CartItem.vue"
@@ -0,0 +1,85 @@
+<template>
+ <div >
+  <div class="ym">
+    <img :src="img" alt="" />
+    <h4>{{name}}</h4>
+    <br />
+    <div class="a">
+      <span class="count">{{price}}</span><span>折起</span>
+      <input type="number" v-model="cnum" >
+      <button @click="pay">付款</button>
+    </div>
+  </div>
+ </div>
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+        cnum:this.num
+      }
+    },
+    props:{
+      id:Number,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      pay:function(){
+        console.log('付款商品数量',this.cnum);
+        console.log(this.id,this.cnum);
+        // this.$bus 进行了一个触发事件，接受的这个事件的也必须是同一个实例
+        this.$bus.$emit('confirmOder',this.id,this.cnum);
+      }
+    },
+    mounted:function(){
+      console.log(this)
+    }
+    
+};
+</script>
+
+<style>
+.shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+
+input:-internal-autofill-previewed,input:-internal-autofill-selected {
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..56b1927836121838ac601f9fc7e60810b999a687
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/components/HeaderBase.vue"
@@ -0,0 +1,109 @@
+<template>
+  <div>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     
+    </div>
+    <div id="body">
+       <div class="ly">
+       <!-- <keep-alive :include="include">
+          <router-view></router-view>
+       </keep-alive> -->
+       <keep-alive>
+          <router-view v-if="$route.meta.keepalive"></router-view>
+       </keep-alive>
+        <router-view v-if="!$route.meta.keepalive"></router-view>
+     </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  data(){
+    return {
+      include:'AdvList'
+    }
+  },
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+#body{
+  position: relative;
+  text-align: center;
+}
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/data/product.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/main.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..f6bb6db3aa3d4e11f73c880a20c1feaf5c96e8b7
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/main.js"
@@ -0,0 +1,47 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+import VueScroller from 'vue-scroller'
+
+//import 的级别是最好的，优先执行 import
+Vue.use(VueScroller)
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+import store from './store';
+
+
+
+//引入路由器
+import router from './router/index';
+
+
+
+// axios.defaults.baseURL='http://123.207.32.32:8000';
+
+Vue.prototype.$axios=axios;
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate.
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   beforeCreate:function(){
+     Vue.prototype.$bus=this;
+   },
+   router,
+   store
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4ec65d0ff7095b401867fbd30f18de7f2bf78162
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/AdvList.vue"
@@ -0,0 +1,142 @@
+<template>
+
+  <div class="shoping" >
+      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
+                </div>
+            </router-link>
+         </div>
+         </scroller>
+     </div>
+
+     
+ 
+</template>
+
+<script>
+// import axios from 'axios';
+import {mapState} from 'vuex';
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1,
+          page:1,//页数
+          pageSize:20,
+      }
+  },
+  mounted:function(){
+      console.log(this.$store)
+    //   this.products=product.products;
+    //   this.$bus.$on('confirmOder',(id,num)=>{
+    //       console.log('adv 收到change');
+    //     //   console.log(id);
+    //     //   console.log(num);
+    //      this.products.forEach(el=>{
+    //          if(el.id==id){
+    //              el.num = el.num-num;
+    //          }
+    //      })
+    //   })
+      let url = 'https://question.llblog.cc/api.php?page=1&pageSize=20';
+      this.$axios.get(url).then(res=>{
+            this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+            }
+            
+        })
+  },
+  computed:{
+      ...mapState(['name'])
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+    //   let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+    //   //methos get post delete patch
+    //   axios.get(url).then(res=>{
+    //       console.log(res.data);
+          
+    //   });
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  methods:{
+      refresh:function(done){//scroller 插件的 refresh 方法，会有各 done 参数，done 插件用来描述这次事件的结束
+          console.log('refresh')
+          done()
+      },
+      infinite:function(done){
+        //console.log('infinite');
+        //question.llblog.cc/api.php?page=1&pageSize=20
+        //  setTimeout(()=>{
+		// 				//this.$refs.myscroller.finishInfinite(true);
+        //                 done();
+		// 			},1500)
+        let url = 'https://question.llblog.cc/api.php?page'+this.page+'&pageSize='+this.pageSize;
+        this.$axios.get(url).then(res=>{
+            console.log(res.data.data);
+            //this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+                res.data.data.forEach(el => {
+                    console.log(el);
+                    this.products.push(el);
+                });
+            }
+        })
+         done();
+      }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+     margin:0 auto;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..bcee73c143dde0b94a1a994b706855c2c11a90ca
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/pages/Detail.vue"
@@ -0,0 +1,255 @@
+<template>
+  <div >
+        {{this.$store.state.buyNums}}
+        {{getBuyNums}}
+        {{this.$store.state.user.userInfo.name}}
+        <h3 @click='changeUser'>{{userInfo.name}}</h3>
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" @click='add2Card(id)'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+import { mapState,mapMutations,mapActions,mapGetters} from 'vuex'
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  computed:{
+    ...mapGetters(['getBuyNums']),  
+    ...mapState(['buyNums']),
+    ...mapState('user',['userInfo']),
+    
+  },
+  methods:{
+    ...mapActions(['changeNumByAction']),
+    // changeNumByAction:function(){
+    //     this.$store.dispatch('changeNumByAction')
+    // },
+    ...mapMutations(['changeBuyNum']),//`this.changeBuyNum()` 映射为 `this.$store.commit('changeBuyNum')`
+    // changeBuyNum:function(){
+    //     this.$store.commit('changeBuyNum');
+    // },
+    ...mapMutations('user',['changeUserInfo']),
+    add2Card:function(){
+        //product.addToCart(id);
+        //this.$bus.$emit('change');
+        //this.$store.commit('changeBuyNum',1); 
+        //this.changeBuyNum(1);
+        //this.$store.dispatch('changeNumByAction');
+        this.changeNumByAction(1);
+    },
+    changeUser:function(){
+         //this.$store.commit('user/changeUserInfo',{name:'vuex',age:3});
+         //this.$store.commit('user/changeUserInfo',{name:'vuex',age:3});
+         //this.changeUserInfo({name:'vuex',age:3})
+         this.$store.dispatch('user/changeUserInfoByAction',{name:'vuex',age:3});
+    },
+  },
+  mounted(){
+      console.log(this);
+      //console.log(this.$store.getters.getBuyNums)
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..e894839a98442b4a7ec971344bf48e4c5d824e14
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/router/index.js"
@@ -0,0 +1,49 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'listName',
+            path: '/adv',
+            component: AdvList,
+            meta:{
+                keepalive:true
+            }
+        },
+        {
+            name:'detail',
+            //path:'/detail',
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/actions.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/actions.js"
new file mode 100644
index 0000000000000000000000000000000000000000..f9b47bd8e44f5a32e92ea34456aa931a3005d2b2
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/actions.js"
@@ -0,0 +1,13 @@
+
+const actions={
+
+        changeNumByAction (context,num) {
+          console.log(context);//context 是store的精简版
+          context.commit('changeBuyNum',num)
+        },
+        changeName({commit},name){
+          commit('changeName',name)
+        }
+}
+
+export default actions
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a58a3e765c52465582772faff9c8a6e5584add08
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/index.js"
@@ -0,0 +1,25 @@
+import Vuex from 'vuex';
+
+import Vue from 'vue';
+import state from './state';
+import actions from './actions';
+import mutations from './mutations'
+import user from './mudules/user'
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+     state,
+     mutations,
+     actions,
+     getters:{
+       getBuyNums(state){
+          return state.buyNums+' ====数量';
+       }
+     },
+     modules:{// 每个模块对象都有自己的 state mutation action getters
+        user
+     }
+ 
+  })
+
+  export default store;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/mudules/user.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/mudules/user.js"
new file mode 100644
index 0000000000000000000000000000000000000000..6e9c593eb8e10d1b964539e9376e611f0430e3f2
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/mudules/user.js"
@@ -0,0 +1,24 @@
+const user={
+    namespaced: true,
+     state:{
+          userInfo:{name:'vue',age:5},
+     },
+     mutations:{
+       changeUserInfo(state,payload){
+         console.log('userInfo的changeUserInfo');
+         state.userInfo=payload
+       }
+     },
+     actions:{
+       changeUserInfoByAction({commit},payload){// context commit
+         console.log('userInfo的changeUserInfoByActio');
+         commit('changeUserInfo',payload);
+         //联动的操作，还要把全局的name给修改
+         //因为 name 是全局的，官网提供了 他们可以接受 `root` 属性以访问根 dispatch 或 commit
+         commit('changeName','区块链',{root: true});
+       }
+     }
+
+  }
+
+  export default user;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/mutations.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/mutations.js"
new file mode 100644
index 0000000000000000000000000000000000000000..01134bad23a3b73a08e7ba03df939f73c1c3a10d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/mutations.js"
@@ -0,0 +1,32 @@
+import axios from 'axios';
+const mutations={
+        changeName(state,name){
+            console.log('修改全局的name')
+            state.name=name;
+          
+        },
+        changeBuyNum(state,num){
+            console.log('change buynum');
+            //请求后台数据,
+            axios.get('https://question.llblog.cc/api.php').then(res=>{
+              console.log(res);
+              state.buyNums = state.buyNums+num; //0+1    1+1    0
+              console.log(state.buyNums);
+            });
+          
+        },
+        addToCart(state,product){
+          let inCart = false;
+           state.cart.forEach(el=>{
+              if(el.id==product.id){
+                 el.num++
+                 inCart=true;
+              }
+           })
+           if(!inCart){
+             state.push(product);
+           }
+        }
+}
+
+export default mutations;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/state.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/state.js"
new file mode 100644
index 0000000000000000000000000000000000000000..90f8d00b2a664f63a090ba52726e45cda7ce4376
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/store/state.js"
@@ -0,0 +1,8 @@
+const state={  
+    name:'外卖系统',
+    cart:[],
+    buyNums:0,//购买的数量，每次点击购买时，把对应购买数量+1
+    //userInfo:{},
+
+}
+export default state;
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/vuex.md" "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/vuex.md"
new file mode 100644
index 0000000000000000000000000000000000000000..50fe2077b08c9e3ce440e6a50074c4f5a383348d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-11vue/src/vuex.md"
@@ -0,0 +1,3 @@
+## mutioan 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，mutation 中的函数必须是同步的
+
+
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/components/CartItem.vue"
@@ -0,0 +1,85 @@
+<template>
+ <div >
+  <div class="ym">
+    <img :src="img" alt="" />
+    <h4>{{name}}</h4>
+    <br />
+    <div class="a">
+      <span class="count">{{price}}</span><span>折起</span>
+      <input type="number" v-model="cnum" >
+      <button @click="pay">付款</button>
+    </div>
+  </div>
+ </div>
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+        cnum:this.num
+      }
+    },
+    props:{
+      id:Number,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      pay:function(){
+        console.log('付款商品数量',this.cnum);
+        console.log(this.id,this.cnum);
+        // this.$bus 进行了一个触发事件，接受的这个事件的也必须是同一个实例
+        this.$bus.$emit('confirmOder',this.id,this.cnum);
+      }
+    },
+    mounted:function(){
+      console.log(this)
+    }
+    
+};
+</script>
+
+<style>
+.shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+
+input:-internal-autofill-previewed,input:-internal-autofill-selected {
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..56b1927836121838ac601f9fc7e60810b999a687
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/components/HeaderBase.vue"
@@ -0,0 +1,109 @@
+<template>
+  <div>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     
+    </div>
+    <div id="body">
+       <div class="ly">
+       <!-- <keep-alive :include="include">
+          <router-view></router-view>
+       </keep-alive> -->
+       <keep-alive>
+          <router-view v-if="$route.meta.keepalive"></router-view>
+       </keep-alive>
+        <router-view v-if="!$route.meta.keepalive"></router-view>
+     </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  data(){
+    return {
+      include:'AdvList'
+    }
+  },
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+#body{
+  position: relative;
+  text-align: center;
+}
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/data/product.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/main.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..4753647c6caa881dafab5f28ccfc9a0d6b0404c2
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/main.js"
@@ -0,0 +1,61 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+//全局引入
+// import ElementUI from 'element-ui';
+// import 'element-ui/lib/theme-chalk/index.css';
+// Vue.use(ElementUI);
+
+//按需引入
+import {Button,Row,Input,Carousel,CarouselItem} from 'element-ui';
+
+//全局注册
+Vue.component(Button.name,Button);
+Vue.component(Input.name,Input);
+Vue.component(Carousel.name,Carousel);
+Vue.component(CarouselItem.name,CarouselItem);
+Vue.component(Row.name,Row);
+
+Vue.component('class7-button',Button);
+
+import VueScroller from 'vue-scroller'
+Vue.use(VueScroller)
+// 在js es2015，有优先级别，优先级别比较好的是 import
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+import store from './store';
+//引入路由器
+import router from './router/index';
+
+
+
+// axios.defaults.baseURL='http://123.207.32.32:8000';
+
+Vue.prototype.$axios=axios;
+
+
+
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate.
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   beforeCreate:function(){
+     Vue.prototype.$bus=this;
+   },
+   router,
+   store
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..bb5ef312701a881754ba1be890f5c7be152ad8f8
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/AdvList.vue"
@@ -0,0 +1,120 @@
+<template>
+
+  <div class="shoping" >
+      <scroller 
+  :on-refresh="refresh"
+  :on-infinite="infinite" ref="myscroller">
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
+                </div>
+            </router-link>
+         </div>
+         </scroller>
+     </div>
+
+     
+ 
+</template>
+
+<script>
+import product from '../data/product';
+import axios from 'axios';
+import {mapState} from 'vuex';
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1
+      }
+  },
+  mounted:function(){
+      console.log(this.$store)
+      this.products=product.products;
+      this.$bus.$on('confirmOder',(id,num)=>{
+          console.log('adv 收到change');
+        //   console.log(id);
+        //   console.log(num);
+         this.products.forEach(el=>{
+             if(el.id==id){
+                 el.num = el.num-num;
+             }
+         })
+      })
+  },
+  computed:{
+      ...mapState(['name'])
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+      let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+      //methos get post delete patch
+      axios.get(url).then(res=>{
+          console.log(res.data);
+      });
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  methods:{
+      refresh:function(done){
+          console.log('refresh')
+          done()
+      },
+      infinite:function(done){
+          console.log('infinite');
+         setTimeout(()=>{
+						//this.$refs.myscroller.finishInfinite(true);
+                        done();
+					},1500)
+      }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+     margin:0 auto;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..162b9e0199820068748f0aca273961d03a79951a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/Detail.vue"
@@ -0,0 +1,263 @@
+<template>
+  <div >
+
+        {{this.$store.getters.getName}}
+        {{this.$store.state.user.userInfo.name}}
+        {{this.$store.state.money}}
+        <h3 @click='change'>{{userInfo}}</h3>
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" @click='add2Card(id)'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+
+
+import {mapGetters,mapMutations,mapState} from 'vuex';
+
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  methods:{
+    ...mapMutations(['addToCart']),   //将 `this.addToCart()` 映射为 `this.$store.commit('addToCart')`
+    ...mapMutations('user',['changeUser']),
+
+    add2Card:function(){
+        //product.addToCart(id);
+        //this.$bus.$emit('change');
+        // 调用 vuex中的 mutation的方法
+
+        //this.$router.push({path:'/cartList'});
+        let product ={
+            id:this.id,
+            name:this.name,
+            num:1,
+            price:this.price,
+            img:this.img
+        }
+        //怎么去调用mutation 的方法？
+        //this.$store.commit('addToCart',product);
+        //this.addToCart(product)
+        //console.log(this);
+        this.$store.dispatch('add2Cart',product);
+    },
+    change(){
+        //this.$store.commit('user/changeUser',{name:'张亦希',age:18});
+        //this.changeUser({name:'未知',age:99});
+        this.$store.dispatch('user/changeUserByAction',1000);
+    }
+  },
+  mounted(){
+      console.log(this);
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  },
+  computed:{
+      ...mapState('user',['userInfo']),
+      ...mapGetters(['getName']),
+      getNames:function(){
+          return 'hello vuex';
+      }
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/Ele.vue" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/Ele.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7b291ae8b807809511b308092576672492c8f16f
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/pages/Ele.vue"
@@ -0,0 +1,114 @@
+<template>
+  <div>
+           <el-row>
+  <el-button>默认按钮</el-button>
+  <el-button type="primary">主要按钮</el-button>
+  <el-button type="success" color-primary: red>成功按钮</el-button>
+  <el-button type="info">信息按钮</el-button>
+  <el-button type="warning">警告按钮</el-button>
+  <el-button type="danger">危险按钮</el-button>
+  <class7-button type='primary'>自定义标签</class7-button>
+  <el-row>
+  <el-button icon="el-icon-money" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
+    </el-row>
+     <el-input  placeholder="请输入内容"></el-input>
+     <div class="block">
+    <span class="demonstration">默认 Hover 指示器触发</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Click 指示器触发</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  </div>
+
+
+  
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+      };
+    }
+  };
+</script>
+
+<style>
+.el-button--primary{
+  color:red;
+  background-color:azure
+ }
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..7d33edbc86271d7f5f6792839098e943ea819422
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/router/index.js"
@@ -0,0 +1,54 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+import Ele from '../pages/Ele'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/ele',
+            component: Ele,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'listName',
+            path: '/adv',
+            component: AdvList,
+            meta:{
+                keepalive:true
+            }
+        },
+        {
+            name:'detail',
+            //path:'/detail',
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/actions.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/actions.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fb14e72b726522cf3e294f62a89fda109fcf2e4b
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/actions.js"
@@ -0,0 +1,7 @@
+const actions={
+    add2Cart(context,product) {
+      console.log(product);
+      context.commit('addToCart',product);
+   }
+ };
+ export default actions;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/index.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fe67add79b72b94016134af2805b8540c641bcd7
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/index.js"
@@ -0,0 +1,29 @@
+import Vuex from 'vuex';
+import Vue from 'vue';
+import mutations from './mutations'
+import actions from './actions'
+import user from './modules/user'
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state: {  
+         name:'外卖系统',
+         cart:[],
+         buyNums:0,
+         money:0
+     },    
+ 
+     mutations,
+     actions,
+     
+     getters:{
+        getName:(state)=>{
+          return state.name+'----我们的项目';
+        }
+     },
+     modules:{
+          user
+     }
+ 
+  })
+  export default store;
+ 
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/modules/user.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/modules/user.js"
new file mode 100644
index 0000000000000000000000000000000000000000..68d1b2507c029352b964ad8016d034ad9d1b0f34
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/modules/user.js"
@@ -0,0 +1,22 @@
+const user={
+    namespaced: true,
+    //每个模块都有自己的 state mutation ....
+    state:{
+      userInfo:{name:'刘斌明天要准备',age:29}
+    },
+    mutations:{
+      changeUser(state,payload){
+        state.userInfo=payload;
+        
+      }
+    },
+    actions:{
+      changeUserByAction({commit},payload){
+           commit('changeUser',payload)
+           //触发全局的mutation的修改
+           commit('makeMoney',1000,{ root: true })
+      }
+    }
+    
+  }
+  export default user;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/mutations.js" "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/mutations.js"
new file mode 100644
index 0000000000000000000000000000000000000000..eee0d474fb15c7e64f26d898d8c1175d6b0c7829
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022-5-12vue/src/store/mutations.js"
@@ -0,0 +1,26 @@
+const mutations={
+    changeName(state,name){
+        state.name=name
+    },
+    //加入到购物车
+    addToCart(state,product){
+      console.log('购物商品修改');
+      console.log(state.buyNums)
+        let inCart = false;
+        state.cart.forEach(el=>{
+           if(el.id==product.id){
+              el.num++
+              inCart=true;
+           }
+        })
+        if(!inCart){
+          state.cart.push(product);
+        }
+        state.buyNums++;      
+        console.log(state.buyNums,111);
+    },
+    makeMoney(state,payload){
+        state.money = state.money+payload
+    }
+  };
+  export default mutations;
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\345\223\215\345\272\224\345\274\217\345\267\245\345\205\267.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\345\223\215\345\272\224\345\274\217\345\267\245\345\205\267.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7a1e08e45ac3f02d8c38b6f8e0391616d9ea722e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\345\223\215\345\272\224\345\274\217\345\267\245\345\205\267.html"
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    
+    <!-- 引入jQuery -->
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+</head>
+
+<style>
+
+.first {
+        margin: 0 auto;
+        width: 90%;
+    }
+
+    .row > div {
+        text-align: center;
+        height: 40px;
+        line-height: 40px;  /* 垂直居中 */
+    }
+
+</style>
+
+<body>
+
+  <!-- 
+    超小屏幕 手机 (<768px)	.col-xs-
+    小屏幕 平板 (≥768px)	.col-sm-
+    中等屏幕 桌面显示器 (≥992px)	.col-md-
+    大屏幕 大桌面显示器 (≥1200px)	 .col-lg-
+  -->
+
+  <!-- 
+      以超小屏幕（xs）为例，
+    可用的 .visible-*-* 类是：
+    .visible-xs-block、
+    .visible-xs-inline 和 
+    .visible-xs-inline-block。 
+  -->
+
+    <div class="first">
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-8" style="background-color: cadetblue;">.col-md-8</div>
+        <div class="col-md-4" style="background-color: lightseagreen;">.col-md-4</div>
+      </div>
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-4" style="background-color: cornflowerblue;">.col-md-4</div>
+        <div class="col-md-4" style="background-color: deepskyblue;">.col-md-4</div>
+        <div class="col-md-4" style="background-color: cyan;">.col-md-4</div>
+      </div>
+
+      <br>
+
+      <div class="row">
+        <!-- visible-lg-block 仅在超大屏显示 -->
+        <div class="col-md-6 visible-lg-block" style="background-color: green;">.col-md-6</div>
+        <div class="col-md-6 visible-lg-block" style="background-color: greenyellow;">.col-md-6</div>
+      </div>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\240\205\346\240\274.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\240\205\346\240\274.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0df378bdbff5f39197f71e86ec02cc85465c8cc8
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\240\205\346\240\274.html"
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <!-- 引入jQuery -->
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+</head>
+
+<style>
+
+    .first {
+        margin: 0 auto;
+        width: 90%;
+    }
+
+    .row > div {
+        text-align: center;
+        height: 40px;
+        line-height: 40px;  /* 垂直居中 */
+    }
+
+</style>
+
+<body>
+
+  <!-- 
+    超小屏幕 手机 (<768px)	.col-xs-
+    小屏幕 平板 (≥768px)	.col-sm-
+    中等屏幕 桌面显示器 (≥992px)	.col-md-
+    大屏幕 大桌面显示器 (≥1200px)	 .col-lg-
+  -->
+
+    <div class="first">
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-8" style="background-color: cadetblue;">.col-md-8</div>
+        <div class="col-md-4" style="background-color: lightseagreen;">.col-md-4</div>
+      </div>
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-4" style="background-color: cornflowerblue;">.col-md-4</div>
+        <div class="col-md-4" style="background-color: deepskyblue;">.col-md-4</div>
+        <div class="col-md-4" style="background-color: cyan;">.col-md-4</div>
+      </div>
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-6" style="background-color: green;">.col-md-6</div>
+        <div class="col-md-6" style="background-color: greenyellow;">.col-md-6</div>
+      </div>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\240\205\346\240\274\345\265\214\345\245\227\345\210\227.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\240\205\346\240\274\345\265\214\345\245\227\345\210\227.html"
new file mode 100644
index 0000000000000000000000000000000000000000..073a55acbdc61537a76db9d81dfe1fe8dcd816b6
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\240\205\346\240\274\345\265\214\345\245\227\345\210\227.html"
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <!-- 引入jQuery -->
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+</head>
+
+<style>
+
+    .first {
+        margin: 0 auto;
+        width: 90%;
+    }
+
+    .row > div {
+        text-align: center;
+        height: 40px;
+        line-height: 40px;  /* 垂直居中 */
+    }
+
+    .col-md-8,
+    .col-md-6,
+    .col-md-4 {
+        padding: 0;
+    }
+
+</style>
+
+<body>
+
+  <!-- 
+    超小屏幕 手机 (<768px)	.col-xs-
+    小屏幕 平板 (≥768px)	.col-sm-
+    中等屏幕 桌面显示器 (≥992px)	.col-md-
+    大屏幕 大桌面显示器 (≥1200px)	 .col-lg-
+  -->
+
+    <div class="first">
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-8" style="background-color: cadetblue;">col-md-8</div>
+        <!-- 嵌套 -->
+        <div class="col-md-4" style="background-color: lightseagreen;">
+            <div class="col-md-6" style="background-color: mediumslateblue;">col-md-6</div>
+            <div class="col-md-6" style="background-color: plum;">col-md-6</div>
+        </div>
+      </div>
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-4" style="background-color: cornflowerblue;">.col-md-4</div>
+        <div class="col-md-4" style="background-color: deepskyblue;">.col-md-4</div>
+        <div class="col-md-4" style="background-color: cyan;">.col-md-4</div>
+      </div>
+
+      <br>
+
+      <div class="row">
+        <div class="col-md-6" style="background-color: green;">.col-md-6</div>
+        <div class="col-md-6" style="background-color: greenyellow;">.col-md-6</div>
+      </div>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\250\241\346\200\201\346\241\206.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\250\241\346\200\201\346\241\206.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cc1c74d513f8677b4d6165127f655cfa43abebba
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\346\250\241\346\200\201\346\241\206.html"
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    
+    <!-- 引入jQuery -->
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+</head>
+
+<style>
+
+    .con {
+        margin: 0 auto;
+        width: 80%;
+        margin-top: 10%;
+    }
+
+</style>
+
+<body>
+
+    <!-- 要有模块框建立对象关系，通过 data-target，元素需为button. -->
+
+    <div class="con">
+
+        <!-- Button trigger modal -->
+        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+            Launch demo modal
+        </button>
+        
+        <!-- Modal -->
+        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+            <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+                </div>
+                <div class="modal-body">
+                ...
+                </div>
+                <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+            </div>
+        </div>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\350\241\250\345\215\225.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\350\241\250\345\215\225.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f5570c4dd9cd8e903afd3aaf10b6755dc388c343
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\350\241\250\345\215\225.html"
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    
+    <!-- 引入jQuery -->
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+</head>
+
+<style>
+
+    .con {
+        margin: 0 auto;
+        width: 90%;
+    }
+
+</style>
+
+<body>
+
+    <!-- 内联表单：元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件 -->
+
+    <div class="con">
+
+        <form>
+            <div class="form-group">
+            <label for="exampleInputEmail1">Email address</label>
+            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
+            </div>
+            <div class="form-group">
+            <label for="exampleInputPassword1">Password</label>
+            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+            </div>
+            <div class="form-group">
+            <label for="exampleInputFile">File input</label>
+            <input type="file" id="exampleInputFile">
+            <p class="help-block">Example block-level help text here.</p>
+            </div>
+            <div class="checkbox">
+            <label>
+                <input type="checkbox"> Check me out
+            </label>
+            </div>
+            <button type="submit" class="btn btn-default">Submit</button>
+        </form>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\350\241\250\346\240\274.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\350\241\250\346\240\274.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a846ff32792390936df19322ded5d5d95a38d8ba
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.16\342\200\224bootstrap/\350\241\250\346\240\274.html"
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    
+    <!-- 引入jQuery -->
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+</head>
+
+<style>
+
+    .con {
+        margin: 0 auto;
+        width: 90%;
+    }
+
+</style>
+
+<body>
+
+    <!--
+        
+        table中的class ：
+
+        基本实例：
+        table ：基本表格
+        table-striped ：条纹状表格
+        table-bordered ：带边框的表格
+        table-hover ：鼠标悬停样式
+        table-condensed ：紧缩表格
+
+        状态类：
+        active ：鼠标悬停在行或单元格上时所设置的颜色
+        success ：标识成功或积极的动作
+        info ：标识普通的提示信息或动作
+        warning ：标识警告或需要用户注意
+        danger ：标识危险或潜在的带来负面影响的动作
+
+     -->
+
+    <div class="con">
+
+        <table class="table table-bordered table-hover">
+            <caption>Optional table caption.</caption>
+            <thead>
+            <tr>
+                <th>#</th>
+                <th>First Name</th>
+                <th>Last Name</th>
+                <th>Username</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+            </tr>
+            <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+            </tr>
+            <tr>
+                <th scope="row">3</th>
+                <td>Larry</td>
+                <td>the Bird</td>
+                <td>@twitter</td>
+            </tr>
+            </tbody>
+        </table>
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.17\342\200\224\346\225\260\347\273\204\345\216\273\351\207\215/\345\216\273\351\207\215\347\256\227\346\263\225.txt" "b/\346\235\250\347\276\216\351\233\252/2022.05.17\342\200\224\346\225\260\347\273\204\345\216\273\351\207\215/\345\216\273\351\207\215\347\256\227\346\263\225.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..1882f1c86e278bc48eec430a94f3c5cd67ac054e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.17\342\200\224\346\225\260\347\273\204\345\216\273\351\207\215/\345\216\273\351\207\215\347\256\227\346\263\225.txt"
@@ -0,0 +1 @@
+��������arr=[1,2,2,3,4,5,6,6] дһ�δ��������ȥ��
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.17\342\200\224\346\225\260\347\273\204\345\216\273\351\207\215/\346\225\260\347\273\204\345\216\273\351\207\215.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.17\342\200\224\346\225\260\347\273\204\345\216\273\351\207\215/\346\225\260\347\273\204\345\216\273\351\207\215.html"
new file mode 100644
index 0000000000000000000000000000000000000000..780168e903b9435ee8d501336ad8eac31df3c4bf
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.17\342\200\224\346\225\260\347\273\204\345\216\273\351\207\215/\346\225\260\347\273\204\345\216\273\351\207\215.html"
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+
+<script>
+
+    // let arr = [1, 26, 3, 6, 2, 4, 5, 2, 26, 6];
+    let arr = ['html', 'css', 'java', 'html', 'JavaScript', 'css', 'php', 'nodejs']
+
+    // 方法一：数组遍历法
+    function one() {
+        let temp = [];
+        for (let i = 0; i < arr.length; i++) {
+            if(temp.indexOf(arr[i]) === -1) {
+                temp.push(arr[i]);
+            }
+        }
+        console.log(temp);
+    }
+    one();
+
+    // 方法二：数组下标判断法
+    function two() {
+        let temp = [];
+        for (let i = 0; i < arr.length; i++) {
+            if(arr.indexOf(arr[i]) === i) {
+                temp.push(arr[i]);
+            }
+        }
+        console.log(temp);
+    }
+    two();
+
+    // 方法三：排序后相邻去除法
+    function three() {
+        // sort函数作用：给数组排序
+        arr.sort();
+        // console.log(arr);
+        let temp = [arr[0]];
+        for (let i = 1; i < arr.length; i++) {
+            if(arr[i] != temp[temp.length-1]) {
+                temp.push(arr[i]);
+            }
+        }
+        console.log(temp);
+    }
+    three();
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.19\342\200\224js/index.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.19\342\200\224js/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8230d07e66fb0a832c2e757532b7a394cb024dd7
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.19\342\200\224js/index.html"
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<style>
+
+    .box {
+        margin: 0 auto;
+        width: 50%;
+        height: 300px;
+        margin-top: 12%;
+        border: 1px solid black;
+        display: flex;
+        justify-content: center;
+        align-content: space-between;
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+
+    .box > div {
+        width: 20%;
+        text-align: center;
+        line-height: 300px;
+        border: 1px solid blueviolet;
+        margin-left: 2%;
+        margin-right: 2%;
+    }
+
+    .box > div:hover {
+        cursor: pointer;
+    }
+
+</style>
+
+<body>
+
+    <div class="box">
+
+            <div class="hezi">点击我1！</div>
+
+            <div class="hezi">点击我2！</div>
+
+            <div class="hezi">点击我3！</div>
+
+            <div class="hezi">点击我4！</div>
+
+    </div>
+
+</body>
+
+<script>
+
+    let hezis = document.getElementsByClassName('hezi');
+    // console.log(hezis);
+
+    for (let i = 0; i < hezis.length; i++) {
+        hezis[i].onclick = function() {
+            hezis[i].style.background = 'red';
+        }
+    }
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/2022.05.19\342\200\224js/\346\225\260\347\273\204.html" "b/\346\235\250\347\276\216\351\233\252/2022.05.19\342\200\224js/\346\225\260\347\273\204.html"
new file mode 100644
index 0000000000000000000000000000000000000000..92851b60068de042e1241bafe1c25e59226c1366
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/2022.05.19\342\200\224js/\346\225\260\347\273\204.html"
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+
+<script>
+
+    let fruits = ['Apple', 'Banana'];
+
+    // item 为 数据 ；index 为 下标
+    fruits.forEach(function(item, index, array) {
+        console.log(item, index)
+    })
+
+    // 复制一个数组
+    let arr = fruits.slice();
+
+    console.log(arr);
+
+</script>
+
+</html>
\ No newline at end of file