From 97d042fb13aa73a13351579fda97ea1a930c68c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E4=BF=A1=E5=AE=8F?= <2380223930@qq.com>
Date: Thu, 26 May 2022 12:16:44 +0800
Subject: [PATCH] 1

---
 .../Vue/20220329/20220329/firstvue.html"      |  37 ++
 .../Vue/20220329/demo.html"                   |  30 ++
 .../Vue/20220330/demo01.html"                 | 151 ++++++++
 .../Vue/20220331/demo01.css"                  | 131 +++++++
 .../Vue/20220331/demo01.html"                 |  90 +++++
 .../Vue/20220401/demo01.html"                 | 207 ++++++++++
 .../Vue/20220406/demo01.html"                 | 358 ++++++++++++++++++
 .../Vue/20220407/demo01.html"                 | 234 ++++++++++++
 .../demo.html"                                |   0
 .../Vue/20220408/demo.html"                   |  81 ++++
 .../Vue/20220408/demo02.html"                 |  47 +++
 .../Vue/20220413/demo01.html"                 | 184 +++++++++
 .../Vue/20220414/demo03.html"                 | 184 +++++++++
 .../Vue/20220415/demo03.html"                 | 196 ++++++++++
 .../Vue/20220419/demo01.html"                 | 196 ++++++++++
 .../Vue/20220420/src/App.vue"                 |  41 ++
 .../20220420/src/components/HeaderBase.vue"   |  88 +++++
 .../Vue/20220420/src/detail/adidas.vue"       | 202 ++++++++++
 .../Vue/20220420/src/detail/akf.vue"          | 202 ++++++++++
 .../Vue/20220420/src/detail/lining.vue"       | 202 ++++++++++
 .../Vue/20220420/src/detail/threece.vue"      | 239 ++++++++++++
 .../Vue/20220420/src/detail/ugg.vue"          | 202 ++++++++++
 .../Vue/20220420/src/main.js"                 |  30 ++
 .../Vue/20220420/src/pages/AdvList.vue"       |  89 +++++
 .../Vue/20220420/src/pages/BodyBase.vue"      |  65 ++++
 .../Vue/20220420/src/pages/Detail.vue"        | 251 ++++++++++++
 .../Vue/20220420/src/router/index.js"         |  49 +++
 .../Vue/20220421/src/App.vue"                 |  41 ++
 .../20220421/src/components/HeaderBase.vue"   |  88 +++++
 .../Vue/20220421/src/detail/adidas.vue"       | 202 ++++++++++
 .../Vue/20220421/src/detail/akf.vue"          | 202 ++++++++++
 .../Vue/20220421/src/detail/lining.vue"       | 202 ++++++++++
 .../Vue/20220421/src/detail/threece.vue"      | 239 ++++++++++++
 .../Vue/20220421/src/detail/ugg.vue"          | 202 ++++++++++
 .../Vue/20220421/src/main.js"                 |  30 ++
 .../Vue/20220421/src/pages/AdvList.vue"       |  89 +++++
 .../Vue/20220421/src/pages/BodyBase.vue"      |  65 ++++
 .../Vue/20220421/src/pages/Detail.vue"        | 251 ++++++++++++
 .../Vue/20220421/src/router/index.js"         |  49 +++
 .../Vue/20220426/src/App.vue"                 |  41 ++
 .../20220426/src/components/HeaderBase.vue"   |  88 +++++
 .../Vue/20220426/src/detail/adidas.vue"       | 202 ++++++++++
 .../Vue/20220426/src/detail/akf.vue"          | 202 ++++++++++
 .../Vue/20220426/src/detail/lining.vue"       | 202 ++++++++++
 .../Vue/20220426/src/detail/threece.vue"      | 239 ++++++++++++
 .../Vue/20220426/src/detail/ugg.vue"          | 202 ++++++++++
 .../Vue/20220426/src/main.js"                 |  30 ++
 .../Vue/20220426/src/pages/AdvList.vue"       |  89 +++++
 .../Vue/20220426/src/pages/BodyBase.vue"      |  65 ++++
 .../Vue/20220426/src/pages/Detail.vue"        | 251 ++++++++++++
 .../Vue/20220426/src/router/index.js"         |  49 +++
 .../Vue/20220428/src/App.vue"                 |  34 ++
 .../Vue/20220428/src/components/CartItem.vue" |  64 ++++
 .../20220428/src/components/HeaderBase.vue"   |  92 +++++
 .../Vue/20220428/src/detail/adidas.vue"       | 202 ++++++++++
 .../Vue/20220428/src/detail/akf.vue"          | 202 ++++++++++
 .../Vue/20220428/src/detail/lining.vue"       | 202 ++++++++++
 .../Vue/20220428/src/detail/threece.vue"      | 239 ++++++++++++
 .../Vue/20220428/src/detail/ugg.vue"          | 202 ++++++++++
 .../Vue/20220428/src/main.js"                 |  32 ++
 .../Vue/20220428/src/pages/AdvList.vue"       |  62 +++
 .../Vue/20220428/src/pages/BodyBase.vue"      |  70 ++++
 .../Vue/20220428/src/pages/CartList.vue"      |  81 ++++
 .../Vue/20220428/src/pages/Detail.vue"        | 272 +++++++++++++
 .../Vue/20220428/src/router/index.js"         |  53 +++
 .../Vue/20220429/src/App.vue"                 |  34 ++
 .../Vue/20220429/src/components/CartItem.vue" |  64 ++++
 .../20220429/src/components/HeaderBase.vue"   |  92 +++++
 .../Vue/20220429/src/detail/adidas.vue"       | 202 ++++++++++
 .../Vue/20220429/src/detail/akf.vue"          | 202 ++++++++++
 .../Vue/20220429/src/detail/lining.vue"       | 202 ++++++++++
 .../Vue/20220429/src/detail/threece.vue"      | 239 ++++++++++++
 .../Vue/20220429/src/detail/ugg.vue"          | 202 ++++++++++
 .../Vue/20220429/src/main.js"                 |  32 ++
 .../Vue/20220429/src/pages/AdvList.vue"       |  62 +++
 .../Vue/20220429/src/pages/BodyBase.vue"      |  70 ++++
 .../Vue/20220429/src/pages/CartList.vue"      |  81 ++++
 .../Vue/20220429/src/pages/Detail.vue"        | 272 +++++++++++++
 .../Vue/20220429/src/router/index.js"         |  53 +++
 .../Vue/20220503/src/App.vue"                 |  44 +++
 .../Vue/20220503/src/components/CartItem.vue" |  85 +++++
 .../20220503/src/components/HeaderBase.vue"   |  99 +++++
 .../Vue/20220503/src/config/constName.js"     |   6 +
 .../Vue/20220503/src/data/product.js"         |  47 +++
 .../Vue/20220503/src/detail/adidas.vue"       | 202 ++++++++++
 .../Vue/20220503/src/detail/akf.vue"          | 202 ++++++++++
 .../Vue/20220503/src/detail/lining.vue"       | 202 ++++++++++
 .../Vue/20220503/src/detail/threece.vue"      | 239 ++++++++++++
 .../Vue/20220503/src/detail/ugg.vue"          | 202 ++++++++++
 .../Vue/20220503/src/main.js"                 |  67 ++++
 .../Vue/20220503/src/mixin/MixIn.js"          |  40 ++
 .../Vue/20220503/src/pages/AdvList.vue"       | 104 +++++
 .../Vue/20220503/src/pages/BodyBase.vue"      |  70 ++++
 .../Vue/20220503/src/pages/CartList.vue"      |  67 ++++
 .../Vue/20220503/src/pages/Detail.vue"        | 227 +++++++++++
 .../Vue/20220503/src/pages/Recod.vue"         | 129 +++++++
 .../Vue/20220503/src/plugins/plugin1.js"      |  26 ++
 .../Vue/20220503/src/router/index.js"         |  50 +++
 .../Vue/20220504/src/App.vue"                 |  44 +++
 .../Vue/20220504/src/components/CartItem.vue" |  85 +++++
 .../20220504/src/components/HeaderBase.vue"   |  99 +++++
 .../Vue/20220504/src/data/product.js"         |  47 +++
 .../Vue/20220504/src/detail/adidas.vue"       | 202 ++++++++++
 .../Vue/20220504/src/detail/akf.vue"          | 202 ++++++++++
 .../Vue/20220504/src/detail/lining.vue"       | 202 ++++++++++
 .../Vue/20220504/src/detail/threece.vue"      | 239 ++++++++++++
 .../Vue/20220504/src/detail/ugg.vue"          | 202 ++++++++++
 .../Vue/20220504/src/main.js"                 |  39 ++
 .../Vue/20220504/src/pages/AdvList.vue"       | 106 ++++++
 .../Vue/20220504/src/pages/BodyBase.vue"      |  70 ++++
 .../Vue/20220504/src/pages/CartList.vue"      |  67 ++++
 .../Vue/20220504/src/pages/Detail.vue"        | 226 +++++++++++
 .../Vue/20220504/src/router/index.js"         |  49 +++
 .../Vue/20220505/src/App.vue"                 |  95 +++++
 .../Vue/20220505/src/assets/logo.png"         | Bin 0 -> 6849 bytes
 .../Vue/20220505/src/components/CartItem.vue" |  93 +++++
 .../Vue/20220505/src/config/constName.js"     |   6 +
 .../Vue/20220505/src/main.js"                 |  55 +++
 .../Vue/20220505/src/pages/AdvList.vue"       |  65 ++++
 .../Vue/20220505/src/pages/cartList.vue"      |  66 ++++
 .../Vue/20220505/src/pages/xqye.vue"          | 208 ++++++++++
 .../Vue/20220505/src/router/index.js"         |  55 +++
 .../Vue/20220506/src/App.vue"                 |  95 +++++
 .../Vue/20220506/src/assets/logo.png"         | Bin 0 -> 6849 bytes
 .../Vue/20220506/src/components/CartItem.vue" |  93 +++++
 .../Vue/20220506/src/config/constName.js"     |   6 +
 .../Vue/20220506/src/main.js"                 |  55 +++
 .../Vue/20220506/src/pages/AdvList.vue"       |  65 ++++
 .../Vue/20220506/src/pages/cartList.vue"      |  66 ++++
 .../Vue/20220506/src/pages/xqye.vue"          | 208 ++++++++++
 .../Vue/20220506/src/router/index.js"         |  55 +++
 .../Vue/20220510/src/App.vue"                 |  95 +++++
 .../Vue/20220510/src/assets/logo.png"         | Bin 0 -> 6849 bytes
 .../Vue/20220510/src/components/CartItem.vue" |  93 +++++
 .../Vue/20220510/src/config/constName.js"     |   6 +
 .../Vue/20220510/src/main.js"                 |  55 +++
 .../Vue/20220510/src/pages/AdvList.vue"       |  65 ++++
 .../Vue/20220510/src/pages/cartList.vue"      |  66 ++++
 .../Vue/20220510/src/pages/xqye.vue"          | 208 ++++++++++
 .../Vue/20220510/src/router/index.js"         |  55 +++
 .../Vue/20220511/min.js"                      |  26 ++
 .../Vue/20220512/min.js"                      |  26 ++
 .../demo.html"                                |  39 ++
 143 files changed, 16727 insertions(+)
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220329/20220329/firstvue.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220329/demo.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220330/demo01.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.css"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220401/demo01.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220406/demo01.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220407/demo01.html"
 rename "\350\265\226\350\231\271\351\234\226/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html" => "\346\235\216\344\277\241\345\256\217/Vue/20220408/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html" (100%)
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220408/demo.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220408/demo02.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220413/demo01.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220414/demo03.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220415/demo03.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220419/demo01.html"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/components/HeaderBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/adidas.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/akf.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/lining.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/threece.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/ugg.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/BodyBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/Detail.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220420/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/components/HeaderBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/adidas.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/akf.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/lining.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/threece.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/ugg.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/BodyBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/Detail.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220421/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/components/HeaderBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/adidas.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/akf.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/lining.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/threece.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/ugg.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/BodyBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/Detail.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220426/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/CartItem.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/HeaderBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/adidas.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/akf.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/lining.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/threece.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/ugg.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/BodyBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/CartList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/Detail.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220428/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/CartItem.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/HeaderBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/adidas.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/akf.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/lining.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/threece.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/ugg.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/BodyBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/CartList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/Detail.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220429/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/CartItem.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/HeaderBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/config/constName.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/data/product.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/adidas.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/akf.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/lining.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/threece.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/ugg.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/mixin/MixIn.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/BodyBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/CartList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Detail.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Recod.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/plugins/plugin1.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220503/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/CartItem.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/HeaderBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/data/product.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/adidas.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/akf.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/lining.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/threece.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/ugg.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/BodyBase.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/CartList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/Detail.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220504/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/assets/logo.png"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/components/CartItem.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/config/constName.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/cartList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/xqye.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220505/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/assets/logo.png"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/components/CartItem.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/config/constName.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/cartList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/xqye.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220506/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/App.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/assets/logo.png"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/components/CartItem.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/config/constName.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/main.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/AdvList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/cartList.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/xqye.vue"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220510/src/router/index.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220511/min.js"
 create mode 100644 "\346\235\216\344\277\241\345\256\217/Vue/20220512/min.js"
 create mode 100644 "\350\265\226\350\231\271\351\234\226/20220408\350\203\214\346\231\257\350\211\262\345\210\207\346\215\242/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html"

diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220329/20220329/firstvue.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220329/20220329/firstvue.html"
new file mode 100644
index 00000000..6ad115bc
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220329/20220329/firstvue.html"
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <!-- <script src="./vue.js"></script> -->
+    <title>第一个vue案例</title>
+</head>
+<body>
+    <div>
+     <div id="el"> 
+        {{message}}<br>
+        {{message}}<br>
+        {{message}}<br>
+        {{message}}<br>
+        {{message}}<br>
+        {{muilt.msg}}<br>
+        {{show}}
+      </div>    
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:"#el",
+        data:{
+            message:'hello vue',
+            show:'show vue',
+            muilt:{
+                msg:'muilt',
+            },
+    
+        }
+    });
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220329/demo.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220329/demo.html"
new file mode 100644
index 00000000..9bdd73a9
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220329/demo.html"
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>vue</title>
+</head>
+<body>
+
+        <div id="aa">
+            {{num}}
+        </div>
+
+</body>
+<script>
+
+    let vue = new Vue ({
+        el:"#aa",
+        data:{
+            num:"赖",
+        }
+        
+
+    })
+
+
+</script>    
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220330/demo01.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220330/demo01.html"
new file mode 100644
index 00000000..6d596334
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220330/demo01.html"
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模板语法</title>
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<style>
+    .a{
+        color: red;
+    }
+    .b{
+        color: skyblue;
+    }
+    .dis{
+        width: 80px;
+        height: 20px;
+        border: 1px  red;
+    }
+    .show{
+        width: 80px;
+        height: 20px;
+        border: 1px  red;
+    }
+</style>
+<body>
+    <div id="app">
+        <div v-html="html"></div>
+
+        <div id="demo"></div>
+        <div v-bind:class="class1">改变class</div>
+        <button v-on:click="cs" style="display: inline-block;" >点击class</button>
+        <div class="dis">
+            <button v-bind:style="dis" style="display: inline-block;">Button1</button>
+            <button style="display: none;" style="display: inline-block;">Button2</button>
+            
+
+        </div>
+        <button v-on:click="click" style="display: inline-block;">点击</button>
+        <p style="display: inline-block;">display控制显示隐藏</p>
+        <button style="display: block;" @click="changeIsShow">show</button>
+        <div class="show">
+            <span v-show="show"> show内容</span>
+   
+    </div>
+        <span>{{work}}</span>
+        <div>
+            <button style=" width: 100xp;" @click="num1">-</button>
+            <span>年龄</span><span>{{pages}}</span>
+            <button style=" width: 100xp;" @click="num2">+</button>
+        </div>
+        <div v-show="kill">you be kill</div>
+        <div v-show="boy">you no boy</div>
+
+    </div>
+</body>
+<script>
+    let data = {
+        dis: "display: none;",
+        html: '<a href="http://www.baidu.com">百度</a>',
+        class1: "a",
+        show: false,
+        work:"工作中",
+        pages: 21,
+        kill:false,
+        boy:false,
+        n:0,
+        s:0,
+    }
+    let vue = new Vue({
+        el: "#app",
+        data: data,
+        methods: {
+            click: function () {
+                let i="display: none;"
+                let t="display: block;"
+                this.n++
+                console.log(this.n);
+                if(this.n%2==1){
+                    console.log(this.n);
+                    data.dis=t
+                }else if(this.n%2==0){
+                    data.dis=i
+                }
+                console.log(data.dis);
+            },
+            cs: function(){
+                let i="b"
+                let t="a"
+                this.n++
+                console.log(this.n);
+                if(this.n%2==1){
+                    data.class1=i
+                 
+                }else if(this.n%2==0){
+       
+                    data.class1=t
+                }
+             
+            },
+            changeIsShow: function () {
+                this.show = !this.show;
+            },
+            num1: function () {
+                if (this.pages >1) {
+                   this.pages--;
+                   this.kill=false
+                   this.work="工作中";
+                   if(this.n>0){
+                    this.work="死过一次 摆烂中";
+                   }
+                   if(this.s>0){
+                    this.work="再活一次 摆烂中";
+                   }
+
+                }else   (
+                    this.work="没出生",
+                    this.boy=true,
+                    this.s++,
+                    console.log("num"+this.s)
+                )
+            },
+            num2: function () {
+                if (this.pages <35) {
+                    this.pages++;
+                    this.boy=false
+                    this.work="工作中";
+                    if(this.n>0){
+                    this.work="死过一次 摆烂中";
+                   }
+                   if(this.s>0){
+                    this.work="再活一次 摆烂中";
+                   }
+                    
+                }else(
+                    this.kill=true,
+                    this.work="死亡",
+                    this.n++,
+                    console.log("num"+this.n)
+                 
+                )
+            },
+        }
+    });
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.css" "b/\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.css"
new file mode 100644
index 00000000..0739107e
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.css"
@@ -0,0 +1,131 @@
+
+.body {
+    color: #333;
+    font-size: 12px;
+    line-height: 1.28571;
+    display: inline-block;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+ul {
+    width: 480px;
+    margin: 0 auto;
+}
+
+a {
+    text-decoration: none;
+}
+
+li {
+    display: inline;
+    float: left;
+    width: 170px;
+    padding-left: 200px;
+    height: 46px;
+    line-height: 46px;
+    font-size: 16px;
+    font-weight: 700;
+    color: #000000;
+}
+
+.zhuce {
+    height: 46px;
+    border-bottom: 1px solid #e6e6e6;
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.se {
+    color: #ff7300;
+    border-bottom: 1px solid #ff7300;
+    pointer-events: none;
+}
+
+.member-sumary {
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 30px;
+}
+
+.concon {
+    margin: 0 auto;
+    width: 800px;
+    height: 500px;
+
+}
+
+
+
+.inputname {
+    position: relative;
+    top: 10px;
+    left: 29%;
+}
+
+.inputmim {
+    position: relative;
+    top: 10px;
+    left: 31%;
+
+}
+
+.inputmimcd {
+    position: relative;
+    top: 10px;
+    left: 27%;
+}
+
+.inputph {
+    position: relative;
+    top: 10px;
+    left: 27%;
+
+}
+
+
+/*  */
+#name {
+    position: relative;
+    top: -22px;
+    left: 37%;
+}
+
+#mim {
+    position: relative;
+    top: -22px;
+    left: 37%;
+
+}
+
+#mimquere {
+    position: relative;
+    top: -22px;
+    left: 37%;
+}
+
+#ph {
+    position: relative;
+    top: -22px;
+    left: 37%;
+
+}
+/**/
+.inputinput {
+    height: 38px;
+    width: 260px;
+    padding: 0 12px;
+}
+
+/*    */
+.inputinput:focus {
+
+    display: inherit;
+    outline: none;
+
+    border: 1px solid red;
+
+}
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.html"
new file mode 100644
index 00000000..b10b9f0a
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220331/demo01.html"
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>注册</title>
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<link rel="stylesheet" href="./demo01.css">
+<body>
+    <div id="zhuceym">
+        <div class="zhuce">
+            <ul>
+                <a href="个人注册.html" target="_blank">
+                    <li class="se">{{zc}}</li>
+                </a>
+            </ul>
+        </div>
+        <div class="con">
+            <form action=""  onsubmit=" false"  >
+                <div class="concon">
+                    <div class="input input1">
+                        <div class="inputname"><span>{{name}}:</span></div>
+                        <input class="inputinput" type="text" placeholder="设置会员名"  pattern="^[A-Za-z0-9]+$" data-meta="Field" id="name" value=""
+                            height="100%">
+                    </div>
+                    <div class="input input2">
+
+                        <div class="inputmim"><span>{{min}}:</span></div>
+                        <input v-on:change="minss" class="inputinput" type="password" placeholder="设置你的登录密码" pattern="^[a-zA-Z]\w{5,17}$" title="以字母开头，长度在6~18之间，只能包含字母、数字和下划线"  id="mim"
+                      :oninput="mymin"  height="100%"   >
+                    </div>
+                    <div class="input input3">
+
+                        <div class="inputmimcd"><span>{{mins}}:</span></div>
+                        <input class="inputinput" type="password" placeholder="请再次输入密码"  pattern="^[A-Za-z0-9]+$" title="由英文和数字组成"id="mimquere"
+                        height="100%" >
+                    </div>
+                    <div class="input input3">
+                        <div class="inputph"><span>{{ph}}:</span></div>
+                        <input class="inputinput" type="text"  id="mimquere"
+                        pattern="^1[345789]\d{9}$" title="请输入正确的手机号"   height="100%">
+                    </div>
+                    <div class="input input3">
+                        <input class="inputph" type="submit" value="提交">
+                    </div>
+
+                   
+                </div>
+            </form>
+
+
+            
+        </div>
+    </div>
+
+</body>
+<script>
+    let data = {
+        zc:"个人注册",
+        ph:"手机号码",
+        name:"会员名",
+        min:"密码",
+        mins:"密码确定",
+        minm:"111",
+    }
+    let vue = new Vue({
+        el: "#zhuceym",
+        data: data,
+        methods: {
+            mymin:function(){
+                console.log(this.minm);
+
+            }
+         
+
+        }
+    })
+</script>
+
+
+</html>
+
+<!-- 作业：写一个注册页面，美观点，然后用vue 进行渲染，要有手机号注册，要有密码，确认密码，要进行 数据严重，手机格式验证，密码6位以上的验证
+ 确认密码于密码一致性的验证    -->
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220401/demo01.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220401/demo01.html"
new file mode 100644
index 00000000..e1a362a5
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220401/demo01.html"
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        .ulli {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid;
+            width: 100px;
+            padding: 0 0 500px 0;
+            background: lightgoldenrodyellow;
+            border: none;
+        }
+
+        .li {
+            position: absolute;
+            top: 0;
+            left: 100px;
+            background: lightgoldenrodyellow;
+            border: 1px solid;
+            align-content: center;
+            width: 600px;
+            border: none;
+
+        }
+
+        .lili {
+            display: flex;
+            justify-content: space-evenly;
+
+        }
+
+        .time {
+            position: absolute;
+            top: 0px;
+            left: calc(100px + 600px);
+            width: 100px;
+            height: 300px;
+            border: 1px solid red;
+        }
+
+        .price {
+            position: absolute;
+            top: 167px;
+            display: block;
+
+        }
+    </style>
+</head>
+
+<body>
+    <div class="app">
+        <div class="center" style="position: relative; left: calc(50% - 350px);">
+            <!-- ul -->
+            <div class="ulli">
+                <span v-for="(item,index) in commodity" @click="shows(index)">{{item}}
+                </span>
+            </div>
+            <!-- li -->
+            <div class="li" style="height: 23px;">
+
+                <ul class="lili " v-if="show">
+                    <li v-for="(item,index) in phone " @click="showimg(index)">
+                        {{item}}
+                    </li>
+                </ul>
+                <ul class="lili" v-if="show1" style="display: flex;">
+                    <li v-for="(item,index) in laptop " @click="showimg1(index)">
+                        {{item}}
+                    </li>
+                </ul>
+
+                <!-- img -->
+                <div style=" position: absolute;top: 24px;left: 1px; width: 100%;">
+
+                    <img v-if="imgif" style=" width: 100%; "
+                        src="https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                        alt="">
+                    <img :src="showimgs" alt="" style=" width: 100%; ">
+                    <span
+                        style=" position: absolute; top: 450px;left: -1px; width: 100%;     background-color: lightgoldenrodyellow; height: 68px;">
+                        {{ifbrief}}
+                        {{iflaptopbrief}}
+
+                    </span>
+
+                    <span v-if="imgif" style=" position: absolute; top: 35px;left: 1px; width: 100%;">
+                        广告
+                    </span>
+
+                </div>
+
+            </div>
+        </div>
+
+
+    </div>
+    <script>
+        let data = {
+            commodity: ["手机", "笔记本电脑"],
+            img: "./img/",
+            jpg: ".jpg",
+            png: ".png",
+            phone: ["huawei", "redmin", "iphone", "oppo", "vivo"],
+            laptop: ["huawei", "xiaomin", "iphone", "oppo", "tiaji"],
+            brief: ["华为手机最新款只要2999", "红米手机最新款只要2999", "苹果手机最新款只要2999", "oppo手机最新款只要2999", "vivo手机最新款只要2999",],
+            laptopbrief: ["华为笔记本最新款只要6999", "红米笔记本最新款只要6999", "苹果笔记本最新款只要6999", "oppo笔记本最新款只要6999", "vivo手机最新款只要6999",],
+            show: false,
+            show1: false,
+            ifshowimg: false,
+            showimgs: "",
+            ifbrief: "",
+            iflaptopbrief: "",
+            imgif: true,
+        }
+        let vue = new Vue({
+            el: ".app",
+            data: data,
+            methods: {
+                shows: function (index) {
+                    if (index == 0) {
+                        this.show = !this.show
+                        this.show1 = false
+                        this.showimgs = ""
+                        this.ifbrief = ""
+                        this.iflaptopbrief = ""
+                        this.imgif = true
+                    }
+                    if (index == 1) {
+                        this.show1 = !this.show1
+                        this.show = false
+                        this.showimgs = ""
+                        this.ifbrief = ""
+                        this.iflaptopbrief = ""
+                        this.imgif = true
+                    }
+                    console.log(index)
+                },
+                showimg: function (index) {
+                    this.imgif = false
+                    if (index == 0) {
+
+                        this.showimgs = "https://img2.baidu.com/it/u=2508613218,3733856206&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                        this.ifbrief = this.brief[index]
+                    } else if (index == 1) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
+                    } else if (index == 2) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img0.baidu.com/it/u=768643584,3414937184&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                    } else if (index == 3) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img1.baidu.com/it/u=2192235120,3673147818&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                    } else if (index == 4) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img0.baidu.com/it/u=1259839382,635849482&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                    }
+                },
+                showimg1: function (index) {
+                    this.imgif = false
+                    if (index == 0) {
+                        this.showimgs = "https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 1) {
+                        this.showimgs = "https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 2) {
+                        this.showimgs = "https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 3) {
+                        this.showimgs = "https://img1.baidu.com/it/u=142621668,3476222106&fm=253&fmt=auto?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 4) {
+                        this.showimgs = "https://img2.baidu.com/it/u=59881486,3959710766&fm=253&fmt=auto?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    }
+                },
+ 
+            }
+
+
+
+        });
+ 
+
+    </script>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220406/demo01.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220406/demo01.html"
new file mode 100644
index 00000000..e8574668
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220406/demo01.html"
@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        .ulli {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid;
+            width: 100px;
+            padding: 0 0 500px 0;
+            background: lightgoldenrodyellow;
+            border: none;
+        }
+
+        .li {
+            position: absolute;
+            top: 0;
+            left: 100px;
+            background: lightgoldenrodyellow;
+            border: 1px solid;
+            align-content: center;
+            width: 600px;
+            border: none;
+
+        }
+
+        .lili {
+            display: flex;
+            justify-content: space-evenly;
+
+        }
+
+        .time {
+            position: absolute;
+            top: 0px;
+            left: calc(100px + 600px);
+            width: 100px;
+            height: 300px;
+            border: 1px solid red;
+        }
+
+        .price {
+            position: absolute;
+            top: 167px;
+            display: block;
+
+        }
+    </style>
+</head>
+
+<body>
+    <div class="app">
+        <div class="center" style="position: relative;     left: calc(50% - 350px);">
+            <!-- ul -->
+            <div class="ulli">
+                <span v-for="(item,index) in commodity" @click="shows(index)">{{item}}
+                </span>
+            </div>
+            <!-- li -->
+            <div class="li" style="height: 23px;">
+
+                <ul class="lili " v-if="show">
+                    <li v-for="(item,index) in phone " @click="showimg(index)">
+                        {{item}}
+                    </li>
+                </ul>
+                <ul class="lili" v-if="show1" style="display: flex;">
+                    <li v-for="(item,index) in laptop " @click="showimg1(index)">
+                        {{item}}
+                    </li>
+                </ul>
+
+                <!-- img -->
+                <div style=" position: absolute;top: 24px;left: 1px; width: 100%;">
+
+                    <img v-if="imgif" style=" width: 100%; "
+                        src="https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                        alt="">
+                    <img :src="showimgs" alt="" style=" width: 100%; ">
+                    <span
+                        style=" position: absolute; top: 450px;left: -1px; width: 100%;     background-color: lightgoldenrodyellow; height: 68px;">
+                        {{ifbrief}}
+                        {{iflaptopbrief}}
+
+                    </span>
+
+                    <span v-if="imgif" style=" position: absolute; top: 35px;left: 1px; width: 100%;">
+                        广告
+                    </span>
+
+                </div>
+
+            </div>
+
+            <!--6号  -->
+            <div class="time">
+                <p>{{money|addSymbols}}</p>
+                <p>{{getTime}}</p>
+                <p v-if="iftime">{{leftdate}}</p>
+                <p v-if="iftimem">{{leftdate1}}</p>
+                <p v-if="iftimes">{{leftdate2}}</p>
+
+
+                <span v-if="price1" class="price"> {{getDiscount}}</span>
+                <span v-if="price2" class="price">{{getDiscount}}</span>
+                <span v-if="price3" class="price">{{getDiscount}}</span>
+                <span v-if="price4" class="price">{{getDiscount}}</span>
+                <span v-if="price5" class="price">{{getDiscount}}</span>
+                <span v-if="price6" class="price">{{getDiscount}}</span>
+     
+
+                </span>
+            </div>
+
+
+
+        </div>
+
+
+    </div>
+
+
+
+
+    <script>
+        let data = {
+            commodity: ["手机", "笔记本电脑"],
+            img: "./img/",
+            jpg: ".jpg",
+            png: ".png",
+            phone: ["huawei", "redmin", "iphone", "oppo", "vivo"],
+            laptop: ["huawei", "xiaomin", "iphone", "oppo", "tiaji"],
+            brief: ["华为手机最新款只要2999", "红米手机最新款只要2999", "苹果手机最新款只要2999", "oppo手机最新款只要2999", "vivo手机最新款只要2999",],
+            laptopbrief: ["华为笔记本最新款只要6999", "红米笔记本最新款只要6999", "苹果笔记本最新款只要6999", "oppo笔记本最新款只要6999", "vivo手机最新款只要6999",],
+            show: false,
+            show1: false,
+            ifshowimg: false,
+            showimgs: "",
+            ifbrief: "",
+            iflaptopbrief: "",
+            imgif: true,
+
+
+
+            // 4月6 ---------------------------------------------------------------------------------------------------
+            //nows是倒计时的时间 单位是秒 iftime 控制html的显示隐藏
+            money: "2999",
+            leftdate: '',
+            leftdate1: '',
+            leftdate2: '',
+            discountIndex: 0,
+            price: 2999,
+            price1: false,
+            price2: false,
+            price3: false,
+            price4: false,
+            price5: false,
+            price6: false,
+            nows: 2403,
+            iftime: true,
+            iftimem: true,
+            iftimes: true,
+            getTime: "剩余时间：",
+        }
+        let vue = new Vue({
+            el: ".app",
+            data: data,
+            methods: {
+                shows: function (index) {
+                    if (index == 0) {
+                        this.show = !this.show
+                        this.show1 = false
+                        this.showimgs = ""
+                        this.ifbrief = ""
+                        this.iflaptopbrief = ""
+                        this.imgif = true
+                    }
+                    if (index == 1) {
+                        this.show1 = !this.show1
+                        this.show = false
+                        this.showimgs = ""
+                        this.ifbrief = ""
+                        this.iflaptopbrief = ""
+                        this.imgif = true
+                    }
+                    console.log(index)
+                },
+                showimg: function (index) {
+                    this.imgif = false
+                    if (index == 0) {
+
+                        this.showimgs = "https://img2.baidu.com/it/u=2508613218,3733856206&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                        this.ifbrief = this.brief[index]
+                    } else if (index == 1) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
+                    } else if (index == 2) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img0.baidu.com/it/u=768643584,3414937184&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                    } else if (index == 3) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img1.baidu.com/it/u=2192235120,3673147818&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                    } else if (index == 4) {
+                        this.ifbrief = this.brief[index]
+                        this.showimgs = "https://img0.baidu.com/it/u=1259839382,635849482&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                    }
+                },
+                showimg1: function (index) {
+                    this.imgif = false
+                    if (index == 0) {
+                        this.showimgs = "https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 1) {
+                        this.showimgs = "https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 2) {
+                        this.showimgs = "https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 3) {
+                        this.showimgs = "https://img1.baidu.com/it/u=142621668,3476222106&fm=253&fmt=auto?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    } else if (index == 4) {
+                        this.showimgs = "https://img2.baidu.com/it/u=59881486,3959710766&fm=253&fmt=auto?w=667&h=500"
+                        this.iflaptopbrief = this.laptopbrief[index]
+                    }
+                },
+                // 4月6号
+
+                countdown: function () {
+                    let that = this;
+                    setTimeout(function () {
+                        let now = parseInt(new Date().getTime() / 1000)
+                        let lefttime = now + that.nows - now;
+                        that.nows--
+                        lefth = Math.floor(lefttime / (60 * 60) % 24);  //计算小时数
+                        leftm = Math.floor(lefttime / (60) % 60);  //计算分钟数
+                        lefts = Math.floor(lefttime % 60);  //计算秒数
+                        that.leftdate = lefth + "小时"
+                        that.leftdate1 = leftm + "分"
+                        that.leftdate2 = lefts + "秒"
+                        console.log(that.leftdate);
+                        console.log(that.leftdate1);
+                        //判断小于1小时时 隐藏html
+                        if (lefth < 1) {
+                            that.iftime = false
+                        }
+                        if (leftm < 1) {
+                            that.iftimem = false
+                        }
+                        if (lefts < 0) {
+                            that.iftimes = false
+                            that.getTime = ""
+                            that.pricesha = "价格"
+                        }
+
+                        
+                            // console.log(that.price1);
+                            if (leftm < 60) {
+                                that.price2 = true
+                            }
+                            if (leftm < 50) {
+that.price3 = true
+that.price2 = false
+
+}
+if (leftm < 40) {
+    that.price3 = false
+    that.price2 = false
+                                that.price4 = true   
+                            }
+                            if (leftm < 30) {
+                                that.price4 = false                     
+    that.price3 = false
+    that.price2 = false
+                                that.price5 = true   
+                            }
+                            if (leftm < 20) {
+                                that.price5 = false  
+                                that.price4 = false                     
+    that.price3 = false
+    that.price2 = false
+                                that.price6 = true   
+                            }
+
+
+                        that.countdown();
+                        //递归函数
+                    }, 1000)
+
+                },
+
+            },
+            //4月6 
+            filters: {
+                addSymbols(value) {
+                    return "原价：¥ " + value;
+
+                }
+            },
+            computed: {
+
+                getDiscount: {
+
+                    get() {
+                        if (this.price2) {
+                        
+                            return "超级秒杀价："+   Math.round(this.price * 0.5);
+                        }
+                        console.log(this.price3);
+                         if (this.price3) {
+                    
+                            return "秒杀价："+ Math.round(this.price * 0.6);
+                        } if (this.price4) {
+                          
+                            return "砍价："+ Math.round(this.price * 0.7);
+                        } if (this.price5) {
+                     
+                            return "割爱价："+ Math.round(this.price * 0.8);
+                        }if (this.price6) {
+                     
+                     return "抬价："+ Math.round(this.price * 0.9);
+                 }
+
+                    }
+
+                }
+            },
+
+
+
+
+
+        });
+        // vue.init();
+        vue.countdown();
+
+    </script>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220407/demo01.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220407/demo01.html"
new file mode 100644
index 00000000..ccaa0661
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220407/demo01.html"
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+</head>
+<style>
+.form-item::after {
+    content: attr(baocuo);
+    color: red;
+    font-size: 12px;
+    display: none;
+    position: absolute;
+    top: 30px;
+   
+    width: 190px;
+}
+.form-item.err::after {
+    display: block;
+}
+.form-item.err input {
+    border-color: red;
+}
+.form-item1::after {
+    content: attr(baocuo);
+    color: red;
+    font-size: 12px;
+    display: none;
+    position: absolute;
+    top: 70px;
+
+    width: 190px;
+}
+.form-item1.err1::after {
+    display: block;
+}
+.form-item1.err1 input {
+    border-color: red;
+}
+.form-item2::after {
+    content: attr(baocuo);
+    color: red;
+    font-size: 12px;
+    display: none;
+    position: absolute;
+    top: 110px;
+
+    width: 190px;
+}
+.form-item2.err2::after {
+    display: block;
+}
+.form-item2.err2 input {
+    border-color: red;
+}
+
+    .form {
+        position: relative;
+        top: 100px;
+        left: calc(50% - 100px);
+    }
+
+    .form::after {
+        content: "";
+        width: 310px;
+        height: 600px;
+        background-color: pink;
+        border-radius: 5px;
+        position: absolute;
+        z-index: -1;
+        top: -20px;
+        left: -30px;
+    }
+
+    .optiondiv {
+        position: absolute;
+        top: 200px;
+
+    }
+
+    .user {
+        position: absolute;
+        left: 80px;
+
+    }
+
+    .user input {
+        display: block;
+        margin: 10px 0 20px 0;
+    }
+
+    .user span {
+        position: absolute;
+        left: -80px;
+    }
+
+</style>
+
+<body>
+    <div id="app">
+        <form class="form" action=""  onsubmit="return false"  >
+            <div class="user">
+
+                <span style="top: 10px; ">用户名：</span>
+                <span style="top: 50px; left: -65px; "> 密码： </span>
+                <span style="top: 91px; left: -98px;">确认密码：</span>
+                <section  :class="['form-item', {'err':err}] " baocuo="输入4~8个字母、数字、下划线，">
+                <input   type="text" v-model="username"  placeholder="请输入用户名">
+            </section>
+            <section :class="['form-item1', {'err1':err1}] " baocuo="输入6~12个字母、数字、下划线，">
+                <input type="password" v-model="username1"  placeholder="请输入密码">
+            </section>
+            <section :class="['form-item2', {'err2':err2}] " baocuo="请输入正确的密码">
+                <input  type="password"   v-model="username2" placeholder="请输入确认的密码">
+            </section>
+       
+                <input type="submit" @click="username3" value="提交" style="position: absolute;
+                top: 300px;"   >
+            
+            </div>
+
+
+            <div style="    position: absolute;
+            top: 130px;">
+                <label>性别：</label>
+
+                <label>男</label>
+                <input type="radio" value="男" v-model="checkVal">
+
+                <label>女</label>
+                <input type="radio" value="女" v-model="checkVal">
+
+                <label>保密</label>
+                <input type="radio" value="保密" v-model="checkVal">
+                <p>您的选择是：{{ checkVal }}</p>
+            </div>
+            <div class="optiondiv">
+                <select name="mySel" v-model="selected">
+                    <option value="">-请选择您所在的城市-</option>
+                    <option value="成都">成都</option>
+                    <option value="上海">上海</option>
+                    <option value="北京">北京</option>
+                    <option value="深圳">深圳</option>
+                    <option value="杭州">杭州</option>
+                    <option value="昆明">昆明</option>
+                </select>
+                <p>您所在的城市是：{{ selected }}</p>
+            </div>
+       
+        </form>
+
+    </div>
+
+    <!-- 需要验证规则(用户名 密码许验证，其余不能为空) -->
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                checkVal:"",
+                selected:"",
+                username: "",
+                username1: "",
+                username2: "",
+                err: false,
+                err1: false,
+                err2: false,
+
+           
+            },
+            methods: {
+                username3:function() {
+                    if(this.username==""){
+                        alert("用户名不能为空")
+                    }else if(this.username1==""){
+                        alert("密码不能为空")
+                   
+                    }else
+                    if(this.username2==""){
+                        alert("确认密码不能为空")
+                
+                    }else
+                    if(this.checkVal==""){
+                        alert("性别不能为空")
+                
+                    }else
+                    if(this.selected==""){
+                        alert("城市不能为空")
+                
+                    }else{
+                        alert("提交成功")
+                    }
+           
+                      }
+
+
+
+            },
+            watch: {
+                  username(val) {
+            this.err = !/^.{4,8}$/.test(val);
+            },
+            username1(val) {
+            this.err1 = !/^.{6,12}$/.test(val);
+            },
+            username2(val) {
+                if(val==this.username1){
+                    console.log(val + this.username1);
+                    this.err2=false
+                }else{
+                    this.err2=true
+                }
+            }
+            },
+            
+
+
+
+                  
+
+        })
+    
+
+    </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\265\226\350\231\271\351\234\226/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220408/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html"
similarity index 100%
rename from "\350\265\226\350\231\271\351\234\226/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html"
rename to "\346\235\216\344\277\241\345\256\217/Vue/20220408/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html"
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220408/demo.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220408/demo.html"
new file mode 100644
index 00000000..0c224d2b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220408/demo.html"
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ 
+    <title>Document</title>
+    <script src="vue.js"></script>
+     <script src="vue.js"></script>   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <!-- 自建一个vue的指令,实现指定的背景色 -->
+</head>
+
+<body>
+    <style>
+        #app    {
+            position: relative;
+        }
+        .color{
+            position: absolute;
+            top: 100px;
+            left: calc(50% - 100px);
+            width: 200px;
+            border: 1px solid red;
+        }
+  
+    </style>
+    <div id="app">
+        <div class="color">
+        <div @click="change"> <input style="width: 100px;" type="button" v-model="changecolor"></input> </div>
+        <div v-chnagecolor="color" style="width: 100px ; height: 100px;" > 内容 </div>
+        </div>
+    </div>
+</body>
+<script>
+    new Vue({
+        el: "#app",
+        data: {
+            color: "red",
+            changecolor: "下一个颜色blue",
+            colornum: ["red", "blue", "orange"],
+            num: 0,
+            num1: 1
+        },
+        methods: {
+            change: function () {
+                this.num++
+                this.num1++
+                if (this.num == '3') {
+              
+                    this.num = '0'
+                }
+                if (this.num1 == '3') {
+                    this.num1 = '0'
+                }
+
+
+                this.changecolor="下一个颜色"+this.colornum[this.num1]
+                this.color = this.colornum[this.num]
+                console.log(this.color);
+                console.log(this.num);
+            }
+        },
+        directives: {
+            chnagecolor: {
+                inserted(el, binding) {
+                    el.style.backgroundColor = binding.value
+                },
+                update(el, binding) {
+                    el.style.backgroundColor = binding.value;
+                },
+            },
+
+        }
+
+
+    })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220408/demo02.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220408/demo02.html"
new file mode 100644
index 00000000..21a1fbcb
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220408/demo02.html"
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>自定义指令</title>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+
+<body>
+  <div>
+    <div v-changecolor="color" id="app">
+      <div @click="click">点击我随机变色</div>
+    </div>
+    <script>
+      Vue.directive('changecolor', {
+        inserted: function (el, binding) {
+          el.style.color = binding.value
+
+        },
+        update(el, binding) {
+          console.log("update 触发了");
+          el.style.color = binding.value;
+        },
+        componentUpdated(el, binding) {
+          console.log("更新完成时 触发了");
+        }
+      })
+      new Vue({
+        el: '#app',
+        data: {
+          color: 'pink'
+        },
+        methods: {
+          click: function () {
+            console.log("------------");
+            let color = Math.floor(Math.random() * 1000000);
+            this.color = '#' + color;
+            
+          }
+        }
+      })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220413/demo01.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220413/demo01.html"
new file mode 100644
index 00000000..77010d45
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220413/demo01.html"
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>demo03</title>
+</head>
+<style>
+    li {
+        list-style: none;
+    }
+    .center {
+
+        position: relative;
+        left: 0px
+    }
+    .ditydiv {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid;
+        width: 1000px;
+        padding: 0 0 230px 0;
+        background: lightgoldenrodyellow;
+        border: none;
+    }
+
+    .product {
+        position: absolute;
+        left: 200px;
+    width: 680px;
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 0 0;
+    }
+    .img {
+        position: absolute;
+        top: 50px;
+        width: 200px;
+    height: 150px;
+margin: 0 0 0 -42px;
+
+    }
+    .shangpin{
+        width: 80px;
+    }
+    .flex{
+    justify-content: start;
+    }
+</style>
+
+<body>
+    <div id="app">
+        <app :app="catalogs[0]"></app>
+        <app style="top: 250px;" :app="catalogs[1]"></app>
+    </div>
+
+    <script>
+
+        let product = {
+            props: ['product'],
+            template: "<div class='flex' ><li v-if='product.ifname'  class ='shangpin' >{{product.name}}</li> "+
+            "<div class='img' v-if='product.showimg'  ><img :src='product.img' width='100%'> {{product.price}} </div> </div> ",
+        }
+        let catalog = {
+            data: function () {
+                return {
+                    show: true,
+                    ifname:false,
+                }
+            },
+            methods: {
+                catshow: function () {
+                    console.log(this.data.products[0].ifname);
+                    this.data.products[0].showimg = !this.data.products[0].showimg
+                    this.data.products[1].showimg = !this.data.products[1].showimg
+                    this.data.products[2].showimg = !this.data.products[2].showimg
+                    this.data.products[0].ifname = !this.data.products[0].ifname
+                    this.data.products[1].ifname = !this.data.products[1].ifname
+                    this.data.products[2].ifname = !this.data.products[2].ifname
+                }
+
+
+            },
+            props: ['data'],
+            // 商品目录
+            template: "<div  class='ditydiv'><div class='catalog' @click='catshow'  ><div class='ul' style='width:100%'>{{data.name}}</div></div>" +
+                "<ul class='product' v-if='show'    ><product v-for='product in data.products':product='product'  > </product></ul>" +
+                "</div>",
+            components: {
+                product,
+            }
+        }
+        let app = {
+            props: ['app'],
+            //商品
+            template: "<div  class='center'><catalog :data='app' :ismg='app'></catalog></div>",
+
+            components: {
+                catalog
+            }
+        }
+        new Vue({
+            el: "#app",
+            data: {
+                ifdiv:false,
+                catalogs: [
+                    {
+                        id: 1,
+                        name: '手机',
+                        products: [
+                    
+                            {
+                                id: 1,
+                                ifname: false,   
+                                name: 'huawei',
+                                price: '1999',
+                                img: 'https://img2.baidu.com/it/u=2508613218,3733856206&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'redmin',
+                                price: '1999',
+                                img: 'https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'iphone',
+                                price: '1999',
+                                img: 'https://img0.baidu.com/it/u=768643584,3414937184&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                       
+                        ]
+                    },
+                    {
+                        id: 2,
+                        name: '笔记本电脑',
+                        products: [
+                         
+                            {
+                                id: 1,
+                                ifname: false,
+                                name: 'huawei',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'xiaomin',
+                                price: '4999',
+                                img: 'https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'tiaji',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            }
+                        ]
+                    }
+                ],
+            },
+            components: {
+                app,
+            }
+        })
+
+
+    </script>
+</body>
+
+</html>
+<!-- //作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220414/demo03.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220414/demo03.html"
new file mode 100644
index 00000000..77010d45
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220414/demo03.html"
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>demo03</title>
+</head>
+<style>
+    li {
+        list-style: none;
+    }
+    .center {
+
+        position: relative;
+        left: 0px
+    }
+    .ditydiv {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid;
+        width: 1000px;
+        padding: 0 0 230px 0;
+        background: lightgoldenrodyellow;
+        border: none;
+    }
+
+    .product {
+        position: absolute;
+        left: 200px;
+    width: 680px;
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 0 0;
+    }
+    .img {
+        position: absolute;
+        top: 50px;
+        width: 200px;
+    height: 150px;
+margin: 0 0 0 -42px;
+
+    }
+    .shangpin{
+        width: 80px;
+    }
+    .flex{
+    justify-content: start;
+    }
+</style>
+
+<body>
+    <div id="app">
+        <app :app="catalogs[0]"></app>
+        <app style="top: 250px;" :app="catalogs[1]"></app>
+    </div>
+
+    <script>
+
+        let product = {
+            props: ['product'],
+            template: "<div class='flex' ><li v-if='product.ifname'  class ='shangpin' >{{product.name}}</li> "+
+            "<div class='img' v-if='product.showimg'  ><img :src='product.img' width='100%'> {{product.price}} </div> </div> ",
+        }
+        let catalog = {
+            data: function () {
+                return {
+                    show: true,
+                    ifname:false,
+                }
+            },
+            methods: {
+                catshow: function () {
+                    console.log(this.data.products[0].ifname);
+                    this.data.products[0].showimg = !this.data.products[0].showimg
+                    this.data.products[1].showimg = !this.data.products[1].showimg
+                    this.data.products[2].showimg = !this.data.products[2].showimg
+                    this.data.products[0].ifname = !this.data.products[0].ifname
+                    this.data.products[1].ifname = !this.data.products[1].ifname
+                    this.data.products[2].ifname = !this.data.products[2].ifname
+                }
+
+
+            },
+            props: ['data'],
+            // 商品目录
+            template: "<div  class='ditydiv'><div class='catalog' @click='catshow'  ><div class='ul' style='width:100%'>{{data.name}}</div></div>" +
+                "<ul class='product' v-if='show'    ><product v-for='product in data.products':product='product'  > </product></ul>" +
+                "</div>",
+            components: {
+                product,
+            }
+        }
+        let app = {
+            props: ['app'],
+            //商品
+            template: "<div  class='center'><catalog :data='app' :ismg='app'></catalog></div>",
+
+            components: {
+                catalog
+            }
+        }
+        new Vue({
+            el: "#app",
+            data: {
+                ifdiv:false,
+                catalogs: [
+                    {
+                        id: 1,
+                        name: '手机',
+                        products: [
+                    
+                            {
+                                id: 1,
+                                ifname: false,   
+                                name: 'huawei',
+                                price: '1999',
+                                img: 'https://img2.baidu.com/it/u=2508613218,3733856206&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'redmin',
+                                price: '1999',
+                                img: 'https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'iphone',
+                                price: '1999',
+                                img: 'https://img0.baidu.com/it/u=768643584,3414937184&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                       
+                        ]
+                    },
+                    {
+                        id: 2,
+                        name: '笔记本电脑',
+                        products: [
+                         
+                            {
+                                id: 1,
+                                ifname: false,
+                                name: 'huawei',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'xiaomin',
+                                price: '4999',
+                                img: 'https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'tiaji',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            }
+                        ]
+                    }
+                ],
+            },
+            components: {
+                app,
+            }
+        })
+
+
+    </script>
+</body>
+
+</html>
+<!-- //作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220415/demo03.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220415/demo03.html"
new file mode 100644
index 00000000..72bac31b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220415/demo03.html"
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>demo03</title>
+</head>
+<style>
+    li {
+        list-style: none;
+    }
+    .center {
+
+        position: relative;
+        left: 0px
+    }
+    .ditydiv {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid;
+        width: 1000px;
+        padding: 0 0 230px 0;
+        background: lightgoldenrodyellow;
+        border: none;
+        z-index: -1;
+    }
+
+    .product {
+        position: absolute;
+        left: 250px;
+    width: 630px;
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 0 0;
+    }
+    .img {
+        position: absolute;
+        top: 50px;
+        width: 200px;
+    height: 150px;
+margin: 0 0 0 -42px;
+
+    }
+    .shangpin{
+        width: 80px;
+    }
+    .flex{
+    justify-content: start;
+    }
+    .ul{
+      z-index: 1;
+    }
+    .slot{
+      position: absolute;
+      top: 50px;
+      width: 200px;
+    }
+</style>
+
+<body>
+    <div id="app">
+      <app :app="catalogs[0]"><template  v-slot:give> <span style="    position: absolute;">广告</span> <img width="100%" src="https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"></template></app>
+        <app style="top: 250px;" :app="catalogs[1]"><template  v-slot:dian> <span style="    position: absolute;">广告</span> <img width="100%" src="https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"></template></app> </app>
+    </div>
+
+    <script>
+
+        let product = {
+            props: ['product'],
+            template: "<div class='flex' ><li v-if='product.ifname'  class ='shangpin' >{{product.name}}</li> "+
+            "<div class='img' v-if='product.showimg'  ><img :src='product.img' width='100%'> {{product.price}} </div> </div> ",
+        }
+        let catalog = {
+            data: function () {
+                return {
+                    show: true,
+                    ifname:false,
+                }
+            },
+            methods: {
+                catshow: function () {
+                    console.log(this.data.products[0].ifname);
+                    this.data.products[0].showimg = !this.data.products[0].showimg
+                    this.data.products[1].showimg = !this.data.products[1].showimg
+                    this.data.products[2].showimg = !this.data.products[2].showimg
+                    this.data.products[0].ifname = !this.data.products[0].ifname
+                    this.data.products[1].ifname = !this.data.products[1].ifname
+                    this.data.products[2].ifname = !this.data.products[2].ifname
+                }
+
+
+            },
+            props: ['data'],
+            // 商品目录
+            template: "<div  class='ditydiv'><div class='catalog' @click='catshow'  ><div class='ul' style='width:100%'>{{data.name}}</div></div>" +
+                "<ul class='product' v-if='show'    ><product v-for='product in data.products':product='product'  > </product></ul>" +
+                "</div>",
+            components: {
+                product,
+            }
+        }
+        let app = {
+            props: ['app'],
+            //商品
+            template: "<div  class='center'><div class='slot'> <slot name='dian'></slot> <slot name='give'></slot></div> <catalog :data='app' :ismg='app'></catalog></div>",
+
+            components: {
+                catalog
+            }
+        }
+        new Vue({
+            el: "#app",
+            data: {
+                ifdiv:false,
+                catalogs: [
+                    {
+                        id: 1,
+                        name: '手机',
+
+                        products: [
+                    
+                            {
+                                id: 1,
+                                ifname: false,   
+                                name: 'huawei',
+                                price: '1999',
+                                img: 'https://img2.baidu.com/it/u=2508613218,3733856206&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'redmin',
+                                price: '1999',
+                                img: 'https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'iphone',
+                                price: '1999',
+                                img: 'https://img0.baidu.com/it/u=768643584,3414937184&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                       
+                        ]
+                    },
+                    {
+                        id: 2,
+                        name: '笔记本电脑',
+                        products: [
+                         
+                            {
+                                id: 1,
+                                ifname: false,
+                                name: 'huawei',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'xiaomin',
+                                price: '4999',
+                                img: 'https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'tiaji',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            }
+                        ]
+                    }
+                ],
+            },
+            components: {
+                app,
+            }
+        })
+
+
+    </script>
+</body>
+
+</html>
+<!-- //作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
+
+<!---作业,es2015模块，回顾下，没学预习下, 在上一节课基础之上使用 slot插槽 为不同的目录，添加不同的背景图片-->
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220419/demo01.html" "b/\346\235\216\344\277\241\345\256\217/Vue/20220419/demo01.html"
new file mode 100644
index 00000000..72bac31b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220419/demo01.html"
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>demo03</title>
+</head>
+<style>
+    li {
+        list-style: none;
+    }
+    .center {
+
+        position: relative;
+        left: 0px
+    }
+    .ditydiv {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid;
+        width: 1000px;
+        padding: 0 0 230px 0;
+        background: lightgoldenrodyellow;
+        border: none;
+        z-index: -1;
+    }
+
+    .product {
+        position: absolute;
+        left: 250px;
+    width: 630px;
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 0 0;
+    }
+    .img {
+        position: absolute;
+        top: 50px;
+        width: 200px;
+    height: 150px;
+margin: 0 0 0 -42px;
+
+    }
+    .shangpin{
+        width: 80px;
+    }
+    .flex{
+    justify-content: start;
+    }
+    .ul{
+      z-index: 1;
+    }
+    .slot{
+      position: absolute;
+      top: 50px;
+      width: 200px;
+    }
+</style>
+
+<body>
+    <div id="app">
+      <app :app="catalogs[0]"><template  v-slot:give> <span style="    position: absolute;">广告</span> <img width="100%" src="https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"></template></app>
+        <app style="top: 250px;" :app="catalogs[1]"><template  v-slot:dian> <span style="    position: absolute;">广告</span> <img width="100%" src="https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"></template></app> </app>
+    </div>
+
+    <script>
+
+        let product = {
+            props: ['product'],
+            template: "<div class='flex' ><li v-if='product.ifname'  class ='shangpin' >{{product.name}}</li> "+
+            "<div class='img' v-if='product.showimg'  ><img :src='product.img' width='100%'> {{product.price}} </div> </div> ",
+        }
+        let catalog = {
+            data: function () {
+                return {
+                    show: true,
+                    ifname:false,
+                }
+            },
+            methods: {
+                catshow: function () {
+                    console.log(this.data.products[0].ifname);
+                    this.data.products[0].showimg = !this.data.products[0].showimg
+                    this.data.products[1].showimg = !this.data.products[1].showimg
+                    this.data.products[2].showimg = !this.data.products[2].showimg
+                    this.data.products[0].ifname = !this.data.products[0].ifname
+                    this.data.products[1].ifname = !this.data.products[1].ifname
+                    this.data.products[2].ifname = !this.data.products[2].ifname
+                }
+
+
+            },
+            props: ['data'],
+            // 商品目录
+            template: "<div  class='ditydiv'><div class='catalog' @click='catshow'  ><div class='ul' style='width:100%'>{{data.name}}</div></div>" +
+                "<ul class='product' v-if='show'    ><product v-for='product in data.products':product='product'  > </product></ul>" +
+                "</div>",
+            components: {
+                product,
+            }
+        }
+        let app = {
+            props: ['app'],
+            //商品
+            template: "<div  class='center'><div class='slot'> <slot name='dian'></slot> <slot name='give'></slot></div> <catalog :data='app' :ismg='app'></catalog></div>",
+
+            components: {
+                catalog
+            }
+        }
+        new Vue({
+            el: "#app",
+            data: {
+                ifdiv:false,
+                catalogs: [
+                    {
+                        id: 1,
+                        name: '手机',
+
+                        products: [
+                    
+                            {
+                                id: 1,
+                                ifname: false,   
+                                name: 'huawei',
+                                price: '1999',
+                                img: 'https://img2.baidu.com/it/u=2508613218,3733856206&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'redmin',
+                                price: '1999',
+                                img: 'https://img1.baidu.com/it/u=3177162649,2831230396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'iphone',
+                                price: '1999',
+                                img: 'https://img0.baidu.com/it/u=768643584,3414937184&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                       
+                        ]
+                    },
+                    {
+                        id: 2,
+                        name: '笔记本电脑',
+                        products: [
+                         
+                            {
+                                id: 1,
+                                ifname: false,
+                                name: 'huawei',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 2,
+                                ifname: false,
+                                name: 'xiaomin',
+                                price: '4999',
+                                img: 'https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
+                            },
+                            {
+                                id: 3,
+                                ifname: false,
+                                name: 'tiaji',
+                                price: '4999',
+                                img: 'https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+                            }
+                        ]
+                    }
+                ],
+            },
+            components: {
+                app,
+            }
+        })
+
+
+    </script>
+</body>
+
+</html>
+<!-- //作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中 -->
+
+<!---作业,es2015模块，回顾下，没学预习下, 在上一节课基础之上使用 slot插槽 为不同的目录，添加不同的背景图片-->
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/App.vue"
new file mode 100644
index 00000000..7e495e1b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/App.vue"
@@ -0,0 +1,41 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/components/HeaderBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/components/HeaderBase.vue"
new file mode 100644
index 00000000..6c46e286
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/components/HeaderBase.vue"
@@ -0,0 +1,88 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/adidas.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/adidas.vue"
new file mode 100644
index 00000000..8fe067a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/akf.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/akf.vue"
new file mode 100644
index 00000000..23138e7d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/lining.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/lining.vue"
new file mode 100644
index 00000000..48dfd1e7
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/threece.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/threece.vue"
new file mode 100644
index 00000000..2300dc74
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/ugg.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/ugg.vue"
new file mode 100644
index 00000000..ff48e788
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/main.js"
new file mode 100644
index 00000000..59696113
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/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/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/AdvList.vue"
new file mode 100644
index 00000000..c530eb32
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/AdvList.vue"
@@ -0,0 +1,89 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+
+        <!--链接地址的对象写法-->
+        <!-- <router-link :to="{
+            path:'/list',
+            query:{
+                id:item.id,
+                name:item.name
+            }
+        }"> -->
+        <router-link :to="{
+            //name:'detail',
+            //path:'/adv/show/detail',层级过多的时候考虑使用命令路由
+            name:'detail',
+            //path:'/detail',//使用params传递参数时，不能使用path
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 params
+                id:item.id,
+                name:item.name,
+                price:item.price
+            }
+        }">
+            <!--<router-link :to="{
+                name:'list',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">--->
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+              {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/BodyBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/BodyBase.vue"
new file mode 100644
index 00000000..dc3226ac
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/BodyBase.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'list',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/Detail.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/Detail.vue"
new file mode 100644
index 00000000..3c314b0d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/pages/Detail.vue"
@@ -0,0 +1,251 @@
+<template>
+  <div >
+      
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2" >
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" v-on:click='add2Cart'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+
+
+
+export default {
+  name: 'Detail',
+  //props:['name','id','price'],
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  methods:{
+    add2Cart:function(){
+       let cararr=[];
+       cararr.push({name:'lv包包',price:80000,num:10}) 
+       localStorage.setItem('cart',JSON.stringify(cararr));
+    }
+  },
+  mounted(){
+    // console.log(this);
+    // // console.log(this.$route.query.name);
+    // //this.id = this.$route.params.id
+    // // console.log( this.$route.params);
+    // for(let name in this.$route.params){
+    //   this[name]=this.$route.params[name]
+    // }
+    //let paramsxiong = this.$route.params;
+    //console.log(this.$route.params);
+    //this.paramsxiong=paramsxiong;
+    console.log(this.$route.params)
+    // this.$route.params.forEach(key => {
+    //     console.log(key)
+    // });
+    let params = this.$route.params;
+    for(var key in params){
+        //console.log(key)
+        //this.key=params.key;
+        this[key]=params[key];
+    }
+
+  },
+  // computed:{
+  //   ids:function(){
+  //     return this.$route.params.id
+  //   },
+  //   names:function(){
+  //     return this.$route.params.name
+  //   },
+  // }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/router/index.js"
new file mode 100644
index 00000000..ec9c7b9b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220420/src/router/index.js"
@@ -0,0 +1,49 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'guanggao',
+            path: '/adv',
+            component: AdvList,
+            children:[
+                {
+                    path: 'show',
+                    component: Detail,
+                    children:[
+                        {
+                            name:'gson',
+                            path: 'detail',
+                            component: Detail,
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name:'detail',
+            path:'/detail/:id/:name/:price',
+            //path:'/detail',
+            component: Detail,
+            props:true,
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/App.vue"
new file mode 100644
index 00000000..7e495e1b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/App.vue"
@@ -0,0 +1,41 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/components/HeaderBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/components/HeaderBase.vue"
new file mode 100644
index 00000000..6c46e286
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/components/HeaderBase.vue"
@@ -0,0 +1,88 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/adidas.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/adidas.vue"
new file mode 100644
index 00000000..8fe067a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/akf.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/akf.vue"
new file mode 100644
index 00000000..23138e7d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/lining.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/lining.vue"
new file mode 100644
index 00000000..48dfd1e7
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/threece.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/threece.vue"
new file mode 100644
index 00000000..2300dc74
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/ugg.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/ugg.vue"
new file mode 100644
index 00000000..ff48e788
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/main.js"
new file mode 100644
index 00000000..59696113
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/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/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/AdvList.vue"
new file mode 100644
index 00000000..c530eb32
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/AdvList.vue"
@@ -0,0 +1,89 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+
+        <!--链接地址的对象写法-->
+        <!-- <router-link :to="{
+            path:'/list',
+            query:{
+                id:item.id,
+                name:item.name
+            }
+        }"> -->
+        <router-link :to="{
+            //name:'detail',
+            //path:'/adv/show/detail',层级过多的时候考虑使用命令路由
+            name:'detail',
+            //path:'/detail',//使用params传递参数时，不能使用path
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 params
+                id:item.id,
+                name:item.name,
+                price:item.price
+            }
+        }">
+            <!--<router-link :to="{
+                name:'list',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">--->
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+              {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/BodyBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/BodyBase.vue"
new file mode 100644
index 00000000..dc3226ac
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/BodyBase.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'list',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/Detail.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/Detail.vue"
new file mode 100644
index 00000000..3c314b0d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/pages/Detail.vue"
@@ -0,0 +1,251 @@
+<template>
+  <div >
+      
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2" >
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" v-on:click='add2Cart'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+
+
+
+export default {
+  name: 'Detail',
+  //props:['name','id','price'],
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  methods:{
+    add2Cart:function(){
+       let cararr=[];
+       cararr.push({name:'lv包包',price:80000,num:10}) 
+       localStorage.setItem('cart',JSON.stringify(cararr));
+    }
+  },
+  mounted(){
+    // console.log(this);
+    // // console.log(this.$route.query.name);
+    // //this.id = this.$route.params.id
+    // // console.log( this.$route.params);
+    // for(let name in this.$route.params){
+    //   this[name]=this.$route.params[name]
+    // }
+    //let paramsxiong = this.$route.params;
+    //console.log(this.$route.params);
+    //this.paramsxiong=paramsxiong;
+    console.log(this.$route.params)
+    // this.$route.params.forEach(key => {
+    //     console.log(key)
+    // });
+    let params = this.$route.params;
+    for(var key in params){
+        //console.log(key)
+        //this.key=params.key;
+        this[key]=params[key];
+    }
+
+  },
+  // computed:{
+  //   ids:function(){
+  //     return this.$route.params.id
+  //   },
+  //   names:function(){
+  //     return this.$route.params.name
+  //   },
+  // }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/router/index.js"
new file mode 100644
index 00000000..ec9c7b9b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220421/src/router/index.js"
@@ -0,0 +1,49 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'guanggao',
+            path: '/adv',
+            component: AdvList,
+            children:[
+                {
+                    path: 'show',
+                    component: Detail,
+                    children:[
+                        {
+                            name:'gson',
+                            path: 'detail',
+                            component: Detail,
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name:'detail',
+            path:'/detail/:id/:name/:price',
+            //path:'/detail',
+            component: Detail,
+            props:true,
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/App.vue"
new file mode 100644
index 00000000..7e495e1b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/App.vue"
@@ -0,0 +1,41 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/components/HeaderBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/components/HeaderBase.vue"
new file mode 100644
index 00000000..6c46e286
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/components/HeaderBase.vue"
@@ -0,0 +1,88 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/adidas.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/adidas.vue"
new file mode 100644
index 00000000..8fe067a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/akf.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/akf.vue"
new file mode 100644
index 00000000..23138e7d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/lining.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/lining.vue"
new file mode 100644
index 00000000..48dfd1e7
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/threece.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/threece.vue"
new file mode 100644
index 00000000..2300dc74
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/ugg.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/ugg.vue"
new file mode 100644
index 00000000..ff48e788
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/main.js"
new file mode 100644
index 00000000..59696113
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/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/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/AdvList.vue"
new file mode 100644
index 00000000..c530eb32
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/AdvList.vue"
@@ -0,0 +1,89 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+
+        <!--链接地址的对象写法-->
+        <!-- <router-link :to="{
+            path:'/list',
+            query:{
+                id:item.id,
+                name:item.name
+            }
+        }"> -->
+        <router-link :to="{
+            //name:'detail',
+            //path:'/adv/show/detail',层级过多的时候考虑使用命令路由
+            name:'detail',
+            //path:'/detail',//使用params传递参数时，不能使用path
+            params:{//使用 params 传递参数时,query 不能使用，需要使用 params
+                id:item.id,
+                name:item.name,
+                price:item.price
+            }
+        }">
+            <!--<router-link :to="{
+                name:'list',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">--->
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+              {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/BodyBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/BodyBase.vue"
new file mode 100644
index 00000000..dc3226ac
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/BodyBase.vue"
@@ -0,0 +1,65 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'list',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/Detail.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/Detail.vue"
new file mode 100644
index 00000000..3c314b0d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/pages/Detail.vue"
@@ -0,0 +1,251 @@
+<template>
+  <div >
+      
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2" >
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" v-on:click='add2Cart'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+
+
+
+export default {
+  name: 'Detail',
+  //props:['name','id','price'],
+  data(){
+    return{
+      id:'',
+      name:'',
+      price:'',
+    }
+  },
+  methods:{
+    add2Cart:function(){
+       let cararr=[];
+       cararr.push({name:'lv包包',price:80000,num:10}) 
+       localStorage.setItem('cart',JSON.stringify(cararr));
+    }
+  },
+  mounted(){
+    // console.log(this);
+    // // console.log(this.$route.query.name);
+    // //this.id = this.$route.params.id
+    // // console.log( this.$route.params);
+    // for(let name in this.$route.params){
+    //   this[name]=this.$route.params[name]
+    // }
+    //let paramsxiong = this.$route.params;
+    //console.log(this.$route.params);
+    //this.paramsxiong=paramsxiong;
+    console.log(this.$route.params)
+    // this.$route.params.forEach(key => {
+    //     console.log(key)
+    // });
+    let params = this.$route.params;
+    for(var key in params){
+        //console.log(key)
+        //this.key=params.key;
+        this[key]=params[key];
+    }
+
+  },
+  // computed:{
+  //   ids:function(){
+  //     return this.$route.params.id
+  //   },
+  //   names:function(){
+  //     return this.$route.params.name
+  //   },
+  // }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/router/index.js"
new file mode 100644
index 00000000..ec9c7b9b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220426/src/router/index.js"
@@ -0,0 +1,49 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'guanggao',
+            path: '/adv',
+            component: AdvList,
+            children:[
+                {
+                    path: 'show',
+                    component: Detail,
+                    children:[
+                        {
+                            name:'gson',
+                            path: 'detail',
+                            component: Detail,
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name:'detail',
+            path:'/detail/:id/:name/:price',
+            //path:'/detail',
+            component: Detail,
+            props:true,
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/App.vue"
new file mode 100644
index 00000000..cfbc3da3
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/App.vue"
@@ -0,0 +1,34 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  color:#807E7B;
+}
+
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/CartItem.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/CartItem.vue"
new file mode 100644
index 00000000..a991ad46
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/CartItem.vue"
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="ym" >
+      <img :src="img" alt="" />
+      <h4>{{name}}</h4>
+      <br />
+      <div class="a">
+        <span class="count">{{price}}</span><span><input type='number' v-model='cnum' @change="changeNum" ></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CartItem",
+  props:{
+    id:Number,
+    img:String,
+    name:String,
+    num:Number,
+    price:Number
+  },
+  data:function(){
+    return {
+      cnum:0,
+    }
+  },
+  mounted:function(){
+    this.cnum=this.num
+  },
+  methods:{
+    changeNum:function(){
+      console.log('儿子出发了修改事件');
+      //this.$emit('changeFatherNum',this.cnum,1,2,3,4,5,6);
+      this.$emit('fromChildren',this.cnum,this.id);
+    },
+    tofather(){
+      console.log('tofather from son');
+      this.$emit('click');
+    }
+  },
+  created:function(){
+    console.log('cartitem 创建了');
+  }
+};
+</script>
+
+<style>
+.shoping {
+     margin: 5%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+
+</style>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/HeaderBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/HeaderBase.vue"
new file mode 100644
index 00000000..e07c2387
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/components/HeaderBase.vue"
@@ -0,0 +1,92 @@
+<template>
+  <div class="header">
+ <div class="top">
+      <span style="color: hotpink; ">
+        唯品会
+      </span>
+      <span style="color: #98989f;">
+        品牌特买百分百正品
+      </span>
+      <span>登录</span>
+    </div>
+    <div class="topinput">
+      <input/>
+    </div>
+     <div class="ul">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ #app {
+
+
+  color: #2c3e50;
+  position: relative;
+     height: 90vh;
+         background-color: #F1F3F4;
+    
+    height: 400px;
+
+    border: 1px solid #ddd;
+}
+.top {
+    width: 100%;
+    height: 5%;
+    position: absolute;
+    display: flex;
+    justify-content: space-around;
+ 
+}
+.topinput {
+  position: absolute;
+  height: 5%;
+  top: 5%;
+  width: 100%;
+}
+.topinput input{
+      width: 90%;
+    border-radius: 10px;
+    position: absolute;
+    top: 20%;
+    left: 5%;
+    border: 1px solid;
+    height: 20px;
+}
+.ul{
+    position: absolute;
+    width: 100%;
+    top: 10%;
+    display: flex;
+    justify-content: space-evenly;
+        padding: 10px 0 0 0;
+}
+.ul a{
+  margin: 0 0 0 0;
+}
+.ly{
+    width: 100%;
+    height: 80%;
+    border: 1px solid;
+    position: absolute;
+    top: 17%;
+    overflow: scroll;
+
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/adidas.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/adidas.vue"
new file mode 100644
index 00000000..8fe067a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/akf.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/akf.vue"
new file mode 100644
index 00000000..23138e7d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/lining.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/lining.vue"
new file mode 100644
index 00000000..48dfd1e7
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/threece.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/threece.vue"
new file mode 100644
index 00000000..2300dc74
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/ugg.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/ugg.vue"
new file mode 100644
index 00000000..ff48e788
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/main.js"
new file mode 100644
index 00000000..5a6fd906
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/main.js"
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import App from './App.vue'
+// import axios from 'axios'
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+// Vue.use(axios)
+
+
+//引入路由器
+import router from './router/index'
+
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   router
+})
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/AdvList.vue"
new file mode 100644
index 00000000..ed8dd875
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/AdvList.vue"
@@ -0,0 +1,62 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+              {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin: 5%;
+ }
+ .a{
+     position: relative;
+    top: -5vw;
+    left: 80%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/BodyBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/BodyBase.vue"
new file mode 100644
index 00000000..632eeb0b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/CartList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/CartList.vue"
new file mode 100644
index 00000000..195394e1
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/CartList.vue"
@@ -0,0 +1,81 @@
+<template>
+    
+     <div class="shoping"  >
+        <CartItem  ref='shopping' @click.native='showMsg' v-for="(pro,index) in products" :key='index' :id='pro.id' :name='pro.name' :img='pro.img' :price='pro.price' :num="parseInt(pro.num)" @changeFatherNum='receiveFromChirden'></CartItem>
+     </div>
+ 
+</template>
+
+<script>
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+//   data(){// 这个格式是 下面的简写
+//       return {
+//           products:[
+//           ]
+//       }
+//   },
+  data:function(){
+      return {products:[]};
+  },
+  created:function(){
+      let products= JSON.parse(localStorage.getItem('cart'));
+      this.products=products;
+      console.log('cartlist创建了!');
+
+  },
+  mounted:function(){
+      console.log('cartList mount!!');
+      //ref 有个对应的获取属性
+      //console.log(this.$refs.shopping)
+      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);
+        //   });//$ob 可以开启一个监听事件
+        this.$refs.shopping[key].$on('fromChildren',this.fromChildren)
+      }
+  },
+
+  components:{
+      CartItem:CartItem,
+  },
+  methods:{
+      receiveFromChirden:function(num,num2,...args){
+          console.log('父亲接受到了消息',num,num2,args);
+      },
+      showMsg(){
+         // console.log('点击了');
+      },
+      fromChildren(num,id){
+          console.log('接受子组件的实例');
+          let products=JSON.parse(localStorage.getItem('cart'));
+          for(let key in products){
+              let currentProduct = products[key];
+              if(id==currentProduct.id){
+                  currentProduct.num=num;
+              }
+          }
+          localStorage.setItem('cart',JSON.stringify(products));
+      }
+  }
+  
+}
+</script>
+<style scoped>
+.shoping {
+     margin: 5%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/Detail.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/Detail.vue"
new file mode 100644
index 00000000..8f84d37f
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/pages/Detail.vue"
@@ -0,0 +1,272 @@
+<template>
+
+        <div class="cne">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" v-on:click='add2Card'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+
+</template>
+
+<script>
+
+
+
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:''
+    }
+  },
+  methods:{
+    add2Card:function(){
+         // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+         let key = 'cart';
+         let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:1};
+         //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+         let allProducts = localStorage.getItem(key);//因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+         //数组的字符串怎么转成数组?
+         allProducts = JSON.parse(allProducts);       
+         //此次购物的商品可能已经存在购物车中
+         //还需要判断，是否是第一次购物，第一购物，没有数据
+         if(allProducts){
+          let inPro=false;   
+          for(let key in allProducts){//引用传递
+             let detailPro = allProducts[key];//取出购物车中的每一个商品
+             //如果此次的购物商品已经存在
+             //console.log(detailPro.id,pro.id)
+             if(detailPro.id==pro.id){
+                 detailPro.num++;//detailPro 是 allProducts 中的其中一条数据
+                 inPro=true;
+             }
+          }
+          if(!inPro){
+              allProducts.push(pro);
+          }
+         }else{//没有购物时候
+            allProducts=[];
+            allProducts.push(pro);
+         }    
+         localStorage.setItem(key,JSON.stringify(allProducts));
+        //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+        //编程式的路由调转
+        //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+        this.$router.push({path:'/cartList'})//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
+        //window.history.go(-2)
+        //this.$router.history.go(1);
+        //console.log(this.$router)
+    }
+  },
+  mounted(){
+    // console.log(this);
+    // // console.log(this.$route.query.name);
+    // //this.id = this.$route.params.id
+    // // console.log( this.$route.params);
+    // for(let name in this.$route.params){
+    //   this[name]=this.$route.params[name]
+    // }
+
+  },
+  // computed:{
+  //   ids:function(){
+  //     return this.$route.params.id
+  //   },
+  //   names:function(){
+  //     return this.$route.params.name
+  //   },
+  // }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.cne {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 100px;
+    background-color: #fff;
+    position: absolute;
+    top: 80%;
+    display: flex;
+ justify-content: space-between;
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/router/index.js"
new file mode 100644
index 00000000..e23a1727
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220428/src/router/index.js"
@@ -0,0 +1,53 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path: '/adv',
+            component: AdvList,
+        },
+        {
+            name:'detail',
+            //path:'/detail', props 传递参数，query 不行
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true //bool 类型
+            // props($route){// 函数的写法
+            //     return {
+            //              id:$route.params.id,
+            //              name:$route.params.name,
+            //              img:$route.params.img
+            //             }
+            //    }
+   
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/App.vue"
new file mode 100644
index 00000000..cfbc3da3
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/App.vue"
@@ -0,0 +1,34 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  color:#807E7B;
+}
+
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/CartItem.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/CartItem.vue"
new file mode 100644
index 00000000..a991ad46
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/CartItem.vue"
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="ym" >
+      <img :src="img" alt="" />
+      <h4>{{name}}</h4>
+      <br />
+      <div class="a">
+        <span class="count">{{price}}</span><span><input type='number' v-model='cnum' @change="changeNum" ></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CartItem",
+  props:{
+    id:Number,
+    img:String,
+    name:String,
+    num:Number,
+    price:Number
+  },
+  data:function(){
+    return {
+      cnum:0,
+    }
+  },
+  mounted:function(){
+    this.cnum=this.num
+  },
+  methods:{
+    changeNum:function(){
+      console.log('儿子出发了修改事件');
+      //this.$emit('changeFatherNum',this.cnum,1,2,3,4,5,6);
+      this.$emit('fromChildren',this.cnum,this.id);
+    },
+    tofather(){
+      console.log('tofather from son');
+      this.$emit('click');
+    }
+  },
+  created:function(){
+    console.log('cartitem 创建了');
+  }
+};
+</script>
+
+<style>
+.shoping {
+     margin: 5%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+
+</style>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/HeaderBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/HeaderBase.vue"
new file mode 100644
index 00000000..e07c2387
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/components/HeaderBase.vue"
@@ -0,0 +1,92 @@
+<template>
+  <div class="header">
+ <div class="top">
+      <span style="color: hotpink; ">
+        唯品会
+      </span>
+      <span style="color: #98989f;">
+        品牌特买百分百正品
+      </span>
+      <span>登录</span>
+    </div>
+    <div class="topinput">
+      <input/>
+    </div>
+     <div class="ul">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ #app {
+
+
+  color: #2c3e50;
+  position: relative;
+     height: 90vh;
+         background-color: #F1F3F4;
+    
+    height: 400px;
+
+    border: 1px solid #ddd;
+}
+.top {
+    width: 100%;
+    height: 5%;
+    position: absolute;
+    display: flex;
+    justify-content: space-around;
+ 
+}
+.topinput {
+  position: absolute;
+  height: 5%;
+  top: 5%;
+  width: 100%;
+}
+.topinput input{
+      width: 90%;
+    border-radius: 10px;
+    position: absolute;
+    top: 20%;
+    left: 5%;
+    border: 1px solid;
+    height: 20px;
+}
+.ul{
+    position: absolute;
+    width: 100%;
+    top: 10%;
+    display: flex;
+    justify-content: space-evenly;
+        padding: 10px 0 0 0;
+}
+.ul a{
+  margin: 0 0 0 0;
+}
+.ly{
+    width: 100%;
+    height: 80%;
+    border: 1px solid;
+    position: absolute;
+    top: 17%;
+    overflow: scroll;
+
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/adidas.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/adidas.vue"
new file mode 100644
index 00000000..8fe067a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/akf.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/akf.vue"
new file mode 100644
index 00000000..23138e7d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/lining.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/lining.vue"
new file mode 100644
index 00000000..48dfd1e7
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/threece.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/threece.vue"
new file mode 100644
index 00000000..2300dc74
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/ugg.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/ugg.vue"
new file mode 100644
index 00000000..ff48e788
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/main.js"
new file mode 100644
index 00000000..5a6fd906
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/main.js"
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import App from './App.vue'
+// import axios from 'axios'
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+// Vue.use(axios)
+
+
+//引入路由器
+import router from './router/index'
+
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   router
+})
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/AdvList.vue"
new file mode 100644
index 00000000..ed8dd875
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/AdvList.vue"
@@ -0,0 +1,62 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[
+              {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+              {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+              {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+              {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin: 5%;
+ }
+ .a{
+     position: relative;
+    top: -5vw;
+    left: 80%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/BodyBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/BodyBase.vue"
new file mode 100644
index 00000000..632eeb0b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/CartList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/CartList.vue"
new file mode 100644
index 00000000..195394e1
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/CartList.vue"
@@ -0,0 +1,81 @@
+<template>
+    
+     <div class="shoping"  >
+        <CartItem  ref='shopping' @click.native='showMsg' v-for="(pro,index) in products" :key='index' :id='pro.id' :name='pro.name' :img='pro.img' :price='pro.price' :num="parseInt(pro.num)" @changeFatherNum='receiveFromChirden'></CartItem>
+     </div>
+ 
+</template>
+
+<script>
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+//   data(){// 这个格式是 下面的简写
+//       return {
+//           products:[
+//           ]
+//       }
+//   },
+  data:function(){
+      return {products:[]};
+  },
+  created:function(){
+      let products= JSON.parse(localStorage.getItem('cart'));
+      this.products=products;
+      console.log('cartlist创建了!');
+
+  },
+  mounted:function(){
+      console.log('cartList mount!!');
+      //ref 有个对应的获取属性
+      //console.log(this.$refs.shopping)
+      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);
+        //   });//$ob 可以开启一个监听事件
+        this.$refs.shopping[key].$on('fromChildren',this.fromChildren)
+      }
+  },
+
+  components:{
+      CartItem:CartItem,
+  },
+  methods:{
+      receiveFromChirden:function(num,num2,...args){
+          console.log('父亲接受到了消息',num,num2,args);
+      },
+      showMsg(){
+         // console.log('点击了');
+      },
+      fromChildren(num,id){
+          console.log('接受子组件的实例');
+          let products=JSON.parse(localStorage.getItem('cart'));
+          for(let key in products){
+              let currentProduct = products[key];
+              if(id==currentProduct.id){
+                  currentProduct.num=num;
+              }
+          }
+          localStorage.setItem('cart',JSON.stringify(products));
+      }
+  }
+  
+}
+</script>
+<style scoped>
+.shoping {
+     margin: 5%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/Detail.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/Detail.vue"
new file mode 100644
index 00000000..8f84d37f
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/pages/Detail.vue"
@@ -0,0 +1,272 @@
+<template>
+
+        <div class="cne">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" v-on:click='add2Card'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+
+</template>
+
+<script>
+
+
+
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:''
+    }
+  },
+  methods:{
+    add2Card:function(){
+         // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
+         let key = 'cart';
+         let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:1};
+         //购物车，可以有多个商品，需考虑之前的购物车又没数据？
+         let allProducts = localStorage.getItem(key);//因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
+         //数组的字符串怎么转成数组?
+         allProducts = JSON.parse(allProducts);       
+         //此次购物的商品可能已经存在购物车中
+         //还需要判断，是否是第一次购物，第一购物，没有数据
+         if(allProducts){
+          let inPro=false;   
+          for(let key in allProducts){//引用传递
+             let detailPro = allProducts[key];//取出购物车中的每一个商品
+             //如果此次的购物商品已经存在
+             //console.log(detailPro.id,pro.id)
+             if(detailPro.id==pro.id){
+                 detailPro.num++;//detailPro 是 allProducts 中的其中一条数据
+                 inPro=true;
+             }
+          }
+          if(!inPro){
+              allProducts.push(pro);
+          }
+         }else{//没有购物时候
+            allProducts=[];
+            allProducts.push(pro);
+         }    
+         localStorage.setItem(key,JSON.stringify(allProducts));
+        //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
+        //编程式的路由调转
+        //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
+        this.$router.push({path:'/cartList'})//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
+        //window.history.go(-2)
+        //this.$router.history.go(1);
+        //console.log(this.$router)
+    }
+  },
+  mounted(){
+    // console.log(this);
+    // // console.log(this.$route.query.name);
+    // //this.id = this.$route.params.id
+    // // console.log( this.$route.params);
+    // for(let name in this.$route.params){
+    //   this[name]=this.$route.params[name]
+    // }
+
+  },
+  // computed:{
+  //   ids:function(){
+  //     return this.$route.params.id
+  //   },
+  //   names:function(){
+  //     return this.$route.params.name
+  //   },
+  // }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.cne {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 100px;
+    background-color: #fff;
+    position: absolute;
+    top: 80%;
+    display: flex;
+ justify-content: space-between;
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/router/index.js"
new file mode 100644
index 00000000..e23a1727
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220429/src/router/index.js"
@@ -0,0 +1,53 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            path: '/adv',
+            component: AdvList,
+        },
+        {
+            name:'detail',
+            //path:'/detail', props 传递参数，query 不行
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true //bool 类型
+            // props($route){// 函数的写法
+            //     return {
+            //              id:$route.params.id,
+            //              name:$route.params.name,
+            //              img:$route.params.img
+            //             }
+            //    }
+   
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/App.vue"
new file mode 100644
index 00000000..72248fd6
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/CartItem.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/CartItem.vue"
new file mode 100644
index 00000000..6407152d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/CartItem.vue"
@@ -0,0 +1,85 @@
+<template>
+ <div >
+  <div class="ym">
+    <img :src="img" alt="" />
+    <h4>{{name}}</h4>
+    <br />
+    <div class="a">
+      <span class="count">{{price}}</span><span>折起</span>
+      <input type="number" v-model="cnum" >
+      <button @click="pay">付款</button>
+    </div>
+  </div>
+ </div>
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+        cnum:this.num
+      }
+    },
+    props:{
+      id:Number,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      pay:function(){
+        console.log('付款商品数量',this.cnum);
+        console.log(this.id,this.cnum);
+        // this.$bus 进行了一个触发事件，接受的这个事件的也必须是同一个实例
+        this.$bus.$emit('confirmOder',this.id,this.cnum);
+      }
+    },
+    mounted:function(){
+      console.log(this)
+    }
+    
+};
+</script>
+
+<style>
+.shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+
+input:-internal-autofill-previewed,input:-internal-autofill-selected {
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/HeaderBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/HeaderBase.vue"
new file mode 100644
index 00000000..9a6b716b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/components/HeaderBase.vue"
@@ -0,0 +1,99 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <!-- <keep-alive :include="include">
+          <router-view></router-view>
+       </keep-alive> -->
+       <keep-alive>
+          <router-view v-if="$route.meta.keepalive"></router-view>
+       </keep-alive>
+        <router-view v-if="!$route.meta.keepalive"></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  data(){
+    return {
+      include:'AdvList'
+    }
+  },
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/config/constName.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/config/constName.js"
new file mode 100644
index 00000000..8020c116
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/config/constName.js"
@@ -0,0 +1,6 @@
+
+const constName={
+    name:'constName',
+    reduceNum:'reduceNum'
+}
+export default constName
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/data/product.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/data/product.js"
new file mode 100644
index 00000000..b6f5b61b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:81,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/adidas.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/adidas.vue"
new file mode 100644
index 00000000..8fe067a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/akf.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/akf.vue"
new file mode 100644
index 00000000..23138e7d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/lining.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/lining.vue"
new file mode 100644
index 00000000..48dfd1e7
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/threece.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/threece.vue"
new file mode 100644
index 00000000..2300dc74
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/ugg.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/ugg.vue"
new file mode 100644
index 00000000..ff48e788
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/main.js"
new file mode 100644
index 00000000..d3a72752
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/main.js"
@@ -0,0 +1,67 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+import Vuex from 'vuex';
+
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+//应用vuex 
+Vue.use(Vuex);
+
+//vuex 是个 数据管理工具，配置
+const store = new Vuex.Store({
+  //状态,就是数据
+  state: {
+     title:'外卖系统',
+     price:100,
+  },
+
+  mutations:{
+     changeTile:function(state,payload){//state
+         state.title = payload;
+     }
+  }
+})
+
+
+//引入路由器
+import router from './router/index';
+
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+
+
+
+// axios.defaults.baseURL='http://123.207.32.32:8000';
+Vue.prototype.$axios=axios;
+
+
+
+
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate.
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   beforeCreate:function(){
+     Vue.prototype.$bus=this;
+   },
+   router,
+   store
+})
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/mixin/MixIn.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/mixin/MixIn.js"
new file mode 100644
index 00000000..cc160b53
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/mixin/MixIn.js"
@@ -0,0 +1,40 @@
+export let methods={
+    created:function(){
+        console.log('mixin created')
+        this.initData();
+    },
+    methods:{
+        initData:function(){
+        //let url ='https://question.llblog.cc/';
+        let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+        //methos get post delete patch
+        this.$axios.get(url).then(res=>{
+           this.products=res.data.data;
+           console.log(this.products)
+          });
+        }
+    },
+    mounted:function(){
+        this.$bus.$on('confirmOder',(id,num)=>{
+            console.log('adv 收到change');
+           this.products.forEach(el=>{
+               if(el.id==id){
+                   el.num = el.num-num;
+               }
+           })
+        })
+    },
+}
+
+
+export const data={
+    data:function(){
+     return {
+        title:'实训项目',
+        price:100,
+        num:10
+     }
+    }
+    
+}
+
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/AdvList.vue"
new file mode 100644
index 00000000..cc8da7db
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/AdvList.vue"
@@ -0,0 +1,104 @@
+<template>
+
+  <div class="shoping" >
+     <scroller :on-refresh="refresh" :on-infinite="infinite">
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <!-- <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }"> -->
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
+                </div>
+            <!-- </router-link> -->
+         </div>
+      </scroller>
+     </div>
+
+    
+</template>
+
+<script>
+import {methods} from '../mixin/MixIn'
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1,
+          page:1,
+          pageSize:20
+      }
+  },
+
+  created:function(){
+     console.log(this.$class)
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  mixins:[methods],
+  methods:{
+      refresh:function(){
+          console.log('刷新');
+      },
+      infinite:function(){
+          console.log('拉取');
+          //let url ='https://question.llblog.cc/';
+         let url ='https://question.llblog.cc/api.php?page'+this.page+'&pageSize='+this.pageSize;//做了跨域处理的
+        //methos get post delete patch
+        this.$axios.get(url).then(res=>{
+             res.data.data.forEach(element => {
+                 this.products.push(element)
+             });
+             //  res.data.data 要有数据
+             if(res.data.data.length>0){
+                  this.page++;
+             }
+           
+          });
+        }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/BodyBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/BodyBase.vue"
new file mode 100644
index 00000000..632eeb0b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/CartList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/CartList.vue"
new file mode 100644
index 00000000..dc56a809
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Detail.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Detail.vue"
new file mode 100644
index 00000000..2b56de81
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Detail.vue"
@@ -0,0 +1,227 @@
+<template>
+  <div >
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" @click='add2Card(id)'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+import product from '../data/product'
+
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  methods:{
+    add2Card:function(id){
+        product.addToCart(id);
+        //this.$bus.$emit('change');
+        this.$router.push({path:'/cartList'});
+    }
+  },
+  mounted(){
+     console.log(this);
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Recod.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Recod.vue"
new file mode 100644
index 00000000..27e34dbe
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/pages/Recod.vue"
@@ -0,0 +1,129 @@
+<template>
+
+  <div class="shoping" >
+          <!-- {{this.$store.state.title}}
+          {{this.$store.state.price}} -->
+          <!-- {{projectTitle}}
+          {{priceAlias}}
+          {{countPlusLocalState}} -->
+          {{projectTile}}
+          {{projectPrice}}
+          <h3 @click='changeTile'>{{projectTile}}</h3>
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
+                </div>
+            </router-link>
+         </div>
+
+     </div>
+
+     
+ 
+</template>
+
+<script>
+
+import {methods,data} from '../mixin/MixIn'
+
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Recod',
+  data(){
+      return {
+          products:[],
+          num:1,
+          demo:'demo'
+      }
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  created:function(){
+      console.log('record created');
+      // Vuex 会把 状态（数据）加入到实例中
+      console.log(this);
+      console.log(this.$store.state.title)
+  },
+  mixins:[methods,data],
+
+//   computed:{
+//       projectTitle () {
+//           return this.$store.state.title
+//       }
+//   }
+//    computed: mapState({//可以省去 this.$store
+//     // 箭头函数可使代码更简练
+//     projectTitle: state => state.title,
+
+//     // // 传字符串参数 'count' 等同于 `state => state.count`
+//      priceAlias: 'price',//price 不就是 main.js  state 下的属性名
+
+//     // // 为了能够使用 `this` 获取局部状态，必须使用常规函数
+//     countPlusLocalState (state) {
+//       return state.title;
+//     }
+//   })
+    // 对象展开的写法
+   computed:{
+       //...mapState(['title','price']) 最常用的写法
+       // 取别名方式
+       ...mapState({
+            projectTile:'title',
+            projectPrice:'price'
+       })
+
+   },
+   methods:{
+       changeTile:function(){
+           this.$store.commit('changeTile','大数据分析');
+       }
+   }
+ 
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/plugins/plugin1.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/plugins/plugin1.js"
new file mode 100644
index 00000000..a62e97a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/router/index.js"
new file mode 100644
index 00000000..fd5d1a84
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220503/src/router/index.js"
@@ -0,0 +1,50 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+import Recod from '../pages/Recod'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: Recod,
+        },
+        {
+            name:'listName',
+            path: '/adv',
+            component: AdvList,
+            meta:{
+                keepalive:true
+            }
+        },
+        {
+            name:'detail',
+            //path:'/detail',
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/App.vue"
new file mode 100644
index 00000000..72248fd6
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/CartItem.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/CartItem.vue"
new file mode 100644
index 00000000..6407152d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/CartItem.vue"
@@ -0,0 +1,85 @@
+<template>
+ <div >
+  <div class="ym">
+    <img :src="img" alt="" />
+    <h4>{{name}}</h4>
+    <br />
+    <div class="a">
+      <span class="count">{{price}}</span><span>折起</span>
+      <input type="number" v-model="cnum" >
+      <button @click="pay">付款</button>
+    </div>
+  </div>
+ </div>
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+        cnum:this.num
+      }
+    },
+    props:{
+      id:Number,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      pay:function(){
+        console.log('付款商品数量',this.cnum);
+        console.log(this.id,this.cnum);
+        // this.$bus 进行了一个触发事件，接受的这个事件的也必须是同一个实例
+        this.$bus.$emit('confirmOder',this.id,this.cnum);
+      }
+    },
+    mounted:function(){
+      console.log(this)
+    }
+    
+};
+</script>
+
+<style>
+.shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+
+input:-internal-autofill-previewed,input:-internal-autofill-selected {
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+</style>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/HeaderBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/HeaderBase.vue"
new file mode 100644
index 00000000..9a6b716b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/components/HeaderBase.vue"
@@ -0,0 +1,99 @@
+<template>
+  <div class="header">
+     <div id="box1">
+        <img src="../../public/assets/weipinhui.png" width="160">
+        <div id="zp">
+            <span>品牌特卖·100%正品</span>
+            <span class="dl">登录</span>
+        </div>
+        <img src="../../public/assets/caidan.svg" width="24p">
+     </div> 
+      <div id="box2">
+        <input type="text" value="女休闲鞋">
+      </div>
+     <div class="daohang">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+        <router-link to="/four" active-class="color">国际</router-link>
+     </div>
+     <div class="ly">
+       <!-- <keep-alive :include="include">
+          <router-view></router-view>
+       </keep-alive> -->
+       <keep-alive>
+          <router-view v-if="$route.meta.keepalive"></router-view>
+       </keep-alive>
+        <router-view v-if="!$route.meta.keepalive"></router-view>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBase',
+  data(){
+    return {
+      include:'AdvList'
+    }
+  },
+  props: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/data/product.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/data/product.js"
new file mode 100644
index 00000000..33bcfc92
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/adidas.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/adidas.vue"
new file mode 100644
index 00000000..8fe067a0
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/akf.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/akf.vue"
new file mode 100644
index 00000000..23138e7d
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/lining.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/lining.vue"
new file mode 100644
index 00000000..48dfd1e7
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/threece.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/threece.vue"
new file mode 100644
index 00000000..2300dc74
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/ugg.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/ugg.vue"
new file mode 100644
index 00000000..ff48e788
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/main.js"
new file mode 100644
index 00000000..d9e7d62c
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/main.js"
@@ -0,0 +1,39 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+
+//引入路由器
+import router from './router/index';
+
+
+
+axios.defaults.baseURL='http://localhost:9090/';
+
+
+//关闭生产环境提交
+Vue.config.productionTip = false
+//render 渲染 temldate.
+new Vue({
+  el:'#app',
+  // template:'<App></App>',
+  // components:{
+  //   App,
+  // }
+  //脚手架引入的vue是残缺的，为了性能
+  render: (createElement) => {
+    // console.log(typeof createElement);
+    return createElement(App)
+   },
+   beforeCreate:function(){
+     Vue.prototype.$bus=this;
+     Vue.prototype.$axios=axios;
+   },
+   router,
+})
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/AdvList.vue"
new file mode 100644
index 00000000..bb3e0f3c
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/AdvList.vue"
@@ -0,0 +1,106 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+
+import axios from 'axios';
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1
+      }
+  },
+  mounted:function(){
+      this.$bus.$on('confirmOder',(id,num)=>{
+          console.log('adv 收到change');
+        //   console.log(id);
+        //   console.log(num);
+         this.products.forEach(el=>{
+             if(el.id==id){
+                 el.num = el.num-num;
+             }
+         })
+      })
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+      let url ='http://localhost:9090/getProduct';//做了跨域处理的
+      //methos get post delete patch
+      let params={
+          page:1,
+          pageSize:20,
+      }
+      // get 方式不能进行 data 参数传递，需要写入到url上
+      axios.get(url).then(res=>{
+          this.products = res.data.datas;
+      });
+
+      //post 请求，就是把 get改成 post
+       axios.post(url,params).then(res=>{
+           console.log(res.data);
+        });
+
+      this.$axios.get('/getProduct').then(res=>{
+          console.log(res.data)
+      })
+      
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/BodyBase.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/BodyBase.vue"
new file mode 100644
index 00000000..632eeb0b
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/BodyBase.vue"
@@ -0,0 +1,70 @@
+<template>
+     <div class="shoping" >
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
+            <router-link :to="{
+                name:'detail',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price
+                }
+            }">
+                <div class="ym">
+                    <img :src="item.img" alt="">
+                    <h4>{{item.name}}</h4><br>
+                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
+                </div>
+            </router-link>
+         </div>
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+    //let urls='http://localhost:8080/data.txt';  
+    //let url='https://interface.sina.cn/news/wap/fymap2020_data.d.json';  
+    // axios.jsonp('https://question.llblog.cc/').then(res=>{
+    //     JSON.parse(res.data)
+    // })
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/CartList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/CartList.vue"
new file mode 100644
index 00000000..dc56a809
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/Detail.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/Detail.vue"
new file mode 100644
index 00000000..57bd97c4
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/pages/Detail.vue"
@@ -0,0 +1,226 @@
+<template>
+  <div >
+        <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img :src="img">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥{{price}}</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">{{name}}</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥{{price}} </span>
+                    </div>
+                    <div class="pri2" @click='add2Card(id)'>
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+  </div>
+</template>
+
+<script>
+import product from '../data/product'
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  methods:{
+    add2Card:function(id){
+        product.addToCart(id);
+        //this.$bus.$emit('change');
+        this.$router.push({path:'/cartList'});
+    }
+  },
+  mounted(){
+
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/router/index.js"
new file mode 100644
index 00000000..e894839a
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220504/src/router/index.js"
@@ -0,0 +1,49 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import Detail from '../pages/Detail'
+import CartList from '../pages/CartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/base',
+            component: BodyBase,
+        },
+        {
+            name:'listName',
+            path: '/adv',
+            component: AdvList,
+            meta:{
+                keepalive:true
+            }
+        },
+        {
+            name:'detail',
+            //path:'/detail',
+            path: '/detail/:id/:name',
+            component: Detail,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            //path:'/detail',
+            path: '/cartList',
+            component: CartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/App.vue"
new file mode 100644
index 00000000..7e06b7e2
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/App.vue"
@@ -0,0 +1,95 @@
+<template>
+  <div id="app">
+    <div class="top">
+      <span style="color: hotpink; ">
+        唯品会
+      </span>
+      <span style="color: #98989f;">
+        品牌特买百分百正品
+      </span>
+      <span>登录</span>
+    </div>
+    <div class="topinput">
+      <input/>
+    </div>
+    <div class="ul">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+  
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+
+
+    <!-- <router-link to="/strong" active-class="click">变强大</router-link> -->
+  
+  </div>
+</template>
+
+<script>
+//大驼峰书写方式
+// import HelloVue from './components/HelloWorld.vue'
+// import MakeMoney from './components/MakeMoney.vue'
+// import BeStrong from './components/BeStrong.vue'
+export default {
+  name: "App",
+  components: {
+    // MakeMoney:MakeMoney,
+    // BeStrong,
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+     height: 90vh;
+}
+.top {
+    width: 100%;
+    height: 5%;
+    position: absolute;
+    display: flex;
+    justify-content: space-around;
+ 
+}
+.topinput {
+  position: absolute;
+  height: 5%;
+  top: 5%;
+  width: 100%;
+}
+.topinput input{
+      width: 90%;
+    border-radius: 10px;
+    position: absolute;
+    top: 20%;
+    left: 5%;
+    border: 1px solid;
+    height: 20px;
+}
+.ul{
+    position: absolute;
+    width: 100%;
+    top: 10%;
+    display: flex;
+    justify-content: space-evenly;
+        padding: 10px 0 0 0;
+}
+.ly{
+    width: 100%;
+    height: 92%;
+    border: 1px solid;
+    position: absolute;
+    top: 17%;
+    overflow: scroll;
+
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/assets/logo.png" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
GIT binary patch
literal 6849
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

literal 0
HcmV?d00001

diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/components/CartItem.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/components/CartItem.vue"
new file mode 100644
index 00000000..b2413209
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/components/CartItem.vue"
@@ -0,0 +1,93 @@
+<template>
+  <div class="ym" v-show="shows">
+    <div class="left">
+  <img :src="img" alt="" />
+  <button>-</button>
+  <span>{{cnum}}
+  </span>
+  <button @click="carts2(id)"   >+</button>
+    </div>
+  <div class="right" >
+    <p>{{name}}</p>
+    <p><span>总价：</span>{{price*cnum}}</p>
+  </div>
+
+  </div>
+
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+
+  import Vuex from "vuex"
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+            cnum:this.$store.state.products[this.id].num,
+            shows:this.show,
+
+      }
+    },
+    props:{
+      id:Number,
+      show:Boolean,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      changeNum:function(){
+        this.$emit('changeCart',this.cnum);
+        this.cnum++
+         console.log(this)
+                console.log(this.props)
+      },
+         carts2: function (id) {
+           console.log(this.id);
+           console.log(this.$store.state.products[this.id].num);
+          console.log(this.cnum);
+             this.$store.state.products[this.id].num++
+             this.cnum++
+             console.log(this.$store.state.products[this.id].kucun + this.cnum);
+               this.$store.state.products[this.id].kucun--
+             console.log(this.$store.state.products[this.id].kucun);
+    },
+    mounted:function(){
+    
+      console.log(this.shows);
+    //  console.log(this.$store.state.products);
+    },
+    
+    }
+    
+};
+</script>
+
+<style scoped>
+ .ym {
+   width: 100%;
+   height: 20vh;
+   display: flex;
+
+ }
+ .left{
+   width: 30%;
+ }
+ .right{
+   width: 70%;
+
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+</style>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/config/constName.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/config/constName.js"
new file mode 100644
index 00000000..8020c116
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/config/constName.js"
@@ -0,0 +1,6 @@
+
+const constName={
+    name:'constName',
+    reduceNum:'reduceNum'
+}
+export default constName
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/main.js"
new file mode 100644
index 00000000..12d20acc
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/main.js"
@@ -0,0 +1,55 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+//引入VueRouter
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+//应用插件
+Vue.use(VueRouter);
+Vue.use(Vuex);
+
+
+//引入路由器
+import router from './router/index'
+
+const store = new Vuex.Store({
+  //状态,就是数据
+    state: {
+      title:'外卖系统',
+      price:100,
+      num:66,
+      products:[
+        {id:0,show: false,name:'苹果笔记本',img:'https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',kucun:100,num:0,price:3000},
+        {id:1,show: false,name:'灰色笔记本',img:'https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',kucun:100,num:0,price:3000},
+        {id:2,show: false,name:'小米笔记本',img:'https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',kucun:100,num:0,price:3000},
+        {id:3,show: false,name:'苹果笔记本',img:'https://img1.baidu.com/it/u=142621668,3476222106&fm=253&fmt=auto?w=667&h=500',kucun:100,num:0,price:3000}
+    ],
+  
+
+      },
+    })  
+
+
+
+//关闭生产环境提交
+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,
+   store,
+   beforeCreate:function(){
+    // new Vue.extend({})//创建一个组件事件，组件实例中的功能 vm 都有，所以  Vue.prototype.public = new  Vue.extend({}) 可以用 this 替换
+    Vue.prototype.public = this
+    Vue.prototype.$bus = this//推荐的写法，bus 就是总线的意思，加 $ 为了跟vue 属性的命名一致
+  }
+})
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/AdvList.vue"
new file mode 100644
index 00000000..3ba1beff
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/AdvList.vue"
@@ -0,0 +1,65 @@
+<template>
+
+     <div class="shoping" >
+         {{this.$store.state.num}}
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+          <div class="ym">
+   <router-link :to="{
+                name:'xqye',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+
+                    <img :src="item.img" alt="">
+                       </router-link>
+                    <h4>{{item.name}}</h4><br>
+          
+                    <div class="a"><span class="count">库存: {{item.kucun}}  <span></span>3台折起</span></div>
+                </div>
+      
+         </div>
+         {{this.$store.state.num}}
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+
+<script>
+    import Vuex from "vuex"
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+      console.log(this)
+      this.products=this.$store.state.products
+
+  },
+
+}
+</script>
+<style scoped>
+ .shoping {
+     margin: 5%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/cartList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/cartList.vue"
new file mode 100644
index 00000000..af2cd804
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/cartList.vue"
@@ -0,0 +1,66 @@
+<template>
+     <div  class="shoping">
+        <cartItem @changeCart1='changeCartNum'   
+        v-for="(product,index) in products" :key='index' :img="product.img" 
+        :name="product.name" :price='product.price' :num='product.num'  
+         :ref="'cart'+index"  :id='product.id'  :show="product.show" ></cartItem>
+<div>
+        <button @click="pay">付钱</button>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+
+import CartItem from '../components/CartItem.vue';
+import ConstName from '../config/constName';
+    import Vuex from "vuex"
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+          ]
+      }
+  },
+  mounted:function(){
+        this.products=this.$store.state.products
+             window.public1 = this.public
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      },
+      pay:function(){
+          // 提交到后台的接口，----todo
+          //假设后台接口已经响应成功了，假设购买数量都是1个
+  
+    console.log(this);
+
+
+      this.$router.push({ path: "/adv" });
+
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+   
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/xqye.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/xqye.vue"
new file mode 100644
index 00000000..23c23b6a
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/pages/xqye.vue"
@@ -0,0 +1,208 @@
+<template>
+
+ <div>
+   {{this.$store.state.num}}
+    <div class="shoping">
+      <div class="xq">
+        <img :src="img" />
+      </div>
+
+      <div class="discount">
+        <div class="price">
+          <span class="zhehoujia">￥{{ price }}</span><br/>
+          <span class="yuanjia">￥499</span><span>5.2折</span>
+        </div>
+        <div class="shenghuoguan"></div>
+      </div>
+      <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+       
+      </div>
+         <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+        <span class="jiantou">></span>
+      </div>
+         <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+        <span class="jiantou">></span>
+      </div>
+
+  </div>
+     <div class="bottom">
+      <div class="btmimg">
+        <span class="img1 bimg"> 客服 </span>
+        <span class="img2 bimg"> 购物车 </span>
+      </div>
+      <div class="btmprice">
+        <span class="pri1">￥499</span>
+        <div @click="add2Card(id)" class="pri2">
+          <span>￥{{ price }} </span>
+          <span>特卖价 抢</span>
+        </div>
+      </div>
+    </div>
+   </div>
+</template>
+<script>
+
+import Vuex from "vuex"
+export default {
+  name: "xqye",
+  props: ["name", "id", "price", "img", "num","show"],
+  data() {
+    return {
+      props: "",
+    };
+  },
+    mounted: function () {
+    this.props=this.$store.state.products
+  },
+  methods: {
+    add2Card: function (id) {
+      console.log(id);
+   
+  this.$store.state.products[id].show=true
+
+  console.log(this.$store.state.products[id].show);
+
+      this.$router.push({ path: "/cartList" });
+    },
+  },
+
+};
+</script>
+<style scoped>
+ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-left: 2px solid #ddd;
+}
+.xq img {
+  width: 100%;
+}
+.cx {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+.mingchen {
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 96%;
+  position: fixed;
+  height: 42px;
+  top: 93%;
+  display: flex;
+  justify-content: space-between;
+  background-color: antiquewhite;
+}
+.btmimg {
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+}
+.img1 img {
+  width: 20%;
+}
+.img2 img {
+  width: 20%;
+}
+
+.btmprice {
+  width: 70%;
+  display: flex;
+}
+.pri1 {
+  background-color: #f688a4;
+  width: 50%;
+  text-align: center;
+  border-radius: 5px;
+}
+.pri2 {
+    width: 50%;
+  border-radius: 5px;
+  background-color: #f03867;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/router/index.js"
new file mode 100644
index 00000000..f8320174
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220505/src/router/index.js"
@@ -0,0 +1,55 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+// import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import xqye from '../pages/xqye'
+import cartList from '../pages/cartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        // {
+        //     path: '/',
+        //     component: BodyBase,
+        // },
+        // {
+        //     path: '/show',
+        //     component: xqye,
+        // },
+        {
+            name:'guanggao',
+            path: '/adv',
+            component: AdvList,
+    
+        },
+        {
+            name:'xqye',
+            //path:'/detail',
+            path: '/xqye/:id/:name',
+            component: xqye,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            // path: '/cartList',
+            component: cartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+
+        // {
+        //     name:'detail',
+        //     path:'/detail/:id/:name/:price',
+        //     //path:'/detail',
+        //     component: Detail,
+        //     props:true,
+        // },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/App.vue"
new file mode 100644
index 00000000..7e06b7e2
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/App.vue"
@@ -0,0 +1,95 @@
+<template>
+  <div id="app">
+    <div class="top">
+      <span style="color: hotpink; ">
+        唯品会
+      </span>
+      <span style="color: #98989f;">
+        品牌特买百分百正品
+      </span>
+      <span>登录</span>
+    </div>
+    <div class="topinput">
+      <input/>
+    </div>
+    <div class="ul">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+  
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+
+
+    <!-- <router-link to="/strong" active-class="click">变强大</router-link> -->
+  
+  </div>
+</template>
+
+<script>
+//大驼峰书写方式
+// import HelloVue from './components/HelloWorld.vue'
+// import MakeMoney from './components/MakeMoney.vue'
+// import BeStrong from './components/BeStrong.vue'
+export default {
+  name: "App",
+  components: {
+    // MakeMoney:MakeMoney,
+    // BeStrong,
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+     height: 90vh;
+}
+.top {
+    width: 100%;
+    height: 5%;
+    position: absolute;
+    display: flex;
+    justify-content: space-around;
+ 
+}
+.topinput {
+  position: absolute;
+  height: 5%;
+  top: 5%;
+  width: 100%;
+}
+.topinput input{
+      width: 90%;
+    border-radius: 10px;
+    position: absolute;
+    top: 20%;
+    left: 5%;
+    border: 1px solid;
+    height: 20px;
+}
+.ul{
+    position: absolute;
+    width: 100%;
+    top: 10%;
+    display: flex;
+    justify-content: space-evenly;
+        padding: 10px 0 0 0;
+}
+.ly{
+    width: 100%;
+    height: 92%;
+    border: 1px solid;
+    position: absolute;
+    top: 17%;
+    overflow: scroll;
+
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/assets/logo.png" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
GIT binary patch
literal 6849
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

literal 0
HcmV?d00001

diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/components/CartItem.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/components/CartItem.vue"
new file mode 100644
index 00000000..b2413209
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/components/CartItem.vue"
@@ -0,0 +1,93 @@
+<template>
+  <div class="ym" v-show="shows">
+    <div class="left">
+  <img :src="img" alt="" />
+  <button>-</button>
+  <span>{{cnum}}
+  </span>
+  <button @click="carts2(id)"   >+</button>
+    </div>
+  <div class="right" >
+    <p>{{name}}</p>
+    <p><span>总价：</span>{{price*cnum}}</p>
+  </div>
+
+  </div>
+
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+
+  import Vuex from "vuex"
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+            cnum:this.$store.state.products[this.id].num,
+            shows:this.show,
+
+      }
+    },
+    props:{
+      id:Number,
+      show:Boolean,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      changeNum:function(){
+        this.$emit('changeCart',this.cnum);
+        this.cnum++
+         console.log(this)
+                console.log(this.props)
+      },
+         carts2: function (id) {
+           console.log(this.id);
+           console.log(this.$store.state.products[this.id].num);
+          console.log(this.cnum);
+             this.$store.state.products[this.id].num++
+             this.cnum++
+             console.log(this.$store.state.products[this.id].kucun + this.cnum);
+               this.$store.state.products[this.id].kucun--
+             console.log(this.$store.state.products[this.id].kucun);
+    },
+    mounted:function(){
+    
+      console.log(this.shows);
+    //  console.log(this.$store.state.products);
+    },
+    
+    }
+    
+};
+</script>
+
+<style scoped>
+ .ym {
+   width: 100%;
+   height: 20vh;
+   display: flex;
+
+ }
+ .left{
+   width: 30%;
+ }
+ .right{
+   width: 70%;
+
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+</style>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/config/constName.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/config/constName.js"
new file mode 100644
index 00000000..8020c116
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/config/constName.js"
@@ -0,0 +1,6 @@
+
+const constName={
+    name:'constName',
+    reduceNum:'reduceNum'
+}
+export default constName
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/main.js"
new file mode 100644
index 00000000..12d20acc
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/main.js"
@@ -0,0 +1,55 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+//引入VueRouter
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+//应用插件
+Vue.use(VueRouter);
+Vue.use(Vuex);
+
+
+//引入路由器
+import router from './router/index'
+
+const store = new Vuex.Store({
+  //状态,就是数据
+    state: {
+      title:'外卖系统',
+      price:100,
+      num:66,
+      products:[
+        {id:0,show: false,name:'苹果笔记本',img:'https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',kucun:100,num:0,price:3000},
+        {id:1,show: false,name:'灰色笔记本',img:'https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',kucun:100,num:0,price:3000},
+        {id:2,show: false,name:'小米笔记本',img:'https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',kucun:100,num:0,price:3000},
+        {id:3,show: false,name:'苹果笔记本',img:'https://img1.baidu.com/it/u=142621668,3476222106&fm=253&fmt=auto?w=667&h=500',kucun:100,num:0,price:3000}
+    ],
+  
+
+      },
+    })  
+
+
+
+//关闭生产环境提交
+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,
+   store,
+   beforeCreate:function(){
+    // new Vue.extend({})//创建一个组件事件，组件实例中的功能 vm 都有，所以  Vue.prototype.public = new  Vue.extend({}) 可以用 this 替换
+    Vue.prototype.public = this
+    Vue.prototype.$bus = this//推荐的写法，bus 就是总线的意思，加 $ 为了跟vue 属性的命名一致
+  }
+})
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/AdvList.vue"
new file mode 100644
index 00000000..3ba1beff
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/AdvList.vue"
@@ -0,0 +1,65 @@
+<template>
+
+     <div class="shoping" >
+         {{this.$store.state.num}}
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+          <div class="ym">
+   <router-link :to="{
+                name:'xqye',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+
+                    <img :src="item.img" alt="">
+                       </router-link>
+                    <h4>{{item.name}}</h4><br>
+          
+                    <div class="a"><span class="count">库存: {{item.kucun}}  <span></span>3台折起</span></div>
+                </div>
+      
+         </div>
+         {{this.$store.state.num}}
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+
+<script>
+    import Vuex from "vuex"
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+      console.log(this)
+      this.products=this.$store.state.products
+
+  },
+
+}
+</script>
+<style scoped>
+ .shoping {
+     margin: 5%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/cartList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/cartList.vue"
new file mode 100644
index 00000000..af2cd804
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/cartList.vue"
@@ -0,0 +1,66 @@
+<template>
+     <div  class="shoping">
+        <cartItem @changeCart1='changeCartNum'   
+        v-for="(product,index) in products" :key='index' :img="product.img" 
+        :name="product.name" :price='product.price' :num='product.num'  
+         :ref="'cart'+index"  :id='product.id'  :show="product.show" ></cartItem>
+<div>
+        <button @click="pay">付钱</button>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+
+import CartItem from '../components/CartItem.vue';
+import ConstName from '../config/constName';
+    import Vuex from "vuex"
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+          ]
+      }
+  },
+  mounted:function(){
+        this.products=this.$store.state.products
+             window.public1 = this.public
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      },
+      pay:function(){
+          // 提交到后台的接口，----todo
+          //假设后台接口已经响应成功了，假设购买数量都是1个
+  
+    console.log(this);
+
+
+      this.$router.push({ path: "/adv" });
+
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+   
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/xqye.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/xqye.vue"
new file mode 100644
index 00000000..23c23b6a
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/pages/xqye.vue"
@@ -0,0 +1,208 @@
+<template>
+
+ <div>
+   {{this.$store.state.num}}
+    <div class="shoping">
+      <div class="xq">
+        <img :src="img" />
+      </div>
+
+      <div class="discount">
+        <div class="price">
+          <span class="zhehoujia">￥{{ price }}</span><br/>
+          <span class="yuanjia">￥499</span><span>5.2折</span>
+        </div>
+        <div class="shenghuoguan"></div>
+      </div>
+      <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+       
+      </div>
+         <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+        <span class="jiantou">></span>
+      </div>
+         <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+        <span class="jiantou">></span>
+      </div>
+
+  </div>
+     <div class="bottom">
+      <div class="btmimg">
+        <span class="img1 bimg"> 客服 </span>
+        <span class="img2 bimg"> 购物车 </span>
+      </div>
+      <div class="btmprice">
+        <span class="pri1">￥499</span>
+        <div @click="add2Card(id)" class="pri2">
+          <span>￥{{ price }} </span>
+          <span>特卖价 抢</span>
+        </div>
+      </div>
+    </div>
+   </div>
+</template>
+<script>
+
+import Vuex from "vuex"
+export default {
+  name: "xqye",
+  props: ["name", "id", "price", "img", "num","show"],
+  data() {
+    return {
+      props: "",
+    };
+  },
+    mounted: function () {
+    this.props=this.$store.state.products
+  },
+  methods: {
+    add2Card: function (id) {
+      console.log(id);
+   
+  this.$store.state.products[id].show=true
+
+  console.log(this.$store.state.products[id].show);
+
+      this.$router.push({ path: "/cartList" });
+    },
+  },
+
+};
+</script>
+<style scoped>
+ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-left: 2px solid #ddd;
+}
+.xq img {
+  width: 100%;
+}
+.cx {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+.mingchen {
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 96%;
+  position: fixed;
+  height: 42px;
+  top: 93%;
+  display: flex;
+  justify-content: space-between;
+  background-color: antiquewhite;
+}
+.btmimg {
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+}
+.img1 img {
+  width: 20%;
+}
+.img2 img {
+  width: 20%;
+}
+
+.btmprice {
+  width: 70%;
+  display: flex;
+}
+.pri1 {
+  background-color: #f688a4;
+  width: 50%;
+  text-align: center;
+  border-radius: 5px;
+}
+.pri2 {
+    width: 50%;
+  border-radius: 5px;
+  background-color: #f03867;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/router/index.js"
new file mode 100644
index 00000000..f8320174
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220506/src/router/index.js"
@@ -0,0 +1,55 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+// import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import xqye from '../pages/xqye'
+import cartList from '../pages/cartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        // {
+        //     path: '/',
+        //     component: BodyBase,
+        // },
+        // {
+        //     path: '/show',
+        //     component: xqye,
+        // },
+        {
+            name:'guanggao',
+            path: '/adv',
+            component: AdvList,
+    
+        },
+        {
+            name:'xqye',
+            //path:'/detail',
+            path: '/xqye/:id/:name',
+            component: xqye,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            // path: '/cartList',
+            component: cartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+
+        // {
+        //     name:'detail',
+        //     path:'/detail/:id/:name/:price',
+        //     //path:'/detail',
+        //     component: Detail,
+        //     props:true,
+        // },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/App.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/App.vue"
new file mode 100644
index 00000000..7e06b7e2
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/App.vue"
@@ -0,0 +1,95 @@
+<template>
+  <div id="app">
+    <div class="top">
+      <span style="color: hotpink; ">
+        唯品会
+      </span>
+      <span style="color: #98989f;">
+        品牌特买百分百正品
+      </span>
+      <span>登录</span>
+    </div>
+    <div class="topinput">
+      <input/>
+    </div>
+    <div class="ul">
+        <router-link to="/base" active-class="color">推荐</router-link>
+        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
+        <router-link to="/three" active-class="color">唯品快抢</router-link>
+  
+     </div>
+     <div class="ly">
+       <router-view></router-view>
+     </div>
+
+
+    <!-- <router-link to="/strong" active-class="click">变强大</router-link> -->
+  
+  </div>
+</template>
+
+<script>
+//大驼峰书写方式
+// import HelloVue from './components/HelloWorld.vue'
+// import MakeMoney from './components/MakeMoney.vue'
+// import BeStrong from './components/BeStrong.vue'
+export default {
+  name: "App",
+  components: {
+    // MakeMoney:MakeMoney,
+    // BeStrong,
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+     height: 90vh;
+}
+.top {
+    width: 100%;
+    height: 5%;
+    position: absolute;
+    display: flex;
+    justify-content: space-around;
+ 
+}
+.topinput {
+  position: absolute;
+  height: 5%;
+  top: 5%;
+  width: 100%;
+}
+.topinput input{
+      width: 90%;
+    border-radius: 10px;
+    position: absolute;
+    top: 20%;
+    left: 5%;
+    border: 1px solid;
+    height: 20px;
+}
+.ul{
+    position: absolute;
+    width: 100%;
+    top: 10%;
+    display: flex;
+    justify-content: space-evenly;
+        padding: 10px 0 0 0;
+}
+.ly{
+    width: 100%;
+    height: 92%;
+    border: 1px solid;
+    position: absolute;
+    top: 17%;
+    overflow: scroll;
+
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/assets/logo.png" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/assets/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
GIT binary patch
literal 6849
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

literal 0
HcmV?d00001

diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/components/CartItem.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/components/CartItem.vue"
new file mode 100644
index 00000000..b2413209
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/components/CartItem.vue"
@@ -0,0 +1,93 @@
+<template>
+  <div class="ym" v-show="shows">
+    <div class="left">
+  <img :src="img" alt="" />
+  <button>-</button>
+  <span>{{cnum}}
+  </span>
+  <button @click="carts2(id)"   >+</button>
+    </div>
+  <div class="right" >
+    <p>{{name}}</p>
+    <p><span>总价：</span>{{price*cnum}}</p>
+  </div>
+
+  </div>
+
+
+</template>
+
+<script>
+/**
+ * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
+ * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
+ * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
+ */
+
+  import Vuex from "vuex"
+export default {
+    name:'CartItem',
+    data:function(){
+      return {
+            cnum:this.$store.state.products[this.id].num,
+            shows:this.show,
+
+      }
+    },
+    props:{
+      id:Number,
+      show:Boolean,
+      img:String,
+      name:String,
+      price:Number,
+      num:Number
+    },
+    methods:{
+      changeNum:function(){
+        this.$emit('changeCart',this.cnum);
+        this.cnum++
+         console.log(this)
+                console.log(this.props)
+      },
+         carts2: function (id) {
+           console.log(this.id);
+           console.log(this.$store.state.products[this.id].num);
+          console.log(this.cnum);
+             this.$store.state.products[this.id].num++
+             this.cnum++
+             console.log(this.$store.state.products[this.id].kucun + this.cnum);
+               this.$store.state.products[this.id].kucun--
+             console.log(this.$store.state.products[this.id].kucun);
+    },
+    mounted:function(){
+    
+      console.log(this.shows);
+    //  console.log(this.$store.state.products);
+    },
+    
+    }
+    
+};
+</script>
+
+<style scoped>
+ .ym {
+   width: 100%;
+   height: 20vh;
+   display: flex;
+
+ }
+ .left{
+   width: 30%;
+ }
+ .right{
+   width: 70%;
+
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+</style>
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/config/constName.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/config/constName.js"
new file mode 100644
index 00000000..8020c116
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/config/constName.js"
@@ -0,0 +1,6 @@
+
+const constName={
+    name:'constName',
+    reduceNum:'reduceNum'
+}
+export default constName
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/main.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/main.js"
new file mode 100644
index 00000000..12d20acc
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/main.js"
@@ -0,0 +1,55 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+//引入VueRouter
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+//应用插件
+Vue.use(VueRouter);
+Vue.use(Vuex);
+
+
+//引入路由器
+import router from './router/index'
+
+const store = new Vuex.Store({
+  //状态,就是数据
+    state: {
+      title:'外卖系统',
+      price:100,
+      num:66,
+      products:[
+        {id:0,show: false,name:'苹果笔记本',img:'https://img1.baidu.com/it/u=591631117,2275774035&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',kucun:100,num:0,price:3000},
+        {id:1,show: false,name:'灰色笔记本',img:'https://img0.baidu.com/it/u=3297317195,345187680&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',kucun:100,num:0,price:3000},
+        {id:2,show: false,name:'小米笔记本',img:'https://img1.baidu.com/it/u=3413204352,1037999762&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',kucun:100,num:0,price:3000},
+        {id:3,show: false,name:'苹果笔记本',img:'https://img1.baidu.com/it/u=142621668,3476222106&fm=253&fmt=auto?w=667&h=500',kucun:100,num:0,price:3000}
+    ],
+  
+
+      },
+    })  
+
+
+
+//关闭生产环境提交
+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,
+   store,
+   beforeCreate:function(){
+    // new Vue.extend({})//创建一个组件事件，组件实例中的功能 vm 都有，所以  Vue.prototype.public = new  Vue.extend({}) 可以用 this 替换
+    Vue.prototype.public = this
+    Vue.prototype.$bus = this//推荐的写法，bus 就是总线的意思，加 $ 为了跟vue 属性的命名一致
+  }
+})
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/AdvList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/AdvList.vue"
new file mode 100644
index 00000000..3ba1beff
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/AdvList.vue"
@@ -0,0 +1,65 @@
+<template>
+
+     <div class="shoping" >
+         {{this.$store.state.num}}
+         <div v-for="(item,index) in products" :item='item' :key='index'>
+          <div class="ym">
+   <router-link :to="{
+                name:'xqye',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    price:item.price,
+                    img:item.img,
+                    num:item.num
+                }
+            }">
+
+                    <img :src="item.img" alt="">
+                       </router-link>
+                    <h4>{{item.name}}</h4><br>
+          
+                    <div class="a"><span class="count">库存: {{item.kucun}}  <span></span>3台折起</span></div>
+                </div>
+      
+         </div>
+         {{this.$store.state.num}}
+         <router-view></router-view>
+     </div>
+ 
+</template>
+
+
+<script>
+    import Vuex from "vuex"
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+      }
+  },
+  mounted:function(){
+      console.log(this)
+      this.products=this.$store.state.products
+
+  },
+
+}
+</script>
+<style scoped>
+ .shoping {
+     margin: 5%;
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+
+
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/cartList.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/cartList.vue"
new file mode 100644
index 00000000..af2cd804
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/cartList.vue"
@@ -0,0 +1,66 @@
+<template>
+     <div  class="shoping">
+        <cartItem @changeCart1='changeCartNum'   
+        v-for="(product,index) in products" :key='index' :img="product.img" 
+        :name="product.name" :price='product.price' :num='product.num'  
+         :ref="'cart'+index"  :id='product.id'  :show="product.show" ></cartItem>
+<div>
+        <button @click="pay">付钱</button>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+
+import CartItem from '../components/CartItem.vue';
+import ConstName from '../config/constName';
+    import Vuex from "vuex"
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+          ]
+      }
+  },
+  mounted:function(){
+        this.products=this.$store.state.products
+             window.public1 = this.public
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      },
+      pay:function(){
+          // 提交到后台的接口，----todo
+          //假设后台接口已经响应成功了，假设购买数量都是1个
+  
+    console.log(this);
+
+
+      this.$router.push({ path: "/adv" });
+
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+   
+ }
+ .ym {
+ 
+ }
+ img {
+     width: 100%;
+ }
+ .count {
+     color: #E04F9F;
+ }
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/xqye.vue" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/xqye.vue"
new file mode 100644
index 00000000..23c23b6a
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/pages/xqye.vue"
@@ -0,0 +1,208 @@
+<template>
+
+ <div>
+   {{this.$store.state.num}}
+    <div class="shoping">
+      <div class="xq">
+        <img :src="img" />
+      </div>
+
+      <div class="discount">
+        <div class="price">
+          <span class="zhehoujia">￥{{ price }}</span><br/>
+          <span class="yuanjia">￥499</span><span>5.2折</span>
+        </div>
+        <div class="shenghuoguan"></div>
+      </div>
+      <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+       
+      </div>
+         <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+        <span class="jiantou">></span>
+      </div>
+         <div class="mingchen">
+        <span class="biaoti">{{ name }}</span>
+        <div class="green">
+          <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+        </div>
+      </div>
+      <div class="zhengpin">
+        <span>100%正品·专业鉴定·正品险</span>
+        <span class="jiantou">></span>
+      </div>
+
+  </div>
+     <div class="bottom">
+      <div class="btmimg">
+        <span class="img1 bimg"> 客服 </span>
+        <span class="img2 bimg"> 购物车 </span>
+      </div>
+      <div class="btmprice">
+        <span class="pri1">￥499</span>
+        <div @click="add2Card(id)" class="pri2">
+          <span>￥{{ price }} </span>
+          <span>特卖价 抢</span>
+        </div>
+      </div>
+    </div>
+   </div>
+</template>
+<script>
+
+import Vuex from "vuex"
+export default {
+  name: "xqye",
+  props: ["name", "id", "price", "img", "num","show"],
+  data() {
+    return {
+      props: "",
+    };
+  },
+    mounted: function () {
+    this.props=this.$store.state.products
+  },
+  methods: {
+    add2Card: function (id) {
+      console.log(id);
+   
+  this.$store.state.products[id].show=true
+
+  console.log(this.$store.state.products[id].show);
+
+      this.$router.push({ path: "/cartList" });
+    },
+  },
+
+};
+</script>
+<style scoped>
+ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  border-left: 2px solid #ddd;
+}
+.xq img {
+  width: 100%;
+}
+.cx {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+.mingchen {
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 96%;
+  position: fixed;
+  height: 42px;
+  top: 93%;
+  display: flex;
+  justify-content: space-between;
+  background-color: antiquewhite;
+}
+.btmimg {
+  width: 30%;
+  display: flex;
+  justify-content: space-between;
+}
+.img1 img {
+  width: 20%;
+}
+.img2 img {
+  width: 20%;
+}
+
+.btmprice {
+  width: 70%;
+  display: flex;
+}
+.pri1 {
+  background-color: #f688a4;
+  width: 50%;
+  text-align: center;
+  border-radius: 5px;
+}
+.pri2 {
+    width: 50%;
+  border-radius: 5px;
+  background-color: #f03867;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/router/index.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/router/index.js"
new file mode 100644
index 00000000..f8320174
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220510/src/router/index.js"
@@ -0,0 +1,55 @@
+// 配置路由规则
+import VueRouter from 'vue-router'
+//默认商品列表
+// import BodyBase from '../pages/BodyBase'
+//默认商品广告列表
+import AdvList from '../pages/AdvList'
+import xqye from '../pages/xqye'
+import cartList from '../pages/cartList'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        // {
+        //     path: '/',
+        //     component: BodyBase,
+        // },
+        // {
+        //     path: '/show',
+        //     component: xqye,
+        // },
+        {
+            name:'guanggao',
+            path: '/adv',
+            component: AdvList,
+    
+        },
+        {
+            name:'xqye',
+            //path:'/detail',
+            path: '/xqye/:id/:name',
+            component: xqye,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            // path: '/cartList',
+            component: cartList,
+            //props:{id:'id1',name:'name1'}, 对象写法
+            props:true
+        },
+
+        // {
+        //     name:'detail',
+        //     path:'/detail/:id/:name/:price',
+        //     //path:'/detail',
+        //     component: Detail,
+        //     props:true,
+        // },
+      
+    ]
+})
+
+// export default router
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220511/min.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220511/min.js"
new file mode 100644
index 00000000..cb43ea17
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220511/min.js"
@@ -0,0 +1,26 @@
+//引入Vue
+import Vue from 'vue'
+//引入App
+import App from './App.vue'
+
+//完整引入
+//引入ElementUI组件库
+// import ElementUI from 'element-ui';
+//引入ElementUI全部样式
+// import 'element-ui/lib/theme-chalk/index.css';
+
+//按需引入
+import { Button,Row,DatePicker } from 'element-ui';
+//应用ElementUI
+// Vue.use(ElementUI);
+//关闭Vue的生产提示
+Vue.config.productionTip = false
+Vue.component('atguigu-button', Button);
+Vue.component('atguigu-row', Row);
+Vue.component('atguigu-date-picker', DatePicker);
+
+//创建vm
+new Vue({
+	el:'#app',
+	render: h => h(App),
+})
\ No newline at end of file
diff --git "a/\346\235\216\344\277\241\345\256\217/Vue/20220512/min.js" "b/\346\235\216\344\277\241\345\256\217/Vue/20220512/min.js"
new file mode 100644
index 00000000..cb43ea17
--- /dev/null
+++ "b/\346\235\216\344\277\241\345\256\217/Vue/20220512/min.js"
@@ -0,0 +1,26 @@
+//引入Vue
+import Vue from 'vue'
+//引入App
+import App from './App.vue'
+
+//完整引入
+//引入ElementUI组件库
+// import ElementUI from 'element-ui';
+//引入ElementUI全部样式
+// import 'element-ui/lib/theme-chalk/index.css';
+
+//按需引入
+import { Button,Row,DatePicker } from 'element-ui';
+//应用ElementUI
+// Vue.use(ElementUI);
+//关闭Vue的生产提示
+Vue.config.productionTip = false
+Vue.component('atguigu-button', Button);
+Vue.component('atguigu-row', Row);
+Vue.component('atguigu-date-picker', DatePicker);
+
+//创建vm
+new Vue({
+	el:'#app',
+	render: h => h(App),
+})
\ No newline at end of file
diff --git "a/\350\265\226\350\231\271\351\234\226/20220408\350\203\214\346\231\257\350\211\262\345\210\207\346\215\242/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html" "b/\350\265\226\350\231\271\351\234\226/20220408\350\203\214\346\231\257\350\211\262\345\210\207\346\215\242/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html"
new file mode 100644
index 00000000..1e2be328
--- /dev/null
+++ "b/\350\265\226\350\231\271\351\234\226/20220408\350\203\214\346\231\257\350\211\262\345\210\207\346\215\242/20220412\346\230\276\347\244\272\351\232\220\350\227\217/demo.html"
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>demo</title>
+</head>
+<body>
+    <div id="app">
+       <div1></div1>
+       <div1></div1>
+    </div>
+</body>
+<script>
+    Vue.component('div1',{
+        data:function(){
+            return {
+                result:false
+            };
+        },
+        methods:{
+            change:function(){
+                console.log(this.result)
+                 this.result=!this.result
+             }
+        },
+        template:'<div><button @click="change">显示隐藏</button><div style="width: 100px; height: 100px; background-color: pink;" v-if="result" >内容</div></div>'
+
+    });
+     new Vue({
+         el:"#app",
+
+     })
+</script>
+</html>
\ No newline at end of file
-- 
Gitee