diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/App.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1785b86657d3185cf2da520507d1454ae7efd887
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/App.vue"
@@ -0,0 +1,33 @@
+<template>
+  <div id="app">
+
+    <div class="head">
+      <HeadSearch msg="品牌特卖-100%正品"></HeadSearch>
+    </div>
+    
+    <BodyContent></BodyContent>
+  </div>
+</template>
+
+<script>
+import HeadSearch from "./components/HeadSearch.vue";
+import BodyContent from "./components/BodyContent.vue";
+
+export default {
+  name: "App",
+  components: {
+    HeadSearch,
+    BodyContent
+  }
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+.head {
+  border-bottom: 1px solid #d6d3d3;
+}
+</style>
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..063d55d4a9adfe9a63bc2bddadd5bfcf0a7c8587
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0557c4d6a28dde12249b7a54943a43365447f71f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65b343cd4aa0fa20e98a6f3032f32c53af7b682b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..995ec48bc66dc69c0bb3a9afaa95da9427480e26
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..78770720277970cad3f4ff52c4b4d8ddf8bcdbd4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/logo.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..272b409a43bd05889891f6a9125cfba303c77983
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/logo.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/menu.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/menu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bf6ebf348bf75eb2265775e6f1a708c3c8b880ac
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/assets/menu.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/components/BodyContent.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/components/BodyContent.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..84baa8acd9a875a6f5cf3fc67195e74cf1f00bbd
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/components/BodyContent.vue"
@@ -0,0 +1,75 @@
+<template>
+  <div class="body">
+    <ul>
+      <li>
+        <img src="../assets/1.jpg" alt />
+        <h4>科颜氏Kiehl's美容护肤专场</h4>
+        <p>
+          <span>3.9</span>折起
+        </p>
+      </li>
+      <li>
+          <img src="../assets/2.jpg" alt="">
+        <h4>李宁LI-NING户外运动专场</h4>
+        <p>
+          <span>1.8</span>折起
+        </p>
+      </li>
+      <li>
+        <img src="../assets/3.jpg" alt="">
+        <h4>三彩女装专场</h4>
+        <p>
+          <span>4</span>折封顶
+        </p>
+      </li>
+      <li>
+        <img src="../assets/4.jpg" alt="">
+        <h4>韩国三熹玉3CE彩妆香水专场</h4>
+        <p>
+          <span>4.6</span>折起
+        </p>
+      </li>
+      <li>
+        <img src="../assets/5.jpg" alt="">
+        <h4>薇诺娜winona面部护理专场</h4>
+        <p>
+          <span>2.1</span>折起
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent"
+};
+</script>
+
+<style scoped>
+.body{
+  background-color: #f3f4f5;
+}
+.body ul li{
+    width: 93%;
+    margin: 0 13px;
+    border-radius: 7px;
+    overflow: hidden;
+    background-color: white;
+    margin-bottom: 15px;
+    border: 1px solid #e2dbdb;
+}
+.body ul li h4{
+  margin: 10px 0 6px 12px;
+}
+.body ul li p{
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span{
+  color: #e93298;
+}
+.body ul li img{
+    width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/components/HeadSearch.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/components/HeadSearch.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3000dfd834a43406ca57d28d330453fa8397a136
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/components/HeadSearch.vue"
@@ -0,0 +1,112 @@
+<template>
+  <div class="demo">
+    <!-- 头部导航栏 -->
+    <div class="top">
+      <div class="left">
+        <img class="logo" src="../assets/logo.png" alt />
+        <span class="title">{{msg}}</span>
+      </div>
+
+      <div class="right">
+        <a href="#">登录</a>
+        <img class="menu" src="../assets/menu.png" alt />
+      </div>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="search">
+      <input type="text" placeholder="女休闲鞋"/>
+    </div>
+
+    <!-- 推荐 -->
+    <div class="tj">
+      <ul>
+        <li><a href="#">3折疯抢</a></li>
+        <li><a href="#">唯品快抢</a></li>
+        <li><a href="#">国际</a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeadSearch",
+  props: {
+    msg: String
+  }
+};
+</script>
+
+<style scoped>
+.top {
+  margin-top: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+.logo {
+  width: 100px;
+}
+.left {
+  display: flex;
+  align-items: center;
+}
+.title {
+  border-left: 2px solid #eeeef2;
+  padding-left: 10px;
+  margin-top: 3px;
+  color: #98989f;
+  font-size: 16px;
+}
+.right {
+  width: 20%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+ a {
+  font-size: 15px;
+  text-decoration: none;
+  color: #585c64;
+}
+.right .menu {
+  width: 25px;
+}
+
+.search {
+  padding: 3px 10px;
+  margin:5px 0;
+}
+.search input {
+  width: 100%;
+  height: 30px;
+  border-radius: 15px;
+  outline: none;
+  border: 0;
+  border: 1px solid #d3cece;
+  background-color: #f3f4f5;
+  padding-left: 10px;
+  box-sizing: border-box;
+  font-size: 15px;
+}
+input::placeholder{
+  color: rgb(144, 141, 141);
+}
+
+.tj ul{
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 5px;
+}
+.tj ul li{
+  list-style: none;
+  padding: 5px 0;
+}
+.tj ul li:hover{
+  border-bottom: 3px solid #e93298;
+}
+.tj ul li a:hover{
+  color: #e93298;
+}
+
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/main.js" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..63eb05f711c8cb5cda45128882fa69c351f105fb
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-20\350\204\232\346\211\213\346\236\266(\345\224\257\345\223\201\344\274\232)/src/main.js"
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..063d55d4a9adfe9a63bc2bddadd5bfcf0a7c8587
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0e89a3fe536ebfe92a386f5df94eb0c84be188b2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4b475394d7f26a6c8555d2f0ad967cc0d9fd4b6
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f8892d80d99bbfa359646dbb9055b246303bebb5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c258ce43986cc12051d1e26c7c288e066684c1f4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bef2ecf7ddccd5ddbca7a3acec56f3a2a22ceb72
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0557c4d6a28dde12249b7a54943a43365447f71f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4fee2c06a408483afde69491ca5a916f741f4b03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8495ece6d6e50072b8ce5eb7844f83c8c3eb500e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65fa24f6c2804d6752b79746cfd57683290941d0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d9e0084444d32f32f9c0d19e4b6919dfe1c1baa5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..db3c4f48436594c31daf3d1cf2d7b76b8d218042
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65b343cd4aa0fa20e98a6f3032f32c53af7b682b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/31.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/31.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d761f0003d5a90ef9f9126c8fbaf8358a63fdc4c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/31.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/32.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/32.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..178109912153918cd668791d59f77ee7a841c807
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/32.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/33.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/33.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4284a607a1ed1d3f4adffd314f5922c369b8329b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/33.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/34.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/34.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8af8ae3f8a72cdcc7743c69f20ac519e858a6485
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/34.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/35.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/35.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7c7dd9f4a543ae6cd97bd36cd08d26c06e29bfe9
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/35.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..995ec48bc66dc69c0bb3a9afaa95da9427480e26
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..78770720277970cad3f4ff52c4b4d8ddf8bcdbd4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/logo.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..272b409a43bd05889891f6a9125cfba303c77983
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/logo.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/menu.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/menu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bf6ebf348bf75eb2265775e6f1a708c3c8b880ac
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/assets/menu.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/favicon.ico" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/favicon.ico" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/index.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/App.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1e5707fa837895a99a9049f0d752a0ed099be936
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/App.vue"
@@ -0,0 +1,78 @@
+<template>
+  <div id="app">
+    <div class="head">
+      <HeadSearch msg="品牌特卖-100%正品"></HeadSearch>
+      <div class="tj">
+        <ul class="row">
+          <li v-on:click="change" class="bb">
+            <router-link to="/tj" active-class="click">推荐</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/fq" active-class="click">3折疯抢</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/kq" active-class="click">唯品快抢</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/gj" active-class="click">国际</router-link>
+          </li>
+        </ul>
+        <router-view></router-view>
+      </div>
+    </div>
+
+    <BodyContent></BodyContent>
+  </div>
+</template>
+
+<script>
+import HeadSearch from "./components/HeadSearch.vue";
+import BodyContent from "./components/BodyContent.vue";
+
+export default {
+  name: "App",
+  components: {
+    HeadSearch,
+    BodyContent
+  },
+  methods: {
+    change(event) {
+      // 从点击的li去父元素中找类名为bb的类
+      let last = event.currentTarget.parentElement.querySelector('.bb');
+      // 如果存在这个类的话就把这个类移除
+        if(last){
+          last.classList.remove('bb')
+      }
+      // 并给点击的这个添加这个类
+      event.currentTarget.classList.add('bb')
+    }
+  }
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+.tj {
+  border-bottom: 1px solid #d6d3d3;
+}
+.tj .row {
+  display: flex;
+  justify-content: space-evenly;
+  list-style: none;
+  line-height: 25px;
+}
+.tj .row li {
+  margin-bottom: 3px;
+}
+.tj .row li a {
+  text-decoration: none;
+  font-size: 14px;
+  color: #585c64;
+}
+.bb {
+  border-bottom: 3px solid #e93298;
+}
+</style>
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..063d55d4a9adfe9a63bc2bddadd5bfcf0a7c8587
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0e89a3fe536ebfe92a386f5df94eb0c84be188b2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4b475394d7f26a6c8555d2f0ad967cc0d9fd4b6
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f8892d80d99bbfa359646dbb9055b246303bebb5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c258ce43986cc12051d1e26c7c288e066684c1f4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bef2ecf7ddccd5ddbca7a3acec56f3a2a22ceb72
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0557c4d6a28dde12249b7a54943a43365447f71f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4fee2c06a408483afde69491ca5a916f741f4b03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8495ece6d6e50072b8ce5eb7844f83c8c3eb500e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65fa24f6c2804d6752b79746cfd57683290941d0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d9e0084444d32f32f9c0d19e4b6919dfe1c1baa5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..db3c4f48436594c31daf3d1cf2d7b76b8d218042
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65b343cd4aa0fa20e98a6f3032f32c53af7b682b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/31.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/31.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d761f0003d5a90ef9f9126c8fbaf8358a63fdc4c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/31.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/32.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/32.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..178109912153918cd668791d59f77ee7a841c807
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/32.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/33.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/33.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4284a607a1ed1d3f4adffd314f5922c369b8329b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/33.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/34.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/34.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8af8ae3f8a72cdcc7743c69f20ac519e858a6485
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/34.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/35.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/35.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7c7dd9f4a543ae6cd97bd36cd08d26c06e29bfe9
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/35.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..995ec48bc66dc69c0bb3a9afaa95da9427480e26
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..78770720277970cad3f4ff52c4b4d8ddf8bcdbd4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/logo.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..272b409a43bd05889891f6a9125cfba303c77983
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/logo.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/menu.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/menu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bf6ebf348bf75eb2265775e6f1a708c3c8b880ac
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/assets/menu.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyContent.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyContent.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..679bd68168bd4914bf050e9fe43cfcfd13b95db5
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyContent.vue"
@@ -0,0 +1,78 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          img: "../assets/1.jpg",
+          title: "科颜氏Kiehl's美容护肤专场",
+          discount: "3.9"
+        },
+        {
+          img: "../assets/2.jpg",
+          title: "李宁LI-NING运动户外专场",
+          discount: "1.8"
+        },
+        {
+          img: "../assets/3.jpg",
+          title: "三彩女装专场",
+          discount: "4.8"
+        },
+        {
+          img: "../assets/4.jpg",
+          title: "韩国三熹玉3CE彩妆香水专场",
+          discount: "4.6"
+        },
+        {
+          img: "../assets/5.jpg",
+          title: "薇诺娜winona面部护理专场",
+          discount: "2.1"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li h4 {
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyDiscount.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyDiscount.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..61c487adda18704c1864e6612826695710a4a600
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyDiscount.vue"
@@ -0,0 +1,78 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          img: "../assets/11.jpg",
+          title: "安瑞井ORIGIN女装专场",
+          discount: "3.0"
+        },
+        {
+          img: "../assets/12.jpg",
+          title: "AKF护肤彩妆专场",
+          discount: "2.1"
+        },
+        {
+          img: "../assets/13.jpg",
+          title: "乐町女装专场",
+          discount: "1.3"
+        },
+        {
+          img: "../assets/14.jpg",
+          title: "Semir男女鞋专场",
+          discount: "3"
+        },
+        {
+          img: "../assets/15.jpg",
+          title: "Ubras内衣专场",
+          discount: "2.4"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li h4 {
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyFast.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyFast.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7e38b08c97a2658afb15e477d4c5d2fadbfea39b
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyFast.vue"
@@ -0,0 +1,78 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          img: "../assets/21.jpg",
+          title: "杰欧适GEOX男女鞋专场",
+          discount: "1.3"
+        },
+        {
+          img: "../assets/22.jpg",
+          title: "万斯VANS运动户外专场",
+          discount: "2.3"
+        },
+        {
+          img: "../assets/23.jpg",
+          title: "汤臣倍健营养保健专场",
+          discount: "3.0"
+        },
+        {
+          img: "../assets/24.jpg",
+          title: "苹果APPLE电子数码专场",
+          discount: "6.1"
+        },
+        {
+          img: "../assets/25.jpg",
+          title: "史努比SNOOPY母婴鞋服专场",
+          discount: "4.6"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li h4 {
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyInternation.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyInternation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8c8b8c65e3a1ea695398e4c924b4a0ed1ad2211b
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/BodyInternation.vue"
@@ -0,0 +1,78 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          img: "../assets/31.jpg",
+          title: "米可熊camibear母婴鞋服专场",
+          discount: "3.9"
+        },
+        {
+          img: "../assets/32.jpg",
+          title: "ZARA男女装专场",
+          discount: "1.4"
+        },
+        {
+          img: "../assets/33.jpg",
+          title: "三彩女装专场",
+          discount: "4.8"
+        },
+        {
+          img: "../assets/34.jpg",
+          title: "播broadcast女装专场",
+          discount: "1.7"
+        },
+        {
+          img: "../assets/35.jpg",
+          title: "有兰女装专场",
+          discount: "0.8"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li h4 {
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/HeadSearch.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/HeadSearch.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f20bc083f8bbcfabb3fc38bfc91d43e52507cc6
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/components/HeadSearch.vue"
@@ -0,0 +1,120 @@
+<template>
+  <div class="demo">
+    <!-- 头部导航栏 -->
+    <div class="top">
+      <div class="left">
+        <img class="logo" src="../assets/logo.png" alt />
+        <span class="title">{{msg}}</span>
+      </div>
+
+      <div class="right">
+        <a href="#">登录</a>
+        <img class="menu" src="../assets/menu.png" alt />
+      </div>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="search">
+      <input type="text" placeholder="女休闲鞋" />
+    </div>
+
+    <!-- 推荐 -->
+    <!-- <div class="tj">
+      <ul>
+        <li v-for="(li,index) in list" :key="index">{{li}}</li>
+      </ul>
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeadSearch",
+  props: {
+    msg: String
+  },
+  data: function() {
+    return {
+      // list: ["推荐", "3折疯抢", "唯品快抢", "国际"]
+    };
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style scoped>
+.top {
+  margin-top: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+.logo {
+  width: 100px;
+}
+.left {
+  display: flex;
+  align-items: center;
+}
+.title {
+  border-left: 2px solid #eeeef2;
+  padding-left: 10px;
+  margin-top: 3px;
+  color: #98989f;
+  font-size: 16px;
+}
+.right {
+  width: 20%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+a {
+  font-size: 15px;
+  text-decoration: none;
+  color: #585c64;
+}
+.right .menu {
+  width: 25px;
+}
+
+.search {
+  padding: 3px 10px;
+  margin: 5px 0;
+}
+.search input {
+  width: 100%;
+  height: 30px;
+  border-radius: 15px;
+  outline: none;
+  border: 0;
+  border: 1px solid #d3cece;
+  background-color: #f3f4f5;
+  padding-left: 10px;
+  box-sizing: border-box;
+  font-size: 15px;
+}
+input::placeholder {
+  color: rgb(144, 141, 141);
+}
+
+/* .tj ul {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 5px;
+}
+.tj ul li {
+  list-style: none;
+  padding: 5px 0;
+}
+.tj ul li:first-child {
+  border-bottom: 3px solid #e93298;
+}
+.tj ul li:hover {
+  border-bottom: 3px solid #e93298;
+} 
+.tj ul li a:hover{
+  color: #e93298; 
+}  */
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/main.js" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..412cee91787236c5286cc6309b875d50f4a8aa0c
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/main.js"
@@ -0,0 +1,30 @@
+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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/router/index.js" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..c5589abffc40557fff00f905a387323594cb97d7
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-21router(\345\224\257\345\223\201\344\274\232)/src/router/index.js"
@@ -0,0 +1,28 @@
+//配置路由规则
+import VueRouter from 'vue-router'
+
+import BodyContent from '../components/BodyContent'
+import BodyDiscount from '../components/BodyDiscount'
+import BodyFast from '../components/BodyFast'
+import BodyInternation from '../components/BodyInternation'
+
+export default new VueRouter({
+    routes: [
+        {
+            path: "/tj",
+            component: BodyContent
+        },
+        {
+            path: "/fq",
+            component: BodyDiscount
+        },
+        {
+            path: "/kq",
+            component: BodyFast
+        },
+        {
+            path: "/gj",
+            component: BodyInternation
+        },
+    ]
+})
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..063d55d4a9adfe9a63bc2bddadd5bfcf0a7c8587
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0e89a3fe536ebfe92a386f5df94eb0c84be188b2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4b475394d7f26a6c8555d2f0ad967cc0d9fd4b6
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f8892d80d99bbfa359646dbb9055b246303bebb5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c258ce43986cc12051d1e26c7c288e066684c1f4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bef2ecf7ddccd5ddbca7a3acec56f3a2a22ceb72
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0557c4d6a28dde12249b7a54943a43365447f71f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4fee2c06a408483afde69491ca5a916f741f4b03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8495ece6d6e50072b8ce5eb7844f83c8c3eb500e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65fa24f6c2804d6752b79746cfd57683290941d0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d9e0084444d32f32f9c0d19e4b6919dfe1c1baa5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..db3c4f48436594c31daf3d1cf2d7b76b8d218042
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65b343cd4aa0fa20e98a6f3032f32c53af7b682b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/31.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/31.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d761f0003d5a90ef9f9126c8fbaf8358a63fdc4c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/31.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/32.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/32.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..178109912153918cd668791d59f77ee7a841c807
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/32.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/33.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/33.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4284a607a1ed1d3f4adffd314f5922c369b8329b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/33.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/34.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/34.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8af8ae3f8a72cdcc7743c69f20ac519e858a6485
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/34.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/35.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/35.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7c7dd9f4a543ae6cd97bd36cd08d26c06e29bfe9
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/35.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/3ce.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0cdaedd589497fc83e7ed43278e8199999993b1f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/3ce.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..995ec48bc66dc69c0bb3a9afaa95da9427480e26
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..78770720277970cad3f4ff52c4b4d8ddf8bcdbd4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/check.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/check.png"
new file mode 100644
index 0000000000000000000000000000000000000000..35b0213f191897d9d288caf7c38393b0e3c4de8f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/check.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/circle.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/circle.png"
new file mode 100644
index 0000000000000000000000000000000000000000..78f09d44f9c1aea687db2e12bbd390480a49d18d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/circle.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/d0.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/d0.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/d0.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/d1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/d1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..91783a12aa481cc068231904e7e84cc7fae3c6f0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/d1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/dBP.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/dBP.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bae81105cc7af2236748d14fde28807f3f15dfce
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/dBP.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/dPrice.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/dPrice.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/dPrice.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/erji.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/erji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4252dfdb0bb9bceae9a395006719384e9156d19d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/erji.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/gwc.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/gwc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/gwc.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/jt.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/jt.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/jt.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/ln.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e05976eccf9c9073cb0a5870daddc8394612c693
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/ln.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/logo.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..272b409a43bd05889891f6a9125cfba303c77983
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/logo.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/menu.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/menu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bf6ebf348bf75eb2265775e6f1a708c3c8b880ac
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/menu.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/sc.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/sc.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b6bda0cba72fb625dc1128c13aece3a5f55e89eb
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/sc.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/wnn.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f1332b5785cdbeb6945c924c27ca4073796b5fa1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/assets/wnn.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/favicon.ico" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/favicon.ico" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/index.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/App.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b188cb3c838264f8aba84400a4ea4859d84cee18
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/App.vue"
@@ -0,0 +1,33 @@
+<template>
+  <div id="app">
+    <div class="head">
+      <HeadSearch msg="品牌特卖-100%正品"></HeadSearch>
+      
+    </div>
+    
+
+  </div>
+</template>
+
+<script>
+import HeadSearch from "./components/HeadSearch.vue";
+
+
+export default {
+  name: "App",
+  components: {
+    HeadSearch
+  }
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.bb {
+  border-bottom: 3px solid #e93298;
+}
+</style>
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..063d55d4a9adfe9a63bc2bddadd5bfcf0a7c8587
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0e89a3fe536ebfe92a386f5df94eb0c84be188b2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4b475394d7f26a6c8555d2f0ad967cc0d9fd4b6
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f8892d80d99bbfa359646dbb9055b246303bebb5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c258ce43986cc12051d1e26c7c288e066684c1f4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bef2ecf7ddccd5ddbca7a3acec56f3a2a22ceb72
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0557c4d6a28dde12249b7a54943a43365447f71f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4fee2c06a408483afde69491ca5a916f741f4b03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8495ece6d6e50072b8ce5eb7844f83c8c3eb500e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65fa24f6c2804d6752b79746cfd57683290941d0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d9e0084444d32f32f9c0d19e4b6919dfe1c1baa5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..db3c4f48436594c31daf3d1cf2d7b76b8d218042
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65b343cd4aa0fa20e98a6f3032f32c53af7b682b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/31.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/31.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d761f0003d5a90ef9f9126c8fbaf8358a63fdc4c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/31.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/32.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/32.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..178109912153918cd668791d59f77ee7a841c807
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/32.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/33.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/33.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4284a607a1ed1d3f4adffd314f5922c369b8329b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/33.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/34.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/34.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8af8ae3f8a72cdcc7743c69f20ac519e858a6485
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/34.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/35.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/35.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7c7dd9f4a543ae6cd97bd36cd08d26c06e29bfe9
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/35.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/3ce.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0cdaedd589497fc83e7ed43278e8199999993b1f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/3ce.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..995ec48bc66dc69c0bb3a9afaa95da9427480e26
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..78770720277970cad3f4ff52c4b4d8ddf8bcdbd4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/check.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/check.png"
new file mode 100644
index 0000000000000000000000000000000000000000..35b0213f191897d9d288caf7c38393b0e3c4de8f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/check.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/circle.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/circle.png"
new file mode 100644
index 0000000000000000000000000000000000000000..78f09d44f9c1aea687db2e12bbd390480a49d18d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/circle.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/d0.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/d0.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/d0.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/d1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/d1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..91783a12aa481cc068231904e7e84cc7fae3c6f0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/d1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/dBP.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/dBP.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bae81105cc7af2236748d14fde28807f3f15dfce
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/dBP.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/dPrice.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/dPrice.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/dPrice.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/erji.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/erji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4252dfdb0bb9bceae9a395006719384e9156d19d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/erji.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/gwc.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/gwc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/gwc.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/jt.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/jt.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/jt.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/ln.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e05976eccf9c9073cb0a5870daddc8394612c693
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/ln.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/logo.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..272b409a43bd05889891f6a9125cfba303c77983
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/logo.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/menu.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/menu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bf6ebf348bf75eb2265775e6f1a708c3c8b880ac
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/menu.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/sc.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/sc.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b6bda0cba72fb625dc1128c13aece3a5f55e89eb
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/sc.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/shoppingcart.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/shoppingcart.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f30a624377f73d74f3d12ecf7dea24896ffecbc1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/shoppingcart.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/wnn.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f1332b5785cdbeb6945c924c27ca4073796b5fa1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/assets/wnn.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyContent.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyContent.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a5ca20ae8a90adeec726458ee81d3fc81ab0b987
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyContent.vue"
@@ -0,0 +1,126 @@
+<template>
+  <div class="demo">
+    <div class="body">
+      <ul>
+        <li v-for="(v,index) in list" :key="index">
+          <router-link
+            :to="{
+            name: 'detailone',
+            params:{
+              id: v.id,
+              nowprice:v.nowprice,
+              price: v.price,
+              discount:v.discount,
+              name: v.name,
+              mainimg:v.mainimg
+            }
+          }"
+          >
+            <img v-bind:src="v.img" />
+            <h4>{{v.title}}</h4>
+            <p>
+              <span>{{v.discount}}</span>折
+            </p>
+          </router-link>
+        </li>
+      </ul>
+    </div>
+
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          id: 1,
+          img: "../assets/1.jpg",
+          mainimg:"../assets/d1.jpg",
+          title: "科颜氏Kiehl's美容护肤专场",
+          nowprice: 198,
+          price: 280,
+          discount: "3.9",
+          name: "Kiehl's | 科颜氏亚马逊白泥净肤面膜泥膜142g/125ml"
+        },
+        {
+          id: 2,
+          img: "../assets/2.jpg",
+          mainimg:"../assets/ln.jpg",
+          title: "李宁LI-NING运动户外专场",
+          discount: "1.8",
+          nowprice: 60,
+          price: 169,
+          name:
+            "李宁 | 运动t恤跑步系列女子时尚休闲短袖t恤舒适训练健身圆领短袖t恤"
+        },
+        {
+          id: 3,
+          img: "../assets/3.jpg",
+          mainimg:"../assets/sc.jpg",
+          title: "三彩女装专场",
+          discount: "4.8",
+          nowprice: 320,
+          price: 939,
+          name:"三彩 | 【2022年春新品】蕾丝花边立领单排扣复古宫廷雪纺衫长袖衬衫"
+        },
+        {
+          id: 4,
+          img: "../assets/4.jpg",
+          mainimg:"../assets/3ce.jpg",
+          title: "韩国三熹玉3CE彩妆香水专场",
+          discount: "4.6",
+          nowprice: 110,
+          price: 234,
+          name: "3CE | 【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光显白烂番茄色南瓜色"
+        },
+        {
+          id: 5,
+          img: "../assets/5.jpg",
+          mainimg:"../assets/wnn.jpg",
+          title: "薇诺娜winona面部护理专场",
+          discount: "2.1",
+          nowprice: 320,
+          price: 169,
+          name:
+            "薇诺娜 | 【补水保湿】极润保湿洁水乳三件套深层补水干皮水乳护肤品套装"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+}
+.body ul li a {
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyDiscount.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyDiscount.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..aa6445ebd13ccc43215027b01fdbcf883a9e3c60
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyDiscount.vue"
@@ -0,0 +1,89 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <router-link :to="`/list?id=${v.id}&title=${v.title}`">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          id:1,
+          img: "../assets/11.jpg",
+          title: "安瑞井ORIGIN女装专场",
+          discount: "3.0"
+        },
+        {
+          id:2,
+          img: "../assets/12.jpg",
+          title: "AKF护肤彩妆专场",
+          discount: "2.1"
+        },
+        {
+          id:3,
+          img: "../assets/13.jpg",
+          title: "乐町女装专场",
+          discount: "1.3"
+        },
+        {
+          id:4,
+          img: "../assets/14.jpg",
+          title: "Semir男女鞋专场",
+          discount: "3"
+        },
+        {
+          id:5,
+          img: "../assets/15.jpg",
+          title: "Ubras内衣专场",
+          discount: "2.4"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li a{
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyFast.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyFast.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..35a3cd299601c48f142fb914a69e32b03720d78b
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyFast.vue"
@@ -0,0 +1,89 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <router-link :to="`/list?id=${v.id}&title=${v.title}`">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          id:1,
+          img: "../assets/21.jpg",
+          title: "杰欧适GEOX男女鞋专场",
+          discount: "1.3"
+        },
+        {
+          id:2,
+          img: "../assets/22.jpg",
+          title: "万斯VANS运动户外专场",
+          discount: "2.3"
+        },
+        {
+          id:3,
+          img: "../assets/23.jpg",
+          title: "汤臣倍健营养保健专场",
+          discount: "3.0"
+        },
+        {
+          id:4,
+          img: "../assets/24.jpg",
+          title: "苹果APPLE电子数码专场",
+          discount: "6.1"
+        },
+        {
+          id:5,
+          img: "../assets/25.jpg",
+          title: "史努比SNOOPY母婴鞋服专场",
+          discount: "4.6"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li a{
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyInternation.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyInternation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..369093e8d869d86d3b5c8af739bf95b28a93679e
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/BodyInternation.vue"
@@ -0,0 +1,84 @@
+id:1,<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <router-link :to="`/list?id=${v.id}&title=${v.title}`">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {id:1,
+          img: "../assets/31.jpg",
+          title: "米可熊camibear母婴鞋服专场",
+          discount: "3.9"
+        },
+        {id:2,
+          img: "../assets/32.jpg",
+          title: "ZARA男女装专场",
+          discount: "1.4"
+        },
+        {id:3,
+          img: "../assets/33.jpg",
+          title: "三彩女装专场",
+          discount: "4.8"
+        },
+        {id:4,
+          img: "../assets/34.jpg",
+          title: "播broadcast女装专场",
+          discount: "1.7"
+        },
+        {id:5,
+          img: "../assets/35.jpg",
+          title: "有兰女装专场",
+          discount: "0.8"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li a{
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/HeadSearch.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/HeadSearch.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b11d1a6614bba66d20fe72c1a2bc3451851b2523
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/HeadSearch.vue"
@@ -0,0 +1,138 @@
+<template>
+  <div class="demo">
+    <!-- 头部导航栏 -->
+    <div class="top">
+      <div class="left">
+        <img class="logo" src="../assets/logo.png" alt />
+        <span class="title">{{msg}}</span>
+      </div>
+
+      <div class="right">
+        <a href="#">登录</a>
+        <img class="menu" src="../assets/menu.png" alt />
+      </div>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="search">
+      <input type="text" placeholder="女休闲鞋" />
+    </div>
+
+    <!-- 推荐 -->
+    <div class="tj">
+        <ul class="row">
+          <li v-on:click="change" class="bb">
+            <router-link to="/tj" active-class="click">推荐</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/fq" active-class="click">3折疯抢</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/kq" active-class="click">唯品快抢</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/gj" active-class="click">国际</router-link>
+          </li>
+        </ul>
+      </div>
+      <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeadSearch",
+  props: {
+    msg: String
+  },
+  data: function() {
+    return {
+    };
+  },
+  methods: {
+    change(event) {
+      // 从点击的li去父元素中找类名为bb的类
+      let last = event.currentTarget.parentElement.querySelector(".bb");
+      // 如果存在这个类的话就把这个类移除
+      if (last) {
+        last.classList.remove("bb");
+      }
+      // 并给点击的这个添加这个类
+      event.currentTarget.classList.add("bb");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.logo {
+  width: 100px;
+}
+.left {
+  display: flex;
+  align-items: center;
+}
+.title {
+  border-left: 2px solid #eeeef2;
+  padding-left: 10px;
+  margin-top: 3px;
+  color: #98989f;
+  font-size: 16px;
+}
+.right {
+  width: 20%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+a {
+  font-size: 15px;
+  text-decoration: none;
+  color: #585c64;
+}
+.right .menu {
+  width: 25px;
+}
+
+.search {
+  padding: 3px 10px;
+  margin: 5px 0;
+}
+.search input {
+  width: 100%;
+  height: 30px;
+  border-radius: 15px;
+  outline: none;
+  border: 0;
+  border: 1px solid #d3cece;
+  background-color: #f3f4f5;
+  padding-left: 10px;
+  box-sizing: border-box;
+  font-size: 15px;
+}
+input::placeholder {
+  color: rgb(144, 141, 141);
+}
+
+.tj {
+  border-bottom: 1px solid #d6d3d3;
+}
+.tj .row {
+  display: flex;
+  justify-content: space-evenly;
+  list-style: none;
+  line-height: 25px;
+}
+.tj .row li {
+  margin-bottom: 3px;
+}
+.tj .row li a {
+  text-decoration: none;
+  font-size: 14px;
+  color: #585c64;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/ListShow.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/ListShow.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..372ea29c7f63419c7084007fa1cd9418574e3b7c
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/components/ListShow.vue"
@@ -0,0 +1,50 @@
+<template>
+  <div class="show">
+      <div v-if="id == 1">
+          <detail-one></detail-one>
+      </div>
+      <div v-if="id == 2">
+          <detail-two></detail-two>
+      </div>
+      <div v-if="id == 3">
+          <detail-three></detail-three>
+      </div>
+      <div v-if="id == 4">
+          <detail-four></detail-four>
+      </div>
+      <div v-if="id == 5">
+          <detail-five></detail-five>
+      </div>
+      
+  </div>
+</template>
+
+<script>
+import DetailOne from '../pages/DetailOne.vue'
+import DetailTwo from '../pages/DetailTwo.vue'
+import DetailThree from '../pages/DetailThree.vue'
+import DetailFour from '../pages/DetailFour.vue'
+import DetailFive from '../pages/DetailFive.vue'
+export default {
+    name: "ListShow",
+    data :function(){
+        return{
+            id: ""
+        }
+    },
+    components:{
+        DetailOne,
+        DetailTwo,
+        DetailThree,
+        DetailFour,
+        DetailFive
+    },
+    mounted(){
+        this.id = this.$route.query.id
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/main.js" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..412cee91787236c5286cc6309b875d50f4a8aa0c
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/main.js"
@@ -0,0 +1,30 @@
+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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailFive.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailFive.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..35284eb50b1ce46e3b307239472e6144353af8db
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailFive.vue"
@@ -0,0 +1,294 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{price}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥650</span>
+        <span>4.3折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥650</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥282</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailFive",
+  props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+ 
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailFour.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailFour.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..345622c50a4e9038dee810aec81dcdc2ed162c1f
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailFour.vue"
@@ -0,0 +1,294 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{price}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥110</span>
+        <span>7.2折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥110</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥79</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailFour",
+  props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailOne.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailOne.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7c19952771cef414f59800bf608bd330d05c1f4d
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailOne.vue"
@@ -0,0 +1,306 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{nowprice}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥{{price}}</span>
+        <span>{{discount}}折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png" />
+          购买咨询
+        </button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥{{price}}</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥{{nowprice}}</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailOne",
+  props: ["id", "mainimg", "name", "nowprice", "price", "discount"],
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车有没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      console.log(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        let count = 0;
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id === pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+            break;
+          }
+          // 利用循环，当id相等的时候，进入if判断里面，num就会加一并且break退出循环，
+          // 当id不相等的时候，count就会加一，当循环结束之后，判断循环的次数和数组的长度是否相等，
+          // 如果相等就代表遍历完整个数组，遍历完整个数组说明没有id相等的，那就新添加一条
+          count++;
+          // if (key == allProducts.length - 1) {
+          //   allProducts.push(pro);
+          //   console.log(888);
+          // }
+        }
+
+        if (count == allProducts.length) {
+          allProducts.push(pro);
+          console.log(888);
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+        console.log(allProducts);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result {
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span {
+  font-weight: bold;
+}
+.result .content button {
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+.afterprice a {
+  text-decoration: none;
+  color: white;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailThree.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailThree.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..78034fa2344c8bc2c629069ff90d8b3c3eaf942e
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailThree.vue"
@@ -0,0 +1,294 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{price}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥939</span>
+        <span>3.2折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥295</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥939</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailThree",
+      props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+      
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  } 
+ 
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailTwo.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailTwo.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9fc644857a2f5b33b9d97d7387ea8f2911da8393
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/DetailTwo.vue"
@@ -0,0 +1,293 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{nowprice}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥{{price}}</span>
+        <span>3.6折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥{{price}}</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥{{nowprice}}</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailTwo",
+    props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+      
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/ShoopingCartItem.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/ShoopingCartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..81908ea2246b9b0a56050a269fe75c5e65309a52
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/ShoopingCartItem.vue"
@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="cart-item-content">
+      <div class="cart-item-check">
+        <div class="check" :id="id" @click="changeStyle()"></div>
+      </div>
+      <div class="cart-item-img">
+        <img :src="mainimg" class="cart-img" />
+      </div>
+      <div class="cart-item-message">
+        <div class="cart-item-name">{{name}}</div>
+        <div class="cart-item-tag">
+          <span>十天保价</span>
+        </div>
+        <div class="cart-item-cell">
+          <div class="cart-item-price">
+            <span>￥{{nowprice}}</span>
+          </div>
+          <div class="cart-item-count">
+            <div class="count">
+              <span class="subtract" @click="subtract(id)">-</span>
+              <span class="num">{{num}}</span>
+              <span class="add" @click="add(id)">+</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ShoopingCartItem",
+  data: function() {
+    return {
+      items: "",
+      clickFlag: 0,
+    };
+  },
+  props: {
+    id: Number,
+    mainimg: String,
+    name: String,
+    num: Number,
+    nowprice: Number
+  },
+  created() {
+    this.items = JSON.parse(localStorage.getItem("cart"));
+  },
+  methods: {
+    add() {
+      // 通过加号的点击事件触发方法，然后用$emit来触发父组件的自定事件fromAdd()，并传递数据中的id,
+      // 再说的通俗易懂一些就是子组件可以调用父组件的方法
+      this.$emit("fromAdd", this.id);
+    },
+    subtract() {
+      // 通过减号的点击事件触发方法，然后用$emit来触发父组件的自定事件fromSubtract()，并传递数据中的id,
+      // 再说的通俗易懂一些就是子组件可以调用父组件的方法
+      this.$emit("fromSubtract", this.id);
+    },
+    changeStyle() {
+      if (this.clickFlag == 0) {
+        event.currentTarget.style.background = "url(../../assets/check.png)";
+        event.currentTarget.style.backgroundRepeat = "no-repeat";
+        event.currentTarget.style.backgroundSize = "100%";
+        this.clickFlag = 1;
+      } else {
+        event.currentTarget.style.background = "url(../../assets/circle.png)";
+        event.currentTarget.style.backgroundRepeat = "no-repeat";
+        event.currentTarget.style.backgroundSize = "100%";
+        this.clickFlag = 0;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.cart-item-content {
+  display: flex;
+  align-items: center;
+  margin: 30px 0;
+}
+.cart-item-img {
+  width: 30%;
+  height: 90px;
+}
+.cart-item-img img {
+  width: 90px;
+}
+.cart-item-message {
+  width: 61%;
+}
+.cart-item-name {
+  white-space: nowrap; /*让文字在一行显示 */
+  overflow: hidden; /*溢出的内容隐藏 */
+  text-overflow: ellipsis; /*显示不全的文字用省略号代替 */
+  font-size: 14px;
+}
+.cart-item-check {
+  margin-right: 10px;
+  width: 9%;
+}
+.check {
+  width: 18px;
+  height: 18px;
+  background: url(../assets/circle.png);
+  background-size: 100%;
+}
+.cart-item-img {
+  margin-right: 10px;
+}
+.cart-item-tag span {
+  display: block;
+  width: 66px;
+  height: 16px;
+  font-size: 12px;
+  border-radius: 5px;
+  text-align: center;
+  padding: 2px 5px;
+  color: #627db6;
+  background-color: #edf3ff;
+  margin: 13px 0;
+}
+.cart-item-price span {
+  font-size: 16px;
+  color: #f03867;
+  font-weight: bold;
+}
+.cart-item-cell {
+  height: 25px;
+  display: flex;
+  justify-content: space-between;
+}
+.count .add,
+.count .subtract {
+  text-align: center;
+  display: inline-block;
+  width: 25px;
+  height: 100%;
+  border: 1px solid #e7e7e7;
+}
+.count .subtract {
+  display: inline-block;
+  border-radius: 18px 0 0 18px;
+}
+.count .add {
+  display: inline-block;
+  border-radius: 0 18px 18px 0;
+}
+.count .num {
+  display: inline-block;
+  text-align: center;
+  width: 35px;
+  height: 100%;
+  border: 1px solid #e7e7e7;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/ShoppingCart.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/ShoppingCart.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b6a167e02694267e6a5c132888552877fbbeb453
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/pages/ShoppingCart.vue"
@@ -0,0 +1,323 @@
+<template>
+  <div class="cart">
+    <div class="cart-title">购物车</div>
+    <div class="address">配送至广州市</div>
+    <div class="logal">
+      <img src="../assets/shoppingcart.png" alt />
+    </div>
+    <div class="cart-content">
+      <div class="top-title">唯品自营</div>
+
+      <div class="cart-item">
+        <ShoopingCartItem
+          ref="shopping"
+          v-for="(item,index) in items"
+          :key="index"
+          :id="item.id"
+          :name="item.name"
+          :mainimg="item.mainimg"
+          :nowprice="item.nowprice"
+          :num="parseInt(item.num)"
+        ></ShoopingCartItem>
+      </div>
+    </div>
+
+    <div class="cart-foot">
+      <div class="cart-foot-cell">
+        <div class="cell-item-1">无可用券</div>
+        <div class="cell-item-2">
+          优惠券
+          <img src="../assets/jt.png" alt />
+        </div>
+      </div>
+      <div class="cart-foot-pay">
+        <div class="check-count">
+          <span style="font-size:12px" ref="check">已选({{checkNum}})</span>
+        </div>
+        <div class="count-num">
+          <span class="count-num-text">总计</span>
+          <span class="count-num-money">￥{{sumMoney}}</span>
+          <span style="color:#999999:font-size:14px">(不含运费)</span>
+        </div>
+        <div class="count-pay">
+          <div class="count-money">结算</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoopingCartItem from "./ShoopingCartItem.vue";
+export default {
+  name: "ShoppingCart",
+  data: function() {
+    return {
+      items: "",
+      sumMoney: 0,
+      checkNum:0
+    };
+  },
+
+  mounted() {
+    for (let key in this.$refs.shopping) {
+      //   this.$refs.shopping[key].$on('fromChildren',function(num){
+      //       console.log(this);//箭头函数是没有this，没有this 就往上找，上面的函数中的this 就是当前的实例，
+      //                         //vue中规则，触发者的普通函数中的this就是这个触发者
+      //       console.log('接收到了子组件的消息',num);
+      //   });
+      //$on 可以开启一个监听事件
+      this.$refs.shopping[key].$on("fromAdd", this.fromAdd);
+      this.$refs.shopping[key].$on("fromSubtract", this.fromSubtract);
+    }
+    
+  },
+  created() {
+    // 使用created函数初始化数据
+    this.items = JSON.parse(localStorage.getItem("cart"));
+    // 利用循环遍历data中的items，从localStroage取出的数据为数组，把每一条数据的数量和价格相乘并赋值给data中的sumMoney
+    for (let item in this.items) {
+      let products = this.items[item];
+      this.sumMoney += products.nowprice * products.num;
+    }
+  },
+  components: {
+    ShoopingCartItem
+  },
+  methods: {
+    // 增加数量
+    fromAdd(id) {
+      let products = JSON.parse(localStorage.getItem("cart"));
+      // 利用循环遍历data中的items，当data数据中的id与子组件点击传递的id相同时，将data中items对应的那条数据的num加一，
+      // 遍历的是data的数据，页面使用了items，所以能控制页面中num的改变
+      for (let item in this.items) {
+        let showitem = this.items[item];
+        if (showitem.id == id) {
+          showitem.num++;
+          // 当数量加一后，价格应该相应的变化，每次点击增加一件该商品，所以总价格应该增加 一件的数量 * 该商品的价格
+          this.sumMoney += 1 * showitem.nowprice;
+        }
+        for (let key in products) {
+          let currentProduct = products[key];
+          if (showitem.id == currentProduct.id) {
+            currentProduct.num = showitem.num;
+          }
+        }
+        localStorage.setItem("cart", JSON.stringify(products));
+      }
+    },
+    // 减少数量
+    fromSubtract(id) {
+      // 从localStroage中获取数据
+      let products = JSON.parse(localStorage.getItem("cart"));
+      // 利用循环遍历data中的items，当id相同时，将data中items对应的那条数据的num减一，遍历的是data的数据，页面使用了items，所以能控制页面中num的改变
+      for (let item in this.items) {
+        let showitem = this.items[item];
+        if(showitem.num > 1){
+          if (showitem.id == id) {
+          showitem.num--;
+          // 当数量减一后，价格应该相应的变化，每次点击减少一件该商品，所以总价格应该减去 一件的数量 * 该商品的价格
+          this.sumMoney -= 1 * showitem.nowprice;
+        }
+        // 遍历的是从localStroage中取出的数据
+        for (let key in products) {
+          let currentProduct = products[key];
+          // 如果localStroage中取出的数据的id与data中数据的id相等时，把data(这时候data的数据减一过)的数量赋值给localStroage中取出的数据
+          if (currentProduct.id == showitem.id) {
+            currentProduct.num = showitem.num;
+          }
+          // 再重新把被赋值过的localStroage的数据存回localStroage中
+          localStorage.setItem("cart", JSON.stringify(products));
+        }
+        }
+      }
+    },
+    fromCheck(num){
+      this.checkNum = num
+    }
+  }
+};
+</script>
+
+<style>
+.cart {
+  background-color: #f3f4f5;
+  overflow: auto;
+}
+.cart-title {
+  height: 45px;
+  width: 100%;
+  text-align: center;
+  line-height: 45px;
+  font-size: 18px;
+  background-color: #ffffff;
+}
+.address {
+  height: 36px;
+  width: 100%;
+  background-color: #ffffff;
+  text-align: center;
+  line-height: 36px;
+  color: #98989f;
+}
+.logal {
+  height: 35px;
+  width: 100%;
+  border-radius: 20px;
+  overflow: hidden;
+  margin: 10px;
+}
+.logal img {
+  width: 95%;
+}
+.cart-content {
+  width: 95%;
+  margin: 0 9px;
+  border-radius: 10px;
+  background-color: #ffffff;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.cart-content .cart-img {
+  width: 100%;
+}
+.cart-item-content {
+  display: flex;
+  align-items: center;
+  margin: 30px 0;
+}
+.cart-item-img {
+  width: 30%;
+  height: 90px;
+}
+.cart-item-img img {
+  width: 90px;
+}
+.cart-item-message {
+  width: 61%;
+}
+.cart-item-name {
+  white-space: nowrap; /*让文字在一行显示 */
+  overflow: hidden; /*溢出的内容隐藏 */
+  text-overflow: ellipsis; /*显示不全的文字用省略号代替 */
+  font-size: 14px;
+}
+.cart-item-check {
+  margin-right: 10px;
+  width: 9%;
+}
+.cart-item-img {
+  margin-right: 10px;
+}
+.cart-item-tag span {
+  display: block;
+  width: 66px;
+  height: 16px;
+  font-size: 12px;
+  border-radius: 5px;
+  text-align: center;
+  padding: 2px 5px;
+  color: #627db6;
+  background-color: #edf3ff;
+  margin: 13px 0;
+}
+.count-num {
+  white-space: nowrap; /*让文字在一行显示 */
+  overflow: hidden; /*溢出的内容隐藏 */
+  text-overflow: ellipsis; /*显示不全的文字用省略号代替 */
+}
+.cart-item-price span {
+  font-size: 16px;
+  color: #f03867;
+  font-weight: bold;
+}
+.cart-item-cell {
+  height: 25px;
+  display: flex;
+  justify-content: space-between;
+}
+.count .add,
+.count .subtract {
+  text-align: center;
+  display: inline-block;
+  width: 25px;
+  height: 100%;
+  border: 1px solid #e7e7e7;
+}
+.count .subtract {
+  display: inline-block;
+  border-radius: 18px 0 0 18px;
+}
+.count .add {
+  display: inline-block;
+  border-radius: 0 18px 18px 0;
+}
+.count .num {
+  display: inline-block;
+  text-align: center;
+  width: 35px;
+  height: 100%;
+  border: 1px solid #e7e7e7;
+}
+
+/* 底部 */
+.cart-foot {
+  position: fixed;
+  bottom: 0;
+  height: 97px;
+  width: 100%;
+}
+.cart-foot-cell {
+  height: 39px;
+  width: 100%;
+  background-color: #e6e8f4;
+  padding: 0 15px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cell-item-1 {
+  font-size: 12px;
+}
+.cell-item-2 {
+  font-size: 14px;
+}
+.cell-item-2 img {
+  width: 15px;
+}
+
+.cart-foot-pay {
+  height: 58px;
+  width: 100%;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+}
+
+.check-count {
+  width: 20%;
+}
+.count-num {
+  width: 43%;
+}
+.count-num-money {
+  color: #f03867;
+  font-weight: bold;
+  font-size: 20px;
+}
+.count-pay {
+  width: 30%;
+  text-align: center;
+}
+.count-money {
+  width: 115px;
+  height: 45px;
+  background-color: #caccd2;
+  text-align: center;
+  line-height: 45px;
+  border-radius: 10px;
+  color: #ffffff;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/router/index.js" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..b8e7d44b30e1d66627f36a9dd3c3424b188fb1a8
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232(\347\274\226\347\250\213\350\267\257\347\224\261)/src/router/index.js"
@@ -0,0 +1,86 @@
+//配置路由规则
+import VueRouter from 'vue-router'
+
+// 导航栏模块
+import BodyContent from '../components/BodyContent' // 推荐页面
+import BodyDiscount from '../components/BodyDiscount'  //3折疯抢
+import BodyFast from '../components/BodyFast'  //唯品快抢
+import BodyInternation from '../components/BodyInternation'  //国际
+
+// 列表
+import ListShow from '../components/ListShow'
+
+// 详情页
+import DetailOne from '../pages/DetailOne.vue'
+import DetailTwo from '../pages/DetailTwo.vue'
+import DetailThree from '../pages/DetailThree.vue'
+import DetailFour from '../pages/DetailFour.vue'
+import DetailFive from '../pages/DetailFive.vue'
+
+// 购物车
+import ShoppingCart from '../pages/ShoppingCart'
+
+export default new VueRouter({
+    routes: [
+        {
+            path:'/',
+            component:BodyContent
+        },
+        // 导航栏模块
+        {
+            path: "/tj",
+            component: BodyContent,
+            // children: [
+            //     {
+            //         path: 'detailone',
+            //         component:DetailOne
+            //     }
+            // ]
+        },
+        {
+            path: "/fq",
+            component: BodyDiscount
+        },
+        {
+            path: "/kq",
+            component: BodyFast
+        },
+        {
+            path: "/gj",
+            component: BodyInternation
+        },
+        // 列表
+        {
+            path:"/list",
+            component:ListShow
+        },
+        // 详情页
+        {
+            name: "detailone",
+            path:'/detailone/:id',
+            props:true,
+            component: DetailOne
+        },
+        {
+            path:'/detailtwo',
+            component: DetailTwo
+        },
+        {
+            path:'/detailthree',
+            component: DetailThree
+        },
+        {
+            path:'/detailfour',
+            component: DetailFour
+        },
+        {
+            path:'/detailfive',
+            component: DetailFive
+        },
+        // 购物车
+        {
+            path: "/cart",
+            component: ShoppingCart
+        }
+    ]
+})
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..063d55d4a9adfe9a63bc2bddadd5bfcf0a7c8587
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0e89a3fe536ebfe92a386f5df94eb0c84be188b2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4b475394d7f26a6c8555d2f0ad967cc0d9fd4b6
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f8892d80d99bbfa359646dbb9055b246303bebb5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c258ce43986cc12051d1e26c7c288e066684c1f4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bef2ecf7ddccd5ddbca7a3acec56f3a2a22ceb72
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0557c4d6a28dde12249b7a54943a43365447f71f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4fee2c06a408483afde69491ca5a916f741f4b03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8495ece6d6e50072b8ce5eb7844f83c8c3eb500e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65fa24f6c2804d6752b79746cfd57683290941d0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d9e0084444d32f32f9c0d19e4b6919dfe1c1baa5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..db3c4f48436594c31daf3d1cf2d7b76b8d218042
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65b343cd4aa0fa20e98a6f3032f32c53af7b682b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/31.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/31.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d761f0003d5a90ef9f9126c8fbaf8358a63fdc4c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/31.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/32.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/32.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..178109912153918cd668791d59f77ee7a841c807
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/32.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/33.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/33.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4284a607a1ed1d3f4adffd314f5922c369b8329b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/33.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/34.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/34.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8af8ae3f8a72cdcc7743c69f20ac519e858a6485
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/34.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/35.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/35.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7c7dd9f4a543ae6cd97bd36cd08d26c06e29bfe9
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/35.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/3ce.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0cdaedd589497fc83e7ed43278e8199999993b1f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/3ce.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..995ec48bc66dc69c0bb3a9afaa95da9427480e26
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..78770720277970cad3f4ff52c4b4d8ddf8bcdbd4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/check.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/check.png"
new file mode 100644
index 0000000000000000000000000000000000000000..35b0213f191897d9d288caf7c38393b0e3c4de8f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/check.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/circle.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/circle.png"
new file mode 100644
index 0000000000000000000000000000000000000000..78f09d44f9c1aea687db2e12bbd390480a49d18d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/circle.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/d0.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/d0.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/d0.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/d1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/d1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..91783a12aa481cc068231904e7e84cc7fae3c6f0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/d1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/dBP.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/dBP.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bae81105cc7af2236748d14fde28807f3f15dfce
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/dBP.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/dPrice.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/dPrice.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/dPrice.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/erji.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/erji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4252dfdb0bb9bceae9a395006719384e9156d19d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/erji.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/gwc.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/gwc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/gwc.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/jt.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/jt.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/jt.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/ln.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e05976eccf9c9073cb0a5870daddc8394612c693
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/ln.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/logo.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..272b409a43bd05889891f6a9125cfba303c77983
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/logo.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/menu.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/menu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bf6ebf348bf75eb2265775e6f1a708c3c8b880ac
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/menu.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/sc.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/sc.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b6bda0cba72fb625dc1128c13aece3a5f55e89eb
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/sc.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/wnn.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f1332b5785cdbeb6945c924c27ca4073796b5fa1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/assets/wnn.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/favicon.ico" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/favicon.ico" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/index.html" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/public/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/App.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b188cb3c838264f8aba84400a4ea4859d84cee18
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/App.vue"
@@ -0,0 +1,33 @@
+<template>
+  <div id="app">
+    <div class="head">
+      <HeadSearch msg="品牌特卖-100%正品"></HeadSearch>
+      
+    </div>
+    
+
+  </div>
+</template>
+
+<script>
+import HeadSearch from "./components/HeadSearch.vue";
+
+
+export default {
+  name: "App",
+  components: {
+    HeadSearch
+  }
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.bb {
+  border-bottom: 3px solid #e93298;
+}
+</style>
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..063d55d4a9adfe9a63bc2bddadd5bfcf0a7c8587
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/11.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0e89a3fe536ebfe92a386f5df94eb0c84be188b2
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/11.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/12.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/12.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4b475394d7f26a6c8555d2f0ad967cc0d9fd4b6
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/12.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/13.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/13.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f8892d80d99bbfa359646dbb9055b246303bebb5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/13.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/14.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/14.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c258ce43986cc12051d1e26c7c288e066684c1f4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/14.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/15.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/15.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bef2ecf7ddccd5ddbca7a3acec56f3a2a22ceb72
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/15.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/2.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0557c4d6a28dde12249b7a54943a43365447f71f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/2.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/21.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4fee2c06a408483afde69491ca5a916f741f4b03
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/21.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/22.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8495ece6d6e50072b8ce5eb7844f83c8c3eb500e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/22.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/23.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65fa24f6c2804d6752b79746cfd57683290941d0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/23.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/24.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d9e0084444d32f32f9c0d19e4b6919dfe1c1baa5
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/24.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/25.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..db3c4f48436594c31daf3d1cf2d7b76b8d218042
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/25.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/3.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..65b343cd4aa0fa20e98a6f3032f32c53af7b682b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/3.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/31.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/31.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d761f0003d5a90ef9f9126c8fbaf8358a63fdc4c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/31.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/32.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/32.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..178109912153918cd668791d59f77ee7a841c807
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/32.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/33.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/33.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4284a607a1ed1d3f4adffd314f5922c369b8329b
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/33.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/34.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/34.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8af8ae3f8a72cdcc7743c69f20ac519e858a6485
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/34.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/35.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/35.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7c7dd9f4a543ae6cd97bd36cd08d26c06e29bfe9
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/35.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/3ce.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/3ce.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0cdaedd589497fc83e7ed43278e8199999993b1f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/3ce.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/4.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..995ec48bc66dc69c0bb3a9afaa95da9427480e26
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/4.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/5.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..78770720277970cad3f4ff52c4b4d8ddf8bcdbd4
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/5.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/check.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/check.png"
new file mode 100644
index 0000000000000000000000000000000000000000..35b0213f191897d9d288caf7c38393b0e3c4de8f
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/check.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/circle.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/circle.png"
new file mode 100644
index 0000000000000000000000000000000000000000..78f09d44f9c1aea687db2e12bbd390480a49d18d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/circle.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/d0.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/d0.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/d0.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/d1.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/d1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..91783a12aa481cc068231904e7e84cc7fae3c6f0
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/d1.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/dBP.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/dBP.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bae81105cc7af2236748d14fde28807f3f15dfce
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/dBP.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/dPrice.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/dPrice.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/dPrice.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/erji.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/erji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4252dfdb0bb9bceae9a395006719384e9156d19d
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/erji.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/gwc.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/gwc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/gwc.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/jt.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/jt.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/jt.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/ln.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/ln.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e05976eccf9c9073cb0a5870daddc8394612c693
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/ln.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/logo.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..272b409a43bd05889891f6a9125cfba303c77983
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/logo.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/menu.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/menu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bf6ebf348bf75eb2265775e6f1a708c3c8b880ac
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/menu.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/sc.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/sc.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b6bda0cba72fb625dc1128c13aece3a5f55e89eb
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/sc.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/shoppingcart.png" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/shoppingcart.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f30a624377f73d74f3d12ecf7dea24896ffecbc1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/shoppingcart.png" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/wnn.jpg" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/wnn.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f1332b5785cdbeb6945c924c27ca4073796b5fa1
Binary files /dev/null and "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/assets/wnn.jpg" differ
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyContent.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyContent.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a5ca20ae8a90adeec726458ee81d3fc81ab0b987
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyContent.vue"
@@ -0,0 +1,126 @@
+<template>
+  <div class="demo">
+    <div class="body">
+      <ul>
+        <li v-for="(v,index) in list" :key="index">
+          <router-link
+            :to="{
+            name: 'detailone',
+            params:{
+              id: v.id,
+              nowprice:v.nowprice,
+              price: v.price,
+              discount:v.discount,
+              name: v.name,
+              mainimg:v.mainimg
+            }
+          }"
+          >
+            <img v-bind:src="v.img" />
+            <h4>{{v.title}}</h4>
+            <p>
+              <span>{{v.discount}}</span>折
+            </p>
+          </router-link>
+        </li>
+      </ul>
+    </div>
+
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          id: 1,
+          img: "../assets/1.jpg",
+          mainimg:"../assets/d1.jpg",
+          title: "科颜氏Kiehl's美容护肤专场",
+          nowprice: 198,
+          price: 280,
+          discount: "3.9",
+          name: "Kiehl's | 科颜氏亚马逊白泥净肤面膜泥膜142g/125ml"
+        },
+        {
+          id: 2,
+          img: "../assets/2.jpg",
+          mainimg:"../assets/ln.jpg",
+          title: "李宁LI-NING运动户外专场",
+          discount: "1.8",
+          nowprice: 60,
+          price: 169,
+          name:
+            "李宁 | 运动t恤跑步系列女子时尚休闲短袖t恤舒适训练健身圆领短袖t恤"
+        },
+        {
+          id: 3,
+          img: "../assets/3.jpg",
+          mainimg:"../assets/sc.jpg",
+          title: "三彩女装专场",
+          discount: "4.8",
+          nowprice: 320,
+          price: 939,
+          name:"三彩 | 【2022年春新品】蕾丝花边立领单排扣复古宫廷雪纺衫长袖衬衫"
+        },
+        {
+          id: 4,
+          img: "../assets/4.jpg",
+          mainimg:"../assets/3ce.jpg",
+          title: "韩国三熹玉3CE彩妆香水专场",
+          discount: "4.6",
+          nowprice: 110,
+          price: 234,
+          name: "3CE | 【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光显白烂番茄色南瓜色"
+        },
+        {
+          id: 5,
+          img: "../assets/5.jpg",
+          mainimg:"../assets/wnn.jpg",
+          title: "薇诺娜winona面部护理专场",
+          discount: "2.1",
+          nowprice: 320,
+          price: 169,
+          name:
+            "薇诺娜 | 【补水保湿】极润保湿洁水乳三件套深层补水干皮水乳护肤品套装"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+}
+.body ul li a {
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyDiscount.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyDiscount.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..aa6445ebd13ccc43215027b01fdbcf883a9e3c60
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyDiscount.vue"
@@ -0,0 +1,89 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <router-link :to="`/list?id=${v.id}&title=${v.title}`">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          id:1,
+          img: "../assets/11.jpg",
+          title: "安瑞井ORIGIN女装专场",
+          discount: "3.0"
+        },
+        {
+          id:2,
+          img: "../assets/12.jpg",
+          title: "AKF护肤彩妆专场",
+          discount: "2.1"
+        },
+        {
+          id:3,
+          img: "../assets/13.jpg",
+          title: "乐町女装专场",
+          discount: "1.3"
+        },
+        {
+          id:4,
+          img: "../assets/14.jpg",
+          title: "Semir男女鞋专场",
+          discount: "3"
+        },
+        {
+          id:5,
+          img: "../assets/15.jpg",
+          title: "Ubras内衣专场",
+          discount: "2.4"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li a{
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyFast.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyFast.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..35a3cd299601c48f142fb914a69e32b03720d78b
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyFast.vue"
@@ -0,0 +1,89 @@
+<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <router-link :to="`/list?id=${v.id}&title=${v.title}`">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {
+          id:1,
+          img: "../assets/21.jpg",
+          title: "杰欧适GEOX男女鞋专场",
+          discount: "1.3"
+        },
+        {
+          id:2,
+          img: "../assets/22.jpg",
+          title: "万斯VANS运动户外专场",
+          discount: "2.3"
+        },
+        {
+          id:3,
+          img: "../assets/23.jpg",
+          title: "汤臣倍健营养保健专场",
+          discount: "3.0"
+        },
+        {
+          id:4,
+          img: "../assets/24.jpg",
+          title: "苹果APPLE电子数码专场",
+          discount: "6.1"
+        },
+        {
+          id:5,
+          img: "../assets/25.jpg",
+          title: "史努比SNOOPY母婴鞋服专场",
+          discount: "4.6"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li a{
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyInternation.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyInternation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..369093e8d869d86d3b5c8af739bf95b28a93679e
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/BodyInternation.vue"
@@ -0,0 +1,84 @@
+id:1,<template>
+  <div class="body">
+    <ul>
+      <li v-for="(v,index) in list" :key="index">
+        <router-link :to="`/list?id=${v.id}&title=${v.title}`">
+        <img v-bind:src="v.img">
+        <h4>{{v.title}}</h4>
+        <p>
+          <span>{{v.discount}}</span>折
+        </p>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BodyContent",
+  data: function() {
+    return {
+      list: [
+        {id:1,
+          img: "../assets/31.jpg",
+          title: "米可熊camibear母婴鞋服专场",
+          discount: "3.9"
+        },
+        {id:2,
+          img: "../assets/32.jpg",
+          title: "ZARA男女装专场",
+          discount: "1.4"
+        },
+        {id:3,
+          img: "../assets/33.jpg",
+          title: "三彩女装专场",
+          discount: "4.8"
+        },
+        {id:4,
+          img: "../assets/34.jpg",
+          title: "播broadcast女装专场",
+          discount: "1.7"
+        },
+        {id:5,
+          img: "../assets/35.jpg",
+          title: "有兰女装专场",
+          discount: "0.8"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.body {
+  background-color: #f3f4f5;
+}
+.body ul li {
+  width: 93%;
+  margin: 0 13px;
+  border-radius: 7px;
+  overflow: hidden;
+  background-color: white;
+  margin-bottom: 15px;
+  border: 1px solid #e2dbdb;
+}
+.body ul li a{
+  text-decoration: none;
+}
+.body ul li a h4 {
+  color: #222222;
+  margin: 10px 0 6px 12px;
+}
+.body ul li p {
+  margin: 0 0 10px 12px;
+  color: rgb(118, 114, 114);
+}
+.body ul li p span {
+  color: #e93298;
+}
+.body ul li img{
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/HeadSearch.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/HeadSearch.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b11d1a6614bba66d20fe72c1a2bc3451851b2523
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/HeadSearch.vue"
@@ -0,0 +1,138 @@
+<template>
+  <div class="demo">
+    <!-- 头部导航栏 -->
+    <div class="top">
+      <div class="left">
+        <img class="logo" src="../assets/logo.png" alt />
+        <span class="title">{{msg}}</span>
+      </div>
+
+      <div class="right">
+        <a href="#">登录</a>
+        <img class="menu" src="../assets/menu.png" alt />
+      </div>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="search">
+      <input type="text" placeholder="女休闲鞋" />
+    </div>
+
+    <!-- 推荐 -->
+    <div class="tj">
+        <ul class="row">
+          <li v-on:click="change" class="bb">
+            <router-link to="/tj" active-class="click">推荐</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/fq" active-class="click">3折疯抢</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/kq" active-class="click">唯品快抢</router-link>
+          </li>
+          <li v-on:click="change">
+            <router-link to="/gj" active-class="click">国际</router-link>
+          </li>
+        </ul>
+      </div>
+      <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeadSearch",
+  props: {
+    msg: String
+  },
+  data: function() {
+    return {
+    };
+  },
+  methods: {
+    change(event) {
+      // 从点击的li去父元素中找类名为bb的类
+      let last = event.currentTarget.parentElement.querySelector(".bb");
+      // 如果存在这个类的话就把这个类移除
+      if (last) {
+        last.classList.remove("bb");
+      }
+      // 并给点击的这个添加这个类
+      event.currentTarget.classList.add("bb");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.logo {
+  width: 100px;
+}
+.left {
+  display: flex;
+  align-items: center;
+}
+.title {
+  border-left: 2px solid #eeeef2;
+  padding-left: 10px;
+  margin-top: 3px;
+  color: #98989f;
+  font-size: 16px;
+}
+.right {
+  width: 20%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+a {
+  font-size: 15px;
+  text-decoration: none;
+  color: #585c64;
+}
+.right .menu {
+  width: 25px;
+}
+
+.search {
+  padding: 3px 10px;
+  margin: 5px 0;
+}
+.search input {
+  width: 100%;
+  height: 30px;
+  border-radius: 15px;
+  outline: none;
+  border: 0;
+  border: 1px solid #d3cece;
+  background-color: #f3f4f5;
+  padding-left: 10px;
+  box-sizing: border-box;
+  font-size: 15px;
+}
+input::placeholder {
+  color: rgb(144, 141, 141);
+}
+
+.tj {
+  border-bottom: 1px solid #d6d3d3;
+}
+.tj .row {
+  display: flex;
+  justify-content: space-evenly;
+  list-style: none;
+  line-height: 25px;
+}
+.tj .row li {
+  margin-bottom: 3px;
+}
+.tj .row li a {
+  text-decoration: none;
+  font-size: 14px;
+  color: #585c64;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/ListShow.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/ListShow.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..372ea29c7f63419c7084007fa1cd9418574e3b7c
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/components/ListShow.vue"
@@ -0,0 +1,50 @@
+<template>
+  <div class="show">
+      <div v-if="id == 1">
+          <detail-one></detail-one>
+      </div>
+      <div v-if="id == 2">
+          <detail-two></detail-two>
+      </div>
+      <div v-if="id == 3">
+          <detail-three></detail-three>
+      </div>
+      <div v-if="id == 4">
+          <detail-four></detail-four>
+      </div>
+      <div v-if="id == 5">
+          <detail-five></detail-five>
+      </div>
+      
+  </div>
+</template>
+
+<script>
+import DetailOne from '../pages/DetailOne.vue'
+import DetailTwo from '../pages/DetailTwo.vue'
+import DetailThree from '../pages/DetailThree.vue'
+import DetailFour from '../pages/DetailFour.vue'
+import DetailFive from '../pages/DetailFive.vue'
+export default {
+    name: "ListShow",
+    data :function(){
+        return{
+            id: ""
+        }
+    },
+    components:{
+        DetailOne,
+        DetailTwo,
+        DetailThree,
+        DetailFour,
+        DetailFive
+    },
+    mounted(){
+        this.id = this.$route.query.id
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/main.js" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..412cee91787236c5286cc6309b875d50f4a8aa0c
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/main.js"
@@ -0,0 +1,30 @@
+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/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailFive.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailFive.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..35284eb50b1ce46e3b307239472e6144353af8db
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailFive.vue"
@@ -0,0 +1,294 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{price}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥650</span>
+        <span>4.3折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥650</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥282</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailFive",
+  props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+ 
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailFour.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailFour.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..345622c50a4e9038dee810aec81dcdc2ed162c1f
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailFour.vue"
@@ -0,0 +1,294 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{price}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥110</span>
+        <span>7.2折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥110</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥79</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailFour",
+  props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailOne.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailOne.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7c19952771cef414f59800bf608bd330d05c1f4d
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailOne.vue"
@@ -0,0 +1,306 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{nowprice}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥{{price}}</span>
+        <span>{{discount}}折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png" />
+          购买咨询
+        </button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥{{price}}</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥{{nowprice}}</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailOne",
+  props: ["id", "mainimg", "name", "nowprice", "price", "discount"],
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车有没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      console.log(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        let count = 0;
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id === pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+            break;
+          }
+          // 利用循环，当id相等的时候，进入if判断里面，num就会加一并且break退出循环，
+          // 当id不相等的时候，count就会加一，当循环结束之后，判断循环的次数和数组的长度是否相等，
+          // 如果相等就代表遍历完整个数组，遍历完整个数组说明没有id相等的，那就新添加一条
+          count++;
+          // if (key == allProducts.length - 1) {
+          //   allProducts.push(pro);
+          //   console.log(888);
+          // }
+        }
+
+        if (count == allProducts.length) {
+          allProducts.push(pro);
+          console.log(888);
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+        console.log(allProducts);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result {
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span {
+  font-weight: bold;
+}
+.result .content button {
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+.afterprice a {
+  text-decoration: none;
+  color: white;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailThree.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailThree.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..78034fa2344c8bc2c629069ff90d8b3c3eaf942e
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailThree.vue"
@@ -0,0 +1,294 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{price}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥939</span>
+        <span>3.2折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥295</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥939</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailThree",
+      props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+      
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  } 
+ 
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailTwo.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailTwo.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9fc644857a2f5b33b9d97d7387ea8f2911da8393
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/DetailTwo.vue"
@@ -0,0 +1,293 @@
+<template>
+  <div class="demo">
+    <div class="showImg">
+      <img :src="mainimg" alt />
+    </div>
+    <div class="price">
+      <div class="before">
+        <span>￥{{nowprice}}</span>
+      </div>
+      <div class="baopin">
+        <img src="../assets/dBP.jpg" alt />
+      </div>
+      <div class="after">
+        <span class="delete">￥{{price}}</span>
+        <span>3.6折</span>
+      </div>
+    </div>
+    <div class="titlename">
+      <div class="name">
+        <span class="flag">唯品国际</span>
+        <span class="flag">包税</span>
+        <span class="title">{{name}}</span>
+      </div>
+      <div class="baoyou">
+        <span>首单38元包邮</span>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+
+    <div class="outer">
+      <span class="yf">配送至</span>
+      <span class="describe">请选择配送地址</span>
+    </div>
+    <div class="outer">
+      <span class="yf">运费</span>
+      <span class="describe">新会员专享首单满38元包邮</span>
+    </div>
+
+    <div class="result">
+      <div class="top">
+        <span>售后与咨询</span>
+      </div>
+      <div class="content">
+        <button>
+          <img style="width:15px;" src="../assets/erji.png">
+          购买咨询</button>
+      </div>
+    </div>
+
+    <div class="zpbz">
+      <div class="zp">
+        <img src="../assets/d0.jpg" alt />
+      </div>
+      <div class="bz">100%正品·全球采购·正品险</div>
+      <div style="margin-left:100px">></div>
+    </div>
+    
+
+    <div class="bottom">
+      <div class="gwc">
+        <img style="width:23px;height:23px" src="../assets/gwc.png" alt />
+        <br />
+        <span style="font-size:12px">购物车</span>
+      </div>
+      <div class="discount">
+        <div class="countprice beforeprice">
+          <span style="font-size:20px">￥{{price}}</span>
+        </div>
+        <div class="countprice afterprice">
+          <div class="a1">
+            <span style="font-size:20px">￥{{nowprice}}</span>
+          </div>
+          <div class="a2" v-on:click="add2Card">
+            <span>特卖价 抢</span>
+            <img style="width:13px;height:13px" src="../assets/jt.png" alt />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailTwo",
+    props: ["id", "mainimg","name", "nowprice", "price", "discount"],
+  data: function() {
+    return {
+      
+    };
+  },
+  methods: {
+    add2Card: function() {
+      // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+      let key = "cart";
+      let pro = {
+        id: this.id,
+        name: this.name,
+        nowprice: this.nowprice,
+        mainimg: this.mainimg,
+        num: 1
+      };
+      //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+      let allProducts = localStorage.getItem(key); //因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+      //数组的字符串怎么转成数组?
+      allProducts = JSON.parse(allProducts);
+      //此次购物的商品可能已经存在购物车中
+      //还需要判断，是否是第一次购物，第一购物，没有数据
+      if (allProducts) {
+        for (let key in allProducts) {
+          //引用传递
+          let detailPro = allProducts[key]; //取出购物车中的每一个商品
+          //如果此次的购物商品已经存在
+          if (detailPro.id == pro.id) {
+            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
+          } else {
+            allProducts.push(pro);
+          }
+        }
+      } else {
+        //没有购物时候
+        allProducts = [];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key, JSON.stringify(allProducts));
+
+      //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+      //编程式的路由调转
+      //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+      this.$router.push({ path: "/cart" }); //path 方式调转
+      //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
+      //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
+      // push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
+      // adv  ---detail----cartList  回去  adv
+    }
+  }
+};
+</script>
+
+<style>
+.demo {
+  background-color: #f3f4f5;
+}
+.showImg img {
+  width: 100%;
+  vertical-align: bottom;
+}
+.price {
+  color: white;
+  width: 100%;
+  height: 77px;
+  background: url(../assets/dPrice.jpg) no-repeat 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.price .before {
+  font-size: 25px;
+  width: 280px;
+}
+.price .after span {
+  font-size: 14px;
+}
+.price .after .delete {
+  text-decoration: line-through;
+  margin-right: 6px;
+}
+.price .baopin {
+  float: right;
+  width: 72px;
+  margin-top: -20px;
+}
+.price .baopin img {
+  width: 100%;
+}
+.titlename {
+  background-color: #ffffff;
+  padding: 16px 12px;
+}
+.titlename .flag {
+  font-size: 14px;
+  border: 1px solid #6c5eab;
+  border-radius: 9px;
+  padding: 0 8px;
+  margin-right: 5px;
+}
+.titlename .title {
+  font-size: 17px;
+  line-height: 25px;
+}
+.titlename .baoyou span {
+  background-color: #36c88e;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+.zpbz {
+  background-color: #ffffff;
+  margin: 10px 0;
+  line-height: 47px;
+  display: flex;
+  padding: 10px;
+}
+.zpbz .zp {
+  width: 86px;
+  height: 15px;
+}
+.zpbz .zp img {
+  height: 100%;
+}
+.zpbz .bz {
+  font-size: 12px;
+  margin-left: 15px;
+}
+.outer {
+  padding: 10px;
+  display: flex;
+  line-height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.outer .yf {
+  display: block;
+  width: 55px;
+  font-weight: bold;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.outer .describe {
+  font-size: 12px;
+}
+.result{
+  background-color: #ffffff;
+  padding: 10px 10px;
+  margin-top: 10px;
+}
+.result .top span{
+  font-weight: bold;
+}
+.result .content button{
+  width: 300px;
+  height: 50px;
+  border: 0;
+  border: 1px solid #ccc;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin: 15px 40px;
+}
+.bottom {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.bottom .gwc {
+  width: 66px;
+}
+.bottom .countprice {
+  width: 168px;
+  height: 57px;
+}
+.bottom .discount {
+  display: flex;
+}
+.bottom .beforeprice {
+  background-color: #f688a4;
+  border-radius: 5px 0 0 5px;
+  text-decoration: line-through;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom .afterprice {
+  background-color: #f03867;
+  border-radius: 0 5px 5px 0;
+  color: white;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/ShoppingCart.vue" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/ShoppingCart.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..883a39f60260798512879f6ed1e92d9c6385cd32
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/pages/ShoppingCart.vue"
@@ -0,0 +1,323 @@
+<template>
+  <div class="cart">
+    <div class="cart-title">购物车</div>
+    <div class="address">配送至广州市</div>
+    <div class="logal">
+      <img src="../assets/shoppingcart.png" alt />
+    </div>
+    <div class="cart-content">
+      <div class="top-title">唯品自营</div>
+      <div class="cart-item">
+        <div class="cart-item-content" v-for="(item,index) in items" :key="index">
+          <div class="cart-item-check">
+            <div class="check" @click="changeStyle()"></div>
+          </div>
+          <div class="cart-item-img">
+            <img :src="item.mainimg" class="cart-img" />
+          </div>
+          <div class="cart-item-message">
+            <div class="cart-item-name">{{item.name}}</div>
+            <div class="cart-item-tag">
+              <span>十天保价</span>
+            </div>
+            <div class="cart-item-cell">
+              <div class="cart-item-price">
+                <span>￥{{item.nowprice}}</span>
+              </div>
+              <div class="cart-item-count">
+                <div class="count">
+                  <span class="subtract" @click="subtract(item.id)">-</span>
+                  <span class="num">{{item.num}}</span>
+                  <span class="add" @click="add(item.id)">+</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="cart-foot">
+      <div class="cart-foot-cell">
+        <div class="cell-item-1">无可用券</div>
+        <div class="cell-item-2">
+          优惠券
+          <img src="../assets/jt.png" alt />
+        </div>
+      </div>
+      <div class="cart-foot-pay">
+        <div class="check-count">
+          <span style="font-size:12px">已选</span>
+        </div>
+        <div class="count-num">
+          总计
+          <span class="count-num-money">￥{{sumMoney}}</span>
+          <span style="color:#999999:font-size:14px">(不含运费)</span>
+        </div>
+        <div class="count-pay">
+          <div class="count-money">结算</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ShoppingCart",
+  data: function() {
+    return {
+      items: "",
+      clickFlag:0,
+      sumMoney: 0
+    };
+  },
+  methods: {
+    subtract(id) {
+      let products = JSON.parse(localStorage.getItem("cart"));
+      for (let item in this.items) {
+        let showitem = this.items[item];
+        if(showitem.num > 1){
+          if (showitem.id == id) {
+          showitem.num--;
+          // 当数量减一后，价格应该相应的变化，每次点击减少一件该商品，所以总价格应该减去 一件的数量 * 该商品的价格
+          this.sumMoney -= 1 * showitem.nowprice;
+        }
+        for (let key in products) {
+          let currentProduct = products[key];
+          if (showitem.id == currentProduct.id) {
+            currentProduct.num = showitem.num;
+          }
+        }
+        localStorage.setItem("cart", JSON.stringify(products));
+        }
+      }
+    },
+    add(id) {
+      let products = JSON.parse(localStorage.getItem("cart"));
+      for (let item in this.items) {
+        let showitem = this.items[item];
+        if (showitem.id == id) {
+          showitem.num++;
+          this.sumMoney += 1 * showitem.nowprice
+        }
+        for (let key in products) {
+          let currentProduct = products[key];
+          if (showitem.id == currentProduct.id) {
+            currentProduct.num = showitem.num;
+          }
+        }
+        localStorage.setItem("cart", JSON.stringify(products));
+      }
+    },
+    changeStyle() {
+      if (this.clickFlag == 0) {
+        event.currentTarget.style.background = "url(../assets/check.png)";
+        event.currentTarget.style.backgroundRepeat = "no-repeat";
+        event.currentTarget.style.backgroundSize = "100%";
+        this.clickFlag = 1;
+      } else {
+        event.currentTarget.style.background = "url(../assets/circle.png)";
+        event.currentTarget.style.backgroundRepeat = "no-repeat";
+        event.currentTarget.style.backgroundSize = "100%";
+        this.clickFlag = 0;
+      }
+    }
+  },
+  created() {
+    this.items = JSON.parse(localStorage.getItem("cart"));
+    for (let item in this.items) {
+      let products = this.items[item];
+      this.sumMoney += products.nowprice * products.num;
+    }
+  }
+};
+</script>
+
+<style>
+.cart {
+  background-color: #f3f4f5;
+  overflow: auto;
+}
+.cart-title {
+  height: 45px;
+  width: 100%;
+  text-align: center;
+  line-height: 45px;
+  font-size: 18px;
+  background-color: #ffffff;
+}
+.address {
+  height: 36px;
+  width: 100%;
+  background-color: #ffffff;
+  text-align: center;
+  line-height: 36px;
+  color: #98989f;
+}
+.logal {
+  height: 35px;
+  width: 100%;
+  border-radius: 20px;
+  overflow: hidden;
+  margin: 10px;
+}
+.logal img {
+  width: 95%;
+}
+.cart-content {
+  width: 95%;
+  margin: 0 9px;
+  border-radius: 10px;
+  background-color: #ffffff;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.cart-content .cart-img {
+  width: 100%;
+}
+.cart-item-content {
+  display: flex;
+  align-items: center;
+  margin: 30px 0;
+}
+.cart-item-img {
+  width: 30%;
+  height: 90px;
+}
+.cart-item-img img {
+  width: 90px;
+}
+.cart-item-message {
+  width: 61%;
+}
+.cart-item-name {
+  white-space: nowrap; /*让文字在一行显示 */
+  overflow: hidden; /*溢出的内容隐藏 */
+  text-overflow: ellipsis; /*显示不全的文字用省略号代替 */
+  font-size: 14px;
+}
+.cart-item-check {
+  margin-right: 10px;
+  width: 9%;
+}
+.check {
+  width: 18px;
+  height: 18px;
+  background: url(../assets/circle.png);
+  background-size: 100%;
+}
+.cart-item-img {
+  margin-right: 10px;
+}
+.cart-item-tag span {
+  display: block;
+  width: 66px;
+  height: 16px;
+  font-size: 12px;
+  border-radius: 5px;
+  text-align: center;
+  padding: 2px 5px;
+  color: #627db6;
+  background-color: #edf3ff;
+  margin: 13px 0;
+}
+.cart-item-price span {
+  font-size: 16px;
+  color: #f03867;
+  font-weight: bold;
+}
+.cart-item-cell {
+  height: 25px;
+  display: flex;
+  justify-content: space-between;
+}
+.count .add,
+.count .subtract {
+  text-align: center;
+  display: inline-block;
+  width: 25px;
+  height: 100%;
+  border: 1px solid #e7e7e7;
+}
+.count .subtract {
+  display: inline-block;
+  border-radius: 18px 0 0 18px;
+}
+.count .add {
+  display: inline-block;
+  border-radius: 0 18px 18px 0;
+}
+.count .num {
+  display: inline-block;
+  text-align: center;
+  width: 35px;
+  height: 100%;
+  border: 1px solid #e7e7e7;
+}
+
+/* 底部 */
+.cart-foot {
+  position: fixed;
+  bottom: 0;
+  height: 97px;
+  width: 100%;
+}
+.cart-foot-cell {
+  height: 39px;
+  width: 100%;
+  background-color: #e6e8f4;
+  padding: 0 15px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cell-item-1 {
+  font-size: 12px;
+}
+.cell-item-2 {
+  font-size: 14px;
+}
+.cell-item-2 img {
+  width: 15px;
+}
+
+.cart-foot-pay {
+  height: 58px;
+  width: 100%;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+}
+
+.check-count {
+  width: 20%;
+}
+
+.count-num {
+  width: 43%;
+  white-space: nowrap; /*让文字在一行显示 */
+  overflow: hidden; /*溢出的内容隐藏 */
+  text-overflow: ellipsis; /*显示不全的文字用省略号代替 */
+}
+.count-num-money {
+  color: #f03867;
+  font-weight: bold;
+  font-size: 20px;
+}
+.count-pay {
+  width: 30%;
+  text-align: center;
+}
+.count-money {
+  width: 115px;
+  height: 45px;
+  background-color: #caccd2;
+  text-align: center;
+  line-height: 45px;
+  border-radius: 10px;
+  color: #ffffff;
+}
+</style>
\ No newline at end of file
diff --git "a/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/router/index.js" "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..b8e7d44b30e1d66627f36a9dd3c3424b188fb1a8
--- /dev/null
+++ "b/\345\217\266\347\216\211\351\234\236/Vue/2022-04-28\345\224\257\345\223\201\344\274\232/src/router/index.js"
@@ -0,0 +1,86 @@
+//配置路由规则
+import VueRouter from 'vue-router'
+
+// 导航栏模块
+import BodyContent from '../components/BodyContent' // 推荐页面
+import BodyDiscount from '../components/BodyDiscount'  //3折疯抢
+import BodyFast from '../components/BodyFast'  //唯品快抢
+import BodyInternation from '../components/BodyInternation'  //国际
+
+// 列表
+import ListShow from '../components/ListShow'
+
+// 详情页
+import DetailOne from '../pages/DetailOne.vue'
+import DetailTwo from '../pages/DetailTwo.vue'
+import DetailThree from '../pages/DetailThree.vue'
+import DetailFour from '../pages/DetailFour.vue'
+import DetailFive from '../pages/DetailFive.vue'
+
+// 购物车
+import ShoppingCart from '../pages/ShoppingCart'
+
+export default new VueRouter({
+    routes: [
+        {
+            path:'/',
+            component:BodyContent
+        },
+        // 导航栏模块
+        {
+            path: "/tj",
+            component: BodyContent,
+            // children: [
+            //     {
+            //         path: 'detailone',
+            //         component:DetailOne
+            //     }
+            // ]
+        },
+        {
+            path: "/fq",
+            component: BodyDiscount
+        },
+        {
+            path: "/kq",
+            component: BodyFast
+        },
+        {
+            path: "/gj",
+            component: BodyInternation
+        },
+        // 列表
+        {
+            path:"/list",
+            component:ListShow
+        },
+        // 详情页
+        {
+            name: "detailone",
+            path:'/detailone/:id',
+            props:true,
+            component: DetailOne
+        },
+        {
+            path:'/detailtwo',
+            component: DetailTwo
+        },
+        {
+            path:'/detailthree',
+            component: DetailThree
+        },
+        {
+            path:'/detailfour',
+            component: DetailFour
+        },
+        {
+            path:'/detailfive',
+            component: DetailFive
+        },
+        // 购物车
+        {
+            path: "/cart",
+            component: ShoppingCart
+        }
+    ]
+})
\ No newline at end of file