diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/3ce.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/3ce.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/3ce.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/3ce.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/3ce.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/adidas.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/adidas.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/adidas.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/akf.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/akf.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/akf.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/akf.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/akf.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/akf.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/beijing.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/beijing.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/beijing.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/bottom.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/bottom.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/bottom.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/caidan.svg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/caidan.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/center.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/center.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/center.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/gouwuche.png" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/gouwuche.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/gouwuche.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/header.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/header.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/header.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/jiantou.png" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/jiantou.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/jiantou.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/kefu.png" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/kefu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/kefu.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/kouhong.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/kouhong.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/kouhong.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/lining.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/lining.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/lining.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/ln.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/ln.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/logo.png" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/logo.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/shenghuoguan.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/shenghuoguan.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/shenghuoguan.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/ugg.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/ugg.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/ugg.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/weipinhui.png" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/weipinhui.png"
new file mode 100644
index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/weipinhui.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/wnn.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/wnn.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/yfl.jpg" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/yfl.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/yfl.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/zhengpin.webp" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/zhengpin.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/assets/zhengpin.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/data.txt" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/data.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..f68adf9c8dd338eea0d29489b21ef45c86340736
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/public/favicon.ico" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/favicon.ico" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-05.04/public/index.html" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/components/CartItem.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9a6b716bffe8f4d945b17701847d5448ece932af
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/src/data/product.js" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/main.js" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..0515e5930fd0152dc95239733149dbc597514772
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/src/mixin/MixIn.js" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/mixin/MixIn.js"
new file mode 100644
index 0000000000000000000000000000000000000000..cc160b5338bfef3e91c5232f8a7eb6f60e7f361e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/AdvList.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..0d829445bbdd8aa0d171cc94434c34857e1fa05a
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/AdvList.vue"
@@ -0,0 +1,106 @@
+<template>
+
+  <div class="shoping" >
+     <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.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 {
+     position: relative;
+     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/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/pages/CartList.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/pages/Detail.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..57bd97c437790c3fc2ce187c9e0a0d0751c6752c
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/Recod.vue" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/pages/Recod.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..70a2fa3fecf22c2a82812cc01ec268a3ec012065
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/\346\235\250\347\276\216\351\233\252/vue-05.04/src/plugins/plugin1.js" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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/vue-05.04/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/vue-05.04/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fd5d1a845e979e8c58805fae2a9cc9ce39713d04
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-05.04/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
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/demo.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e57918c71649680ed785f07e4fd05e3a65a1836
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/demo.html"
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<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">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<style>
+    li {
+        width: 210px;
+        height: 300px;
+        border: 1px solid #ddd;
+        padding-left: 10px;
+        box-sizing: border-box;
+        float: left;
+        margin: 8px;
+        list-style: none;
+    }
+    .detail {
+        margin-left: 150px;
+        margin-top: 100px;
+    }
+    img {
+        width: 100%;
+        height: 180px;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    h4 {
+        margin: 25px 15px;
+    }
+
+    .catalog {
+        width: 190px;
+        /* height: 150px; */
+        line-height: 40px;
+        text-align: justify;
+        text-align-last: justify;
+        background-color: #ddd;
+        border-bottom: 1px solid #aaa;
+        color: #6b3c3c;
+    }
+
+    .detail {
+        border: 1px solid #ddd;
+        position: absolute;
+        top: 0;
+        left: 200px;
+    }
+</style>
+
+<body>
+    <div id="app">
+        <catalog :data="catalogs[0]"><img src="./imgs/5.webp" style="height: 150px;"/></catalog>
+        <catalog :data="catalogs[1]"><img src="./imgs/6.webp" style="height: 150px;"/></catalog>
+        <catalog :data="catalogs[2]"><img src="./imgs/7.webp" style="height: 150px;"/></catalog>
+    </div>
+</body>
+<script>
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img'><h4><span>{{product.name}}</span></h4><h4><span>{{product.price}}</span></h4></li>",
+    }
+    var laststatus;
+    let last;
+    let catalog = {
+        data: function () {
+            return { show: false }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+                if(last){
+                    last.show = !laststatus
+                }
+                last = this;
+                laststatus = this.show
+            },
+        },
+        props: ['data'],
+        template:"<div><span>{{data.name}}</span><div @click='catshow' class='catalog'><slot></slot></div> <div v-if='show' class='detail'><product v-for='(product,index) in data.products' :product='product'></product></div></div>",
+        components: {
+            product
+        }
+    }
+
+    new Vue({
+        el:'#app',
+        data:{
+            catalogs:[
+                {
+                id:1,
+                name:'公仔',
+                products:[
+                    {name:'A',price:'￥12',img:'imgs/1.jpg'},
+                    {name:'B',price:'￥15',img:'imgs/2.jpg'},
+                    {name:'C',price:'￥54',img:'imgs/3.jpg'}
+                 ]
+                },
+                {
+                 id:2,
+                 name:'手办',
+                 products:[
+                    {name:'D',price:'￥125',img:'imgs/1.webp'},
+                    {name:'E',price:'￥55',img:'imgs/2.webp'},
+                    {name:'F',price:'￥54',img:'imgs/3.webp'}
+                 ]
+                },
+                {
+                id:3,
+                name:'盲盒',
+                products:[
+                    {name:'G',price:'￥12',img:'imgs/1.jpg'},
+                    {name:'H',price:'￥15',img:'imgs/4.webp'},
+                    {name:'I',price:'￥54',img:'imgs/2.jpg'}
+                ]
+                }
+            ]
+        },
+        components:{
+        //  app,
+        catalog
+      }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/1.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7c24d650cf38e81bd0ffe3c0d9a97e61ed564d99
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/1.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/1.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..2dd605388a57168f4b6d9f550021563e68127132
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/1.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/2.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ce351e45036d0ae9d7e1f786ca42fc5a36e305d6
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/2.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/2.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fe3a03b637e2a593aa9ada1fd29bb0350f12c043
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/2.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/3.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2d30ed06d4bbeca21ddfae1d84cd36bbde62ac71
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/3.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/3.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..02a41c69182f99215a7bd1fe314b2eef2dba3f07
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/3.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/4.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..31699e43c151af141e7932fb00a29ba8133e06e7
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/4.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/5.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/5.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f1d5d351ed9402ed3a0d3456c472f9efade12abd
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/5.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/6.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/6.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..925395252936f545195b5813be64b0eee37f1614
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/6.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/7.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/7.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f99dbca853b76690fae3edddee24ffffba3aeae3
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/imgs/7.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/slot.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/slot.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0508553b5205d915c45e33ddfcb458c1a3c2b245
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.15-\346\217\222\346\247\275/slot.html"
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>组件</title>
+
+    <style>
+      .main{clear:both;margin-top:20px}
+      .catalog{ width:300px;float:left;text-align:center;background:grey;height:200px;line-height:200px}
+      .product{width:70%;float:right}
+      li{list-style:none;width:300px;height:300px;float:left}
+
+    </style>
+</head>
+
+<body>
+<div id="app">
+    <app :app="catalogs[0]"><img width="300px" src='imgs/3.jpg' /></app>
+    <app :app="catalogs[1]" ></app><!--因使用标签是app <app>传递的值</app> 只能作用在 app标签内的slot 中-->
+    <app :app="catalogs[2]" ><span style="color:red">要是牛兜汤,找你们同学</span></app>
+</div>
+
+
+</body>
+<script>
+
+    let product ={
+        props:['product'],
+        template:"<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
+    }
+
+    let catalog={
+        data:function(){
+          return {show:true}
+        },
+        methods:{
+           catshow:function(){
+             this.show=!this.show
+           }
+        },
+        props:['data'],
+        
+        template:"<div><div class='catalog' @click='catshow' ><div style='width:100%'></div>{{data.name}}</div>"+
+                 "<ul class='product' v-if='show' ><product v-for='(product,index) in data.products' :product='product'></product>"+
+                 "</ul></div>",
+        components:{
+         product
+        }
+    }
+
+    let app={
+        props:['app'],
+        //目录的模板 slot 可以理解为是变量,在 <app></app> 写html 标签即可传递
+        template:"<div class='main'><catalog :data='app'></catalog><slot>你没充值，就这么low快点充值</slot></div>",
+        components:{
+         catalog
+        }
+    }
+
+    new Vue({
+      el:"#app",
+      data:{
+         catalogs:[
+           {
+             id:1,
+             name:'烧烤',
+             products:[
+                {
+                  name:'烤猪脚',
+                  price:'20',
+                  img:'imgs/1.jpg'
+                },
+                 {
+                  name:'烤猪脚',
+                  price:'20',
+                  img:'imgs/2.jpg'
+                },
+                 {
+                  name:'烤猪脚',
+                  price:'20',
+                  img:'imgs/3.jpg'
+                }
+              ]
+           },
+           {
+             id:2,
+             name:'海鲜',
+             products:[
+                {
+                  name:'金昌鱼',
+                  price:'20',
+                  img:'imgs/1.webp'
+                },
+                {
+                  name:'金昌鱼',
+                  price:'20',
+                  img:'imgs/2.webp'
+                },
+                {
+                  name:'金昌鱼',
+                  price:'20',
+                  img:'imgs/3.webp'
+                }
+              ]
+           },
+           {
+             id:3,
+             name:'牛兜汤',
+             products:[
+                {
+                  name:'拌面',
+                  price:'20',
+                  img:'imgs/4.webp'
+                },
+                {
+                  name:'萝卜干',
+                  price:'20',
+                  img:'imgs/1.webp'
+                },
+                {
+                  name:'槐猪',
+                  price:'20',
+                  img:'imgs/2.jpg'
+                }
+              ]
+           }
+         ]
+      },
+      //template:'<app  :data="catalogs" />',
+      components:{
+         app,
+      }
+    })
+
+
+
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.19-\350\204\232\346\211\213\346\236\266/\350\247\2014.22\345\206\205\345\256\271.txt" "b/\346\235\250\347\276\216\351\233\252/vue.04.19-\350\204\232\346\211\213\346\236\266/\350\247\2014.22\345\206\205\345\256\271.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.21-\350\267\257\347\224\261/\350\247\2014.22\345\206\205\345\256\271.txt" "b/\346\235\250\347\276\216\351\233\252/vue.04.21-\350\267\257\347\224\261/\350\247\2014.22\345\206\205\345\256\271.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/3ce.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/3ce.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/3ce.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/3ce.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/3ce.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/adidas.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/adidas.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/adidas.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/akf.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/akf.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/akf.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/akf.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/akf.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/akf.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/beijing.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/beijing.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/beijing.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/bottom.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/bottom.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/bottom.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/caidan.svg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/caidan.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/center.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/center.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/center.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/gouwuche.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/gouwuche.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/gouwuche.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/header.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/header.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/header.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/jiantou.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/jiantou.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/jiantou.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/kefu.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/kefu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/kefu.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/kouhong.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/kouhong.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/kouhong.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/lining.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/lining.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/lining.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/ln.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/ln.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/logo.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/logo.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/shenghuoguan.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/shenghuoguan.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/shenghuoguan.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/ugg.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/ugg.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/ugg.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/weipinhui.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/weipinhui.png"
new file mode 100644
index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/weipinhui.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/wnn.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/wnn.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/yfl.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/yfl.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/yfl.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/zhengpin.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/zhengpin.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/assets/zhengpin.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/favicon.ico" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/favicon.ico" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/index.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7e495e1b87001b2b6a17598849908dc4bc6fbdf2
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/App.vue"
@@ -0,0 +1,41 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..442deb19acce48ce3565b4477e8152134ada2a72
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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="/two" 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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/main.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..79a0adddb24ec3943bab09a96c70c08bc04ccbaf
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/main.js"
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+//引入路由器
+import router from './router/index'
+
+
+//关闭生产环境提交
+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)
+   },
+   router
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..f5b383ff147da467c8f99215551152d09c58f625
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/BodyBase.vue"
@@ -0,0 +1,60 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="`/list?id=${item.id}&name=${item.name}`">
+                <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 {
+          shangpin:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:'2.7'},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:'3.6'},
+              {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:'5.7'},
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'5.7'}
+          ]
+      }
+  },
+}
+</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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/BodyTwo.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/BodyTwo.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1e8565ff2be5853fec36479a231bf03296669be3
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/BodyTwo.vue"
@@ -0,0 +1,59 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="`/list?id=${item.id}&name=${item.name}`">
+                <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 {
+          shangpin:[
+              {id:5,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'2.7'},
+              {id:6,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'3.6'},
+              {id:7,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'5.7'},
+              {id:8,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'5.7'}
+          ]
+      }
+  }
+}
+</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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/ListAa.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/ListAa.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..047b935ecfb035712c35be0492a425088b759156
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/ListAa.vue"
@@ -0,0 +1,56 @@
+<template>
+     <div >
+      <!-- {{this.$route.query.name}} -->
+      <!-- <h1>啊啊啊啊啊</h1> -->
+      <div v-if='id == 1'>
+        <threece />
+      </div>
+      <div v-if='id == 2'>
+        <adidas />
+      </div>
+      <div v-if='id == 3||id == 5'>
+        <ugg />
+      </div>
+      <div v-if='id == 4'>
+        <adidas />
+      </div>
+      <div v-if='id == 7 '>
+        <akf />
+      </div>
+      <div v-if='id == 6||id == 8'>
+        <lining />
+      </div>
+     </div>
+ 
+</template>
+
+<script>
+import threece from '../detail/threece.vue'
+import adidas from '../detail/adidas.vue'
+import akf from '../detail/akf.vue'
+import lining from '../detail/lining.vue'
+import ugg from '../detail/ugg.vue'
+
+export default {
+  name: 'ListAa',
+  components: {
+    threece,
+    adidas,
+    akf,
+    ugg,
+    lining
+  },
+  data(){
+    return{
+      id:''
+    }
+  },
+  mounted(){
+    // console.log(this.$route.query.name);
+  this.id = this.$route.query.id
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/three.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/three.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..62d972db6481ee4bb3e6e902f983d8fbc3e50f83
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/pages/three.vue"
@@ -0,0 +1,59 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="`/list?id=${item.id}&name=${item.name}`">
+                <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 {
+          shangpin:[
+              {id:5,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'2.7'},
+              {id:3,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'3.6'},
+              {id:1,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'5.7'},
+              {id:4,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'5.7'}
+          ]
+      }
+  }
+}
+</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/vue.04.22-\345\224\257\345\223\201\344\274\232/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..6400e2e6b67b9cdc65f43682568ae2b5e5f5df1d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.22-\345\224\257\345\223\201\344\274\232/src/router/index.js"
@@ -0,0 +1,66 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//引入组件
+import BodyBase from '../pages/BodyBase'
+import BodyTwo from '../pages/BodyTwo'
+import three from '../pages/three'
+import threece from '../detail/threece'
+import adidas from '../detail/adidas'
+import akf from '../detail/akf'
+import lining from '../detail/lining'
+import ugg from '../detail/ugg'
+import ListAa from '../pages/ListAa'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+            //     children: [
+            //         {
+            //             path: '3ce',
+            //             component: threece
+            //         }
+            //     ]
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path: '/two',
+            component: BodyTwo
+        },
+        {
+            path: '/three',
+            component: three
+        },
+        {
+            path: '/3ce',
+            component: threece
+        },
+        {
+            path: '/adidas',
+            component: adidas
+        },
+        {
+            path: '/list',
+            component: ListAa
+        },
+        {
+            path: '/ugg',
+            component: ugg
+        },
+        {
+            path: '/lining',
+            component: lining
+        },
+        {
+            path: '/akf',
+            component: akf
+        }
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/3ce.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/3ce.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/3ce.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/3ce.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/3ce.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/adidas.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/adidas.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/adidas.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/akf.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/akf.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/akf.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/akf.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/akf.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/akf.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/beijing.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/beijing.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/beijing.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/bottom.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/bottom.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/bottom.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/caidan.svg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/caidan.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/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/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/carttop.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/carttop.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f30a624377f73d74f3d12ecf7dea24896ffecbc1
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/carttop.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/center.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/center.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/center.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/gouwuche.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/gouwuche.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/gouwuche.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/gouxuan.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/gouxuan.png"
new file mode 100644
index 0000000000000000000000000000000000000000..35b0213f191897d9d288caf7c38393b0e3c4de8f
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/gouxuan.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/header.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/header.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/header.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jiahao.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jiahao.png"
new file mode 100644
index 0000000000000000000000000000000000000000..893e676b0121205a72637da9226628fc9dc1c28f
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jiahao.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jianhao.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jianhao.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0cf1793575f8eceefb912692a7dc77ca93baa100
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jianhao.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jiantou.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jiantou.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/jiantou.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/kefu.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/kefu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/kefu.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/kouhong.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/kouhong.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/kouhong.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/lining.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/lining.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/lining.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/ln.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/ln.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/logo.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/logo.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/shenghuoguan.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/shenghuoguan.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/shenghuoguan.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/ugg.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/ugg.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/ugg.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/weigouxuan.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/weigouxuan.png"
new file mode 100644
index 0000000000000000000000000000000000000000..78f09d44f9c1aea687db2e12bbd390480a49d18d
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/weigouxuan.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/weipinhui.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/weipinhui.png"
new file mode 100644
index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/weipinhui.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/wnn.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/wnn.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/yfl.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/yfl.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/yfl.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/zhengpin.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/zhengpin.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/assets/zhengpin.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/favicon.ico" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/favicon.ico" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/public/index.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/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/\346\235\250\347\276\216\351\233\252/vue.04.27/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b2d4a0eee690fdabd3e0a4596ba7f3b925751c83
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/App.vue"
@@ -0,0 +1,39 @@
+<template>
+  <div id="app" >
+         <HeaderBase />
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+  /* width: 100%; */
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9bead6feb5cd82944798acd341d7fb98a4d61890
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/components/HeaderBase.vue"
@@ -0,0 +1,102 @@
+<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" @click="click">
+        <router-link to="/base" active-class="color" :class='{color:a}'>推荐</router-link>
+        <router-link to="/two" 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: {
+  },
+  data(){
+    return {
+      a:true
+    }
+  },
+  methods:{
+    click(){
+      this.a = false
+    }
+  }
+}
+</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;
+}
+a {
+  margin-left: 55px;
+  color:#807E7B;
+}
+
+ .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/vue.04.27/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b2773997022f353ca0ca3b74d60b2c6e0d9f6415
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/adidas.vue"
@@ -0,0 +1,216 @@
+<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">￥{{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">adidas NEO | {{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">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+}
+a {
+    margin-right: 55px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5d371ad27f502b785bc1b3ee775b72a58c0bbf60
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/akf.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥632</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.27/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..d4e1b563a41695e3490d8be29d1095330be2cf74
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/lining.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥354</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.27/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5bbb04d5944c6088bc970895a12fe3b66ad59053
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/threece.vue"
@@ -0,0 +1,302 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img" alt="">
+            </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">￥{{price}}</span><br>
+                <span class="yuanjia">￥110</span><span>{{count}}折</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>
+                <!-- <router-link :to="{
+                        path:'/cart',
+                        
+                    }"> -->
+            <div class="tubiao">
+                
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+                <!-- </router-link> -->
+            </div>
+            
+            
+            <div class="tubiao">
+                <div>
+                    <router-link :to="{
+                        path:'/cart',
+                        
+                    }">
+                    <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+                    </router-link>
+                </div>
+            </div>
+            
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥651</span>
+                </div>
+                <div class="jiage2" @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>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props:['name','id','price','num','count','img'],
+  data(){
+    return{
+      title:''
+    }
+  },
+  mounted(){
+//       let params = this.$route.params;
+//         for(var key in params){
+//         this[key]=params[key];
+//     }
+  },
+ 
+  methods:{
+    add2Card:function(){
+         let key = 'cart';
+         let pro ={id:this.id,name:this.name,price:this.price,num:this.num,img:this.img};
+         let allProducts = localStorage.getItem(key);//因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+         allProducts = JSON.parse(allProducts);
+        //  console.log(pro.cartcount);
+        //  console.log(allProducts);    
+         if(allProducts){
+          for(let key in allProducts){//引用传递
+             let detailPro = allProducts[key];//取出购物车中的每一个商品
+            //  console.log(key);
+            //  console.log(detailPro);
+        //   console.log(detailPro.id);
+        //   console.log(pro.name+pro.id+'pro');
+        //   console.log('=====================');
+
+             if(detailPro.id==pro.id){
+                 detailPro.num++;//detailPro 是 allProducts 中的其中一条数据
+             }else{
+                 allProducts.push(pro);
+             }
+          }
+         }else{//没有购物时候
+            allProducts=[];
+            allProducts.push(pro);
+         }    
+         localStorage.setItem(key,JSON.stringify(allProducts));
+
+        this.$router.push({path:'/cart'})
+    }
+  },
+}
+</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;
+    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;
+}
+.tubiao span {
+    color: #000;
+}
+.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/vue.04.27/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b4a3ca760119c7caa19b85e4401fa66f105b3270
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/detail/ugg.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥395</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.27/src/main.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..79a0adddb24ec3943bab09a96c70c08bc04ccbaf
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/main.js"
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+//引入路由器
+import router from './router/index'
+
+
+//关闭生产环境提交
+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)
+   },
+   router
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7c6d180a44edb6e74e52d1f5f2757a7af2cc0360
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}&price=${item.price}`"> -->
+            <router-link :to="{
+            name:'3ce',
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 params
+                id:item.id,
+                name:item.name,
+                price:item.price,
+                num:item.num,
+                count:item.count,
+                img:item.img2,
+            }
+        }">
+                <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>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',count:'2.7',price:240,num:1,img2:'../../assets/3ce.webp'},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',count:'3.6',price:689,num:1,img2:'../../assets/adidas.webp'},
+              {id:3,name:'UGG专场',img:'../assets/bottom.jpg',count:'5.7',price:232,num:1,img2:'../../assets/ugg.webp'},
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',count:'5.7',price:456,num:1,img2:'../../assets/akf.webp'}
+          ]
+      }
+  },
+}
+</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/vue.04.27/src/pages/BodyTwo.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/BodyTwo.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8c1d1d85bbac2c5c270a7a6aa0480c2966f98a66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/BodyTwo.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="{
+            name:'list',
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 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>
+     </div>
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:5,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'2.7',price:986},
+              {id:6,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'3.6',price:157},
+              {id:7,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'5.7',price:652},
+              {id:8,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'5.7',price:423}
+          ]
+      }
+  }
+}
+</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/vue.04.27/src/pages/ListAa.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/ListAa.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1c3e2329c413719478e55275f0a271326163b273
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/ListAa.vue"
@@ -0,0 +1,57 @@
+<template>
+     <div >
+      <!-- {{this.$route.query.name}} -->
+      <!-- <h1>啊啊啊啊啊</h1> -->
+      <div v-if='id == 1||id == 7'>
+        <threece />
+      </div>
+      <div v-if='id == 2'>
+        <adidas />
+      </div>
+      <div v-if='id == 3'>
+        <ugg />
+      </div>
+      <div v-if='id == 4'>
+        <adidas />
+      </div>
+      <div v-if='id == 5 '>
+        <akf />
+      </div>
+      <div v-if='id == 6||id == 8'>
+        <lining />
+      </div>
+     </div>
+ 
+</template>
+
+<script>
+import threece from '../detail/threece.vue'
+import adidas from '../detail/adidas.vue'
+import akf from '../detail/akf.vue'
+import lining from '../detail/lining.vue'
+import ugg from '../detail/ugg.vue'
+
+export default {
+  name: 'ListAa',
+  components: {
+    threece,
+    adidas,
+    akf,
+    ugg,
+    lining
+  },
+  data(){
+    return{
+      id:''
+    }
+  },
+  mounted(){
+    // console.log(this.$route.query.name);
+  this.id = this.$route.params.id
+  // console.log(this.id);
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/ShoppingCart.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/ShoppingCart.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5fb0629f575e25e9a1995f1c001d60fb3fc82040
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/ShoppingCart.vue"
@@ -0,0 +1,247 @@
+<template>
+  <div>
+      <div class="header">
+          <div class="gouwuche"><span>购物车</span></div>
+          <div class="tp"><img src="../../public/assets/carttop.png" alt=""></div>
+      </div>
+      <div class="cart shoping">
+      <div v-for="(item,index) in cartshangpin" :item='item' :key='index'>
+        <div class="shanpin">
+            <div class="shanpin2">
+                <div class="gouxuan bianju">
+                <img src="../../public/assets/weigouxuan.png" alt="">
+                </div>
+            <div class="tupian bianju">
+                <img :src="item.img" alt="">
+            </div>
+            <div>
+                <div class="xiangqing bianju">
+                    <div class="mingchen bianju2">
+                        <span>{{item.name}}</span>
+                    </div>
+                    <div class="yangshi bianju2">
+                        <span>口红；0.8g</span>
+                    </div>
+                    <div class="bianju2">
+                        <div class="cart-price">
+                            <span>￥{{item.price}}</span>
+                        </div>
+                        <div class="jiajian">
+                            <span class="jian"><img src="../../public/assets/jianhao.png" alt=""></span>
+                            <span class="num"><span>{{item.num}}</span></span>
+                            <span class="jia"><img src="../../public/assets/jiahao.png" alt=""></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+      </div>
+      </div>
+  </div>
+    <div class="cart-bottom">
+        <div class="yixuan">
+            <img src="../../public/assets/gouxuan.png" alt="">
+            <span>已选（1）</span>
+        </div>
+        <div class="zongjia">
+            <div>
+                <span class="zongji">总计</span>
+                <span class="cart-price">￥{{cartcout}}</span>
+                <span class="preight">(不含运费)</span>
+            </div>
+        </div>
+        <div class="jiesuan">
+            <span>结算</span>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name:'ShoppingCart',
+    // props:['name'],
+    data(){
+        return {
+            cartcout:1,
+            cartindex:[],
+            cartshangpin:[
+          ]
+        }
+
+    },
+     mounted(){
+         let key = 'cart'
+        let allProducts = localStorage.getItem(key);//因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+         allProducts = JSON.parse(allProducts);
+        //  console.log(allProducts);
+         for(let key in allProducts){
+              let detailPro = allProducts[key];
+            this.cartshangpin.push(detailPro);
+            // this.cartcout = detailPro.num * detailPro.price
+         }
+         allProducts.forEach((e) => {
+            //  if(index>-1){
+            //    for (let i = 0; i < this.cartindex.length; i++) {
+            //     // console.log('=========');
+            //    }
+            //  }
+            this.cartindex.push(e.price);
+             this.cartcout = e.num * e.price
+             console.log(this.cartindex);
+            //  console.log(e);
+         });
+         
+    }
+  
+}
+</script>
+
+<style>
+.cart {
+    width: 95%;
+    height: 445px;
+    /* background-color: royalblue; */
+    margin: 0 auto;
+}
+.header .gouwuche {
+    font-size: 1.6rem;
+    /* color: red; */
+    text-align: center;
+    background-color: #fff;
+    padding: 10px 0;
+}
+.header .tp {
+    margin-top: 4px;
+    margin-bottom: 2px;
+}
+.header .tp img {
+    width: 100%;
+
+}
+.shanpin {
+    width: 100%;
+    height: 160px;
+    background-color: #fff;
+    /* display: flex; */
+    /* justify-content: space-around; */
+}
+.shanpin2 {
+    width: 85%;
+    height: 160px;
+    /* background-color: aquamarine; */
+    display: flex;
+    /* margin:0 7%; */
+    padding: 2.5% 7%;
+    align-items: center;
+
+}
+.bianju {
+    margin-right: 3%;
+}
+.bianju2 {
+    margin-bottom: 6%;
+    margin-left: 2%;
+    display: flex;
+    justify-content: space-between;
+}
+.gouxuan img {
+    width: 1.48rem;
+}
+.tupian img {
+    width: 7.24rem;
+    border-radius: 7%;
+}
+.xiangqing {
+    width: 220px;
+    height: 7.24rem;
+    /* background-color: #ac86e3; */
+    
+}
+.mingchen span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.xiangqing span {
+    color: #222;
+    /* height: 0.43rem; */
+    /* line-height: .43rem; */
+    font-size: 1.23rem;
+    
+}
+.yangshi span {
+    color: #585c64;
+    background-color: #F6F6F6;
+    border-radius: 10%;
+    font-size: 0.85rem;
+    padding: 5px;
+}
+.cart-price span {
+    /* color: #f03867; */
+    font-weight: bold;
+}
+.jiajian img {
+    width: 1.1rem;
+    padding: 0 0.4rem;
+}
+.jiajian .jian {
+    border: 1px solid #DFDFE0;
+    border-right: none;
+    border-bottom-left-radius: 50%;
+    border-top-left-radius: 50%;
+}
+.jiajian .num {
+    border: 1px solid #DFDFE0;
+    padding: 0 0.5rem;
+}
+.jiajian .num span {
+    font-size: 1rem;
+}
+.jiajian .jia {
+    border: 1px solid #DFDFE0;
+    border-left: none;
+    border-bottom-right-radius: 50%;
+    border-top-right-radius: 50%;
+    
+}
+
+.cart-bottom {
+    width: 100%;
+    height: 90px;
+    background-color: #fff;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.cart-bottom .yixuan img {
+    width: 1.2rem;
+}
+.cart-bottom .yixuan span {
+    font-size: 1rem;
+    color: #585c64;
+}
+.cart-bottom .zongjia .zongji {
+    font-size: 1.3rem;
+}
+.cart-bottom .zongjia .cart-price {
+    font-size: 1.6rem;
+    color: #f03867;
+}
+.cart-bottom .zongjia .preight {
+    font-size: 1.1rem;
+    color: #9999;
+}
+.cart-bottom .jiesuan {
+    width: 8.7rem;
+    height: 4.1rem;
+    background-color: #f03867;
+    border-radius: 8%;
+    text-align: center;
+    line-height: 4.1rem;
+}
+.cart-bottom .jiesuan span {
+    color: #fff;
+    font-size: 1.4rem;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/three.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/three.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..49db2184cdd3803218eaa775bad8856d6946f8fc
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/pages/three.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="{
+                name:'list',
+                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>
+     </div>
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'2.7',price:745},
+              {id:7,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'3.6',price:357},
+              {id:5,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'5.7',price:264},
+              {id:6,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'5.7',price:196}
+          ]
+      }
+  }
+}
+</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/vue.04.27/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..bf4e1e2732626a48be99253f885cfbbe9021030e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.27/src/router/index.js"
@@ -0,0 +1,81 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//引入组件
+import BodyBase from '../pages/BodyBase'
+import BodyTwo from '../pages/BodyTwo'
+import three from '../pages/three'
+import threece from '../detail/threece'
+import adidas from '../detail/adidas'
+import akf from '../detail/akf'
+import lining from '../detail/lining'
+import ugg from '../detail/ugg'
+import ListAa from '../pages/ListAa'
+import shoppingcart from '../pages/ShoppingCart'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+            //     children: [
+            //         {
+            //             path: '3ce',
+            //             component: threece
+            //         }
+            //     ]
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path: '/two',
+            component: BodyTwo
+        },
+        {
+            path: '/three',
+            component: three
+        },
+        {
+            name: '3ce',
+            path: '/3ce/:id/:price',
+            component: threece,
+            props: true
+        },
+        {
+            path: '/adidas',
+            component: adidas
+        },
+        {
+            name: 'list',
+            path: '/list/:id/:name/:price',
+            component: ListAa,
+            props: true
+        },
+        {
+            path: '/ugg',
+            component: ugg
+        },
+        {
+            path: '/lining',
+            component: lining
+        },
+        {
+            path: '/akf',
+            component: akf
+        },
+        // {
+        //     path: '/cart',
+        //     component: shoppingcart
+        // },
+        {
+            name: '/cart',
+            path: '/cart',
+            component: shoppingcart,
+            props: true
+        }
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/3ce.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/3ce.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/3ce.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/3ce.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/3ce.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/adidas.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/adidas.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/adidas.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/akf.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/akf.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/akf.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/akf.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/akf.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/akf.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/beijing.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/beijing.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/beijing.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/bottom.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/bottom.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/bottom.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/caidan.svg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/caidan.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/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/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/carttop.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/carttop.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f30a624377f73d74f3d12ecf7dea24896ffecbc1
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/carttop.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/center.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/center.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/center.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/gouwuche.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/gouwuche.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/gouwuche.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/gouxuan.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/gouxuan.png"
new file mode 100644
index 0000000000000000000000000000000000000000..35b0213f191897d9d288caf7c38393b0e3c4de8f
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/gouxuan.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/header.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/header.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/header.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jiahao.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jiahao.png"
new file mode 100644
index 0000000000000000000000000000000000000000..893e676b0121205a72637da9226628fc9dc1c28f
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jiahao.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jianhao.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jianhao.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0cf1793575f8eceefb912692a7dc77ca93baa100
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jianhao.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jiantou.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jiantou.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/jiantou.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/kefu.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/kefu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/kefu.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/kouhong.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/kouhong.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/kouhong.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/lining.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/lining.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/lining.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/ln.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/ln.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/logo.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/logo.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/shenghuoguan.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/shenghuoguan.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/shenghuoguan.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/ugg.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/ugg.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/ugg.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/weigouxuan.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/weigouxuan.png"
new file mode 100644
index 0000000000000000000000000000000000000000..78f09d44f9c1aea687db2e12bbd390480a49d18d
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/weigouxuan.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/weipinhui.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/weipinhui.png"
new file mode 100644
index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/weipinhui.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/wnn.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/wnn.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/yfl.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/yfl.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/yfl.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/zhengpin.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/zhengpin.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/assets/zhengpin.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/favicon.ico" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/favicon.ico" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/public/index.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/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/\346\235\250\347\276\216\351\233\252/vue.04.28/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b2d4a0eee690fdabd3e0a4596ba7f3b925751c83
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/App.vue"
@@ -0,0 +1,39 @@
+<template>
+  <div id="app" >
+         <HeaderBase />
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+  /* width: 100%; */
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c8ca407ee2fd4ed05b1683e89611658ef0e32d89
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/components/HeaderBase.vue"
@@ -0,0 +1,102 @@
+<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" :class='{color:a}'>推荐</router-link>
+        <router-link to="/two" active-class="color" @click.native="click">3折疯抢</router-link>
+        <router-link to="/three" active-class="color" @click.native="click">唯品快抢</router-link>
+        <router-link to="/four" active-class="color" @click.native="click">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  },
+  data(){
+    return {
+      a:true
+    }
+  },
+  methods:{
+    click(){
+      this.a = false
+    }
+  }
+}
+</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;
+}
+a {
+  margin-left: 55px;
+  color:#807E7B;
+}
+
+ .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/vue.04.28/src/config/constName.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/config/constName.js"
new file mode 100644
index 0000000000000000000000000000000000000000..8020c116b99b43dab301b6975d21016136718e50
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/config/constName.js"
@@ -0,0 +1,6 @@
+
+const constName={
+    name:'constName',
+    reduceNum:'reduceNum'
+}
+export default constName
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b2773997022f353ca0ca3b74d60b2c6e0d9f6415
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/adidas.vue"
@@ -0,0 +1,216 @@
+<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">￥{{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">adidas NEO | {{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">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+}
+a {
+    margin-right: 55px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5d371ad27f502b785bc1b3ee775b72a58c0bbf60
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/akf.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥632</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.28/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..d4e1b563a41695e3490d8be29d1095330be2cf74
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/lining.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥354</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.28/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2d1f52bb9159b0b530b0772677ba65bb986b9121
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/threece.vue"
@@ -0,0 +1,301 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img" alt="">
+            </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">￥{{price}}</span><br>
+                <span class="yuanjia">￥110</span><span>{{count}}折</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>
+                <!-- <router-link :to="{
+                        path:'/cart',
+                        
+                    }"> -->
+            <div class="tubiao">
+                
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+                <!-- </router-link> -->
+            </div>
+            
+            
+            <div class="tubiao">
+                <div>
+                    <router-link :to="{
+                        path:'/cart',
+                        
+                    }">
+                    <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+                    </router-link>
+                </div>
+            </div>
+            
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥651</span>
+                </div>
+                <div class="jiage2" @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>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props:['name','id','price','num','count','img','checkbox'],
+  data(){
+    return{
+      title:''
+    }
+  },
+  mounted(){
+//       let params = this.$route.params;
+//         for(var key in params){
+//         this[key]=params[key];
+//     }
+  },
+ 
+  methods:{
+    add2Card:function(){
+         let key = 'cart';
+         let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:this.num,checkbox:this.checkbox};
+         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++;//detailPro 是 allProducts 中的其中一条数据
+                 inPro=true;
+             }
+          }
+          if(!inPro){
+              allProducts.push(pro);
+          }
+         }else{//没有购物时候
+            allProducts=[];
+            allProducts.push(pro);
+         }    
+         localStorage.setItem(key,JSON.stringify(allProducts));
+
+        this.$router.push({path:'/cart'})
+        //this.$router.history.go(1);
+    }
+  },
+}
+</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;
+    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;
+}
+.tubiao span {
+    color: #000;
+}
+.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/vue.04.28/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b4a3ca760119c7caa19b85e4401fa66f105b3270
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/detail/ugg.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥395</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.28/src/main.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..79a0adddb24ec3943bab09a96c70c08bc04ccbaf
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/main.js"
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+//引入路由器
+import router from './router/index'
+
+
+//关闭生产环境提交
+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)
+   },
+   router
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ceacaee5b613785e28bc1689a0f01536c472eaf0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/BodyBase.vue"
@@ -0,0 +1,71 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}&price=${item.price}`"> -->
+            <router-link :to="{
+            name:'3ce',
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 params
+                id:item.id,
+                name:item.name,
+                price:item.price,
+                num:item.num,
+                count:item.count,
+                img:item.img2,
+                checkbox: item.checkbox
+            }
+        }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.count}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',checkbox: false,img:'../assets/header.jpg',count:'2.7',price:240,num:1,img2:'../../assets/3ce.webp'},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',checkbox: false,img:'../assets/center.jpg',count:'3.6',price:300,num:1,img2:'../../assets/adidas.webp'},
+              {id:3,name:'UGG专场',checkbox: false,img:'../assets/bottom.jpg',count:'5.7',price:232,num:1,img2:'../../assets/ugg.webp'},
+              {id:4,name:'伊芙丽eifini女装专场',checkbox: false,img:'../assets/yfl.jpg',count:'5.7',price:456,num:1,img2:'../../assets/akf.webp'}
+          ]
+      }
+  },
+}
+</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/vue.04.28/src/pages/BodyTwo.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/BodyTwo.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8c1d1d85bbac2c5c270a7a6aa0480c2966f98a66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/BodyTwo.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="{
+            name:'list',
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 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>
+     </div>
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:5,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'2.7',price:986},
+              {id:6,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'3.6',price:157},
+              {id:7,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'5.7',price:652},
+              {id:8,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'5.7',price:423}
+          ]
+      }
+  }
+}
+</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/vue.04.28/src/pages/ListAa.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/ListAa.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1c3e2329c413719478e55275f0a271326163b273
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/ListAa.vue"
@@ -0,0 +1,57 @@
+<template>
+     <div >
+      <!-- {{this.$route.query.name}} -->
+      <!-- <h1>啊啊啊啊啊</h1> -->
+      <div v-if='id == 1||id == 7'>
+        <threece />
+      </div>
+      <div v-if='id == 2'>
+        <adidas />
+      </div>
+      <div v-if='id == 3'>
+        <ugg />
+      </div>
+      <div v-if='id == 4'>
+        <adidas />
+      </div>
+      <div v-if='id == 5 '>
+        <akf />
+      </div>
+      <div v-if='id == 6||id == 8'>
+        <lining />
+      </div>
+     </div>
+ 
+</template>
+
+<script>
+import threece from '../detail/threece.vue'
+import adidas from '../detail/adidas.vue'
+import akf from '../detail/akf.vue'
+import lining from '../detail/lining.vue'
+import ugg from '../detail/ugg.vue'
+
+export default {
+  name: 'ListAa',
+  components: {
+    threece,
+    adidas,
+    akf,
+    ugg,
+    lining
+  },
+  data(){
+    return{
+      id:''
+    }
+  },
+  mounted(){
+    // console.log(this.$route.query.name);
+  this.id = this.$route.params.id
+  // console.log(this.id);
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/ShoppingCart.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/ShoppingCart.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3c36041cd397ebb60b1958ad79e0a03f2aba8d3e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/ShoppingCart.vue"
@@ -0,0 +1,334 @@
+<template>
+  <div>
+      <div class="header">
+          <div class="gouwuche"><span>购物车</span></div>
+          <div class="tp"><img src="../../public/assets/carttop.png" alt=""></div>
+      </div>
+      <div class="cart shoping">
+      <div v-for="(item,index) in cartshangpin" :item='item' :key='index'>
+        <div class="shanpin">
+            <div class="shanpin2">
+                <div class="gouxaun bianju b" :id="item.id" @click="show(item.id)">
+                </div>
+            <div class="tupian bianju">
+                <img :src="item.img" alt="">
+            </div>
+            <div>
+                <div class="xiangqing bianju">
+                    <div class="mingchen bianju2">
+                        <span>{{item.name}}</span>
+                    </div>
+                    <div class="yangshi bianju2">
+                        <span>口红；0.8g</span>
+                    </div>
+                    <div class="bianju2">
+                        <div class="cart-price">
+                            <span>￥{{item.price}}</span>
+                        </div>
+                        <div class="jiajian">
+                            <span class="jian" @click="jian(item.id)"><img src="../../public/assets/jianhao.png" alt=""></span>
+                            <span class="num"><span>{{item.num}}</span></span>
+                            <span class="jia" @click="jia(item.id)"><img src="../../public/assets/jiahao.png" alt=""></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+      </div>
+      </div>
+  </div>
+    <div class="cart-bottom">
+        <div class="yixuan">
+            <img src="../../public/assets/gouxuan.png" alt="">
+            <span>已选（1）</span>
+        </div>
+        <div class="zongjia">
+            <div>
+                <span class="zongji">总计</span>
+                <span class="cart-price">￥{{cartcount}}</span>
+                <span class="preight">(不含运费)</span>
+            </div>
+        </div>
+        <div class="jiesuan">
+            <span @click="pay">结算</span>
+            <!-- <button>结算</button> -->
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import ConstName from '../config/constName';
+export default {
+    name:'ShoppingCart',
+    // props:['name'],
+    data(){
+        return {
+            cartclick:0,
+            cartcount:0,
+            cartshangpin:[]
+        }
+    },
+  
+     mounted(){
+         let key = 'cart'
+         let allProducts = localStorage.getItem(key);
+         allProducts = JSON.parse(allProducts);
+         for(let key in allProducts){
+              let detailPro = allProducts[key];
+            this.cartshangpin.push(detailPro);
+            console.log(detailPro);
+            
+         }
+       
+         allProducts.forEach((e) => {
+             this.cartcount += e.num * e.price
+            //  console.log(this.cartcount);
+         });
+        //  console.log(this.cartshangpin);
+    },
+    methods:{
+        jian(id){
+            this.cartshangpin.forEach((e) => {
+            if(e.num > 0){
+                if(id == e.id){
+                e.num--
+                let products=JSON.parse(localStorage.getItem('cart'));
+                for(let key in products){
+                    let currentProduct = products[key];
+                    if(id==currentProduct.id){
+                        currentProduct.num=e.num;
+                    }
+          }
+          localStorage.setItem('cart',JSON.stringify(products));
+            }
+            }
+            
+         });
+         this.cartcount=0
+           this.cartshangpin.forEach((e) => {
+             this.cartcount += e.num * e.price
+            //  console.log(this.cartcount);
+         });
+        },
+        jia(id){
+            this.cartshangpin.forEach((e) => {
+             if(id == e.id){
+                e.num++
+                let products=JSON.parse(localStorage.getItem('cart'));
+                for(let key in products){
+                    let currentProduct = products[key];
+                    if(id==currentProduct.id){
+                        currentProduct.num=e.num;
+                    }
+          }
+          
+          localStorage.setItem('cart',JSON.stringify(products));
+             }
+         });
+         this.cartcount=0
+             this.cartshangpin.forEach((e) => {
+             this.cartcount += e.num * e.price
+            //  console.log(this.cartcount);
+         });
+        },
+        show(id){
+            let num = event.currentTarget.id
+            if(num == id && this.cartclick == 0){
+                event.currentTarget.style.background = "url('../../assets/gouxuan.png')"
+                event.currentTarget.style.backgroundRepeat = "no-repeat"
+                event.currentTarget.style.backgroundSize='100%'
+                this.cartclick++
+        //         this.cartcount=0
+        //      this.cartshangpin.forEach((e) => {
+        //      this.cartcount += e.num * e.price
+        //     //  console.log(this.cartcount);
+        //  });
+            }else{
+                event.currentTarget.style.background = "url('../../assets/weigouxuan.png')"
+                event.currentTarget.style.backgroundRepeat = "no-repeat"
+                event.currentTarget.style.backgroundSize='100%'
+                this.cartclick--
+                
+            }
+            
+        },
+       
+        pay(){
+          // 提交到后台的接口，----todo
+          //假设后台接口已经响应成功了，假设购买数量都是1个
+          console.log('付钱成功！！！');
+        //   this.public.$emit(ConstName.reduceNum,1,1);
+      }
+    },
+}
+</script>
+
+<style>
+
+.gouxaun {
+    width: 28px;
+    height: 28px;
+    /* background-color: pink; */
+}
+
+.b {
+    width: 100%;
+    background-image: url('../../public/assets/weigouxuan.png');
+    background-repeat: no-repeat;
+    /* background-color: red; */
+    background-size: 100%;
+}
+.cart {
+    width: 95%;
+    height: 445px;
+    /* background-color: royalblue; */
+    margin: 0 auto;
+    
+}
+.header .gouwuche {
+    font-size: 1.6rem;
+    /* color: red; */
+    text-align: center;
+    background-color: #fff;
+    padding: 10px 0;
+}
+.header .tp {
+    margin-top: 4px;
+    margin-bottom: 2px;
+}
+.header .tp img {
+    width: 100%;
+
+}
+.shanpin {
+    width: 100%;
+    height: 160px;
+    background-color: #fff;
+    /* display: flex; */
+    /* justify-content: space-around; */
+}
+.shanpin2 {
+    width: 85%;
+    height: 160px;
+    /* background-color: aquamarine; */
+    display: flex;
+    /* margin:0 7%; */
+    padding: 2.5% 7%;
+    align-items: center;
+
+}
+.shanpin2>.gouxuan {
+    width: 30px;
+    background-color: pink;
+}
+.bianju {
+    margin-right: 3%;
+}
+.bianju2 {
+    margin-bottom: 6%;
+    margin-left: 2%;
+    display: flex;
+    justify-content: space-between;
+}
+.bianju>img {
+    width: 1.48rem;
+}
+.tupian img {
+    width: 7.24rem;
+    border-radius: 7%;
+}
+.xiangqing {
+    width: 220px;
+    height: 7.24rem;
+    /* background-color: #ac86e3; */
+    
+}
+.mingchen span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.xiangqing span {
+    color: #222;
+    /* height: 0.43rem; */
+    /* line-height: .43rem; */
+    font-size: 1.23rem;
+    
+}
+.yangshi span {
+    color: #585c64;
+    background-color: #F6F6F6;
+    border-radius: 10%;
+    font-size: 0.85rem;
+    padding: 5px;
+}
+.cart-price span {
+    /* color: #f03867; */
+    font-weight: bold;
+}
+.jiajian img {
+    width: 1.1rem;
+    padding: 0 0.4rem;
+}
+.jiajian .jian {
+    border: 1px solid #DFDFE0;
+    border-right: none;
+    border-bottom-left-radius: 50%;
+    border-top-left-radius: 50%;
+}
+.jiajian .num {
+    border: 1px solid #DFDFE0;
+    padding: 0 0.5rem;
+}
+.jiajian .num span {
+    font-size: 1rem;
+}
+.jiajian .jia {
+    border: 1px solid #DFDFE0;
+    border-left: none;
+    border-bottom-right-radius: 50%;
+    border-top-right-radius: 50%;
+    
+}
+
+.cart-bottom {
+    width: 100%;
+    height: 90px;
+    background-color: #fff;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.cart-bottom .yixuan img {
+    width: 1.2rem;
+}
+.cart-bottom .yixuan span {
+    font-size: 1rem;
+    color: #585c64;
+}
+.cart-bottom .zongjia .zongji {
+    font-size: 1.3rem;
+}
+.cart-bottom .zongjia .cart-price {
+    font-size: 1.6rem;
+    color: #f03867;
+}
+.cart-bottom .zongjia .preight {
+    font-size: 1.1rem;
+    color: #9999;
+}
+.cart-bottom .jiesuan {
+    width: 8.7rem;
+    height: 4.1rem;
+    background-color: #f03867;
+    border-radius: 8%;
+    text-align: center;
+    line-height: 4.1rem;
+}
+.cart-bottom .jiesuan span {
+    color: #fff;
+    font-size: 1.4rem;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/aa.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/aa.html"
new file mode 100644
index 0000000000000000000000000000000000000000..02bbe60650ea46bc1518be4a7a49cc15e566b949
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/aa.html"
@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
+    <style>
+        .fl {
+            float: left;
+        }
+
+        .fr {
+            float: right;
+        }
+
+        blockquote,
+        body,
+        dd,
+        div,
+        dl,
+        dt,
+        fieldset,
+        form,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        img,
+        input,
+        li,
+        ol,
+        p,
+        table,
+        td,
+        textarea,
+        th,
+        ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        .clearfix {
+            zoom: 1;
+        }
+
+        .clearfix:after {
+            clear: both;
+        }
+
+        .clearfix:after {
+            content: '.';
+            display: block;
+            overflow: hidden;
+            visibility: hidden;
+            font-size: 0;
+            line-height: 0;
+            width: 0;
+            height: 0;
+        }
+
+        a {
+            text-decoration: none;
+            color: #333;
+        }
+
+        img {
+            vertical-align: middle;
+        }
+
+        .page-shopping-cart {
+            width: 1200px;
+            margin: 50px auto;
+            font-size: 14px;
+            border: 1px solid #e3e3e3;
+            border-top: 2px solid #317ee7;
+        }
+
+        .page-shopping-cart .cart-title {
+            color: #317ee7;
+            font-size: 16px;
+            text-align: left;
+            padding-left: 20px;
+            line-height: 68px;
+        }
+
+        .page-shopping-cart .red-text {
+            color: #e94826;
+        }
+
+        .page-shopping-cart .check-span {
+            display: block;
+            width: 24px;
+            height: 20px;
+            background: url("shopping_cart.png") no-repeat 0 0;
+        }
+
+        .page-shopping-cart .check-span.check-true {
+            background: url("shopping_cart.png") no-repeat 0 -22px;
+        }
+
+        .page-shopping-cart .td-check {
+            width: 70px;
+        }
+
+        .page-shopping-cart .td-product {
+            width: 460px;
+        }
+
+        .page-shopping-cart .td-num,
+        .page-shopping-cart .td-price,
+        .page-shopping-cart .td-total {
+            width: 160px;
+        }
+
+        .page-shopping-cart .td-do {
+            width: 150px;
+        }
+
+        .page-shopping-cart .cart-product-title {
+            text-align: center;
+            height: 38px;
+            line-height: 38px;
+            padding: 0 20px;
+            background: #f7f7f7;
+            border-top: 1px solid #e3e3e3;
+            border-bottom: 1px solid #e3e3e3;
+        }
+
+        .page-shopping-cart .cart-product-title .td-product {
+            text-align: center;
+            font-size: 14px;
+        }
+
+        .page-shopping-cart .cart-product-title .td-check {
+            text-align: left;
+        }
+
+        .page-shopping-cart .cart-product-title .td-check .check-span {
+            margin: 9px 6px 0 0;
+        }
+
+        .page-shopping-cart .cart-product {
+            padding: 0 20px;
+            text-align: center;
+        }
+
+        .page-shopping-cart .cart-product table {
+            width: 100%;
+            text-align: center;
+            font-size: 14px;
+        }
+
+        .page-shopping-cart .cart-product table td {
+            padding: 20px 0;
+        }
+
+        .page-shopping-cart .cart-product table tr {
+            border-bottom: 1px dashed #e3e3e3;
+        }
+
+        .page-shopping-cart .cart-product table tr:last-child {
+            border-bottom: none;
+        }
+
+        .page-shopping-cart .cart-product table .product-num {
+            border: 1px solid #e3e3e3;
+            display: inline-block;
+            text-align: center;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-do {
+            width: 24px;
+            height: 28px;
+            display: block;
+            background: #f7f7f7;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-reduce span {
+            background: url("shopping_cart.png") no-repeat -40px -22px;
+            display: block;
+            width: 6px;
+            height: 2px;
+            margin: 13px auto 0 auto;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-add span {
+            background: url("shopping_cart.png") no-repeat -60px -22px;
+            display: block;
+            width: 8px;
+            height: 8px;
+            margin: 10px auto 0 auto;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-input {
+            width: 42px;
+            height: 28px;
+            line-height: 28px;
+            border: none;
+            text-align: center;
+        }
+
+        .page-shopping-cart .cart-product table .td-product {
+            text-align: left;
+            font-size: 12px;
+            line-height: 20px;
+        }
+
+        .page-shopping-cart .cart-product table .td-product img {
+            border: 1px solid #e3e3e3;
+            margin-right: 10px;
+        }
+
+        .page-shopping-cart .cart-product table .td-product .product-info {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .page-shopping-cart .cart-product table .td-do {
+            font-size: 12px;
+        }
+
+        .page-shopping-cart .cart-product-info {
+            height: 50px;
+            line-height: 50px;
+            background: #f7f7f7;
+            padding-left: 20px;
+        }
+
+        .page-shopping-cart .cart-product-info .delect-product {
+            color: #666;
+        }
+
+        .page-shopping-cart .cart-product-info .delect-product span {
+            display: inline-block;
+            vertical-align: top;
+            margin: 18px 8px 0 0;
+            width: 13px;
+            height: 15px;
+            background: url("shopping_cart.png") no-repeat -60px 0;
+        }
+
+        .page-shopping-cart .cart-product-info .product-total {
+            font-size: 14px;
+            color: #e94826;
+        }
+
+        .page-shopping-cart .cart-product-info .product-total span {
+            font-size: 20px;
+        }
+
+        .page-shopping-cart .cart-product-info .check-num {
+            color: #333;
+        }
+
+        .page-shopping-cart .cart-product-info .check-num span {
+            color: #e94826;
+        }
+
+        .page-shopping-cart .cart-product-info .keep-shopping {
+            color: #666;
+            margin-left: 40px;
+        }
+
+        .page-shopping-cart .cart-product-info .keep-shopping span {
+            display: inline-block;
+            vertical-align: top;
+            margin: 18px 8px 0 0;
+            width: 15px;
+            height: 15px;
+            background: url("shopping_cart.png") no-repeat -40px 0;
+        }
+
+        .page-shopping-cart .cart-product-info .btn-buy {
+            height: 50px;
+            color: #fff;
+            font-size: 20px;
+            display: block;
+            width: 110px;
+            background: #ff7700;
+            text-align: center;
+            margin-left: 30px;
+        }
+
+        .page-shopping-cart .cart-worder {
+            padding: 20px;
+        }
+
+        .page-shopping-cart .cart-worder .choose-worder {
+            color: #fff;
+            display: block;
+            background: #39e;
+            width: 140px;
+            height: 40px;
+            line-height: 40px;
+            border-radius: 4px;
+            text-align: center;
+            margin-right: 20px;
+        }
+
+        .page-shopping-cart .cart-worder .choose-worder span {
+            display: inline-block;
+            vertical-align: top;
+            margin: 9px 10px 0 0;
+            width: 22px;
+            height: 22px;
+            background: url("shopping_cart.png") no-repeat -92px 0;
+        }
+
+        .page-shopping-cart .cart-worder .worker-info {
+            color: #666;
+        }
+
+        .page-shopping-cart .cart-worder .worker-info img {
+            border-radius: 100%;
+            margin-right: 10px;
+        }
+
+        .page-shopping-cart .cart-worder .worker-info span {
+            color: #000;
+        }
+
+        .choose-worker-box {
+            width: 620px;
+            background: #fff;
+        }
+
+        .choose-worker-box .box-title {
+            height: 40px;
+            line-height: 40px;
+            background: #F7F7F7;
+            text-align: center;
+            position: relative;
+            font-size: 14px;
+        }
+
+        .choose-worker-box .box-title a {
+            display: block;
+            position: absolute;
+            top: 15px;
+            right: 16px;
+            width: 10px;
+            height: 10px;
+            background: url("shopping_cart.png") no-repeat -80px 0;
+        }
+
+        .choose-worker-box .box-title a:hover {
+            background: url("shopping_cart.png") no-repeat -80px -22px;
+        }
+
+        .choose-worker-box .worker-list {
+            padding-top: 30px;
+            height: 134px;
+            overflow-y: auto;
+        }
+
+        .choose-worker-box .worker-list li {
+            float: left;
+            width: 25%;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .choose-worker-box .worker-list li p {
+            margin-top: 8px;
+        }
+
+        .choose-worker-box .worker-list li.cur a {
+            color: #f70;
+        }
+
+        .choose-worker-box .worker-list li.cur a img {
+            border: 1px solid #f70;
+        }
+
+        .choose-worker-box .worker-list li a:hover {
+            color: #f70;
+        }
+
+        .choose-worker-box .worker-list li a:hover img {
+            border: 1px solid #f70;
+        }
+
+        .choose-worker-box .worker-list li img {
+            border: 1px solid #fff;
+            border-radius: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="page-shopping-cart" id="shopping-cart">
+        <h4 class="cart-title">购物清单</h4>
+        <div class="cart-product-title clearfix">
+            <div class="td-check fl"><span class="check-span fl check-all"></span>全选</div>
+            <div class="td-product fl">商品</div>
+            <div class="td-num fl">数量</div>
+            <div class="td-price fl">单价(元)</div>
+            <div class="td-total fl">金额(元)</div>
+            <div class="td-do fl">操作</div>
+        </div>
+        <div class="cart-product clearfix">
+            <table>
+                <tbody>
+                    <tr>
+                        <td class="td-check"><span class="check-span"></span></td>
+                        <td class="td-product"><img src="./images/testimg.png" width="98" height="98">
+                            <div class="product-info">
+                                <h6>【斯文】甘油&nbsp;|&nbsp;丙三醇</h6>
+                                <p>品牌：韩国skc&nbsp;&nbsp;产地：韩国</p>
+                                <p>规格/纯度:99.7%&nbsp;&nbsp;起定量：215千克</p>
+                                <p>配送仓储：上海仓海仓储</p>
+                            </div>
+                            <div class="clearfix"></div>
+                        </td>
+                        <td class="td-num">
+                            <div class="product-num">
+                                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
+                                <input type="text" class="num-input" value="3">
+                                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
+                            </div>
+                        </td>
+                        <td class="td-price">
+                            <p class="red-text">￥<span class="price-text">800</span>.00</p>
+                        </td>
+                        <td class="td-total">
+                            <p class="red-text">￥<span class="total-text">800</span>.00</p>
+                        </td>
+                        <td class="td-do"><a href="javascript:;" class="product-delect">删除</a></td>
+                    </tr>
+                    <tr>
+                        <td class="td-check"><span class="check-span check-true"></span></td>
+                        <td class="td-product"><img src="./images/testimg.png" width="98" height="98">
+                            <div class="product-info">
+                                <h6>【斯文】甘油&nbsp;|&nbsp;丙三醇</h6>
+                                <p>品牌：韩国skc&nbsp;&nbsp;产地：韩国</p>
+                                <p>规格/纯度:99.7%&nbsp;&nbsp;起定量：215千克</p>
+                                <p>配送仓储：上海仓海仓储</p>
+                            </div>
+                            <div class="clearfix"></div>
+                        </td>
+                        <td class="td-num">
+                            <div class="product-num">
+                                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
+                                <input type="text" class="num-input" value="1">
+                                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
+                            </div>
+                        </td>
+                        <td class="td-price">
+                            <p class="red-text">￥<span class="price-text">800</span>.00</p>
+                        </td>
+                        <td class="td-total">
+                            <p class="red-text">￥<span class="total-text">800</span>.00</p>
+                        </td>
+                        <td class="td-do"><a href="javascript:;" class="product-delect">删除</a></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="cart-product-info">
+            <a class="delect-product" href="javascript:;"><span></span>删除所选商品</a>
+            <a class="keep-shopping" href="#"><span></span>继续购物</a>
+            <a class="btn-buy fr" href="javascript:;">去结算</a>
+            <p class="fr product-total">￥<span>1600</span></p>
+            <p class="fr check-num"><span>2</span>件商品总计（不含运费）：</p>
+        </div>
+        <div class="cart-worder clearfix">
+            <a href="javascript:;" class="choose-worder fl"><span></span>绑定跟单员</a>
+            <div class="worker-info fl">
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+    new Vue({
+        el: '#shopping-cart',
+        data: {
+            productList: [
+                {
+                    'pro_name': '【斯文】甘油 | 丙三醇 --1',//产品名称
+                    'pro_brand': 'skc',//品牌名称
+                    'pro_place': '韩国',//产地
+                    'pro_purity': '99.7%',//规格
+                    'pro_min': "215千克",//最小起订量
+                    'pro_depot': '上海仓海仓储',//所在仓库
+                    'pro_num': 3,//数量
+                    'pro_img': './images/testimg.png',//图片链接
+                    'pro_price': 800,//单价
+                    'select': true //是否选中
+                },
+                {
+                    'pro_name': '【斯文】甘油 | 丙三醇 --2',//产品名称
+                    'pro_brand': 'skc',//品牌名称
+                    'pro_place': '韩国',//产地
+                    'pro_purity': '99.7%',//规格
+                    'pro_min': "215千克",//最小起订量
+                    'pro_depot': '上海仓海仓储',//所在仓库
+                    'pro_num': 3,//数量
+                    'pro_img': './images/testimg.png',//图片链接
+                    'pro_price': 800,//单价
+                    'select': false //是否选中
+                },
+                {
+                    'pro_name': '【斯文】甘油 | 丙三醇 --3',//产品名称
+                    'pro_brand': 'skc',//品牌名称
+                    'pro_place': '韩国',//产地
+                    'pro_purity': '99.7%',//规格
+                    'pro_min': "215千克",//最小起订量
+                    'pro_depot': '上海仓海仓储',//所在仓库
+                    'pro_num': 3,//数量
+                    'pro_img': './images/testimg.png',//图片链接
+                    'pro_price': 800,//单价
+                    'select': true //是否选中
+                }
+            ]
+        },
+        computed: {},
+        methods: {
+
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/three.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/three.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..49db2184cdd3803218eaa775bad8856d6946f8fc
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/pages/three.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="{
+                name:'list',
+                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>
+     </div>
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'2.7',price:745},
+              {id:7,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'3.6',price:357},
+              {id:5,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'5.7',price:264},
+              {id:6,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'5.7',price:196}
+          ]
+      }
+  }
+}
+</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/vue.04.28/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..3e993e661e1bef40158965cce9e7b7f1dda4591e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.28/src/router/index.js"
@@ -0,0 +1,81 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//引入组件
+import BodyBase from '../pages/BodyBase'
+import BodyTwo from '../pages/BodyTwo'
+import three from '../pages/three'
+import threece from '../detail/threece'
+import adidas from '../detail/adidas'
+import akf from '../detail/akf'
+import lining from '../detail/lining'
+import ugg from '../detail/ugg'
+import ListAa from '../pages/ListAa'
+import shoppingcart from '../pages/ShoppingCart'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+            //     children: [
+            //         {
+            //             path: '3ce',
+            //             component: threece
+            //         }
+            //     ]
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path: '/two',
+            component: BodyTwo
+        },
+        {
+            path: '/three',
+            component: three
+        },
+        {
+            name: '3ce',
+            path: '/3ce/:id/:price/:checkbox',
+            component: threece,
+            props: true
+        },
+        {
+            path: '/adidas',
+            component: adidas
+        },
+        {
+            name: 'list',
+            path: '/list/:id/:name/:price',
+            component: ListAa,
+            props: true
+        },
+        {
+            path: '/ugg',
+            component: ugg
+        },
+        {
+            path: '/lining',
+            component: lining
+        },
+        {
+            path: '/akf',
+            component: akf
+        },
+        // {
+        //     path: '/cart',
+        //     component: shoppingcart
+        // },
+        {
+            name: '/cart',
+            path: '/cart',
+            component: shoppingcart,
+            props: true
+        }
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/3ce.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/3ce.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/3ce.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/3ce.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/3ce.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/adidas.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/adidas.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/adidas.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/akf.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/akf.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/akf.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/akf.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/akf.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/akf.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/beijing.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/beijing.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/beijing.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/bottom.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/bottom.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/bottom.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/caidan.svg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/caidan.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/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/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/carttop.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/carttop.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f30a624377f73d74f3d12ecf7dea24896ffecbc1
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/carttop.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/center.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/center.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/center.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/gouwuche.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/gouwuche.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/gouwuche.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/gouxuan.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/gouxuan.png"
new file mode 100644
index 0000000000000000000000000000000000000000..35b0213f191897d9d288caf7c38393b0e3c4de8f
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/gouxuan.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/header.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/header.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/header.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jiahao.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jiahao.png"
new file mode 100644
index 0000000000000000000000000000000000000000..893e676b0121205a72637da9226628fc9dc1c28f
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jiahao.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jianhao.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jianhao.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0cf1793575f8eceefb912692a7dc77ca93baa100
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jianhao.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jiantou.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jiantou.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/jiantou.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/kefu.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/kefu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/kefu.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/kouhong.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/kouhong.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/kouhong.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/lining.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/lining.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/lining.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/ln.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/ln.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/logo.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/logo.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/shenghuoguan.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/shenghuoguan.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/shenghuoguan.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/ugg.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/ugg.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/ugg.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/weigouxuan.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/weigouxuan.png"
new file mode 100644
index 0000000000000000000000000000000000000000..78f09d44f9c1aea687db2e12bbd390480a49d18d
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/weigouxuan.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/weipinhui.png" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/weipinhui.png"
new file mode 100644
index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/weipinhui.png" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/wnn.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/wnn.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/yfl.jpg" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/yfl.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/yfl.jpg" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/zhengpin.webp" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/zhengpin.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/assets/zhengpin.webp" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/favicon.ico" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/favicon.ico" differ
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/public/index.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/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/\346\235\250\347\276\216\351\233\252/vue.04.29/src/App.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b2d4a0eee690fdabd3e0a4596ba7f3b925751c83
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/App.vue"
@@ -0,0 +1,39 @@
+<template>
+  <div id="app" >
+         <HeaderBase />
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+  /* width: 100%; */
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/src/components/HeaderBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c8ca407ee2fd4ed05b1683e89611658ef0e32d89
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/components/HeaderBase.vue"
@@ -0,0 +1,102 @@
+<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" :class='{color:a}'>推荐</router-link>
+        <router-link to="/two" active-class="color" @click.native="click">3折疯抢</router-link>
+        <router-link to="/three" active-class="color" @click.native="click">唯品快抢</router-link>
+        <router-link to="/four" active-class="color" @click.native="click">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  },
+  data(){
+    return {
+      a:true
+    }
+  },
+  methods:{
+    click(){
+      this.a = false
+    }
+  }
+}
+</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;
+}
+a {
+  margin-left: 55px;
+  color:#807E7B;
+}
+
+ .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/vue.04.29/src/config/constName.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/config/constName.js"
new file mode 100644
index 0000000000000000000000000000000000000000..8020c116b99b43dab301b6975d21016136718e50
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/config/constName.js"
@@ -0,0 +1,6 @@
+
+const constName={
+    name:'constName',
+    reduceNum:'reduceNum'
+}
+export default constName
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/adidas.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b2773997022f353ca0ca3b74d60b2c6e0d9f6415
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/adidas.vue"
@@ -0,0 +1,216 @@
+<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">￥{{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">adidas NEO | {{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">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+}
+a {
+    margin-right: 55px;
+}
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/akf.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5d371ad27f502b785bc1b3ee775b72a58c0bbf60
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/akf.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥632</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.29/src/detail/lining.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..d4e1b563a41695e3490d8be29d1095330be2cf74
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/lining.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥354</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.29/src/detail/threece.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2d1f52bb9159b0b530b0772677ba65bb986b9121
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/threece.vue"
@@ -0,0 +1,301 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img" alt="">
+            </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">￥{{price}}</span><br>
+                <span class="yuanjia">￥110</span><span>{{count}}折</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>
+                <!-- <router-link :to="{
+                        path:'/cart',
+                        
+                    }"> -->
+            <div class="tubiao">
+                
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+                <!-- </router-link> -->
+            </div>
+            
+            
+            <div class="tubiao">
+                <div>
+                    <router-link :to="{
+                        path:'/cart',
+                        
+                    }">
+                    <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+                    </router-link>
+                </div>
+            </div>
+            
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥651</span>
+                </div>
+                <div class="jiage2" @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>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props:['name','id','price','num','count','img','checkbox'],
+  data(){
+    return{
+      title:''
+    }
+  },
+  mounted(){
+//       let params = this.$route.params;
+//         for(var key in params){
+//         this[key]=params[key];
+//     }
+  },
+ 
+  methods:{
+    add2Card:function(){
+         let key = 'cart';
+         let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:this.num,checkbox:this.checkbox};
+         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++;//detailPro 是 allProducts 中的其中一条数据
+                 inPro=true;
+             }
+          }
+          if(!inPro){
+              allProducts.push(pro);
+          }
+         }else{//没有购物时候
+            allProducts=[];
+            allProducts.push(pro);
+         }    
+         localStorage.setItem(key,JSON.stringify(allProducts));
+
+        this.$router.push({path:'/cart'})
+        //this.$router.history.go(1);
+    }
+  },
+}
+</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;
+    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;
+}
+.tubiao span {
+    color: #000;
+}
+.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/vue.04.29/src/detail/ugg.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b4a3ca760119c7caa19b85e4401fa66f105b3270
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/detail/ugg.vue"
@@ -0,0 +1,212 @@
+<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">￥{{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">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>￥395</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </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',
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  mounted(){
+      let params = this.$route.params;
+        for(var key in params){
+        this[key]=params[key];
+    }
+  }
+}
+</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;
+    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/vue.04.29/src/main.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..79a0adddb24ec3943bab09a96c70c08bc04ccbaf
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/main.js"
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+//引入路由器
+import router from './router/index'
+
+
+//关闭生产环境提交
+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)
+   },
+   router
+})
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/BodyBase.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ceacaee5b613785e28bc1689a0f01536c472eaf0
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/BodyBase.vue"
@@ -0,0 +1,71 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}&price=${item.price}`"> -->
+            <router-link :to="{
+            name:'3ce',
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 params
+                id:item.id,
+                name:item.name,
+                price:item.price,
+                num:item.num,
+                count:item.count,
+                img:item.img2,
+                checkbox: item.checkbox
+            }
+        }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.count}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',checkbox: false,img:'../assets/header.jpg',count:'2.7',price:240,num:1,img2:'../../assets/3ce.webp'},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',checkbox: false,img:'../assets/center.jpg',count:'3.6',price:300,num:1,img2:'../../assets/adidas.webp'},
+              {id:3,name:'UGG专场',checkbox: false,img:'../assets/bottom.jpg',count:'5.7',price:232,num:1,img2:'../../assets/ugg.webp'},
+              {id:4,name:'伊芙丽eifini女装专场',checkbox: false,img:'../assets/yfl.jpg',count:'5.7',price:456,num:1,img2:'../../assets/akf.webp'}
+          ]
+      }
+  },
+}
+</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/vue.04.29/src/pages/BodyTwo.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/BodyTwo.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8c1d1d85bbac2c5c270a7a6aa0480c2966f98a66
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/BodyTwo.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="{
+            name:'list',
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 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>
+     </div>
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:5,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'2.7',price:986},
+              {id:6,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'3.6',price:157},
+              {id:7,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'5.7',price:652},
+              {id:8,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'5.7',price:423}
+          ]
+      }
+  }
+}
+</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/vue.04.29/src/pages/ListAa.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/ListAa.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1c3e2329c413719478e55275f0a271326163b273
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/ListAa.vue"
@@ -0,0 +1,57 @@
+<template>
+     <div >
+      <!-- {{this.$route.query.name}} -->
+      <!-- <h1>啊啊啊啊啊</h1> -->
+      <div v-if='id == 1||id == 7'>
+        <threece />
+      </div>
+      <div v-if='id == 2'>
+        <adidas />
+      </div>
+      <div v-if='id == 3'>
+        <ugg />
+      </div>
+      <div v-if='id == 4'>
+        <adidas />
+      </div>
+      <div v-if='id == 5 '>
+        <akf />
+      </div>
+      <div v-if='id == 6||id == 8'>
+        <lining />
+      </div>
+     </div>
+ 
+</template>
+
+<script>
+import threece from '../detail/threece.vue'
+import adidas from '../detail/adidas.vue'
+import akf from '../detail/akf.vue'
+import lining from '../detail/lining.vue'
+import ugg from '../detail/ugg.vue'
+
+export default {
+  name: 'ListAa',
+  components: {
+    threece,
+    adidas,
+    akf,
+    ugg,
+    lining
+  },
+  data(){
+    return{
+      id:''
+    }
+  },
+  mounted(){
+    // console.log(this.$route.query.name);
+  this.id = this.$route.params.id
+  // console.log(this.id);
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/ShoppingCart.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/ShoppingCart.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..68d7f67a0d1bff228ff7e1ee2244d4fc52468f7d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/ShoppingCart.vue"
@@ -0,0 +1,316 @@
+<template>
+  <div>
+      <div class="header">
+          <div class="gouwuche"><span>购物车</span></div>
+          <div class="tp"><img src="../../public/assets/carttop.png" alt=""></div>
+      </div>
+      <div class="cart shoping">
+      <div v-for="(item,index) in cartshangpin" :item='item' :key='index'>
+        <div class="shanpin">
+            <div class="shanpin2">
+                <div class="gouxaun bianju">
+                    <input type="checkbox" v-model="item.checkbox" @click="checked(index)">
+                </div>
+            <div class="tupian bianju">
+                <img :src="item.img" alt="">
+            </div>
+            <div>
+                <div class="xiangqing bianju">
+                    <div class="mingchen bianju2">
+                        <span>{{item.name}}</span>
+                    </div>
+                    <div class="yangshi bianju2">
+                        <span>口红；0.8g</span>
+                    </div>
+                    <div class="bianju2">
+                        <div class="cart-price">
+                            <span>￥{{item.price}}</span>
+                        </div>
+                        <div class="jiajian">
+                            <button @click="jian(item.id)" :disabled="item.num <= 1">-</button>
+                                 {{ item.num }}
+                            <button @click="jia(item.id)">+</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+      </div>
+      </div>
+  </div>
+    <div class="cart-bottom">
+        <div class="yixuan">
+            <input type="checkbox" v-model="isCheckedAll" @click="checkAll">
+            <span>已选（{{cartnum}}）</span>
+        </div>
+        <div class="zongjia">
+            <div>
+                <span class="zongji">总计</span>
+                <span class="cart-price">￥{{amount}}</span>
+                <span class="preight">(不含运费)</span>
+            </div>
+        </div>
+        <div class="jiesuan">
+            <span @click="pay">结算</span>
+            <!-- <button>结算</button> -->
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import ConstName from '../config/constName';
+export default {
+    name:'ShoppingCart',
+    data(){
+        return {
+            cartnum:0,
+            isCheckedAll: false,
+            cartshangpin:[],
+        }
+    },
+     mounted(){
+         let key = 'cart'
+         let allProducts = localStorage.getItem(key);
+         allProducts = JSON.parse(allProducts);
+         for(let key in allProducts){
+              let detailPro = allProducts[key];
+            this.cartshangpin.push(detailPro);
+            // console.log(detailPro);
+         }
+    },
+    methods:{
+        jian(id){
+            this.cartshangpin.forEach((e) => {
+            if(e.num > 0){
+                if(id == e.id){
+                e.num--
+                let products=JSON.parse(localStorage.getItem('cart'));
+                for(let key in products){
+                    let currentProduct = products[key];
+                    if(id==currentProduct.id){
+                        currentProduct.num=e.num;
+                    }
+          }
+          localStorage.setItem('cart',JSON.stringify(products));
+            }
+            }
+         });
+        },
+        jia(id){
+            this.cartshangpin.forEach((e) => {
+             if(id == e.id){
+                e.num++
+                let products=JSON.parse(localStorage.getItem('cart'));
+                for(let key in products){
+                    let currentProduct = products[key];
+                    if(id==currentProduct.id){
+                        currentProduct.num=e.num;
+                    }
+          }
+          localStorage.setItem('cart',JSON.stringify(products));
+             }
+         });
+        },
+        pay(){
+          // 提交到后台的接口，----todo
+          //假设后台接口已经响应成功了，假设购买数量都是1个
+          console.log('付钱成功！！！');
+        //   this.public.$emit(ConstName.reduceNum,1,1);
+      },
+      checkAll() {
+        this.isCheckedAll = !this.isCheckedAll
+        this.cartshangpin.map(el => el.checkbox = this.isCheckedAll)
+        
+
+        // let lenght = 
+      },
+      // 部分选中时的全选状态
+      checked(index) {
+        this.cartshangpin[index].checkbox = !this.cartshangpin[index].checkbox
+        this.checkbox = this.cartshangpin.some(el => el.checkbox)
+        // this.cartshangpin[index].checkbox.filter(itme => itme == true)
+
+        // // 储存在local
+        // this.cartshangpin.forEach((e) => {
+        //      if(id == e.id){
+        //         let products=JSON.parse(localStorage.getItem('cart'));
+        //         for(let key in products){
+        //             let currentProduct = products[key];
+        //             if(id==currentProduct.id){
+        //                 currentProduct.checkbox=this.cartshangpin[index].checkbox;
+        //             }
+        //   }
+        //   localStorage.setItem('cart',JSON.stringify(products));
+        //      }
+        //  });
+        
+        // 商品数量加减
+        if(this.cartshangpin[index].checkbox == true){
+            this.cartnum ++
+        }else{
+            if(this.cartnum > 0){
+                this.cartnum --
+            }
+        }
+        // 购物车数量等于已选数量时全选
+         let length = this.cartshangpin.length;
+            if (length == this.cartnum){
+                this.isCheckedAll = true
+            }else{
+                this.isCheckedAll = false
+            }
+      }
+    },
+    // 计算属性
+    computed: {
+      // 方法伪装成属性
+      amount() {
+        return this.cartshangpin.filter(el => el.checkbox).reduce((prev, curr) => prev + parseFloat((curr.price * curr.num).toFixed(2)), 0)
+      }
+    },
+}
+</script>
+
+<style>
+
+.gouxaun {
+    width: 28px;
+    height: 28px;
+    /* background-color: pink; */
+}
+.cart {
+    width: 95%;
+    height: 445px;
+    /* background-color: royalblue; */
+    margin: 0 auto;
+    
+}
+.header .gouwuche {
+    font-size: 1.6rem;
+    /* color: red; */
+    text-align: center;
+    background-color: #fff;
+    padding: 10px 0;
+}
+.header .tp {
+    margin-top: 4px;
+    margin-bottom: 2px;
+}
+.header .tp img {
+    width: 100%;
+
+}
+.shanpin {
+    width: 100%;
+    height: 160px;
+    background-color: #fff;
+    /* display: flex; */
+    /* justify-content: space-around; */
+}
+.shanpin2 {
+    width: 85%;
+    height: 160px;
+    /* background-color: aquamarine; */
+    display: flex;
+    /* margin:0 7%; */
+    padding: 2.5% 7%;
+    align-items: center;
+
+}
+.shanpin2>.gouxuan {
+    width: 30px;
+    background-color: pink;
+}
+.bianju {
+    margin-right: 3%;
+}
+.bianju2 {
+    margin-bottom: 6%;
+    margin-left: 2%;
+    display: flex;
+    justify-content: space-between;
+}
+.bianju>img {
+    width: 1.48rem;
+}
+.tupian img {
+    width: 7.24rem;
+    border-radius: 7%;
+}
+.xiangqing {
+    width: 220px;
+    height: 7.24rem;
+    /* background-color: #ac86e3; */
+    
+}
+.mingchen span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.xiangqing span {
+    color: #222;
+    /* height: 0.43rem; */
+    /* line-height: .43rem; */
+    font-size: 1.23rem;
+    
+}
+.yangshi span {
+    color: #585c64;
+    background-color: #F6F6F6;
+    border-radius: 10%;
+    font-size: 0.85rem;
+    padding: 5px;
+}
+.cart-price span {
+    /* color: #f03867; */
+    font-weight: bold;
+}
+.jiajian .num {
+    border: 1px solid #DFDFE0;
+    padding: 0 0.5rem;
+}
+.jiajian .num span {
+    font-size: 1rem;
+}
+.cart-bottom {
+    width: 100%;
+    height: 90px;
+    background-color: #fff;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.cart-bottom .yixuan img {
+    width: 1.2rem;
+}
+.cart-bottom .yixuan span {
+    font-size: 1rem;
+    color: #585c64;
+}
+.cart-bottom .zongjia .zongji {
+    font-size: 1.3rem;
+}
+.cart-bottom .zongjia .cart-price {
+    font-size: 1.6rem;
+    color: #f03867;
+}
+.cart-bottom .zongjia .preight {
+    font-size: 1.1rem;
+    color: #9999;
+}
+.cart-bottom .jiesuan {
+    width: 8.7rem;
+    height: 4.1rem;
+    background-color: #f03867;
+    border-radius: 8%;
+    text-align: center;
+    line-height: 4.1rem;
+}
+.cart-bottom .jiesuan span {
+    color: #fff;
+    font-size: 1.4rem;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/aa.html" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/aa.html"
new file mode 100644
index 0000000000000000000000000000000000000000..02bbe60650ea46bc1518be4a7a49cc15e566b949
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/aa.html"
@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
+    <style>
+        .fl {
+            float: left;
+        }
+
+        .fr {
+            float: right;
+        }
+
+        blockquote,
+        body,
+        dd,
+        div,
+        dl,
+        dt,
+        fieldset,
+        form,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        img,
+        input,
+        li,
+        ol,
+        p,
+        table,
+        td,
+        textarea,
+        th,
+        ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        .clearfix {
+            zoom: 1;
+        }
+
+        .clearfix:after {
+            clear: both;
+        }
+
+        .clearfix:after {
+            content: '.';
+            display: block;
+            overflow: hidden;
+            visibility: hidden;
+            font-size: 0;
+            line-height: 0;
+            width: 0;
+            height: 0;
+        }
+
+        a {
+            text-decoration: none;
+            color: #333;
+        }
+
+        img {
+            vertical-align: middle;
+        }
+
+        .page-shopping-cart {
+            width: 1200px;
+            margin: 50px auto;
+            font-size: 14px;
+            border: 1px solid #e3e3e3;
+            border-top: 2px solid #317ee7;
+        }
+
+        .page-shopping-cart .cart-title {
+            color: #317ee7;
+            font-size: 16px;
+            text-align: left;
+            padding-left: 20px;
+            line-height: 68px;
+        }
+
+        .page-shopping-cart .red-text {
+            color: #e94826;
+        }
+
+        .page-shopping-cart .check-span {
+            display: block;
+            width: 24px;
+            height: 20px;
+            background: url("shopping_cart.png") no-repeat 0 0;
+        }
+
+        .page-shopping-cart .check-span.check-true {
+            background: url("shopping_cart.png") no-repeat 0 -22px;
+        }
+
+        .page-shopping-cart .td-check {
+            width: 70px;
+        }
+
+        .page-shopping-cart .td-product {
+            width: 460px;
+        }
+
+        .page-shopping-cart .td-num,
+        .page-shopping-cart .td-price,
+        .page-shopping-cart .td-total {
+            width: 160px;
+        }
+
+        .page-shopping-cart .td-do {
+            width: 150px;
+        }
+
+        .page-shopping-cart .cart-product-title {
+            text-align: center;
+            height: 38px;
+            line-height: 38px;
+            padding: 0 20px;
+            background: #f7f7f7;
+            border-top: 1px solid #e3e3e3;
+            border-bottom: 1px solid #e3e3e3;
+        }
+
+        .page-shopping-cart .cart-product-title .td-product {
+            text-align: center;
+            font-size: 14px;
+        }
+
+        .page-shopping-cart .cart-product-title .td-check {
+            text-align: left;
+        }
+
+        .page-shopping-cart .cart-product-title .td-check .check-span {
+            margin: 9px 6px 0 0;
+        }
+
+        .page-shopping-cart .cart-product {
+            padding: 0 20px;
+            text-align: center;
+        }
+
+        .page-shopping-cart .cart-product table {
+            width: 100%;
+            text-align: center;
+            font-size: 14px;
+        }
+
+        .page-shopping-cart .cart-product table td {
+            padding: 20px 0;
+        }
+
+        .page-shopping-cart .cart-product table tr {
+            border-bottom: 1px dashed #e3e3e3;
+        }
+
+        .page-shopping-cart .cart-product table tr:last-child {
+            border-bottom: none;
+        }
+
+        .page-shopping-cart .cart-product table .product-num {
+            border: 1px solid #e3e3e3;
+            display: inline-block;
+            text-align: center;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-do {
+            width: 24px;
+            height: 28px;
+            display: block;
+            background: #f7f7f7;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-reduce span {
+            background: url("shopping_cart.png") no-repeat -40px -22px;
+            display: block;
+            width: 6px;
+            height: 2px;
+            margin: 13px auto 0 auto;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-add span {
+            background: url("shopping_cart.png") no-repeat -60px -22px;
+            display: block;
+            width: 8px;
+            height: 8px;
+            margin: 10px auto 0 auto;
+        }
+
+        .page-shopping-cart .cart-product table .product-num .num-input {
+            width: 42px;
+            height: 28px;
+            line-height: 28px;
+            border: none;
+            text-align: center;
+        }
+
+        .page-shopping-cart .cart-product table .td-product {
+            text-align: left;
+            font-size: 12px;
+            line-height: 20px;
+        }
+
+        .page-shopping-cart .cart-product table .td-product img {
+            border: 1px solid #e3e3e3;
+            margin-right: 10px;
+        }
+
+        .page-shopping-cart .cart-product table .td-product .product-info {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .page-shopping-cart .cart-product table .td-do {
+            font-size: 12px;
+        }
+
+        .page-shopping-cart .cart-product-info {
+            height: 50px;
+            line-height: 50px;
+            background: #f7f7f7;
+            padding-left: 20px;
+        }
+
+        .page-shopping-cart .cart-product-info .delect-product {
+            color: #666;
+        }
+
+        .page-shopping-cart .cart-product-info .delect-product span {
+            display: inline-block;
+            vertical-align: top;
+            margin: 18px 8px 0 0;
+            width: 13px;
+            height: 15px;
+            background: url("shopping_cart.png") no-repeat -60px 0;
+        }
+
+        .page-shopping-cart .cart-product-info .product-total {
+            font-size: 14px;
+            color: #e94826;
+        }
+
+        .page-shopping-cart .cart-product-info .product-total span {
+            font-size: 20px;
+        }
+
+        .page-shopping-cart .cart-product-info .check-num {
+            color: #333;
+        }
+
+        .page-shopping-cart .cart-product-info .check-num span {
+            color: #e94826;
+        }
+
+        .page-shopping-cart .cart-product-info .keep-shopping {
+            color: #666;
+            margin-left: 40px;
+        }
+
+        .page-shopping-cart .cart-product-info .keep-shopping span {
+            display: inline-block;
+            vertical-align: top;
+            margin: 18px 8px 0 0;
+            width: 15px;
+            height: 15px;
+            background: url("shopping_cart.png") no-repeat -40px 0;
+        }
+
+        .page-shopping-cart .cart-product-info .btn-buy {
+            height: 50px;
+            color: #fff;
+            font-size: 20px;
+            display: block;
+            width: 110px;
+            background: #ff7700;
+            text-align: center;
+            margin-left: 30px;
+        }
+
+        .page-shopping-cart .cart-worder {
+            padding: 20px;
+        }
+
+        .page-shopping-cart .cart-worder .choose-worder {
+            color: #fff;
+            display: block;
+            background: #39e;
+            width: 140px;
+            height: 40px;
+            line-height: 40px;
+            border-radius: 4px;
+            text-align: center;
+            margin-right: 20px;
+        }
+
+        .page-shopping-cart .cart-worder .choose-worder span {
+            display: inline-block;
+            vertical-align: top;
+            margin: 9px 10px 0 0;
+            width: 22px;
+            height: 22px;
+            background: url("shopping_cart.png") no-repeat -92px 0;
+        }
+
+        .page-shopping-cart .cart-worder .worker-info {
+            color: #666;
+        }
+
+        .page-shopping-cart .cart-worder .worker-info img {
+            border-radius: 100%;
+            margin-right: 10px;
+        }
+
+        .page-shopping-cart .cart-worder .worker-info span {
+            color: #000;
+        }
+
+        .choose-worker-box {
+            width: 620px;
+            background: #fff;
+        }
+
+        .choose-worker-box .box-title {
+            height: 40px;
+            line-height: 40px;
+            background: #F7F7F7;
+            text-align: center;
+            position: relative;
+            font-size: 14px;
+        }
+
+        .choose-worker-box .box-title a {
+            display: block;
+            position: absolute;
+            top: 15px;
+            right: 16px;
+            width: 10px;
+            height: 10px;
+            background: url("shopping_cart.png") no-repeat -80px 0;
+        }
+
+        .choose-worker-box .box-title a:hover {
+            background: url("shopping_cart.png") no-repeat -80px -22px;
+        }
+
+        .choose-worker-box .worker-list {
+            padding-top: 30px;
+            height: 134px;
+            overflow-y: auto;
+        }
+
+        .choose-worker-box .worker-list li {
+            float: left;
+            width: 25%;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .choose-worker-box .worker-list li p {
+            margin-top: 8px;
+        }
+
+        .choose-worker-box .worker-list li.cur a {
+            color: #f70;
+        }
+
+        .choose-worker-box .worker-list li.cur a img {
+            border: 1px solid #f70;
+        }
+
+        .choose-worker-box .worker-list li a:hover {
+            color: #f70;
+        }
+
+        .choose-worker-box .worker-list li a:hover img {
+            border: 1px solid #f70;
+        }
+
+        .choose-worker-box .worker-list li img {
+            border: 1px solid #fff;
+            border-radius: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="page-shopping-cart" id="shopping-cart">
+        <h4 class="cart-title">购物清单</h4>
+        <div class="cart-product-title clearfix">
+            <div class="td-check fl"><span class="check-span fl check-all"></span>全选</div>
+            <div class="td-product fl">商品</div>
+            <div class="td-num fl">数量</div>
+            <div class="td-price fl">单价(元)</div>
+            <div class="td-total fl">金额(元)</div>
+            <div class="td-do fl">操作</div>
+        </div>
+        <div class="cart-product clearfix">
+            <table>
+                <tbody>
+                    <tr>
+                        <td class="td-check"><span class="check-span"></span></td>
+                        <td class="td-product"><img src="./images/testimg.png" width="98" height="98">
+                            <div class="product-info">
+                                <h6>【斯文】甘油&nbsp;|&nbsp;丙三醇</h6>
+                                <p>品牌：韩国skc&nbsp;&nbsp;产地：韩国</p>
+                                <p>规格/纯度:99.7%&nbsp;&nbsp;起定量：215千克</p>
+                                <p>配送仓储：上海仓海仓储</p>
+                            </div>
+                            <div class="clearfix"></div>
+                        </td>
+                        <td class="td-num">
+                            <div class="product-num">
+                                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
+                                <input type="text" class="num-input" value="3">
+                                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
+                            </div>
+                        </td>
+                        <td class="td-price">
+                            <p class="red-text">￥<span class="price-text">800</span>.00</p>
+                        </td>
+                        <td class="td-total">
+                            <p class="red-text">￥<span class="total-text">800</span>.00</p>
+                        </td>
+                        <td class="td-do"><a href="javascript:;" class="product-delect">删除</a></td>
+                    </tr>
+                    <tr>
+                        <td class="td-check"><span class="check-span check-true"></span></td>
+                        <td class="td-product"><img src="./images/testimg.png" width="98" height="98">
+                            <div class="product-info">
+                                <h6>【斯文】甘油&nbsp;|&nbsp;丙三醇</h6>
+                                <p>品牌：韩国skc&nbsp;&nbsp;产地：韩国</p>
+                                <p>规格/纯度:99.7%&nbsp;&nbsp;起定量：215千克</p>
+                                <p>配送仓储：上海仓海仓储</p>
+                            </div>
+                            <div class="clearfix"></div>
+                        </td>
+                        <td class="td-num">
+                            <div class="product-num">
+                                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
+                                <input type="text" class="num-input" value="1">
+                                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
+                            </div>
+                        </td>
+                        <td class="td-price">
+                            <p class="red-text">￥<span class="price-text">800</span>.00</p>
+                        </td>
+                        <td class="td-total">
+                            <p class="red-text">￥<span class="total-text">800</span>.00</p>
+                        </td>
+                        <td class="td-do"><a href="javascript:;" class="product-delect">删除</a></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="cart-product-info">
+            <a class="delect-product" href="javascript:;"><span></span>删除所选商品</a>
+            <a class="keep-shopping" href="#"><span></span>继续购物</a>
+            <a class="btn-buy fr" href="javascript:;">去结算</a>
+            <p class="fr product-total">￥<span>1600</span></p>
+            <p class="fr check-num"><span>2</span>件商品总计（不含运费）：</p>
+        </div>
+        <div class="cart-worder clearfix">
+            <a href="javascript:;" class="choose-worder fl"><span></span>绑定跟单员</a>
+            <div class="worker-info fl">
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+    new Vue({
+        el: '#shopping-cart',
+        data: {
+            productList: [
+                {
+                    'pro_name': '【斯文】甘油 | 丙三醇 --1',//产品名称
+                    'pro_brand': 'skc',//品牌名称
+                    'pro_place': '韩国',//产地
+                    'pro_purity': '99.7%',//规格
+                    'pro_min': "215千克",//最小起订量
+                    'pro_depot': '上海仓海仓储',//所在仓库
+                    'pro_num': 3,//数量
+                    'pro_img': './images/testimg.png',//图片链接
+                    'pro_price': 800,//单价
+                    'select': true //是否选中
+                },
+                {
+                    'pro_name': '【斯文】甘油 | 丙三醇 --2',//产品名称
+                    'pro_brand': 'skc',//品牌名称
+                    'pro_place': '韩国',//产地
+                    'pro_purity': '99.7%',//规格
+                    'pro_min': "215千克",//最小起订量
+                    'pro_depot': '上海仓海仓储',//所在仓库
+                    'pro_num': 3,//数量
+                    'pro_img': './images/testimg.png',//图片链接
+                    'pro_price': 800,//单价
+                    'select': false //是否选中
+                },
+                {
+                    'pro_name': '【斯文】甘油 | 丙三醇 --3',//产品名称
+                    'pro_brand': 'skc',//品牌名称
+                    'pro_place': '韩国',//产地
+                    'pro_purity': '99.7%',//规格
+                    'pro_min': "215千克",//最小起订量
+                    'pro_depot': '上海仓海仓储',//所在仓库
+                    'pro_num': 3,//数量
+                    'pro_img': './images/testimg.png',//图片链接
+                    'pro_price': 800,//单价
+                    'select': true //是否选中
+                }
+            ]
+        },
+        computed: {},
+        methods: {
+
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/three.vue" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/three.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..49db2184cdd3803218eaa775bad8856d6946f8fc
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/pages/three.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in shangpin" :item='item' :key='index'>
+            <router-link :to="{
+                name:'list',
+                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>
+     </div>
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          shangpin:[
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:'2.7',price:745},
+              {id:7,name:'薇诺娜winona面部护理专场',img:'../assets/wnn.jpg',num:'3.6',price:357},
+              {id:5,name:'AKF护肤彩妆专场',img:'../assets/akf.jpg',num:'5.7',price:264},
+              {id:6,name:'李宁LI-NING运动户外专场',img:'../assets/ln.jpg',num:'5.7',price:196}
+          ]
+      }
+  }
+}
+</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/vue.04.29/src/router/index.js" "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..3e993e661e1bef40158965cce9e7b7f1dda4591e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue.04.29/src/router/index.js"
@@ -0,0 +1,81 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//引入组件
+import BodyBase from '../pages/BodyBase'
+import BodyTwo from '../pages/BodyTwo'
+import three from '../pages/three'
+import threece from '../detail/threece'
+import adidas from '../detail/adidas'
+import akf from '../detail/akf'
+import lining from '../detail/lining'
+import ugg from '../detail/ugg'
+import ListAa from '../pages/ListAa'
+import shoppingcart from '../pages/ShoppingCart'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+            //     children: [
+            //         {
+            //             path: '3ce',
+            //             component: threece
+            //         }
+            //     ]
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path: '/two',
+            component: BodyTwo
+        },
+        {
+            path: '/three',
+            component: three
+        },
+        {
+            name: '3ce',
+            path: '/3ce/:id/:price/:checkbox',
+            component: threece,
+            props: true
+        },
+        {
+            path: '/adidas',
+            component: adidas
+        },
+        {
+            name: 'list',
+            path: '/list/:id/:name/:price',
+            component: ListAa,
+            props: true
+        },
+        {
+            path: '/ugg',
+            component: ugg
+        },
+        {
+            path: '/lining',
+            component: lining
+        },
+        {
+            path: '/akf',
+            component: akf
+        },
+        // {
+        //     path: '/cart',
+        //     component: shoppingcart
+        // },
+        {
+            name: '/cart',
+            path: '/cart',
+            component: shoppingcart,
+            props: true
+        }
+    ]
+})
+
+// export default router
\ No newline at end of file