diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/3ce.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/3ce.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/3ce.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/3ce.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/3ce.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/adidas.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/adidas.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/adidas.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/akf.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/akf.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/akf.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/akf.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/akf.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/akf.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/beijing.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/beijing.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/beijing.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/bottom.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/bottom.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/bottom.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/caidan.svg" "b/\351\231\210\345\207\257/wph v-max/public/assets/caidan.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/public/assets/caidan.svg"	
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>icon/Hamburger</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" opacity="0.600000024" stroke-linejoin="round">
+        <g id="icon/Hamburger" stroke="#000000" stroke-width="1.75">
+            <g id="Group-2" transform="translate(3.000000, 5.000000)">
+                <path d="M0,6.875 L18,6.875" id="Shape"></path>
+                <path d="M0,0.875 L18,0.875" id="Shape"></path>
+                <path d="M0,12.875 L18,12.875" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/center.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/center.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/center.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/gouwuche.png" "b/\351\231\210\345\207\257/wph v-max/public/assets/gouwuche.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/gouwuche.png" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/header.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/header.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/header.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/jiantou.png" "b/\351\231\210\345\207\257/wph v-max/public/assets/jiantou.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/jiantou.png" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/kefu.png" "b/\351\231\210\345\207\257/wph v-max/public/assets/kefu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/kefu.png" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/kouhong.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/kouhong.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/kouhong.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/lining.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/lining.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/lining.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/ln.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/ln.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/logo.png" "b/\351\231\210\345\207\257/wph v-max/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/logo.png" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/shenghuoguan.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/shenghuoguan.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/shenghuoguan.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/ugg.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/ugg.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/ugg.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/weipinhui.png" "b/\351\231\210\345\207\257/wph v-max/public/assets/weipinhui.png"
new file mode 100644
index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/weipinhui.png" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/wnn.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/wnn.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/yfl.jpg" "b/\351\231\210\345\207\257/wph v-max/public/assets/yfl.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/yfl.jpg" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/assets/zhengpin.webp" "b/\351\231\210\345\207\257/wph v-max/public/assets/zhengpin.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/assets/zhengpin.webp" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/favicon.ico" "b/\351\231\210\345\207\257/wph v-max/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/public/favicon.ico" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/public/index.html" "b/\351\231\210\345\207\257/wph v-max/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/public/index.html"	
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git "a/\351\231\210\345\207\257/wph v-max/src/App.vue" "b/\351\231\210\345\207\257/wph v-max/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..f9b29229ae2ebe2bca1589a0be660a3cfc4621ed
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/App.vue"	
@@ -0,0 +1,53 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  data:function(){
+    return{
+      show:false,
+    }
+  },
+
+}
+</script>
+
+<style>
+a {
+    text-decoration: none;
+    color: black;
+}
+
+li{
+  list-style: none;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+#nav{
+    margin-top: 0.5rem;
+    display: flex;
+    justify-content: space-around;
+}
+
+#nav > div{
+    width: 25%;
+}
+
+#nav > div > a:hover{
+    color: pink;
+}
+
+</style>
diff --git "a/\351\231\210\345\207\257/wph v-max/src/assets/logo.png" "b/\351\231\210\345\207\257/wph v-max/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
Binary files /dev/null and "b/\351\231\210\345\207\257/wph v-max/src/assets/logo.png" differ
diff --git "a/\351\231\210\345\207\257/wph v-max/src/components/car.vue" "b/\351\231\210\345\207\257/wph v-max/src/components/car.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1662e48570cb34a8947dfb3f3e2aef92dfd2c9c7
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/components/car.vue"	
@@ -0,0 +1,136 @@
+<template>
+    <div>
+        <div v-if="show">
+            <p>空空如也</p>
+        </div>
+        <table v-else border="1">
+            <tr>
+                <th>名称</th>
+                <th>价格</th>
+                <th>数量</th>
+                <th>操作</th>
+            </tr>
+            <tr v-for="(item,index) in shops" :key="index">
+                <td>{{item.name}}</td>
+                <td>￥{{item.price}}</td>
+                <td>
+                    <div id="num">
+                        <span id="jia" @click="jia">+</span><span :id="item.id">{{item.num}}</span><span id="jian" @click="jian">-</span>
+                    </div>
+                </td>
+                <td :id="item.id" @click="Delete" class="delete">删除商品</td>
+            </tr>
+        </table>
+        <div v-if="!show">
+            <button id="bto" @click="pay">结算</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name:"ShopCar",
+    data(){
+        return{
+            show:true,
+            shops:[],
+        }
+    },
+    mounted:function(){
+        let shops = JSON.parse(localStorage.getItem("shop"));
+        if(shops != null && shops.length != 0){
+            this.shops = shops
+            this.show = false
+        }
+        
+    },
+    methods:{
+        jia:function(event){
+            let get = JSON.parse(localStorage.getItem("shop"));
+            for (const key in get) {
+                if(get[key].id == event.target.nextElementSibling.id){
+                    event.target.nextElementSibling.innerText++
+                    let num = get[key].num;
+                    let item = {
+                        id:get[key].id,
+                        name: get[key].name,
+                        price: get[key].price,
+                        num: num+1
+                    }
+                    get[key] = item
+                    localStorage.setItem("shop",JSON.stringify(get))
+                }
+            }
+        },
+        jian:function(event){
+            let get = JSON.parse(localStorage.getItem("shop"));
+            for (const key in get) {
+                if(get[key].id == event.target.previousSibling.id){
+                    if(get[key].num != 1){
+                       event.target.previousSibling.innerText--
+                        let num = get[key].num;
+                        let item = {
+                        id:get[key].id,
+                        name: get[key].name,
+                        price: get[key].price,
+                        num: num-1
+                        }
+                        get[key] = item
+                        localStorage.setItem("shop",JSON.stringify(get)) 
+                    }else{
+                        alert("不可小于1")
+                    }
+                }
+            }
+        },
+        Delete:function(event){
+           let shops = JSON.parse(localStorage.getItem("shop")); 
+           for (const key in shops) {
+               if(shops[key].id == event.target.id){
+                   shops.splice(key,1)
+                   localStorage.setItem("shop",JSON.stringify(shops))
+                   this.$router.push({
+                       path:"/loding"
+                   })
+               }
+           }
+        },
+        pay:function(){
+            let shops = JSON.parse(localStorage.getItem("shop")); 
+            let price = 0;
+            for (const key in shops) {
+               price += parseInt(shops[key].price*shops[key].num)
+           }
+           console.log(price);
+        }
+    }
+}
+</script>
+
+<style scoped>
+    table{
+        font-size: 13px;
+    }
+
+    #num{
+        font-size: 15px;
+        display: flex;
+        width: 80px;
+        justify-content: space-around;
+    }
+    span{
+        width: 20px;
+        border: 1px solid black;
+    }
+    .delete{
+        cursor: pointer;
+    }
+    #bto{
+        position: absolute;
+        bottom: 1rem;
+        right: 1rem;
+        width: 4rem;
+        height: 2.5rem;
+        background-color:dodgerblue;
+    }
+</style>
\ No newline at end of file
diff --git "a/\351\231\210\345\207\257/wph v-max/src/components/loding.vue" "b/\351\231\210\345\207\257/wph v-max/src/components/loding.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7059adea9b55ebe5b990cdfe86818f187159687d
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/components/loding.vue"	
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <p @click="cli">正在刷新，点我立刻返回</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name:"LoDing",
+    methods:{
+        cli:function(){
+            this.$router.push({
+                path:"/car"
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+    p{
+        color: blue;
+    }
+</style>
\ No newline at end of file
diff --git "a/\351\231\210\345\207\257/wph v-max/src/components/qiang.vue" "b/\351\231\210\345\207\257/wph v-max/src/components/qiang.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..242ac665997f4458cd7df2dfe8cd79c2ccb3e8ca
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/components/qiang.vue"	
@@ -0,0 +1,78 @@
+<template>
+  <div id="img">
+    <scroller :on-refresh="refresh" :on-infinite="infinite">
+      <ul>
+        <li v-for="(item, index) in shop" :key="index">
+          <router-link
+            :to="{
+              path: '/shop',
+              query: {
+                id: index,
+                price: item.price,
+                name: item.text,
+              },
+            }"
+          >
+            <img :src="item.url" :id="index" />
+            <p>{{ item.text }}</p>
+          </router-link>
+        </li>
+      </ul>
+    </scroller>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FengQiang",
+  data: function () {
+    return {
+      shop: {
+        one: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"1000"
+        },
+        two: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"2000"
+        },
+        three: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"3000"
+        },
+        four: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"4000"
+        }
+      },
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+
+<style scoped>
+._v-container{
+  top: 8rem !important;
+  left: -1rem !important;
+}
+#img img {
+  height: 10rem;
+  width: 20rem;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\231\210\345\207\257/wph v-max/src/components/shop.vue" "b/\351\231\210\345\207\257/wph v-max/src/components/shop.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..76d73cbd86699fba181a242b35401906c978d627
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/components/shop.vue"	
@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <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">￥{{price+1}}</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" @click="cli">
+          <img src="../../public/assets/gouwuche.png" alt />
+          <br />
+          <span>购物车</span>
+        </div>
+        <div class="count">
+          <div class="jiage1">
+            <span>￥{{price+1}}</span>
+          </div>
+          <div class="jiage2" @click="link">
+            <div class="pri">
+              <span>￥{{price}}</span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ShopView",
+  data() {
+    return {
+      id: "",
+      name: "",
+      price: "",
+      only:false,
+      num:""
+    };
+  },
+  methods: {
+    link: function() {
+      let get = localStorage.getItem(`shop`);
+      if (get != null) {
+        let GGet = JSON.parse(get);
+        for (const key in GGet) {
+          if (GGet[key].id == this.id) {
+            this.only = true
+            this.num = key
+          } 
+        }
+        if(this.only){
+            let num = GGet[this.num].num;
+            let itemAdd = {"id":this.id,"name":this.name,"price":this.price,num:num+1};
+            GGet[this.num] = itemAdd;
+            localStorage.setItem(`shop`,JSON.stringify(GGet))
+            alert("已增加")
+        }else{
+            let arrrr = GGet;
+            let itemSet = {
+                id:this.id,
+                name: this.name,
+                price: this.price,
+                num: 1
+            };
+            arrrr.push(itemSet);
+
+            localStorage.setItem(`shop`,JSON.stringify(arrrr));
+            alert("已增加");
+          }
+      } else {
+            let itemOne = JSON.stringify([{
+                id:this.id,
+                name: this.name,
+                price: this.price,
+                num: 1
+            }]);
+            localStorage.setItem(`shop`, itemOne);
+            alert("已增加");
+      }
+    },
+    cli: function() {
+        this.$router.push({
+            path:"/car",
+        })
+    }
+  },
+  mounted() {
+    let query = this.$route.query;
+    for (var key in query) {
+      this[key] = query[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: 346px;
+  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: 340px;
+  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;
+}
+.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: 5px;
+  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;
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\231\210\345\207\257/wph v-max/src/components/top.vue" "b/\351\231\210\345\207\257/wph v-max/src/components/top.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..57937a4d0ec27dfcb79ca39c31fae3760c034639
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/components/top.vue"	
@@ -0,0 +1,124 @@
+<template>
+  <div id="shop">
+    <div id="Top">
+      <div id="logo">
+        <img
+          class="item"
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOQAAAA8CAMAAABB5Ob9AAAAh1BMVEUAAADfPZffPpbfPZffPZffPZfkQJvePpffP5jfPpfiQZnfPZffPpffPpffPZbgP5b/SrbgP5jhP5jePZffPZffQZffPpfoRZnjR5vfPpjfPZfgPZbhP5jgPpbgQJbfPpbzTKvfPZbfPpffPpfePZffPpfqSKLhP5jjPpjhQZnfPZffPpjePZZ5hFqyAAAALHRSTlMAuaHB9uEb2k+QIsVegdR6BGpG+pYn5xYRdKuTMms4tAfyzKbrVgs+NS2+b5zP9kQAAAPlSURBVGje7ZrpsqIwEEYbZBVQBAXccd/y/s83G7HjEEPYZuKte/6JBZUTpPtLEIRYe0I55PATp/g0AREhaUIGstxMPGsXQTtWeLEAQBnJaEcY4gm0wXlezDiBOpLrmLzihlBBzGUGAHNCSa6gjGQ4JSW2ZxBDuMwg1AllZEEzSXssw6iOZKYRiu3hCIeNJLM7oZhO9CQoji0jBuud5BZkWNSQHI4IZZDleB+OmwaSjk3k8f+Z5OZIKHoIAGOCVUNC0g5+49FziIqSPg5rXjw+eCSoltTgNy49RUXJAJujw+lyh/zzJfMFVokVN694aXPJxQqhbSVYMWT/QjJFmb0FDGdG/tZYcgpQ0UL6l2ST3CKv/BnLSy4VknR2ogLjYwZ61JLcOUN1JB/YKvyK1jIN5SXNGygjGU6Zpl8ZErRMVnKfgjKSmcbEN5m4N5SUnIEykkNbcJOQcIm3+/JpkpcjVsIQREye5Sf2lZOkj1MOHHwc+brGYjpQTHJNS504yZFEq8RmEsxZHclwo2Pm4CW5xuytWpLeHNHpRM0Zbu8kDbuCJMYGOORto7XAXElJtgjotYl93jZaK3aOYpKJI0pyZi2YRadCkvF+Xa6sc8GiX8wqYbYP+pMEXZqp+4jOwiSXXEGM6FkeZJKSeor4xbFxypBD12R3tkrKwV9i2rM2LaRXJi4lOEMTHniBvHPJ1BLxa8CZJSKF7ulc0iYi1phh3uDBb74lvyU/TNLRW7PuVfLov+ByJAP/hbgkOSatWfQqacILDkdyAy8Y35JfVnJusDxzrlGDg7zkaIlsaSZcMlw7lKx61zPsp7pW4/cumR+fw/y6kj4pOH1hSbp2SsK+JI0Eoav1XcJw6lvySgoClRJPx5K6ZNm5DgounyeZ0gZyBzFhQhukQBLnzFJJcixZdvDisSWQzM3ikQOFJEOTvsjJoYKhxGuC8Ll3rJLkiRS4UImG88GR9K5XZ/xcKEUqSQ7wv3CVnPg7iITDARSSvBFu2amIRvsqyW3eseQJz3onGReZGEpMa6UdF2+7SDKZhNCpJI7TeSt5wd/QX2QGPmYSRFTj8V7S1E9ngI4lNzE2Jr7keY9vL/5iLld2cLZ40xUhl1sGSFeS2WOHGzhcyTAa0f5WjjSmRNlBZh4pGIAEKGlqCJ3xkcYQlSQNjXIfxYRyYSU9vCbzrwCg4KxS/5EER3ZXoJpWqxA+Y0BJPt6Z0/gaMvkfkrsJVEkeyo6zpo5e+O8lTTcFsaSx3UCZZTPFeJpDPclkUEEETw6lL+/awl0zRcMvn69t9fGFO6pQ894weIu2cP0UZMHq+oVJD3/w4dP5AdK4gHoiM+nWAAAAAElFTkSuQmCC"
+          alt=""
+        />
+        <i></i>
+        <span class="item">品牌特卖·100%正品</span>
+      </div>
+      <div id="right">
+        <div><a class="item" href="#">登录</a></div>
+        <img
+          class="item"
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAAEgBckRAAAAAXNSR0IArs4c6QAAAb9JREFUaAXtV9FtAyEMJVWHuBGaJU7NYo3SLdJlUt0S6Qi3QvrT9p1kZKgBX4XTEMEPYB42fjb4bnO5fH45oT0IskV0jYVNW6daTdU9b0jGrq7T2+1ToBBzSQZQMmUDDWxiv+FvLEkOSrJ7cXo1SyyGquEjR8VM8jWMh2Fwp9P7rzRL4SAPDEBwPn+gExs/gBa3OlVFyxmhuYGAInDMaYgPdjy+LSItDuAgi3LKAe5BBgvV23WDXP34PwqDLLIwYH7RzA34IO92z26e5yxLeOC0OFLkDUC55oXU4siAOUXdAFGd7NunyKcpqlWu4KDYoGlxxJn5W+Q90N5QLY488Aa0N1SLIwPtZ1H3gGKZ7M0p8mmqvaFaHLlkfpPNKTL3gKiy6s0Zsjo46fVJSgL00zS5/f6l+BnG9/AxStPh8OrGcVzEtfVxW2IKUd3MfeZxJfE43h/PY3xpntvffAp1B0rht17vEbBmuKS/+QiIdQDvOL6d6fkqsSCt028K1mrr4/bEOsABtz4WI1C7ctbWx0kVI0Cp0ysxp8po3Pwr1B0wygy12h4BNVVGQLEO1K6ctfVxLsQ6wAG3Pu534L8j9A0FpO2FAWiBwgAAAABJRU5ErkJggg=="
+          alt=""
+        />
+      </div>
+    </div>
+    <div id="text">
+      <input type="text" />
+    </div>
+    <div id="nav">
+      <div><router-link to="/nav/tuijian">推荐</router-link></div>
+      <div><router-link to="/nav/qiang">3折疯抢</router-link></div>
+      <div><router-link to="/nav/kuai">唯品快抢</router-link></div>
+      <div><router-link to="/nav/guoji">国际</router-link></div>
+    </div>
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ShowTop",
+};
+</script>
+
+<style scoped>
+* {
+    font-size: 15px;
+    margin: 0;
+    padding: 0;
+}
+
+li{
+    cursor: pointer;
+    list-style: none;
+    padding-top: 2rem;
+}
+
+#Top {
+    position: absolute;
+    top: 2%;
+    left: 3%;
+    width: 100%;
+    display: flex;
+}
+#logo {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+#logo > img {
+    widows: 80px;
+    height: 20px;
+}
+#logo > i {
+    width: 8px;
+    height: 20px;
+    margin-left: 5px;
+    background: #eaebef;
+    border-radius: 5px;
+    display: inline-block;
+}
+#logo > span {
+    color: #98989f;
+    white-space: nowrap;
+    margin-left: 3%;
+}
+.item {
+    margin: auto;
+}
+
+#right {
+    width: 20%;
+    display: flex;
+    position: absolute;
+    right: 3%;
+}
+#right > img {
+    height: 25px;
+    width: 25px;
+}
+#right > div {
+    padding-right: 5%;
+}
+#right > a {
+    padding-right: 5%;
+}
+
+#text {
+    z-index: 7;
+    position: relative;
+    background-color: #f3f4f5;
+    height: 1.8rem;
+    border-radius: 1.1rem;
+    width: 24rem;
+    border: 2px solid #ccc;
+}
+#text > input {
+    border-radius: 1.1rem;
+    padding-left: 10px;
+    display: block;
+    border: 0;
+    outline: 0;
+    width: 97.5%;
+    height: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\231\210\345\207\257/wph v-max/src/components/tuijian.vue" "b/\351\231\210\345\207\257/wph v-max/src/components/tuijian.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..aa1d82a45f2a181aae659efd88829e30ba5850a4
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/components/tuijian.vue"	
@@ -0,0 +1,78 @@
+<template>
+    <div>
+      <scroller :on-refresh="refresh" :on-infinite="infinite">
+      <ul>
+      <li v-for="(item,index) in shop" :key="index">
+        <router-link :to="{
+            path:'/shop',
+            query:{
+                id:index,
+                price:item.price,
+                name:item.text
+            }
+        }">
+          <img :src="item.url" :id="index" />
+          <p>{{item.text}}</p>
+        </router-link>
+      </li>
+    </ul>
+    </scroller>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "TuiJian",
+  data: function() {
+    return {
+      shop: {
+        one: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"1000"
+        },
+        two: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"2000"
+        },
+        three: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"3000"
+        },
+        four: {
+          url:
+            "https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2021/09/10/120/ias_9cc066d345325608e6c3bac4832fa3ce_1135x545_85.jpg",
+          text: "添柏岚TIMBERLAND运动户外专场",
+          price:"4000"
+        }
+      }
+    };
+  },
+  methods:{
+    refresh:function(){
+      console.log("刷新");
+    },
+    infinite:function(){
+      console.log("拉取");
+    }
+  }
+};
+</script>
+
+<style scoped>
+._v-container{
+  top: 8rem !important;
+  left: -1rem !important;
+}
+
+ul img {
+  height: 10rem;
+  width: 20rem;
+}
+
+</style>
\ No newline at end of file
diff --git "a/\351\231\210\345\207\257/wph v-max/src/main.js" "b/\351\231\210\345\207\257/wph v-max/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..cea11dfa64325b8ddae1be32f01b1b920b775702
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/main.js"	
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from "vue-router"
+import router from "./router/Router"
+import VueScrol from "vue-scroller"
+
+Vue.use(VueRouter)
+Vue.use(VueScrol)
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+  router,
+}).$mount('#app')
diff --git "a/\351\231\210\345\207\257/wph v-max/src/router/Router.js" "b/\351\231\210\345\207\257/wph v-max/src/router/Router.js"
new file mode 100644
index 0000000000000000000000000000000000000000..73fa74f73056aa2241f92c4a1928b9c7e880feb9
--- /dev/null
+++ "b/\351\231\210\345\207\257/wph v-max/src/router/Router.js"	
@@ -0,0 +1,39 @@
+import VueRouter from "vue-router"
+import TuiJian from "../components/tuijian"
+import Qiang from "../components/qiang"
+
+export default new VueRouter({
+    routes: [
+        {
+            path: "/",
+            component: () => import("../components/top"),
+        },
+        {
+            path: "/nav",
+            component: () => import("../components/top"),
+            children:[
+                {
+                    path: "tuijian",
+                    component: TuiJian,
+                },
+                {
+                    path: "qiang",
+                    component: Qiang,
+                },
+            ]
+        },
+        {
+            path: "/shop",
+            component: () => import("../components/shop"),
+        },
+        {
+            path:"/car",
+            component:() => import("../components/car")
+        },
+        {
+            path:"/loding",
+            component:() => import("../components/loding")
+        }
+    ]
+})
+