diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/3ce.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/3ce.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/3ce.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/3ce.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/3ce.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/adidas.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/adidas.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/adidas.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/akf.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/akf.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/akf.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/akf.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/akf.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/akf.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/beijing.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/beijing.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/beijing.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/bottom.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/bottom.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/bottom.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/caidan.svg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/caidan.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/caidan.svg"	
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>icon/Hamburger</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" opacity="0.600000024" stroke-linejoin="round">
+        <g id="icon/Hamburger" stroke="#000000" stroke-width="1.75">
+            <g id="Group-2" transform="translate(3.000000, 5.000000)">
+                <path d="M0,6.875 L18,6.875" id="Shape"></path>
+                <path d="M0,0.875 L18,0.875" id="Shape"></path>
+                <path d="M0,12.875 L18,12.875" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/center.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/center.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/center.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/gouwuche.png" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/gouwuche.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/gouwuche.png" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/header.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/header.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/header.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/jiantou.png" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/jiantou.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/jiantou.png" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/kefu.png" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/kefu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/kefu.png" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/kouhong.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/kouhong.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/kouhong.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/lining.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/lining.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/lining.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/ln.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/ln.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/logo.png" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/logo.png" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/shenghuoguan.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/shenghuoguan.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/shenghuoguan.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/ugg.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/ugg.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/ugg.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/weipinhui.png" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/weipinhui.png"
new file mode 100644
index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/weipinhui.png" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/wnn.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/wnn.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/yfl.jpg" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/yfl.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/yfl.jpg" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/zhengpin.webp" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/zhengpin.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/assets/zhengpin.webp" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/data.txt" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/data.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..f68adf9c8dd338eea0d29489b21ef45c86340736
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/data.txt"	
@@ -0,0 +1,14 @@
+{
+    code:200,
+    data:{
+         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}
+             ]
+         },
+    msg:'请求成功'     
+
+}
+
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/favicon.ico" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/favicon.ico" differ
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/index.html" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/public/index.html"	
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/App.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/components/CartItem.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..d8ef9742ff81f7be68c7a733dae40fbb69af4768
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/components/CartItem.vue"	
@@ -0,0 +1,86 @@
+<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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/components/HeaderBase.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9a6b716bffe8f4d945b17701847d5448ece932af
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/components/HeaderBase.vue"	
@@ -0,0 +1,99 @@
+<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">
+       <!-- <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>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  data(){
+    return {
+      include:'AdvList'
+    }
+  },
+  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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/data/product.js" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/adidas.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/akf.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/lining.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/threece.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/ugg.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/main.js" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..0515e5930fd0152dc95239733149dbc597514772
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/main.js"	
@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+
+//引入路由器
+import router from './router/index';
+
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+
+
+
+// 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,
+})
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/mixin/MixIn.js" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/mixin/MixIn.js"
new file mode 100644
index 0000000000000000000000000000000000000000..cc160b5338bfef3e91c5232f8a7eb6f60e7f361e
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/mixin/MixIn.js"	
@@ -0,0 +1,40 @@
+export let methods={
+    created:function(){
+        console.log('mixin created')
+        this.initData();
+    },
+    methods:{
+        initData:function(){
+        //let url ='https://question.llblog.cc/';
+        let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+        //methos get post delete patch
+        this.$axios.get(url).then(res=>{
+           this.products=res.data.data;
+           console.log(this.products)
+          });
+        }
+    },
+    mounted:function(){
+        this.$bus.$on('confirmOder',(id,num)=>{
+            console.log('adv 收到change');
+           this.products.forEach(el=>{
+               if(el.id==id){
+                   el.num = el.num-num;
+               }
+           })
+        })
+    },
+}
+
+
+export const data={
+    data:function(){
+     return {
+        title:'实训项目',
+        price:100,
+        num:10
+     }
+    }
+    
+}
+
diff --git "a/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/AdvList.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..62298260285a48f66eb15adda30f308f3d2c82f3
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/AdvList.vue"	
@@ -0,0 +1,108 @@
+<template>
+
+  <div class="shoping" >
+     <scroller :on-refresh="refresh" :on-infinite="infinite" class="ss">
+         <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 {methods} from '../mixin/MixIn'
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1,
+          page:1,
+          pageSize:20
+      }
+  },
+
+  created:function(){
+     console.log(this.$class)
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  mixins:[methods],
+  methods:{
+      refresh:function(){
+          console.log('刷新');
+      },
+      infinite:function(){
+          console.log('拉取');
+          //let url ='https://question.llblog.cc/';
+         let url ='https://question.llblog.cc/api.php?page'+this.page+'&pageSize='+this.pageSize;//做了跨域处理的
+        //methos get post delete patch
+        this.$axios.get(url).then(res=>{
+             res.data.data.forEach(element => {
+                 this.products.push(element)
+             });
+             //  res.data.data 要有数据
+             if(res.data.data.length>0){
+                  this.page++;
+             }
+           
+          });
+        }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+    width: 100%;
+    position: relative;
+ }
+ /* .shoping > scroller{
+      margin: 0% 50%;
+     } */
+ .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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/BodyBase.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..99f6845da7653a47d9a7042b206c595b8210eff0
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/BodyBase.vue"	
@@ -0,0 +1,71 @@
+<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%;
+    width: 100%;
+ }
+ .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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/CartList.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/Detail.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..57bd97c437790c3fc2ce187c9e0a0d0751c6752c
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/Detail.vue"	
@@ -0,0 +1,226 @@
+<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">
+                    <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 product from '../data/product'
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  methods:{
+    add2Card:function(id){
+        product.addToCart(id);
+        //this.$bus.$emit('change');
+        this.$router.push({path:'/cartList'});
+    }
+  },
+  mounted(){
+
+  },
+  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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/Recod.vue" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/Recod.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..70a2fa3fecf22c2a82812cc01ec268a3ec012065
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/pages/Recod.vue"	
@@ -0,0 +1,84 @@
+<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,
+                    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>
+
+     </div>
+
+     
+ 
+</template>
+
+<script>
+
+import {methods,data} from '../mixin/MixIn'
+
+export default {
+  name: 'Recod',
+  data(){
+      return {
+          products:[],
+          num:1,
+          demo:'demo'
+      }
+  },
+ 
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  created:function(){
+      console.log('record created');
+  },
+  mixins:[methods,data]
+ 
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/plugins/plugin1.js" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/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/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/router/index.js" "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fd5d1a845e979e8c58805fae2a9cc9ce39713d04
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/2022.5.5 vue/src/router/index.js"	
@@ -0,0 +1,50 @@
+// 配置路由规则
+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 Recod from '../pages/Recod'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: Recod,
+        },
+        {
+            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