diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4c6518671a6edd9b1d086c2a6a51be70947514b7
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <title>vue练习el与data</title>
+</head>
+<body>
+    <!-- 写一个vue的页面，把 el，与data的元素都写写，有兴趣的可以看看源码 -->
+    <div id="lai">
+        {{message}}<br>
+        {{hong}}
+    </div>
+    <p>
+        {{hong}}
+    </p>
+
+    <div id="lai2">
+        {{message}}
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:"#lai",
+        data:{
+            message:'hello vue',
+            hong:'虹霖'
+        }
+    });
+    let vc = new Vue({
+        el:"p",
+        data:{
+            hong:'p标签的虹'
+        }
+    })
+    let vm2 = new Vue({
+        el:'#lai2',
+        data:{
+            message:"honglin123"
+        }
+
+    })
+    console.log(vm.$el);
+
+    console.log(vm.message);
+    console.log(vm.hong);
+    console.log(vc.hong);
+    console.log(vc.$data.hong);
+    // $watch方法，Chorem控制台输入 vm.message = '修改后message的值';
+    vm.$watch('message',function(newValue,oldValue){
+        console.log(newValue,oldValue)
+    });
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fda361be2f66c880b24dcf84d9a917721d9b7e67
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
@@ -0,0 +1,69 @@
+<!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>
+<body>
+    <div id="app">
+        <div>{{text}}+第一段文字</div>
+        <div v-text="text">+使用v-text,显示不了<li>这是li,也显示不了</li></div>
+        
+        <div>{{html}}</div>
+        <div v-html="html">使用v-html</div>
+        <!-- v-bind:绑定属性 -->
+        <div id="demo"></div>
+        <div v-bind:id="'1_'+id+'_5'">控制台查看v-bind:id</div>
+        <!-- 自定义属性 -->
+        <div v-bind:attr_id="attrid"></div>
+        <div v-bind:class="class1">class</div>
+        
+        <button v-bind:disabled="isButtonDisabled">false状态的按钮</button>
+        <button v-bind:disabled="isButtonDisabled2">ture状态的按钮</button>
+        <div>{{num+'+num后续的输出'}}</div>
+        <div>{{ok?'输出ok':'输出不ok'}}</div>
+        <div>{{val.trim()}}</div>
+        <div>{{echo(val)}}</div>
+        <div v-if="result">if显示?????</div>
+        <div v-else="result">else显示!!!</div>
+        <div v-show="result">show的显示???</div>
+        <div v-on:click="click">点击</div>
+        <div v-on:click="click2()">点击2</div>
+    </div>
+    
+</body>
+<script>
+    let data = {
+        text:'使用外部data写入的一段文本',
+        html:'<span style="color:red">我是html元素</span>',
+        id:'demo2',
+        attrid:100,
+        class1:'cl1',
+        isButtonDisabled:false,
+        isButtonDisabled2:true,
+        num:1000,
+        ok:false,
+        val:'  前面有空格，后面也有空格     ',
+        result:false,
+        click2:function(){
+            alert('虹霖')
+        }
+    }
+    let vue = new Vue({
+        el:"#app",
+        data:data,
+        methods:{
+            echo:function(a){
+                let b = '虹色'+a+'零零零';
+                return b;
+            },
+            click:function(){
+                alert('click')
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css"
new file mode 100644
index 0000000000000000000000000000000000000000..887539353452c738e438c7caede854c3f33a69c8
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css"
@@ -0,0 +1,40 @@
+* {
+    margin: 0 auto;
+    padding: 0;
+    background-color: seashell;
+
+}
+
+form {
+    margin-top: 200px;
+}
+.middle {
+    display: grid;
+    grid-template-columns:90px 300px;
+    grid-template-rows: repeat(4,80px);
+    justify-content: center;
+    align-items: center;
+}
+input {
+	width: 300px;
+	height: 40px;
+    padding-left: 12px;
+    /* -webkit-appearance:none;去除阴影边框 */
+    border: solid 1px chocolate;
+    border-radius: 10px;
+
+}
+.middle span {
+	justify-self: flex-end;
+	padding-right: 15px;
+
+}
+.middle .butt {
+    display: inline-grid;
+	width: 60px;
+    height: 40px;
+    border: solid 1px chocolate;
+    border-radius: 20px;
+    background-color: chocolate;
+    margin-left: 220px;
+}
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0e67774924d7daba40ed15c14ec537b8c119b65b
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html"
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>注册页面</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+
+<body>
+    <form action="" class="middle">
+        <span>手机号:</span><input type="text" name="username"  placeholder="请输入手机号" required id="phone" @change="phone">
+        <span>密码:</span><input type="password" name="password" placeholder="请输入密码" required id="password" @change="password">
+        <span>确认密码:</span><input type="password" name="password" placeholder="确认密码" required id="confirm" @change="confirm">
+        <span></span> <button class="butt">注册</button>
+    </form>
+</body>
+<script>
+    let data = {
+
+
+    }
+    let vue = new Vue({
+        el: '.middle',
+        data: data,
+        name: "search",
+
+        methods: {
+            phone:function(){
+                let phone = document.getElementById('phone').value;
+                let reg = /^1[3-9][0-9]{9}$/;
+                if(!(reg.test(phone))){
+                    alert('请输入正确的手机号')
+                }
+
+            },
+            password:function(){
+                let password = document.getElementById('password').value;
+                let reg = /^[a-zA-Z0-9]{6,}$/;
+                if(!(reg.test(password))){
+                    alert('请输入6位以上的密码')
+                    
+                }
+            },
+            confirm:function(){
+                let password = document.getElementById('password').value;
+                let confirm = document.getElementById('confirm').value;
+                if(password != confirm){
+                    alert('两次密码输入不一致')
+                }
+
+            }
+        }
+    })
+    
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d1227877c727405e4de855416969f68e27f47c43
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html"
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <title>vue事件</title>
+</head>
+<body>
+    <div id="main" v-on:click="">
+        <form action="" method="get" v-on:submit.prevent="submit2">
+            <input type="text" name="name">
+            <input type="submit" value="提交">
+        </form>
+        <div class="bigger" v-on:click="bigger"style="margin: 10% 0; width:300px;height:200px;background-color:green;">
+            <div class="small" v-on:click.stop="small" style="width:100px; height:100px;background: red;">小区域</div>
+        </div>
+        <div v-bind:class="classname"></div>
+        <div v-bind:[nm]="classname"></div>
+        <div v-on:[method]='click'>动态方法绑定</div>
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el:'#main',
+        data:{
+            classname:'class123', 
+            nm:'id',
+            method:'click'
+        },
+        methods:{
+            click:function(){
+                console.log("点击了");
+            },
+            submit:function(even){
+                even.preventDefault();//传递事件的方案去阻止默认行为
+                console.log("你真的有点提交");
+            },
+            submit2:function(){
+                console.log("你点击了提交按钮");
+            },
+            bigger:function(){
+                console.log("大区域被点击了");
+            },
+            small:function(){
+                //even.stopPropagation();
+                console.log("小区域被点击了");
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..617dc785de76b03667633c14c035541f1ce7f0eb
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html"
@@ -0,0 +1,43 @@
+<!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.6.14/dist/vue.js"></script>
+</head>
+
+<body>
+    <div id="main">
+        <div>
+            {{msg}}
+        </div>
+    </div>
+    <!-- <div id="main2"></div> -->
+</body>
+<script>
+   let vue = new Vue({
+    //    el:"#main",
+       data:{
+           msg:'我是消息'
+       },
+       beforeCreate:function(){//初始化之前，原本访问属性 vue.msg,能不能去访问data的数据
+          console.log(this.msg);//如果解析data 成功了，可以通过 this.msg 访问,this 就是表示构建的这个对象
+       },
+       created:function(){//data已经初始化完成
+            console.log(this.msg);
+           
+       },
+       beforeMount:function(){//在moun之前，vue 会把el对于的dom元素选取，data数据解析，但是还没显示在页面中，它存在内存中
+        console.log(this.msg);//怎么去看元素又没被渲染成功?
+        console.log(this);//这时候都生成了渲染后的html
+       },
+       mount:function(){//替换掉了 el元素，已经挂在到了html页面中
+
+       }
+   });
+   vue.$mount("#main");
+   // obj.show() ,obj.handle()//就是具体的构建过程
+</script>    
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..de909bb000b043fe1d8cf32a705ba2dfd62b72be
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html"
@@ -0,0 +1,119 @@
+<!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.6.14/dist/vue.js"></script>
+</head>
+
+<style>
+    :root {
+        --width: 100%;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        background-color: gainsboro;
+    }
+
+    ul {
+        column-width: 180px;
+        column-gap: 100px;
+        margin: 0 5% 0 5%;
+        list-style-type: none;
+    }
+
+    li {
+        width: 150px;
+        height: 250px;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    img {
+
+        width: 150px;
+        display: inline-flex;
+        margin-top: 50px;
+    }
+
+    span {
+        color: deeppink;
+    }
+</style>
+
+<body>
+    <div id="main">
+        <ul>
+            <li v-for="(i,key) in goods" @click="click(key)">
+                <img v-bind:src="i.img" :alt="i.alt">
+                <span>{{i.name}}</span>
+            </li>
+
+        </ul>
+    </div>
+
+</body>
+<script>
+    let vue = new Vue({
+        el: "#main",
+
+        data: {
+            goods: [
+                {
+                    img: 'https://img13.360buyimg.com/jdcms/s150x150_jfs/t1/148049/19/26938/79650/623933a7E81bf506e/a3a062dd54f4ba5a.jpg.webp',
+                    name: '水杯',
+                    alt: '水杯',
+                },
+                {
+                    img: 'https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/95654/2/63/178279/5da6bc30E9d74e5f4/173751d8100a0384.jpg.webp',
+                    name: '纯牛奶',
+                    alt: '纯牛奶',
+                },
+                {
+                    img: 'https://img20.360buyimg.com/jdcms/s150x150_jfs/t1/179603/34/22315/131853/62451a92E96fe9f51/3b5f90655bc29ada.jpg.webp',
+                    name: '空调',
+                    alt: '空调',
+                },
+                {
+                    img: 'https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/181006/2/21848/209997/62456ed9Eb611003b/e755a4417e01cc29.jpg.webp',
+                    name: '双人沙发',
+                    alt: '双人沙发',
+                    click: 'click4'
+                },
+                {
+                    img: 'https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/223510/18/8067/238763/623ad2f2E761374d6/5bd46ef2c687fb39.jpg.webp',
+                    name: '办公桌',
+                    alt: '办公桌',
+                },
+                {
+                    img: 'https://img14.360buyimg.com/jdcms/s150x150_jfs/t1/97735/23/26077/231812/6245e837Ec7ae4723/785c9b31e60b5943.jpg.webp',
+                    name: '安慕希',
+                    alt: '安慕希',
+                },
+            ],
+            lai:
+                [
+                    '这是一个水杯，不瞎应该看得出来',
+                    '这是一个纯牛奶，不瞎应该看得出来',
+                    '这是一个空调，不瞎应该看得出来',
+                    '这是一个双人沙发，不瞎应该看得出来',
+                    '这是一个办公桌，不瞎应该看得出来',
+                    '这是一个安慕希，不瞎应该看得出来',
+                ]
+        },
+        methods: {
+
+            click: function (key) {
+                console.log('第' + parseInt(key + 1) + '个')
+                alert(vue.lai[key]);
+            },
+
+        },
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-06vue/rush.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-06vue/rush.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6239c22b20d4aeccbb1fd6c2508fbc1f45a786b3
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-06vue/rush.html"
@@ -0,0 +1,210 @@
+<!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.6.14/dist/vue.js"></script>
+    <style>
+        :root {}
+
+        * {
+            margin: 0;
+            padding: 0;
+            /* color: white; */
+        }
+
+        #main {
+            margin-top: 150px;
+            margin-left: 200px;
+            width: 1200px;
+        }
+
+        img {
+            width: 350px;
+            height: 350px;
+            position: absolute;
+        }
+
+        table {
+            position: relative;
+            left: 400px;
+        }
+
+        #name {
+            color: #666666;
+            font-size: 18px;
+
+        }
+
+        #priceName {
+            color: #999999;
+            font-size: 14px;
+        }
+
+        #price {
+            margin-left: 15px;
+            color: red;
+            font-size: 20px;
+
+        }
+
+        .timmings {
+
+            width: 590px;
+            height: 32px;
+            background-color: #FF0B5B;
+        }
+
+        #countDown {
+            font-size: 18px;
+            color: #FFFFFF;
+        }
+
+        #timeText {
+            font-size: 14px;
+            color: white;
+            margin-left: 250px;
+            line-height: 32px;
+        }
+
+        .black {
+            width: 24px;
+            background-color: black;
+            color: white;
+        }
+
+        .rush {
+            width: 142px;
+            height: 45px;
+            background-color: #DF3033;
+        }
+
+        .rush {
+            margin-top: 120px;
+            margin-left: 80px;
+            font-size: 20px;
+            font-weight: 700;
+            text-align: center;
+            line-height: 45px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="main">
+        <img :src="tu" alt="">
+        <table>
+            <tr>
+                <td>
+                    <span id="name">{{name}}</span>
+                </td>
+            </tr>
+            <tr>
+                <td class="timmings">
+                    <span id="countDown">{{countDown}}</span>
+                    <span id="timeText">{{timeText}}</span>
+                    <span v-bind:class="[black,hour]">{{hours}}</span> :
+                    <span v-bind:class="[black,minute]">{{minutes}}</span> :
+                    <span v-bind:class="[black,second]">{{seconds}}</span>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span id="priceName">原价</span>
+                    <span id="price"> ￥ {{yuan}}</span>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span id="priceName">秒 杀 价</span>
+                    <span id="price"> ￥ {{price}}</span>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                <div v-bind:class="rush" @click='click'>点击抢购
+                </td>
+            </tr>
+        </table>
+        
+    </div>
+</body>
+<script>
+    let num = 0;
+    let price = 9.5 / 0.6;
+    let padaHour = function (index) {
+        return index < 10 ? '0' + index : index;
+    }
+    let data = {
+        tu: 'https://img14.360buyimg.com/n0/jfs/t1/105338/31/23336/102992/620a1a61Ea2ac1b6f/3d915e1e4884195c.jpg',
+        name: 'INSONS 口罩 一次性使用防护口罩 3层 50只装',
+        yuan: 16,
+        price: 9.50,
+        countDown: ' 🐕 京西秒杀',
+        timeText: '距离结束',
+        black: 'black',
+        hour: 'hour',
+        minute: 'minute',
+        second: 'second',
+        rush: 'rush',
+
+        deadline: 0,
+        discountArr: {},
+        hours: '',
+        minutes: '',
+        seconds: '',
+    }
+    let vue = new Vue({
+        el: "#main",
+        data: data,
+        methods: {
+
+            click: function () {
+                alert("不好意思,余额不足,请先进行充值!!!")
+            },
+            init: function () {
+                let minutes = 60;
+                let min = vue.minutes;
+                let price = vue.yuan;
+                let i = (minutes-min-1);//加上/10则每十分钟折扣减少0.05，现为每分钟折扣减少0.05
+                if(i%1===0)  {
+                    let mo = price*(0.6+0.05*i)
+                    return mo;
+                }
+            }
+        },
+        created() {
+            let end = this.getTimeEnd;
+            setInterval(() => {
+                let date = new Date();
+                let hours =  Math.floor((end - date) / 1000 / 60 / 60 % 24);
+                let minutes = Math.floor((end - date) / 1000 / 60 % 60);
+                let seconds =  Math.floor((end - date) / 1000 % 60);
+                this.hours = padaHour(hours);
+                this.minutes = padaHour(minutes);
+                this.seconds = padaHour(seconds);
+                if (60 - minutes >= 1) {
+                    vue.price = Math.floor(vue.init()*100)/100;
+                   
+                }
+
+            }, 1000)
+        },
+        computed: {
+            getTimeEnd: function () {
+                this.name;
+                this.tu;
+                let time = new Date().getTime();
+                let count = time + 60 * 60 * 1000;
+                return count;
+            },
+            
+        }
+
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-07vue/css/index.css" "b/\351\273\204\346\266\246\345\261\261/2022-4-07vue/css/index.css"
new file mode 100644
index 0000000000000000000000000000000000000000..f39a188163e31471a5c7808da4188e2cb635d472
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-07vue/css/index.css"
@@ -0,0 +1,46 @@
+* {
+    margin: 0 auto;
+    padding: 0;
+    background-color: seashell;
+
+}
+
+form {
+    margin-top: 150px;
+}
+.middle {
+    
+}
+table {
+    border-spacing: 20px 35px;
+}
+.form-item {
+	width: 300px;
+    height: 40px;
+    padding-left: 15px;
+    /* -webkit-appearance:none;去除阴影边框 */
+    border: solid 1px rgb(255, 217, 0);
+    border-radius: 10px;
+
+}
+
+.middle .sex{
+    width: 20px;
+}
+
+.middle .butt {
+    cursor: pointer;
+    margin-top: 40px;
+	width: 280px;
+    height: 45px;
+    border: solid 1px white;
+    border-radius: 20px;
+    background-color: tomato;
+    color: white;
+    font-size: 18px;
+}
+
+
+.err {
+    border-color: red;
+}
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-07vue/registration.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-07vue/registration.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c7b2a8d78e67ff1a312ea266485e65f3c246d8ba
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-07vue/registration.html"
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>注册页面</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <form action="" class="middle">
+            <table>
+                <tr>
+                    <td>用户名:</td>
+                    <td>
+                        
+                        <input type="text" :class="['form-item',{'err':err}]" v-model="msg1" name="username"
+                            placeholder="请输入用户名" required id="user"></td>
+                </tr>
+                <tr>
+                    <td>密码:</td>
+                    <td><input type="password" :class="['form-item',{'err':err2}]" v-model="msg2" name="password" placeholder="请输入密码" required id="password"></td>
+                </tr>
+                <tr>
+                    <td>确认密码:</td>
+                    <td><input type="password" :class="['form-item',{'err':err3}]"  v-model="msg3" name="password" placeholder="确认密码" required id="confirm"></td>
+                </tr>
+                <tr>
+                    <td>性别:</td>
+                    <td>
+                        <input type="radio" name="sex" class="sex">男
+                        <input type="radio" name="sex" class="sex">女
+                    </td>
+                </tr>
+                <tr>
+                    <td>所在省份:</td>
+                    <td>
+                        <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>
+                            <option value="虹霖的家">虹霖的家</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>你当前所在省份:</td>
+                    <td>{{selected}}</td>
+                </tr>
+                <td></td>
+                <td>
+                    <input type="button" value="注册" class="butt">
+                </td>
+            </table>
+            
+        </form>
+    </div>
+</body>
+<script>
+    let app = new Vue({
+        el: '#app',
+        data: {
+            msg1: "",
+            msg2: "",
+            msg3:"",
+            err: false,
+            err2: false,
+            err3: false,
+            selected:""
+        },
+        watch: {
+            msg1(val) {
+                this.err = !/^\w{3,8}$/.test(val);
+            },
+            msg2(val){
+                this.err2 = !/^\w{6,12}$/.test(val);
+                this.err3 = !(this.msg3==val);
+            },
+            msg3(val){
+                this.err3 = !(this.msg2==val);
+            }
+        }
+    })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-08vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-08vue/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..09cd0d57b6b89bb7997eb2c1eb4b2cae0bb1f43f
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-08vue/demo01.html"
@@ -0,0 +1,30 @@
+<!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/dist/vue.js"></script>
+   
+</head>
+<body>
+    <div id="main">
+        输入英语或十六进制的颜色<input type="text" name="color" v-model="bg">
+        <div v-deo="bg" style=" width: 400px;height: 400px; border: 1px solid black;margin-top: 100px;"></div>
+    </div>
+</body>
+<script>
+    Vue.directive("deo",(el,binding)=>{
+        el.style.backgroundColor = binding.value
+    })
+
+    new Vue({
+        el:"#main",
+        data:{
+            bg:"#ff6633"
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-12vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-12vue/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5b15f9a12941fd03d78f735c2736c99e1a1ef995
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-12vue/demo01.html"
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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>Document</title>
+    <style>
+        .txt{
+            width: 200px;
+            height: 200px;
+            border: 1px solid black;
+            margin: 0 auto;
+            text-align: center;
+            background-color:#ff6633;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <name></name>
+    </div>
+</body>
+<script>
+    Vue.component('name',{
+        data:function(){
+            return{
+                result:true
+            };
+        },
+        methods:{
+            change:function(){
+                console.log(this.result);
+                this.result=!this.result
+            }
+        },
+        template:'<div><button @click="change">点击</button><div v-if="result" class="txt">内容</div><div>'
+    });
+
+    new Vue({
+        el:"#app",
+        data:{
+            result:true
+        },
+        methods:{
+            change:function(){
+                this.result=!this.result
+            }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-13vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-13vue/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8a0b5b4a5d2c372aca5e9f20cefac0b4e4cddd21
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-13vue/demo01.html"
@@ -0,0 +1,63 @@
+
+<!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>Document</title>
+     <style>
+        img {
+            width:150px;
+        }
+
+        td td{
+            margin: 20px 20px;
+            width: 200px;
+            border: 3px solid red;
+            float: left;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <table id="app">
+     <tr> 
+        <td>
+             <product v-for="obj in products" :pro="obj"></product>
+        </td>
+        <!-- <product v-for="obj in products" :pro="obj"></product> -->
+        
+     </tr>
+
+    </table>
+    <img :src="products.img">
+</body>
+
+<!---用局部组件展示商品---->
+
+<script>
+ 
+   //局部组件
+    let product={
+        props:['pro'],
+        template:"<td><p><img :src='pro.img'></p>{{pro.name}}{{pro.price}}</td>"
+    }
+
+  //普通的vm实例data可以是对象也可以方法
+  new Vue({
+      el:"#app",
+      data:{
+         products:[
+             {name:'茅台',price:'￥3078.00',img:'https://img12.360buyimg.com/seckillcms/s140x140_jfs/t1/98747/6/27421/131289/625cd51fE93a14865/21c99c18f4e6a481.jpg.webp'},
+             {name:'隋唐演义全20册',price:'￥29.80',img:'https://img14.360buyimg.com/seckillcms/s140x140_jfs/t1/183338/26/23545/179476/625cc91bE6465a7e0/c0958b3c376b95f7.jpg.webp'},
+             {name:'夏新小冰箱',price:'￥129.00',img:'https://img13.360buyimg.com/seckillcms/s140x140_jfs/t1/91000/4/26973/158290/62556726Eb4284d17/e5af724ba65c1c40.jpg.webp'}
+         ]
+      },
+      components:{
+        product:product,//可以简写为 product
+      }
+  })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-14vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-14vue/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..54d852e1a89d0fada7d257ca2c30939a7eac8df4
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-14vue/demo01.html"
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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>Document</title>
+    <style>
+        .main {
+            clear: both;
+            margin-top: 20px
+        }
+
+        .catalog {
+            width: 300px;
+            height: 300px;
+            float: left;
+            margin-top: 200px;
+            text-align: center;
+            background: grey;
+
+        }
+
+        .product {
+            width: 320px;
+            float: right;
+            margin-right: 500px;
+            text-align: center;
+        }
+
+        ul {
+            list-style-type: none;
+        }
+
+        .catalog div {
+            margin-top: 80px;
+            cursor: pointer;
+            color: white;
+        }
+
+        .catalog div:hover {
+            font-weight: 1000;
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <app :catalogs="catalogs" :products="products"><span>hot!</span></app>
+    </div>
+</body>
+<script>
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img' width='100%'>" +
+            "{{product.name}}<p>{{product.price}}</p></li>"
+
+    }
+
+    let catalog = {
+        data: function () {
+            return { catid: 0 }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+            }
+        },
+        props: ['catalog'],
+        template: "<div>{{catalog.name}}</div>",
+        components: {
+
+        }
+    }
+
+    let app = {
+        methods: {
+            choicecat: function (i) {
+                this.catid = i
+            }
+        },
+        data: function () {
+            return { catid: 1 }
+        },
+        props: ['catalogs', 'products'],
+        template: "<div class='main'><div class='catalog'>" +
+            "<catalog class='ctalog-item' v-for='catalog in catalogs' :catalog='catalog' @click.native='choicecat(catalog.id)'>" +
+            "</catalog></div> <ul class = 'product'>" +
+            "<product v-for='product in products' :product='product' v-show='(catid==product.cid)'></product>" +
+            "</ul></div>",
+        components: {
+            catalog,
+            product,
+        }
+    }
+    new Vue({
+        el: "#app",
+        data: {
+            catalogs: [
+                {
+                    name: '手机',
+                    id: 1,
+                    img: ''
+                },
+                {
+                    name: '笔记本',
+                    id: 2,
+                    img: '',
+                }
+            ],
+            products: [
+                {
+                    cid: 1,
+                    name: 'Apple iPhone 13 mini ',
+                    price: '￥5199.00',
+                    img: 'https://img12.360buyimg.com/babel/s320x320_jfs/t1/184741/34/21604/33630/6231bfabEe12f2a18/bc236316cd846e10.jpg!cc_320x320.webp'
+                },
+                {
+                    cid: 1,
+                    name: '三星 SAMSUNG Galaxy S22+',
+                    price: '￥7399',
+                    img: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/165522/3/22573/125123/6257e7a8E2d24af77/df508cefa3df75cc.jpg!cc_320x320.webp'
+                },
+                {
+                    cid: 1,
+                    name: 'vivo X Fold',
+                    price: '￥8999',
+                    img: 'https://img11.360buyimg.com/babel/s320x320_jfs/t1/86218/2/27436/165285/625978b4E5dfe8831/91ccf2159493aa20.jpg!cc_320x320.webp'
+                },
+                {
+                    cid: 2,
+                    name: 'Apple MacBook Air',
+                    price: '￥7999',
+                    img: 'https://img14.360buyimg.com/babel/s320x320_jfs/t1/143581/15/14126/52373/5fab06ecEb746d196/274db844fd42cd28.jpg!cc_320x320.webp'
+                },
+                {
+                    cid: 2,
+                    name: 'Apple MacBook Pro',
+                    price: '￥18999',
+                    img: 'https://img11.360buyimg.com/babel/s320x320_jfs/t1/204426/36/11925/99080/616dcf29E86dfb629/27e4292aaa125b57.jpg!cc_320x320.webp'
+                },
+                {
+                    cid: 2,
+                    name: 'ROG幻16',
+                    price: '￥21999.00',
+                    img: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/114709/29/24712/330879/62468e49Ef660b8e4/e164b103c35537a1.jpg!cc_320x320.webp'
+                },
+            ]
+        },
+        components: {
+            app,
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-14vue/demo02.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-14vue/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..29a649fd1e8213a4e2e4f6f8394ccd6a67aa4062
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-14vue/demo02.html"
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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>slot插槽</title>
+    <style>
+        .main {
+            clear: both;
+            margin-top: 20px
+        }
+
+        .catalog {
+            width: 300px;
+            float: left;
+            text-align: center;
+            background: grey;
+            height: 70px;
+            line-height: 70px;
+            margin-bottom: 2px;
+        }
+
+        .product {
+            padding-top: 20px;
+            width: 650px;
+            height: 222px;
+            margin-left: 360px;
+            padding-bottom: 36px;
+            background-color: bisque;
+        }
+
+        li {
+            list-style: none;
+            width: 200px;
+            height: 216px;
+            float: left;
+        }
+    </style>
+</head>
+
+
+<body>
+    <!-- 作业,es2015模块，回顾下，没学预习下, 在上一节课基础之上使用 slot插槽 为不同的目录，添加不同的背景图片-->
+    <div id="app">
+        <app :app="catalogs[0]"></app>
+        <app :app="catalogs[1]"><img 
+            src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0a1ae5341d2dae66cd42566c60d2d666.png?thumb=1&w=160&h=110&f=webp&q=90' />
+        </app>
+        <app :app="catalogs[2]"><img 
+            src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4732fb7e6c170d1438a4554bb702e7ca.png?thumb=1&w=160&h=110&f=webp&q=90 ' />
+        <img width="100px" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628600350.1553788.png">
+        </app>
+    </div>
+
+</body>
+<script>
+    let product = {
+        props: ['product'],
+        template: "<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
+    }
+
+    let catalog = {
+        data: function () {
+            return { show: true }
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+            }
+        },
+        props: ['data'],
+
+        template: "<div><div class='catalog' @click='catshow' ><div></div>{{data.name}}</div>" +
+            "<ul class='product' v-if='show' ><product v-for='(product,index) in data.products' :product='product'></product>" +
+            "</ul></div>",
+        components: {
+            product
+        }
+    }
+
+    let app = {
+        props: ['app'],
+        //目录的模板 slot 可以理解为是变量,在 <app></app> 写html 标签即可传递
+        template: "<div class='main'><catalog :data='app'></catalog><slot><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/087c52d253d9301dff7743d6bf2d0330.png?thumb=1&w=160&h=110&f=webp&q=90' /></slot></div>",
+        components: {
+            catalog
+        }
+    }
+
+    new Vue({
+        el: "#app",
+        data: {
+            catalogs: [
+                {
+                    id: 1,
+                    name: '手机',
+                    products: [
+                        {
+                            name: '黑鲨5 Pro  ',
+                            price: '4699 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1648539027.11133390.png'
+                        },
+                        {
+
+                            name: 'Redmi K50 电竞版  ',
+                            price: '3899 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1644895162.54098125.png'
+                        },
+                        {
+                            name: 'Xiaomi 12 Pro  ',
+                            price: '5399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640680536.47346782.png'
+                        }
+                    ]
+                },
+                {
+                    id: 2,
+                    name: '电视',
+                    products: [
+                        {
+                            name: 'Redmi智能电视X65 2022款  ',
+                            price: '3399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        },
+                        {
+                            name: '小米电视 ES75 2022款  ',
+                            price: '5499元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        },
+                        {
+                            name: '小米电视6 至尊版 55英寸  ',
+                            price: '5499元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg'
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    name: '笔记本 平板',
+                    products: [
+                        {
+                            name: 'Redmi Book Pro 14 2022  ',
+                            price: '5399 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1647320245.05395660.png'
+                        },
+                        {
+                            name: 'Redmi G 2021  ',
+                            price: '5499 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1631957457.33064712.jpg'
+                        },
+                        {
+                            name: '小米笔记本 Pro 15 增强版  ',
+                            price: '5999 元',
+                            img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1629388763.38582634.png'
+                        }
+                    ]
+                }
+            ]
+        },
+        //template:'<app  :data="catalogs" />',
+        components: {
+            app,
+        }
+    })
+
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-15vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-15vue/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4dd8af77fc3d7812f662ef6dee80d485f57e9ad9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-15vue/demo01.html"
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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>Document</title>
+    <style>
+        #app {
+            position: relative;
+            margin: 0;
+            padding: 0;
+            
+        }
+
+        .main {
+            clear: both;
+            margin-top: 20px
+        }
+
+        .catalog {
+            width: 200px;
+            height: 25px;
+            margin-top: 50px;
+            margin-right: 50px;
+            text-align: center;
+            background: grey;
+            cursor: pointer;
+
+        }
+        ul {
+            list-style-type: none;
+        }
+
+
+        .catalog:hover {
+            font-weight: 1000;
+            color: red;
+        }
+        .goods {
+            width: 210px;
+            height: 300px;
+            border: 1px solid #279991;
+            padding: 0 10px;
+            box-sizing: border-box;
+            float: left;
+            margin: 8px;
+            text-align: center;
+        }
+        .back {
+            position: absolute;
+            width: 100%;
+            height: 310px;
+            z-index: -1;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <app :app="catalogs[0]">
+            <img src="https://img0.baidu.com/it/u=1078020743,1118336683&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=353" class="back" >
+        </app>
+        <app :app="catalogs[1]">
+            <img src="https://img0.baidu.com/it/u=3365481284,252475442&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" class="back">
+        </app>
+        <app :app="catalogs[2]">
+            <img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00278-155.jpg" class="back">
+        </app>
+    </div>
+</body>
+<script>
+
+    let product = {
+        props: ['product'],
+        template: "<div class='goods'><img :src='product.img' width='100%'>" +
+            "{{product.name}}<p>{{product.price}}</p></div>"
+
+    }
+        var laststatus;
+        let last;
+        let backshow;
+    let catalog = {
+        data: function () {
+            return { show: false,}
+        },
+        methods: {
+            catshow: function () {
+                this.show = !this.show
+               if(laststatus===this.show&this!=last){
+                   last.show = false
+               }
+               last = this
+               laststatus = this.show
+               this.lai = laststatus
+            }
+        },
+        props: ['data'],
+        template: "<div><div class='catalog' @click='catshow' >{{data.name}}</div>" +
+            "<div><slot v-if='show'></slot><ul class='product' v-if='show'>" +
+            "<product v-for='(product,index) in data.products' :product='product'></product>" +
+            "</ul></div></div>",
+        components: {
+            product
+        }
+    }
+
+    let app = {
+        props: ['app'],
+        template: "<div class='main'>" +
+            "<catalog :data='app' @click='slshow'><slot></slot></catalog></div>",
+        components: {
+            catalog,
+        }
+    }
+    new Vue({
+        el: "#app",
+        data: {
+            lai:backshow,
+            catalogs: [
+                {
+                    name: '手机',
+                    id: 1,
+                    lai:backshow,
+                    products: [
+                        {
+                            name: 'Apple iPhone 13 mini ',
+                            price: '￥5199.00',
+                            img: 'https://img12.360buyimg.com/babel/s320x320_jfs/t1/184741/34/21604/33630/6231bfabEe12f2a18/bc236316cd846e10.jpg!cc_320x320.webp'
+                        },
+                        {
+                            name: '三星 SAMSUNG Galaxy S22+',
+                            price: '￥7399',
+                            img: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/165522/3/22573/125123/6257e7a8E2d24af77/df508cefa3df75cc.jpg!cc_320x320.webp'
+                        },
+                        {
+                            name: 'vivo X Fold',
+                            price: '￥8999',
+                            img: 'https://img11.360buyimg.com/babel/s320x320_jfs/t1/86218/2/27436/165285/625978b4E5dfe8831/91ccf2159493aa20.jpg!cc_320x320.webp'
+                        },
+                    ]
+                },
+                {
+                    name: '笔记本',
+                    id: 2,
+                    lai:backshow,
+                    products: [
+
+                        {
+                            name: 'Apple MacBook Air',
+                            price: '￥7999',
+                            img: 'https://img14.360buyimg.com/babel/s320x320_jfs/t1/143581/15/14126/52373/5fab06ecEb746d196/274db844fd42cd28.jpg!cc_320x320.webp'
+                        },
+                        {
+                            name: 'Apple MacBook Pro',
+                            price: '￥18999',
+                            img: 'https://img11.360buyimg.com/babel/s320x320_jfs/t1/204426/36/11925/99080/616dcf29E86dfb629/27e4292aaa125b57.jpg!cc_320x320.webp'
+                        },
+                        {
+                            name: 'ROG幻16',
+                            price: '￥21999.00',
+                            img: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/114709/29/24712/330879/62468e49Ef660b8e4/e164b103c35537a1.jpg!cc_320x320.webp'
+
+                        },
+                    ]
+                },
+                {
+                    name: 'cv',
+                    id: 3,
+                    lai:backshow,
+                    products: [
+
+                        {
+                            name: 'Apple MacBook Air',
+                            price: '￥7999',
+                            img: 'https://img14.360buyimg.com/babel/s320x320_jfs/t1/143581/15/14126/52373/5fab06ecEb746d196/274db844fd42cd28.jpg!cc_320x320.webp'
+                        },
+                        {
+                            name: 'Apple MacBook Pro',
+                            price: '￥18999',
+                            img: 'https://img11.360buyimg.com/babel/s320x320_jfs/t1/204426/36/11925/99080/616dcf29E86dfb629/27e4292aaa125b57.jpg!cc_320x320.webp'
+                        },
+                        {
+                            name: 'ROG幻16',
+                            price: '￥21999.00',
+                            img: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/114709/29/24712/330879/62468e49Ef660b8e4/e164b103c35537a1.jpg!cc_320x320.webp'
+
+                        },
+                    ]
+                },
+            ]
+        },
+        components: {
+            app,
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-19vue/demo01.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-19vue/demo01.js"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/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/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-20vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/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/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-21vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/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/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-26vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/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/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-27vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/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/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-29vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/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/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-03vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/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/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-04vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/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/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-05vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a58bcec5320ceb62fdf0c4631800be37794b4166
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/components/CartItem.vue"
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="ym">
+      <img :src="img" alt="" class="image" />
+      <h4>{{ name }}</h4>
+      <br />
+      <div class="a">
+        <span class="count">￥{{ price }}.00</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 scoped>
+.shoping {
+  margin: 0 5%;
+  position: absolute;
+}
+.ym {
+  width: 420px;
+  height: 200px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.image {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  top: 40px;
+  left: 40px;
+}
+h4 {
+  position: relative;
+  top: -120px;
+  left: 180px;
+  margin-right: 200px;
+  font-size: 20px;
+}
+.count {
+  position: relative;
+  top: -100px;
+  left: 160px;
+  font-size: 19px;
+}
+.a input {
+  width: 30px;
+  position: relative;
+  top: -100px;
+  left: 220px;
+}
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/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/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27f0a1ad1fac9566e5be622c06d94bcec9790e
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/main.js"
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import router from './router/index'
+import plugin1 from './plugins/plugin1'
+
+Vue.use(plugin1)
+
+Vue.config.productionTip = false
+new Vue({
+	el:'#app',
+	
+	render:(createElement) => {
+		return createElement(App)
+	},
+	router
+})
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3d939607560c1496abd45e158a97073d912fa67a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/AdvList.vue"
@@ -0,0 +1,121 @@
+<template>
+  <div class="shoping">
+    <div class="lai">
+    <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.num }}</span
+              ><span>折起</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+    </scroller>
+  </div>
+  </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,
+        },
+      ],
+    };
+  },
+  methods: {
+    refresh: function () {
+      console.log("刷新");
+    },
+    infinite: function () {
+      console.log("拉取");
+    },
+  },
+};
+</script>
+<style scoped>
+.lai {
+    position: absolute;
+    width: 420px;
+  height: 530px;
+}
+._v-container{
+   position: relative;
+}
+.shoping {
+
+  margin: 0 5%;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e65b32e571049317e7e4f77b8781862d109411c9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/BodyBase.vue"
@@ -0,0 +1,74 @@
+<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:[
+              {id:1,name:'FILAKIDS夏季潮搭专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/05/03/188/ias_1651586466569661291_1135x545_85.jpg',num:3.7},
+              {id:2,name:'沙驰satchi男女鞋专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/28/189/ias_9b041498f80670cb4c75265b3ba91180_1135x545_85.jpg',num:4.7},
+              {id:3,name:'顶瓜瓜专场',img:'https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/04/27/32/ias_0c51258d0c4a2c24e6873c228bbc5d8f_1135x545_85.jpg',num:3.8}
+          ],
+      }
+  },
+  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/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dd87bc9191f3b5f045fea15fcf894a60c6b0fb15
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/CartList.vue"
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="top"><span>购物车</span></div>
+    <div class="shoping">
+      <CartItem
+        ref="shopping"
+        v-for="(pro, index) in products"
+        :key="index"
+        :id="pro.id"
+        :name="pro.name"
+        :img="pro.img"
+        :price="pro.price"
+        :num="parseInt(pro.num)"
+      ></CartItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "../components/CartItem.vue";
+export default {
+  name: "CartList",
+  data: function () {
+    return { products: [] };
+  },
+  created: function () {
+    let products = JSON.parse(localStorage.getItem("cart"));
+    this.products = products;
+  },
+  components: {
+    CartItem: CartItem,
+  },
+};
+</script>
+<style scoped>
+.shoping {
+  margin: 0 5%;
+}
+.top {
+    width: 450px;
+    height: 50px;
+    text-align: center;
+}
+.top span {
+    font-size: 21px;
+}
+.ym {
+  width: 420px;
+  height: 285px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+img {
+  border-radius: 6px 6px 0px 0px;
+  width: 420px;
+}
+.count {
+  color: #e04f9f;
+}
+h4 {
+  margin: 12px 40px -8px 20px;
+}
+.a {
+  margin-left: 20px;
+  color: #7c7f92;
+  font-size: 15px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4f03081a6ea4c6a690d9184582e6423652789a7a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/pages/Detail.vue"
@@ -0,0 +1,237 @@
+<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" v-on:click='add2Card'>
+            <div class="pri">
+              <span>￥{{ price }} </span>
+            </div>
+            <div class="pri2">
+              <span>特卖价 抢</span>
+              <img src="../../public/assets/jiantou.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: ["name", "id", "price", "img", "num"],
+  data() {
+    return {
+      title: "",
+    };
+  },
+  methods:{
+    add2Card:function(){
+      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];
+          if(detailPro.id==pro.id){
+            detailPro.num++;
+            inPro=true;
+          }
+        }
+        if(!inPro){
+          allProducts.push(pro);
+        }
+      }else {
+        allProducts=[];
+        allProducts.push(pro);
+      }
+      localStorage.setItem(key,JSON.stringify(allProducts));
+      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%;
+}
+.ce {
+  width: 100%;
+  background-color: #f3f4f5;
+}
+.discount {
+  width: 100%;
+  height: 90px;
+  background-color: antiquewhite;
+  background-image: url(../../public/assets/beijing.webp);
+  background-size: 460px 90px;
+  display: flex;
+  justify-content: space-between;
+}
+.price {
+  color: #fff;
+  margin: 13px 20px;
+}
+.price .zhehoujia {
+  font-size: 30px;
+}
+.price .yuanjia {
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+.shenghuoguan img {
+  width: 85px;
+  margin: 30px 15px;
+}
+
+.mingchen {
+  width: 426px;
+  height: 102px;
+  padding: 10px 20px;
+  background-color: #fff;
+}
+.mingchen .biaoti {
+  color: #222;
+  font-size: 19.5px;
+}
+.green {
+  margin-top: 8px;
+}
+.green span {
+  width: 63px;
+  height: 19px;
+  background-color: #36c88e;
+  color: #fff;
+  font-size: 12px;
+  margin-right: 10px;
+  padding: 5px 8px;
+  border-radius: 10%;
+}
+
+.zhengpin {
+  width: 422px;
+  height: 25px;
+  background-color: #fff;
+  margin: 15px 0;
+  padding: 22px;
+}
+.zhengpin img {
+  width: 90px;
+  height: 17px;
+  margin-right: 20px;
+}
+.zhengpin span {
+  color: #585c64;
+  font-size: 15px;
+}
+.jiantou {
+  margin-left: 115px;
+}
+
+.bottom {
+  width: 100%;
+  height: 79px;
+  background-color: #fff;
+  display: flex;
+  padding-top: 8px;
+  /* justify-content: space-between; */
+}
+.count {
+  display: flex;
+}
+.tubiao {
+  margin-left: 20px;
+  margin-top: 8px;
+}
+.tubiao img {
+  width: 27px;
+  height: 27px;
+}
+.jiage1 {
+  width: 145px;
+  height: 72px;
+  background-color: #f688a4;
+  border-radius: 10px 0 0 10px;
+  margin-left: 55px;
+  font-size: 24.5px;
+  color: #fff;
+  text-decoration: line-through;
+}
+.jiage1 span {
+  margin-left: 30px;
+  line-height: 70px;
+}
+.jiage2 {
+  width: 145px;
+  height: 72px;
+  background-color: #f03867;
+  border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+  font-size: 24.5px;
+  color: #fff;
+  /* text-align: center; */
+  /* vertical-align: middle; */
+  margin: 10px 37px;
+}
+.jiage2 .pri2 {
+  font-size: 17px;
+  color: #fff;
+  margin-left: 30px;
+  margin-top: -15px;
+}
+.jiage2 .pri2 img {
+  width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/plugins/plugin1.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/plugins/plugin1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a62e97a02d5d658149055a8fc742b53ee37542a1
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/plugins/plugin1.js"
@@ -0,0 +1,26 @@
+import VueScroller from 'vue-scroller'
+
+
+const plugin1 = {
+    install: function (Vue) {
+        console.log('plugin1 start')
+        console.log(Vue);
+        //增强属性
+        Vue.prototype.$class = 'class7';
+        //全局的混入
+        Vue.mixin({
+            data: function () {
+                return {
+                    month: 15,
+                    hope: '挣大钱',
+                    pageSize: 20
+                }
+            }
+        })
+        //全局的指令.....
+
+        Vue.use(VueScroller)
+    }
+
+}
+export default plugin1
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..46a97438fdbab4388479b63b75851abef2612c7d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-06vue/src/router/index.js"
@@ -0,0 +1,39 @@
+// 配置路由规则
+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/:id/:name',
+            component:Detail,
+            props:true
+        },
+        {
+            name:'cartList',
+            path:'/cartList',
+            component:CartList,
+            props:true
+        }
+    ]
+})
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/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/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..56b1927836121838ac601f9fc7e60810b999a687
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/components/HeaderBase.vue"
@@ -0,0 +1,109 @@
+<template>
+  <div>
+  <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>
+    <div id="body">
+       <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>
+   </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>
+
+#body{
+  position: relative;
+  text-align: center;
+}
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/data/product.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/adidas.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/akf.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/lining.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/threece.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/ugg.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..6cb9215cca06b6a19beb23aa0cdff394a1b98d8d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/main.js"
@@ -0,0 +1,98 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+import Vuex from 'vuex';
+
+import VueScroller from 'vue-scroller'
+Vue.use(VueScroller)
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+Vue.use(Vuex);
+
+
+
+const store = new Vuex.Store({
+   state: {  
+        name:'外卖系统',
+        cart:[],
+        buyNums:0,//购买的数量，每次点击购买时，把对应购买数量+1
+
+    },    
+
+    mutations:{
+      changeName(state,name){
+          state.name=name;
+        
+      },
+      changeBuyNum(state,num){
+          console.log('change buynum');
+          //请求后台数据,
+          axios.get('https://question.llblog.cc/api.php').then(res=>{
+            console.log(res);
+            state.buyNums = state.buyNums+num; //0+1    1+1    0
+            console.log(state.buyNums);
+          });
+        
+      },
+      addToCart(state,product){
+        let inCart = false;
+         state.cart.forEach(el=>{
+            if(el.id==product.id){
+               el.num++
+               inCart=true;
+            }
+         })
+         if(!inCart){
+           state.push(product);
+         }
+      },
+     
+    
+    },
+    actions:{
+      changeNumByAction (context,num) {
+        console.log(context);//context 是store的精简版
+        context.commit('changeBuyNum',num)
+      }
+    },
+    getters:{
+      getBuyNums(state){
+         return state.buyNums+' ====数量';
+      }
+    }
+
+ })
+
+//引入路由器
+import router from './router/index';
+
+
+
+// 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/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..278aa02541b85b2678d29fb87606bbd8548c7be2
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/AdvList.vue"
@@ -0,0 +1,142 @@
+<template>
+
+  <div class="shoping" >
+      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
+         <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 axios from 'axios';
+import {mapState} from 'vuex';
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1,
+          page:1,//页数
+          pageSize:20,
+      }
+  },
+  mounted:function(){
+      console.log(this.$store)
+    //   this.products=product.products;
+    //   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;
+    //          }
+    //      })
+    //   })
+      let url = 'https://question.llblog.cc/api.php?page=1&pageSize=20';
+      this.$axios.get(url).then(res=>{
+            this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+            }
+            
+        })
+  },
+  computed:{
+      ...mapState(['name'])
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+    //   let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+    //   //methos get post delete patch
+    //   axios.get(url).then(res=>{
+    //       console.log(res.data);
+          
+    //   });
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  methods:{
+      refresh:function(done){//scroller 插件的 refresh 方法，会有各 done 参数，done 插件用来描述这次事件的结束
+          console.log('refresh')
+          done()
+      },
+      infinite:function(done){
+        //console.log('infinite');
+        //question.llblog.cc/api.php?page=1&pageSize=20
+        //  setTimeout(()=>{
+		// 				//this.$refs.myscroller.finishInfinite(true);
+        //                 done();
+		// 			},1500)
+        let url = 'https://question.llblog.cc/api.php?page'+this.page+'&pageSize='+this.pageSize;
+        this.$axios.get(url).then(res=>{
+            console.log(res.data.data);
+            //this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+                res.data.data.forEach(el => {
+                    console.log(el);
+                    this.products.push(el);
+                });
+            }
+        })
+         done();
+      }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+     margin:0 auto;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/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/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ad7281f8b79b0f897ef609c00155ab672409dc89
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/pages/Detail.vue"
@@ -0,0 +1,244 @@
+<template>
+  <div >
+        {{this.$store.state.buyNums}}
+        {{getBuyNums}}
+        <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 { mapState,mapMutations,mapActions,mapGetters} from 'vuex'
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  computed:{
+    ...mapGetters(['getBuyNums']),  
+    ...mapState(['buyNums']),
+  },
+  methods:{
+    ...mapActions(['changeNumByAction']),
+    // changeNumByAction:function(){
+    //     this.$store.dispatch('changeNumByAction')
+    // },
+    ...mapMutations(['changeBuyNum']),//`this.changeBuyNum()` 映射为 `this.$store.commit('changeBuyNum')`
+    // changeBuyNum:function(){
+    //     this.$store.commit('changeBuyNum');
+    // },
+    add2Card:function(){
+        //product.addToCart(id);
+        //this.$bus.$emit('change');
+        //this.$store.commit('changeBuyNum',1); 
+        //this.changeBuyNum(1);
+        //this.$store.dispatch('changeNumByAction');
+        this.changeNumByAction(1);
+    }
+  },
+  mounted(){
+      console.log(this);
+      console.log(this.$store.getters.getBuyNums)
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..e894839a98442b4a7ec971344bf48e4c5d824e14
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/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/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/vuex.md" "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/vuex.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5dfe881c43fd202302f30e39d314953033fe6f8f
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-10vue/src/vuex.md"
@@ -0,0 +1 @@
+## mutioan 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，mutation 中的函数必须是同步的
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/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/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..56b1927836121838ac601f9fc7e60810b999a687
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/components/HeaderBase.vue"
@@ -0,0 +1,109 @@
+<template>
+  <div>
+  <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>
+    <div id="body">
+       <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>
+   </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>
+
+#body{
+  position: relative;
+  text-align: center;
+}
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/data/product.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/adidas.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/akf.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/lining.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/threece.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/ugg.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..f6bb6db3aa3d4e11f73c880a20c1feaf5c96e8b7
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/main.js"
@@ -0,0 +1,47 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+import VueScroller from 'vue-scroller'
+
+//import 的级别是最好的，优先执行 import
+Vue.use(VueScroller)
+
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+
+import store from './store';
+
+
+
+//引入路由器
+import router from './router/index';
+
+
+
+// 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/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..4ec65d0ff7095b401867fbd30f18de7f2bf78162
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/AdvList.vue"
@@ -0,0 +1,142 @@
+<template>
+
+  <div class="shoping" >
+      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
+         <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 axios from 'axios';
+import {mapState} from 'vuex';
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1,
+          page:1,//页数
+          pageSize:20,
+      }
+  },
+  mounted:function(){
+      console.log(this.$store)
+    //   this.products=product.products;
+    //   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;
+    //          }
+    //      })
+    //   })
+      let url = 'https://question.llblog.cc/api.php?page=1&pageSize=20';
+      this.$axios.get(url).then(res=>{
+            this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+            }
+            
+        })
+  },
+  computed:{
+      ...mapState(['name'])
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+    //   let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+    //   //methos get post delete patch
+    //   axios.get(url).then(res=>{
+    //       console.log(res.data);
+          
+    //   });
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  methods:{
+      refresh:function(done){//scroller 插件的 refresh 方法，会有各 done 参数，done 插件用来描述这次事件的结束
+          console.log('refresh')
+          done()
+      },
+      infinite:function(done){
+        //console.log('infinite');
+        //question.llblog.cc/api.php?page=1&pageSize=20
+        //  setTimeout(()=>{
+		// 				//this.$refs.myscroller.finishInfinite(true);
+        //                 done();
+		// 			},1500)
+        let url = 'https://question.llblog.cc/api.php?page'+this.page+'&pageSize='+this.pageSize;
+        this.$axios.get(url).then(res=>{
+            console.log(res.data.data);
+            //this.products = res.data.data;
+            if(res.data.data.length>0){
+                this.page++;
+                res.data.data.forEach(el => {
+                    console.log(el);
+                    this.products.push(el);
+                });
+            }
+        })
+         done();
+      }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+     margin:0 auto;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/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/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..bcee73c143dde0b94a1a994b706855c2c11a90ca
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/pages/Detail.vue"
@@ -0,0 +1,255 @@
+<template>
+  <div >
+        {{this.$store.state.buyNums}}
+        {{getBuyNums}}
+        {{this.$store.state.user.userInfo.name}}
+        <h3 @click='changeUser'>{{userInfo.name}}</h3>
+        <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 { mapState,mapMutations,mapActions,mapGetters} from 'vuex'
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  computed:{
+    ...mapGetters(['getBuyNums']),  
+    ...mapState(['buyNums']),
+    ...mapState('user',['userInfo']),
+    
+  },
+  methods:{
+    ...mapActions(['changeNumByAction']),
+    // changeNumByAction:function(){
+    //     this.$store.dispatch('changeNumByAction')
+    // },
+    ...mapMutations(['changeBuyNum']),//`this.changeBuyNum()` 映射为 `this.$store.commit('changeBuyNum')`
+    // changeBuyNum:function(){
+    //     this.$store.commit('changeBuyNum');
+    // },
+    ...mapMutations('user',['changeUserInfo']),
+    add2Card:function(){
+        //product.addToCart(id);
+        //this.$bus.$emit('change');
+        //this.$store.commit('changeBuyNum',1); 
+        //this.changeBuyNum(1);
+        //this.$store.dispatch('changeNumByAction');
+        this.changeNumByAction(1);
+    },
+    changeUser:function(){
+         //this.$store.commit('user/changeUserInfo',{name:'vuex',age:3});
+         //this.$store.commit('user/changeUserInfo',{name:'vuex',age:3});
+         //this.changeUserInfo({name:'vuex',age:3})
+         this.$store.dispatch('user/changeUserInfoByAction',{name:'vuex',age:3});
+    },
+  },
+  mounted(){
+      console.log(this);
+      //console.log(this.$store.getters.getBuyNums)
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..e894839a98442b4a7ec971344bf48e4c5d824e14
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/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/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/actions.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/actions.js"
new file mode 100644
index 0000000000000000000000000000000000000000..f9b47bd8e44f5a32e92ea34456aa931a3005d2b2
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/actions.js"
@@ -0,0 +1,13 @@
+
+const actions={
+
+        changeNumByAction (context,num) {
+          console.log(context);//context 是store的精简版
+          context.commit('changeBuyNum',num)
+        },
+        changeName({commit},name){
+          commit('changeName',name)
+        }
+}
+
+export default actions
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a58a3e765c52465582772faff9c8a6e5584add08
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/index.js"
@@ -0,0 +1,25 @@
+import Vuex from 'vuex';
+
+import Vue from 'vue';
+import state from './state';
+import actions from './actions';
+import mutations from './mutations'
+import user from './mudules/user'
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+     state,
+     mutations,
+     actions,
+     getters:{
+       getBuyNums(state){
+          return state.buyNums+' ====数量';
+       }
+     },
+     modules:{// 每个模块对象都有自己的 state mutation action getters
+        user
+     }
+ 
+  })
+
+  export default store;
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/mudules/user.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/mudules/user.js"
new file mode 100644
index 0000000000000000000000000000000000000000..6e9c593eb8e10d1b964539e9376e611f0430e3f2
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/mudules/user.js"
@@ -0,0 +1,24 @@
+const user={
+    namespaced: true,
+     state:{
+          userInfo:{name:'vue',age:5},
+     },
+     mutations:{
+       changeUserInfo(state,payload){
+         console.log('userInfo的changeUserInfo');
+         state.userInfo=payload
+       }
+     },
+     actions:{
+       changeUserInfoByAction({commit},payload){// context commit
+         console.log('userInfo的changeUserInfoByActio');
+         commit('changeUserInfo',payload);
+         //联动的操作，还要把全局的name给修改
+         //因为 name 是全局的，官网提供了 他们可以接受 `root` 属性以访问根 dispatch 或 commit
+         commit('changeName','区块链',{root: true});
+       }
+     }
+
+  }
+
+  export default user;
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/mutations.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/mutations.js"
new file mode 100644
index 0000000000000000000000000000000000000000..01134bad23a3b73a08e7ba03df939f73c1c3a10d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/mutations.js"
@@ -0,0 +1,32 @@
+import axios from 'axios';
+const mutations={
+        changeName(state,name){
+            console.log('修改全局的name')
+            state.name=name;
+          
+        },
+        changeBuyNum(state,num){
+            console.log('change buynum');
+            //请求后台数据,
+            axios.get('https://question.llblog.cc/api.php').then(res=>{
+              console.log(res);
+              state.buyNums = state.buyNums+num; //0+1    1+1    0
+              console.log(state.buyNums);
+            });
+          
+        },
+        addToCart(state,product){
+          let inCart = false;
+           state.cart.forEach(el=>{
+              if(el.id==product.id){
+                 el.num++
+                 inCart=true;
+              }
+           })
+           if(!inCart){
+             state.push(product);
+           }
+        }
+}
+
+export default mutations;
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/state.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/state.js"
new file mode 100644
index 0000000000000000000000000000000000000000..90f8d00b2a664f63a090ba52726e45cda7ce4376
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/store/state.js"
@@ -0,0 +1,8 @@
+const state={  
+    name:'外卖系统',
+    cart:[],
+    buyNums:0,//购买的数量，每次点击购买时，把对应购买数量+1
+    //userInfo:{},
+
+}
+export default state;
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/vuex.md" "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/vuex.md"
new file mode 100644
index 0000000000000000000000000000000000000000..50fe2077b08c9e3ce440e6a50074c4f5a383348d
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-11vue/src/vuex.md"
@@ -0,0 +1,3 @@
+## mutioan 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，mutation 中的函数必须是同步的
+
+
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/App.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..72248fd61be78392d39e4189212a95a6d3cf0c56
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/App.vue"
@@ -0,0 +1,44 @@
+<template>
+  <div id="app" >
+       <div class="show">
+         <HeaderBase />
+       </div>
+  </div>
+</template>
+
+<script>
+
+import HeaderBase from './components/HeaderBase.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HeaderBase,
+  },
+  mounted:function(){
+
+  }
+}
+</script>
+  
+<style>
+a {
+  text-decoration: none;
+  margin-left: 55px;
+  color:#807E7B;
+}
+ #app{
+   background-color: #F1F3F4;
+   width: 466px;
+   height: 400px;
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+.shoping {
+   height: 550px;
+   overflow:scroll;
+}
+.shoping::-webkit-scrollbar {
+   display: none;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/components/CartItem.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/components/CartItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6407152dc883992a2a77cafae0339a1eb9413f3a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/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/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/components/HeaderBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/components/HeaderBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..56b1927836121838ac601f9fc7e60810b999a687
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/components/HeaderBase.vue"
@@ -0,0 +1,109 @@
+<template>
+  <div>
+  <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>
+    <div id="body">
+       <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>
+   </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>
+
+#body{
+  position: relative;
+  text-align: center;
+}
+ .ly{
+   background-color: #F1F3F4;
+   width: 466px;
+   /* height: 808px; */
+   margin: 0 auto;
+   border: 1px solid #ddd;
+}
+
+ .daohang {
+     background-color: #fff;
+     margin-bottom: 13px;
+}
+ .color{
+     color: #E04F9F;
+     border-bottom: 3px solid #E04F9F;
+     padding-bottom: 5px;
+ }
+  .header {
+    background-color: #fff;
+  }
+  #zp {
+    border-left: 1px solid #ddd;
+    color: #C5CACC;
+    padding-left: 8px;
+    height: 23px;
+    margin-top: 10px;
+  }
+  .dl {
+    color: #7C7F85;
+    margin-left: 59px;
+    padding-right: 15px;
+  }
+  #box2>input {
+      width: 420px;
+      height: 30px;
+      border-radius: 30px;
+      border: 2px solid #ddd;
+      background-color: #F1F1F0; 
+      padding-left: 10px;
+      margin-bottom: 15px;
+      color: #AAAAB0;
+      outline: none;
+    }
+  #box1,#box2 {
+    display: flex;
+    justify-content: center;
+  }
+  #box1>img {
+    margin-right: 5px;
+    margin-bottom: 6px;
+  }
+
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/data/product.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/data/product.js"
new file mode 100644
index 0000000000000000000000000000000000000000..33bcfc92bb743fd6b93c7f1bb6ed4d832094ad14
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/data/product.js"
@@ -0,0 +1,47 @@
+
+// export  let products=[
+//     {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+//     {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+//     {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+//     {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+// ];
+
+// export let cart=[];
+
+export default {
+    name:'product',
+    products:[
+            {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+        ],
+    cart:[],
+
+    addToCart:function(id){
+        
+        let inCart = false;
+        this.cart.forEach(el=>{
+            if(id==el.id){
+                inCart=true;
+                el.num++;
+            }
+        })
+        if(inCart==false){
+            this.products.forEach(el=>{
+              if(el.id==id){
+                  let product =el;
+                  product.num=1;
+                  this.cart.push(product);
+              }
+            })          
+        }
+        console.log(this.cart)
+    },
+    getCart(){
+        return this.cart;
+    },   
+}
+
+
+
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/adidas.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/adidas.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/adidas.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/adidas.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/akf.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/akf.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/akf.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/akf.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/lining.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/lining.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/lining.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/lining.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/threece.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/threece.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/threece.vue"
@@ -0,0 +1,239 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/3ce.webp">
+            </div>
+        <div class="sehao">
+             <div class="text">
+                 <span>7色可选</span>
+             </div>
+             <div class="tp">
+             <ul>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+                 <li><img src="../../public/assets/kouhong.webp"></li>
+             </ul>
+             </div>
+        </div>
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥79</span><br>
+                <span class="yuanjia">￥110</span><span>7.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">3CE |【柔焦唇妆】水唇釉雾面慕斯唇釉唇泥哑光<br>显白烂番茄色南瓜色</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥110</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥79 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.sehao {
+    display: flex;
+    justify-content:space-around;
+    background-color: #fff;
+}
+.text {
+    width: 50px;
+    height: 74px;
+    text-align: center;
+    line-height: 74px;
+}
+.text span {
+    font-size: 12px;
+    color: #000;
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.tp {
+    width: 330px;
+    height: 74px;
+}
+.tp img {
+    width: 40px;
+    height: 40px;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/ugg.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/ugg.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/detail/ugg.vue"
@@ -0,0 +1,202 @@
+<template>
+     <div class="ce">
+        <div class="shoping">
+            <div class="xq">
+            <img src="../../public/assets/ugg.webp">
+            </div>
+        
+        <div class="discount">
+            <div class="price">
+                <span class="zhehoujia">￥259</span><br>
+                <span class="yuanjia">￥499</span><span>5.2折</span>
+            </div>
+            <div class="shenghuoguan">
+                <img src="../../public/assets/shenghuoguan.webp" alt="">
+            </div>
+        </div>
+        <div class="mingchen">
+            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
+            <div class="green">
+                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
+            </div>
+        </div>
+        <div class="zhengpin">
+            <img src="../../public/assets/zhengpin.webp" alt="">
+            <span>100%正品·专业鉴定·正品险</span>
+            <span class="jiantou">></span>
+        </div>
+        </div>
+        <div class="bottom">
+            <div class="tubiao">
+                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
+            </div>
+            <div class="tubiao">
+                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
+            </div>
+            <div class="count">
+                <div class="jiage1">
+                    <span>￥499</span>
+                </div>
+                <div class="jiage2">
+                    <div class="pri">
+                    <span>￥259 </span>
+                    </div>
+                    <div class="pri2">
+                    <span>特卖价 抢</span>
+                    <img src="../../public/assets/jiantou.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+     </div>
+ 
+</template>
+
+<script>
+export default {
+  name: 'BodyBase',
+  props: {
+  }
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/main.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..4753647c6caa881dafab5f28ccfc9a0d6b0404c2
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/main.js"
@@ -0,0 +1,61 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+//全局引入
+// import ElementUI from 'element-ui';
+// import 'element-ui/lib/theme-chalk/index.css';
+// Vue.use(ElementUI);
+
+//按需引入
+import {Button,Row,Input,Carousel,CarouselItem} from 'element-ui';
+
+//全局注册
+Vue.component(Button.name,Button);
+Vue.component(Input.name,Input);
+Vue.component(Carousel.name,Carousel);
+Vue.component(CarouselItem.name,CarouselItem);
+Vue.component(Row.name,Row);
+
+Vue.component('class7-button',Button);
+
+import VueScroller from 'vue-scroller'
+Vue.use(VueScroller)
+// 在js es2015，有优先级别，优先级别比较好的是 import
+//引入VueRouter
+import VueRouter from 'vue-router'
+//应用插件
+Vue.use(VueRouter)
+
+import store from './store';
+//引入路由器
+import router from './router/index';
+
+
+
+// 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/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/AdvList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/AdvList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..bb5ef312701a881754ba1be890f5c7be152ad8f8
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/AdvList.vue"
@@ -0,0 +1,120 @@
+<template>
+
+  <div class="shoping" >
+      <scroller 
+  :on-refresh="refresh"
+  :on-infinite="infinite" ref="myscroller">
+         <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 product from '../data/product';
+import axios from 'axios';
+import {mapState} from 'vuex';
+
+export default {
+  name: 'AdvList',
+  data(){
+      return {
+          products:[],
+          num:1
+      }
+  },
+  mounted:function(){
+      console.log(this.$store)
+      this.products=product.products;
+      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;
+             }
+         })
+      })
+  },
+  computed:{
+      ...mapState(['name'])
+  },
+  created:function(){
+      //let url ='https://question.llblog.cc/';
+      let url ='https://question.llblog.cc/api.php';//做了跨域处理的
+      //methos get post delete patch
+      axios.get(url).then(res=>{
+          console.log(res.data);
+      });
+  },
+  beforeDestroy:function(){
+      console.log('advlist销毁了');
+  },
+  methods:{
+      refresh:function(done){
+          console.log('refresh')
+          done()
+      },
+      infinite:function(done){
+          console.log('infinite');
+         setTimeout(()=>{
+						//this.$refs.myscroller.finishInfinite(true);
+                        done();
+					},1500)
+      }
+  }
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+     margin:0 auto;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/BodyBase.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/BodyBase.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/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/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/CartList.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/CartList.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..dc56a809c8e25c2524a27b252e85f806b27193d4
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/CartList.vue"
@@ -0,0 +1,67 @@
+<template>
+     <div  class="shoping">
+        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
+     </div>
+ 
+</template>
+
+<script>
+import product from '../data/product'
+import CartItem from '../components/CartItem.vue';
+export default {
+  name: 'CartList',
+  data(){
+      return {
+          products:[
+            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
+            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
+            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
+            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
+          ]
+      }
+  },
+  mounted:function(){
+     console.log(product.getCart())
+     this.products=product.getCart();
+  },
+  methods:{
+      changeCartNum:function(num){
+          console.log('父类接受到了数据',num);
+      }
+  },
+  components:{
+      CartItem
+  }
+
+  
+}
+</script>
+<style scoped>
+ .shoping {
+     margin:0 5%;
+ }
+ .ym {
+     width: 420px;
+     height: 285px;
+     background-color: #fff;
+     margin-bottom: 20px;
+     border-radius: 6px;
+ }
+ img {
+     border-radius: 6px 6px 0px 0px;
+     width: 420px;
+ }
+ .count {
+     color: #E04F9F;
+ }
+ h4 {
+     margin: 12px 40px -8px 20px;
+ }
+.a {
+    margin-left: 20px;
+    color: #7C7F92;
+    font-size: 15px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+ }
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/Detail.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/Detail.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..162b9e0199820068748f0aca273961d03a79951a
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/Detail.vue"
@@ -0,0 +1,263 @@
+<template>
+  <div >
+
+        {{this.$store.getters.getName}}
+        {{this.$store.state.user.userInfo.name}}
+        {{this.$store.state.money}}
+        <h3 @click='change'>{{userInfo}}</h3>
+        <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 {mapGetters,mapMutations,mapState} from 'vuex';
+
+export default {
+  name: 'Detail',
+  props:['name','id','price','img','num'],
+  data(){
+    return{
+      title:'',
+      //allProducts:[],
+    }
+  },
+  methods:{
+    ...mapMutations(['addToCart']),   //将 `this.addToCart()` 映射为 `this.$store.commit('addToCart')`
+    ...mapMutations('user',['changeUser']),
+
+    add2Card:function(){
+        //product.addToCart(id);
+        //this.$bus.$emit('change');
+        // 调用 vuex中的 mutation的方法
+
+        //this.$router.push({path:'/cartList'});
+        let product ={
+            id:this.id,
+            name:this.name,
+            num:1,
+            price:this.price,
+            img:this.img
+        }
+        //怎么去调用mutation 的方法？
+        //this.$store.commit('addToCart',product);
+        //this.addToCart(product)
+        //console.log(this);
+        this.$store.dispatch('add2Cart',product);
+    },
+    change(){
+        //this.$store.commit('user/changeUser',{name:'张亦希',age:18});
+        //this.changeUser({name:'未知',age:99});
+        this.$store.dispatch('user/changeUserByAction',1000);
+    }
+  },
+  mounted(){
+      console.log(this);
+  },
+  created:function(){
+      console.log('detail 被创建了');
+  },
+  beforeDestroy:function(){
+      console.log('detail 被销毁');
+  },
+  computed:{
+      ...mapState('user',['userInfo']),
+      ...mapGetters(['getName']),
+      getNames:function(){
+          return 'hello vuex';
+      }
+  }
+
+}
+</script>
+<style scoped>
+ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    border-left: 2px solid #ddd;
+}
+.xq img {
+    width: 100%;
+
+}
+.ce {
+    width: 100%;
+    background-color: #F3F4F5;
+}
+.discount {
+    width: 100%;
+    height: 90px;
+    background-color: antiquewhite;
+    background-image: url(../../public/assets/beijing.webp);
+    background-size: 460px 90px;
+    display: flex;
+    justify-content:space-between;
+}
+.price {
+    color: #fff;
+    margin: 13px 20px;
+}
+.price .zhehoujia {
+    font-size: 30px;
+}
+.price .yuanjia {
+    text-decoration:line-through;
+    margin-right: 10px;
+}
+.shenghuoguan img {
+    width: 85px;
+    margin: 30px 15px;
+}
+
+.mingchen {
+    width: 426px;
+    height: 102px;
+    padding: 10px 20px;
+    background-color: #fff;
+}
+.mingchen .biaoti {
+    color: #222;
+    font-size: 19.5px;
+}   
+.green {
+    margin-top: 8px;
+}
+.green span {
+    width: 63px;
+    height: 19px;
+    background-color: #36C88E;
+    color: #fff;
+    font-size: 12px;
+    margin-right: 10px;
+    padding: 5px 8px;
+    border-radius: 10%;
+}
+
+.zhengpin {
+    width: 422px;
+    height: 25px;
+    background-color: #fff;
+    margin: 15px 0;
+    padding: 22px;
+}
+.zhengpin img {
+    width: 90px;
+    height: 17px;
+    margin-right: 20px;
+}
+.zhengpin span {
+    color: #585c64;
+    font-size: 15px;
+}
+.jiantou {
+    margin-left: 115px;
+}
+
+.bottom {
+    width: 100%;
+    height: 79px;
+    background-color: #fff;
+    display: flex;
+    padding-top: 8px;
+    /* justify-content: space-between; */
+}
+.count {
+    display: flex;
+}
+.tubiao {
+    margin-left: 20px;
+    margin-top: 8px;
+}
+.tubiao img {
+    width: 27px;
+    height: 27px;
+}
+.jiage1 {
+    width: 145px;
+    height: 72px;
+    background-color: #F688A4;
+    border-radius: 10px 0 0 10px;
+    margin-left: 55px;
+    font-size: 24.5px;
+    color: #fff;
+    text-decoration: line-through;
+    
+}
+.jiage1 span {
+    margin-left: 30px;
+    line-height: 70px;
+}
+.jiage2 {
+    width: 145px;
+    height: 72px;
+    background-color: #F03867;
+    border-radius: 0 10px 10px 0;
+}
+.jiage2 .pri {
+    font-size: 24.5px;
+    color: #fff;
+    /* text-align: center; */
+    /* vertical-align: middle; */
+    margin: 10px 37px;
+}
+.jiage2 .pri2 {
+    font-size: 17px;
+    color: #fff;
+    margin-left: 30px;
+    margin-top: -15px;
+}
+.jiage2 .pri2 img {
+    width: 15px;
+}
+</style>
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/Ele.vue" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/Ele.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7b291ae8b807809511b308092576672492c8f16f
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/pages/Ele.vue"
@@ -0,0 +1,114 @@
+<template>
+  <div>
+           <el-row>
+  <el-button>默认按钮</el-button>
+  <el-button type="primary">主要按钮</el-button>
+  <el-button type="success" color-primary: red>成功按钮</el-button>
+  <el-button type="info">信息按钮</el-button>
+  <el-button type="warning">警告按钮</el-button>
+  <el-button type="danger">危险按钮</el-button>
+  <class7-button type='primary'>自定义标签</class7-button>
+  <el-row>
+  <el-button icon="el-icon-money" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
+    </el-row>
+     <el-input  placeholder="请输入内容"></el-input>
+     <div class="block">
+    <span class="demonstration">默认 Hover 指示器触发</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Click 指示器触发</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  </div>
+
+
+  
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+      };
+    }
+  };
+</script>
+
+<style>
+.el-button--primary{
+  color:red;
+  background-color:azure
+ }
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+</style>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/router/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..7d33edbc86271d7f5f6792839098e943ea819422
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/router/index.js"
@@ -0,0 +1,54 @@
+// 配置路由规则
+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 Ele from '../pages/Ele'
+
+//创建并暴露一个路由器
+export default new VueRouter({
+    routes: [
+        {
+            path: '/',
+            component: BodyBase,
+        },
+        {
+            path: '/ele',
+            component: Ele,
+        },
+        {
+            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/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/actions.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/actions.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fb14e72b726522cf3e294f62a89fda109fcf2e4b
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/actions.js"
@@ -0,0 +1,7 @@
+const actions={
+    add2Cart(context,product) {
+      console.log(product);
+      context.commit('addToCart',product);
+   }
+ };
+ export default actions;
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/index.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fe67add79b72b94016134af2805b8540c641bcd7
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/index.js"
@@ -0,0 +1,29 @@
+import Vuex from 'vuex';
+import Vue from 'vue';
+import mutations from './mutations'
+import actions from './actions'
+import user from './modules/user'
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state: {  
+         name:'外卖系统',
+         cart:[],
+         buyNums:0,
+         money:0
+     },    
+ 
+     mutations,
+     actions,
+     
+     getters:{
+        getName:(state)=>{
+          return state.name+'----我们的项目';
+        }
+     },
+     modules:{
+          user
+     }
+ 
+  })
+  export default store;
+ 
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/modules/user.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/modules/user.js"
new file mode 100644
index 0000000000000000000000000000000000000000..68d1b2507c029352b964ad8016d034ad9d1b0f34
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/modules/user.js"
@@ -0,0 +1,22 @@
+const user={
+    namespaced: true,
+    //每个模块都有自己的 state mutation ....
+    state:{
+      userInfo:{name:'刘斌明天要准备',age:29}
+    },
+    mutations:{
+      changeUser(state,payload){
+        state.userInfo=payload;
+        
+      }
+    },
+    actions:{
+      changeUserByAction({commit},payload){
+           commit('changeUser',payload)
+           //触发全局的mutation的修改
+           commit('makeMoney',1000,{ root: true })
+      }
+    }
+    
+  }
+  export default user;
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/mutations.js" "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/mutations.js"
new file mode 100644
index 0000000000000000000000000000000000000000..eee0d474fb15c7e64f26d898d8c1175d6b0c7829
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-5-12vue/src/store/mutations.js"
@@ -0,0 +1,26 @@
+const mutations={
+    changeName(state,name){
+        state.name=name
+    },
+    //加入到购物车
+    addToCart(state,product){
+      console.log('购物商品修改');
+      console.log(state.buyNums)
+        let inCart = false;
+        state.cart.forEach(el=>{
+           if(el.id==product.id){
+              el.num++
+              inCart=true;
+           }
+        })
+        if(!inCart){
+          state.cart.push(product);
+        }
+        state.buyNums++;      
+        console.log(state.buyNums,111);
+    },
+    makeMoney(state,payload){
+        state.money = state.money+payload
+    }
+  };
+  export default mutations;
\ No newline at end of file

用户名:	+ +
密码:
确认密码:
性别:	+ 男 + 女 +
所在省份:	+ +
你当前所在省份:	{{selected}}
	+ +