diff --git "a/\344\277\256\344\273\260\345\235\244/3.28vue\347\254\254\344\270\200\350\257\276/demo.html" "b/\344\277\256\344\273\260\345\235\244/3.28vue\347\254\254\344\270\200\350\257\276/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..353bc5a6d07d2f77832acae0f66b961f1786b147
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/3.28vue\347\254\254\344\270\200\350\257\276/demo.html"
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<body>
+
+    <div id="app-1">
+            <div v-bind:title="message">
+                鼠标悬停查看动态绑定的信息
+            </div>
+        <button v-on:click="switch1">点一下我</button>
+        <div v-if="seen">
+            显示出来啦
+        </div>
+
+    </div>
+    
+    <div id="app-2">
+        
+          <li v-for="todo in todos">
+            {{ todo.text }}
+          </li>
+        
+    </div>
+
+    <div id="app-3">
+        <p>{{message}}</p>
+        <button v-on:click="sup">快点我</button>
+    </div>
+
+    <div id="app-4">
+        <p>{{message}}</p>
+        <input v-model="message">
+    </div>
+</body>
+<script>
+    let arr =[
+        {text:"哈"},
+        {text:"哈"},
+        {text:"嗨"}
+    ]
+    let app1 = new Vue({
+        el:'#app-1',
+        data:{
+            message:`页面加载于${new Date().toLocaleString()}`,
+            seen:true
+        }
+        ,
+        methods:{
+            switch1:function(){
+                if(this.seen){
+                    this.seen = false
+                }else{
+                    this.seen = true
+                }
+            }
+        }
+    })
+    let app2 = new Vue({
+        el: '#app-2',
+        data: {
+            todos: arr
+            
+        }
+    })
+
+    let app3 = new Vue({
+        el:'#app-3',
+        data:{
+            message:"点击下方按钮有惊喜",
+        },
+        methods:{
+           sup:function(){
+            this.message = "哈哈你是大聪明"
+            }
+        }
+    })
+
+    let app4= new Vue({
+        el:'#app-4',
+        data:{
+            message:"嘿嘿嘿嘿嘿"
+        }
+    })
+
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/3.30vue\346\250\241\346\235\277\350\257\255\346\263\225/demo.html" "b/\344\277\256\344\273\260\345\235\244/3.30vue\346\250\241\346\235\277\350\257\255\346\263\225/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f090ae304070ffb1049544e649cad103a3cee54b
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/3.30vue\346\250\241\346\235\277\350\257\255\346\263\225/demo.html"
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模板语法</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+</head>
+<body>
+    <!-- 文本 原始html-->
+    <div id="app-1">
+        <span>{{message1}}</span>
+        <span v-text="message2"></span>
+        <span v-html="message3"></span>
+    </div>
+
+    <!-- Attribute -->
+    <div id="app-2">
+        <span v-bind:id="id"></span>
+        <button v-bind:disabled="disa">哈哈哈</button>
+    </div>
+
+    <!-- 使用 JavaScript 表达式 -->
+    <div id="app-3">
+        <span>{{message + "=3"}}</span>
+        <span v-bind:id="message+'=3'"></span>  
+    </div>
+    <!-- 指令 事件绑定 -->
+    <div id="app-4">
+        <button v-on:click="tran()">点点</button>
+        <span v-if="message">真的</span>
+        <span v-else="message">假的</span>
+        <span v-for="todo in todos">{{todo.text}}</span>
+    </div>
+
+    <!-- 修饰符 -->
+    <div id="app-5">
+        <span :id="idd"></span>
+    </div>
+</body>
+<script>
+    let app1 = new Vue({
+        el:'#app-1',    
+        data:{
+            message1:"哈哈哈",
+            message2:"嘿嘿嘿",
+            message3:`<span style="color: brown;">棕色的哈哈</span>`
+        }
+    })
+
+    let app2 = new Vue({
+        el:"#app-2",
+        data:{
+            id:"id11",
+            disa:true
+        }
+    })
+
+    let app3 = new Vue({
+        el:'#app-3',
+        data:{
+            message:"1+2"
+        }
+    })
+
+    let app4 = new Vue({
+        el:"#app-4",
+        data:{
+            message:false,
+            todos:[{text:'哈'},{text:'哈'},{text:'嗨'}]
+        },
+        methods:{
+            tran:function(){
+                if(this.message){
+                    this.message = false
+                }else{
+                    this.message = true
+                }
+            }
+        }  
+    })
+
+    let app5 = new Vue({
+        el:"#app-5",
+        data:{
+            idd:"iddd"
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/demo.html" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..532e7cc3d17357ed4d09ebc1c846d41e17d6629c
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/demo.html"
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录注册</title>
+</head>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    div{
+        background-image: url("img/bg.png");
+        background-size: 100% 100%;
+        width: 100vw;
+        height: 100vh;
+    }
+    form{
+        position: absolute;
+        top:calc( 50% - 25vh );
+        left: calc( 50% - 20vw );
+        width: 40vw;
+        height: 50vh;
+        background: rgba(255,255,255,.4);
+        box-shadow: 5px 5px 20px 5px rgba(0,0,0,.3);
+        border-radius: 10px;
+    }
+    label{
+        width: 40vw;
+        height: 5vh;
+        margin-left: calc( 20vw - 15vw );
+    }
+
+    input{
+        margin-top: 5vh;
+        font-size: 14px;    
+        margin-bottom: 20px;
+        width: 20vw;
+        height: 5vh;
+        padding-left: 10px;
+    }
+    #sub{
+        font-size: 20px;
+        background: rgba(255,255,255,.4);
+        box-shadow: 5px 5px 20px 5px rgba(0,0,0,.3);
+        border-radius: 5px;
+    }
+    label:nth-child(1)::before{
+        content: "";
+        width: 5vw;
+        height: 5vh;
+        background-image: url("img/001.png");
+        background-size: 100% 100%;
+    }
+</style>
+<body>
+    <div>
+        <form :action="action" id="myform" v-on:submit.prevent="toLogin">
+            <label for="">手机号：<input type="text"  placeholder="请输入十一位的手机号" v-model="number" @change="validateTel"></label> 
+            <span style="color:red;" v-if="telError">请正确输入手机号</span><br>
+            <label for=""> 密码：<input type="password" placeholder="请输入6位数的密码" v-model="password" @change="validatePassword"></label>
+            <span style="color: red;" v-if="passwordError">请正确输入密码</span> <br>
+            <label for=""> 验证密码：<input type="password" placeholder="确认密码" v-model="verify" ></label>
+            <label for="" style="margin-left: 10vw;"> <input id="sub" type="submit"></label>
+        </form>
+    </div>
+    
+</body>
+<script>
+    let myform = new Vue({
+        el:"#myform",
+        data:{
+            action:'',
+            number:'',
+            password:'',
+            verify:'',
+            telError:false,
+            passwordError:false
+        },
+        methods:{
+            //验证手机号
+            validateTel:function(){
+                let numTest =/^1[0-9]{10}$/;
+                if(!numTest.test(this.number)){
+                    this.telError = true;
+                }else{
+                    this.telError = false;
+                }
+            },
+            //验证密码
+            validatePassword:function(){
+                let passwordTest =/^[0-9]{6}$/;
+                if(!passwordTest.test(this.password)){
+                    this.passwordError = true;
+                }else{
+                    this.passwordError = false;
+                }
+            },
+            toLogin:function(){
+                if(this.number!=''&&this.password!=''){
+                    if(this.telError==true||this.passwordError==true){
+                        alert("请正确输入电话号码和密码");
+                    }else if(this.password!=this.verify){
+                        alert("两次输入的密码不一致");
+                    }else{
+                        window.location.href='./info.html'
+                    }
+                }else{
+                    alert("请先输入收手机号和密码");
+                }
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/001.png" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/001.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07ceaa91f2782d2f61d0adcafe8124ba4c54ceec
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/001.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/002.png" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/002.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c4d6d52f39ecf47cf1d0af0dc97a44bc98ad5d28
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/002.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/003.png" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/003.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5b39a7289a837f2e6cc71470c2afe9fc4b2b5734
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/003.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/004.png" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/004.png"
new file mode 100644
index 0000000000000000000000000000000000000000..50d4720f14f7a2f88caced1a2102740a0bd7011a
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/004.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/bg.png" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fb25e4572a2cbba370ede3d72abde5a37e7226a4
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/bg.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/boji.png" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/boji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c316ab7a3ef92daae922d8c0f3e9299d4d9a6e0c
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/img/boji.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/info.html" "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/info.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8de5ac6b86d297ad7dbd9dd98f286a7403d35e1a
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/3.31\347\231\273\345\275\225\346\263\250\345\206\214\351\241\265\351\235\242/info.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    body{
+        background-image: url("./img/boji.png");
+        background-repeat: no-repeat;
+        background-size: 100%;
+    }
+    div{
+        position: absolute;
+        top: 30%;
+        left: 20%;
+        width: 60%;
+        height: 30%;
+        font-size: 10vw;
+        font-family:fantasy;
+        line-height: 100%;
+        text-align: center;
+        background: rgba(255,255,255,.3);
+		border-radius: 10px;
+
+    }
+</style>
+<body>
+    <div>
+        登录成功
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\345\245\245\345\210\251\345\245\245.png" "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\345\245\245\345\210\251\345\245\245.png"
new file mode 100644
index 0000000000000000000000000000000000000000..565670f037a93148de86a7f0254e8d433c3cd148
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\345\245\245\345\210\251\345\245\245.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\345\245\275\344\270\275\345\217\213.png" "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\345\245\275\344\270\275\345\217\213.png"
new file mode 100644
index 0000000000000000000000000000000000000000..adf3f081f4a926ea4844a77d8ddc8af9d1168493
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\345\245\275\344\270\275\345\217\213.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\350\202\211\346\235\276.png" "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\350\202\211\346\235\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..29a38f7da30f1ce3f7ba9444f6339504ff3cc519
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\350\202\211\346\235\276.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\351\245\274\345\271\262.png" "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\351\245\274\345\271\262.png"
new file mode 100644
index 0000000000000000000000000000000000000000..70777917e99d4b6ba5ffea6da562a6dfeafb78ff
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/imgs/\351\245\274\345\271\262.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/index.html" "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f25bebe71baa8ff8fae73ef342fc1a1df82b986e
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/4.13\347\273\204\344\273\266\345\225\206\345\223\201\345\210\227\350\241\250/index.html"
@@ -0,0 +1,128 @@
+<!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"></script>
+    <title>商品列表页</title>
+</head>
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    #main{
+        width: 100vw;
+        height: 100vh;
+    }
+    img{
+        width: 200px;
+        height: 200px;
+    }
+    .imgs{
+        float: left;
+        width: 300px;
+    }
+    .lis{
+        position: absolute;
+        top:calc( 50% - 40vh );
+        left: calc( 50% - 25vw );
+        box-shadow: 5px 5px 20px 5px rgba(0,0,0,.3);
+        border-radius: 10px;
+        width: 50vw;
+        height: 70vh;
+    }
+    .liss > img{
+        width: 34vw;
+        height: 27vw;
+        margin-left: 20%;
+    }
+    .name{
+        font-size: larger;
+    }
+    .price{
+        color: red;
+        font-size: xx-large;
+        font-weight: 600;
+    }
+    #x{
+        position: absolute;
+        line-height: 20px;
+        text-align: center;
+        border-radius: 10px;
+        box-shadow:2px 2px 2px 1px rgb(0 0 0 / 30%);
+        top: 3%;
+        left: 94%;
+        width: 20px;
+        height: 20px;
+        background-color: red;
+        color: black;
+    }
+    .mainSty{
+        visibility: hidden;
+    }
+</style>
+<body>
+    <div id="main">
+        <div class="big" :class="mainSty">
+            <!-- <div class="imgs" v-for="(list,index) in lists">
+                <div v-for="(str,index1) in list">
+                    <div v-if="index1=='img'"><img :src="str"></div>
+                </div>
+                 <u @click="click(index)">{{index}}</u>
+            </div> -->
+            <demo v-for="(list,index) in lists" :list='list' :index="index" :key="key" :lists="lists" ></demo>
+            <!-- <demo :list='list' :index="index" :key="key" :lists="lists"></demo> -->
+        </div>
+        
+        <!-- <div class="lis" v-for="(list,index) in lists" :style="show">
+            <button @click="xx" id="x">x</button>
+            <div class="liss" v-if="index==key" v-for="(info,name) in list">
+                    <span class="name" v-if="name=='name'">{{info}}</span>
+                    <img v-if="name=='img'" :src='info'>
+                    <span class="price" v-if="name=='price'">{{'￥'+info}}</span>
+            </div>
+        </div> -->
+        <!-- <list v-for="(list,index) in lists" :list='list' :index="index" :key="key" :style="show"></list> -->
+    </div>
+
+</body>
+<script>
+    let demo ={
+        props:['list','index','key','mainSty',"lists"],
+        
+        template:'<div><img :src="list.img"><u @click="click(index)">{{index}}</u></div>'
+    }
+
+
+    let lists ={
+        '奥利奥':{ img: './imgs/奥利奥.png' , name :'奥利奥（Oreo）夹心饼干休闲零食 早餐饼干办公室下午茶网红小吃 巧克力味349g独立小包装（新老包装随机）', price:'12.90' },
+        '饼干':{img:'./imgs/饼干.png',name:'三只松鼠薄脆饼干小方块308g/盒 酥脆原味薄饼早餐代餐膨化食品休闲零食小吃儿童原味糕点',price:'16.90'},
+        '好丽友':{img:'./imgs/好丽友.png',name:'Orion 好丽友 营养早餐点心零食 礼盒 送礼礼盒 巧克力味派 30枚 1020g/盒 （新老包装随机发货）',price:'33.90'},
+        '肉松':{img:'./imgs/肉松.png',name:'三只松鼠黄金肉松饼 早餐办公室特色小吃休闲零食网红点心456g/袋',price:'44.90'}
+    }
+    let mian = new Vue({
+        el:'#main',
+        data:{
+            'lists':lists,
+            'key':'',
+            show:"visibility: visible",
+            mainSty:''
+        },
+        methods:{
+            click:function(index){
+                this.mainSty='mainSty';
+                this.show = "visibility: visible";
+                this.key = index;
+            },
+            xx:function(){
+                this.mainSty='';
+                this.show = "visibility: hidden";
+            }
+        },
+        components:{
+            demo
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/001.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/001.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07ceaa91f2782d2f61d0adcafe8124ba4c54ceec
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/001.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/002.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/002.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c4d6d52f39ecf47cf1d0af0dc97a44bc98ad5d28
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/002.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/003.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/003.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5b39a7289a837f2e6cc71470c2afe9fc4b2b5734
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/003.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/004.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/004.png"
new file mode 100644
index 0000000000000000000000000000000000000000..50d4720f14f7a2f88caced1a2102740a0bd7011a
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/004.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/005.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/005.png"
new file mode 100644
index 0000000000000000000000000000000000000000..488cb0800c98c312eade3088fbbc632f8babac8f
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/005.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/006.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/006.png"
new file mode 100644
index 0000000000000000000000000000000000000000..25876452ff2b8d0cf9bdc1ebe3f1a9c3561c9cfa
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/006.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/007.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/007.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c912d870dc64cfdee00a2c76cb8eebad988214cc
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/007.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/008.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/008.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a10e51c8d15f675d3ee7d0ae2d463df5644a9c93
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/008.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/bg.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fb25e4572a2cbba370ede3d72abde5a37e7226a4
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/bg.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/boji.png" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/boji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c316ab7a3ef92daae922d8c0f3e9299d4d9a6e0c
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/img/boji.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/index.html" "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6409508625a38fffb4f1335ccf703e37db9a1bd6
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/4.14\345\265\214\345\245\227\345\225\206\345\223\201\345\210\227\350\241\250/index.html"
@@ -0,0 +1,96 @@
+<!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"></script>
+    <title>羊村大卖场</title>
+</head>
+<style>
+    u{
+        cursor: pointer;
+        border: 1px pink solid;
+        width: 15vw;
+        height: 30vw;
+        line-height: 30vw;
+        text-align: center;
+        margin-bottom: 20px;
+    }
+    img{
+        width: 15vw;
+        height: 15vw;
+        margin-top: 3vw;
+        margin-left: 2.5vw;
+    }
+    .list{
+        border: 1px pink dashed;
+        width: 20vw;
+        height: 30vw;
+        margin-left: 5px;
+        background-color: beige;
+    }
+    .lists{
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 2vw;
+    }
+    .price{
+        color: red;
+        font-weight: 800;
+    }
+</style>
+<body>
+    <div id="main">
+        <productname v-for="(arr,index) in arrs" :sort="index" :arrs="arrs" ></productname>
+        
+    </div>
+</body>
+<script>
+    let arrs={
+        '懒羊羊':[
+        {name:'眯眼懒羊羊贱卖，买不了吃亏买不了上当',price:'￥100',img:'./img/001.png'},
+        {name:'会比手势的懒羊羊贱卖，买不了吃亏买不了上当',price:'￥200',img:'./img/002.png'},
+        {name:'会骂人的懒羊羊贱卖，买不了吃亏买不了上当',price:'￥500',img:'./img/003.png'},
+        {name:'偷吃吃东西的懒羊羊贱卖，买不了吃亏买不了上当',price:'￥5',img:'./img/004.png'},
+                ],
+        '美羊羊':[
+        {name:'凶狠的美羊羊贱卖，买不了吃亏买不了上当',price:'￥10',img:'./img/005.png'},
+        {name:'皱眉美羊羊贱卖，买不了吃亏买不了上当',price:'￥20',img:'./img/006.png'},
+        {name:'星星眼美羊羊贱卖，买不了吃亏买不了上当',price:'￥30',img:'./img/007.png'},
+        {name:'阴阳怪气美羊羊贱卖，买不了吃亏买不了上当',price:'￥50',img:'./img/008.png'},
+                ]
+    }
+    let productinfo={
+        props:["info"],
+        template:'<div class="list"><img :src="info.img"><p>{{info.name}}</p><p class="price">{{info.price}}</p></div>'
+    }
+    let productname={
+        props:["sort","arrs","key"],
+        methods:{
+            click:function(sort,arrs){
+                if(this.key==this.sort){
+                    this.key='';
+                }else{
+                    this.key=this.sort;
+                }
+                
+            }
+        },
+        template:`<div class="lists"><u @click="click(sort,arrs)">{{sort}}</u><productinfo v-for="info in arrs[sort]" :info="info" v-if="key==sort" ></productinfo></div>`,
+        components:{
+            productinfo
+        }
+    }
+    let main=new Vue({
+        el:'#main',
+        data:{
+            'arrs':arrs
+        },
+        
+        components:{
+            productname:productname
+        }
+    })
+    
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\345\245\245\345\210\251\345\245\245.png" "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\345\245\245\345\210\251\345\245\245.png"
new file mode 100644
index 0000000000000000000000000000000000000000..565670f037a93148de86a7f0254e8d433c3cd148
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\345\245\245\345\210\251\345\245\245.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\345\245\275\344\270\275\345\217\213.png" "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\345\245\275\344\270\275\345\217\213.png"
new file mode 100644
index 0000000000000000000000000000000000000000..adf3f081f4a926ea4844a77d8ddc8af9d1168493
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\345\245\275\344\270\275\345\217\213.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\350\202\211\346\235\276.png" "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\350\202\211\346\235\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..29a38f7da30f1ce3f7ba9444f6339504ff3cc519
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\350\202\211\346\235\276.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\351\245\274\345\271\262.png" "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\351\245\274\345\271\262.png"
new file mode 100644
index 0000000000000000000000000000000000000000..70777917e99d4b6ba5ffea6da562a6dfeafb78ff
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/imgs/\351\245\274\345\271\262.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/index.html" "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..24ef99532f1c50e63774af05de5a7a55b5d57bb2
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/4.1\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265/index.html"
@@ -0,0 +1,116 @@
+<!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"></script>
+    <title>商品列表页</title>
+</head>
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    #main{
+        width: 100vw;
+        height: 100vh;
+    }
+    img{
+        width: 200px;
+        height: 200px;
+    }
+    .imgs{
+        float: left;
+        width: 300px;
+    }
+    .lis{
+        position: absolute;
+        top:calc( 50% - 40vh );
+        left: calc( 50% - 25vw );
+        box-shadow: 5px 5px 20px 5px rgba(0,0,0,.3);
+        border-radius: 10px;
+        width: 50vw;
+        height: 70vh;
+    }
+    .liss > img{
+        width: 34vw;
+        height: 27vw;
+        margin-left: 20%;
+    }
+    .name{
+        font-size: larger;
+    }
+    .price{
+        color: red;
+        font-size: xx-large;
+        font-weight: 600;
+    }
+    #x{
+        position: absolute;
+        line-height: 20px;
+        text-align: center;
+        border-radius: 10px;
+        box-shadow:2px 2px 2px 1px rgb(0 0 0 / 30%);
+        top: 3%;
+        left: 94%;
+        width: 20px;
+        height: 20px;
+        background-color: red;
+        color: black;
+    }
+    .mainSty{
+        visibility: hidden;
+    }
+</style>
+<body>
+    <div id="main">
+        <div class="big" :class="mainSty">
+            <div class="imgs" v-for="(list,index) in lists">
+                <div v-for="(str,index1) in list">
+                    <div v-if="index1=='img'"><img :src="str"></div>
+                </div>
+                 <u @click="click(index)">{{index}}</u>
+            </div>
+        </div>
+        
+        <div class="lis" v-for="(list,index) in lists" :style="show">
+            <button @click="xx" id="x">x</button>
+            <div class="liss" v-if="index==key" v-for="(info,name) in list">
+                    <span class="name" v-if="name=='name'">{{info}}</span>
+                    <img v-if="name=='img'" :src='info'>
+                    <span class="price" v-if="name=='price'">{{'￥'+info}}</span>
+            </div>
+        </div>
+    </div>
+
+</body>
+<script>
+
+    let lists ={
+        '奥利奥':{ img: './imgs/奥利奥.png' , name :'奥利奥（Oreo）夹心饼干休闲零食 早餐饼干办公室下午茶网红小吃 巧克力味349g独立小包装（新老包装随机）', price:'12.90' },
+        '饼干':{img:'./imgs/饼干.png',name:'三只松鼠薄脆饼干小方块308g/盒 酥脆原味薄饼早餐代餐膨化食品休闲零食小吃儿童原味糕点',price:'16.90'},
+        '好丽友':{img:'./imgs/好丽友.png',name:'Orion 好丽友 营养早餐点心零食 礼盒 送礼礼盒 巧克力味派 30枚 1020g/盒 （新老包装随机发货）',price:'33.90'},
+        '肉松':{img:'./imgs/肉松.png',name:'三只松鼠黄金肉松饼 早餐办公室特色小吃休闲零食网红点心456g/袋',price:'44.90'}
+    }
+    let mian = new Vue({
+        el:'#main',
+        data:{
+            'lists':lists,
+            'key':'',
+            show:"visibility: hidden",
+            mainSty:''
+        },
+        methods:{
+            click:function(index){
+                this.mainSty='mainSty';
+                this.show = "visibility: visible";
+                this.key = index;
+            },
+            xx:function(){
+                this.mainSty='';
+                this.show = "visibility: hidden";
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/001.png" "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/001.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07ceaa91f2782d2f61d0adcafe8124ba4c54ceec
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/001.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/002.png" "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/002.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c4d6d52f39ecf47cf1d0af0dc97a44bc98ad5d28
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/002.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/003.png" "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/003.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5b39a7289a837f2e6cc71470c2afe9fc4b2b5734
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/003.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/004.png" "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/004.png"
new file mode 100644
index 0000000000000000000000000000000000000000..50d4720f14f7a2f88caced1a2102740a0bd7011a
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/004.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/bg.png" "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fb25e4572a2cbba370ede3d72abde5a37e7226a4
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/bg.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/boji.png" "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/boji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c316ab7a3ef92daae922d8c0f3e9299d4d9a6e0c
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/img/boji.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/index.html" "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cd04814eeda338c8ac7daa2ac532bb6570c8ab45
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/4.6\345\225\206\345\223\201\344\277\241\346\201\257\345\200\222\350\256\241\346\227\266/index.html"
@@ -0,0 +1,89 @@
+<!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"></script>
+    <title>商品倒计时</title>
+</head>
+<style>
+    img{
+        width: 20%;
+        height: 20%;
+        border: 2px solid pink;
+    }
+</style>
+<body>
+    <div id="main">
+        <img src="./img/002.png">
+        <div>{{nowday +'.'+ nowdate +'日'+ name}}</div>
+        <div>{{getendTime}}</div>
+        <div>{{getcountTime()}}</div>
+        <div>{{countTime}}</div>
+        <div>{{"￥"+newprice}}</div>
+    </div>
+</body>
+<script>
+let vue = new Vue({
+    el:'#main',
+    data:{
+        nowday:new Date().getDay().toString(),
+        nowdate:new Date().getDate().toString(),
+        name:'限定懒羊羊，1小时内下单有优惠哦',
+        endTime:"",
+        countTime:'',
+        oldprice:100,
+        newprice:''
+    },
+    computed:{
+       getendTime(){
+        let date = new Date().getTime();
+        this.endTime=new Date(date+3600000+36000).getTime();
+        // return this.endTime;
+       } 
+    },
+    methods:{
+         getcountTime:function(){
+                let date = new Date().getTime();
+                let countime =this.endTime-date;
+                var hours = parseInt((countime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                let minutes = parseInt((countime % (1000 * 60 * 60)) / (1000 * 60));
+                var seconds = parseInt((countime % (1000 * 60)) / 1000);
+                this.countTime =hours+'时'+ minutes+'分'+seconds+'秒';
+                if(hours>=1){
+                    this.newprice= this.oldprice*0.6;
+                    console.log(this.newprice);
+                }else{
+                    switch (parseInt(minutes/10)) {
+                        case 5:
+                        this.newprice= this.oldprice*(0.6+0.05);
+                            break;
+                        case 4:
+                        this.newprice= this.oldprice*(0.6+(0.05*2));
+                            break;
+                        case 3:
+                        this.newprice= this.oldprice*(0.6+(0.05*3));
+                            break;
+                        case 2:
+                        this.newprice= this.oldprice*(0.6+(0.05*4));
+                            break; 
+                        case 1:
+                        this.newprice= this.oldprice*(0.6+(0.05*5));
+                            break;
+                        default:
+                        this.newprice= this.oldprice*(0.6+(0.05*6));
+                            break;
+                    }
+                }
+
+
+                if(countime>0){
+                    setTimeout(this.getcountTime,1000)
+                }else{
+                    this.newprice = this.oldprice;
+                }
+            }
+    }
+})
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/demo.html" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dbca719d95849ed452cdca2855c716b88cca685d
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/demo.html"
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录注册</title>
+</head>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    div{
+        background-image: url("img/bg.png");
+        background-size: 100% 100%;
+        width: 100vw;
+        height: 100vh;
+    }
+    h1{
+        position: absolute;
+        color:black;
+        top:calc( 50% - 33vh );;
+        margin: auto;
+        text-align: center;
+        width: 100vw;
+        
+    }
+    form{
+        position: absolute;
+        top:calc( 50% - 25vh );
+        left: calc( 50% - 20vw );
+        width: 40vw;
+        height: 50vh;
+        background: rgba(255,255,255,.4);
+        box-shadow: 5px 5px 20px 5px rgba(0,0,0,.3);
+        border-radius: 10px;
+    }
+    label{
+        width: 20vw;
+        margin-left: calc( 20vw - 15vw );
+        line-height: 5vh;
+    }
+
+    input{
+        border-radius: 2vh;
+        margin-top: 3vh;
+        font-size: 14px;    
+        margin-bottom: 10px;
+        width: 20vw;
+        height: 5vh;
+        padding-left: 10px;
+    }
+    input.sex{
+        
+        width: 2.5vh;
+        height: 2.5vh;
+        margin-right: 5vw;
+    }
+    select{
+        border-radius: 2vh;
+        margin-top: 3vh;
+        font-size: 14px;    
+        margin-bottom: 10px;
+        width: 20vw;
+        height: 5vh;
+        padding-left: 10px;
+    }
+    #sub{
+        font-size: 20px;
+        background: rgba(255,255,255,.4);
+        box-shadow: 5px 5px 20px 5px rgba(0,0,0,.3);
+        border-radius: 5px;
+    }
+</style>
+<body>
+    <!-- 写一个表单,要有用户名，密码，性别，选择专业（下拉框），
+        加验证（用户名必须三个字符以上，密码必须有大小写加数字，其它选项不能为空） -->
+    <div>
+        <h1>懒羊羊系统欢迎您~~~~</h1>
+        <form :action="action" id="myform" v-on:submit.prevent="toLogin">
+            <label for="">用户名：<input class="inp" type="text"  placeholder="请输入用户名" v-model="name"></label> 
+
+            <span style="color:red;" v-if="nameError">用户名必须三个字符以上</span><br>
+
+            <label for=""> 密码：<input class="inp" type="password" placeholder="请输入密码" v-model="password" ></label>
+
+            <span style="color: red;" v-if="passwordError">密码必须是6-8位的大小写加数字</span> <br>
+            <label for="">
+                男:<input type="radio" v-model="sex" name="sex" class="sex">
+                女:<input type="radio" v-model="sex" name="sex" class="sex">
+            </label>
+            <br>
+            <label for="">
+                专业：<select v-model="major" id="">
+                    <option value="软件开发">软件开发</option>
+                    <option value="web前端">web前端</option>
+                    <option value="web前端">新媒体</option>
+                </select>
+            </label>
+            <label for="" style="margin-left: 10vw;"> <input id="sub" type="submit"></label>
+        </form>
+    </div>
+    
+</body>
+<script>
+    let myform = new Vue({
+        el:"#myform",
+        data:{
+            action:'',
+            name:'',
+            password:'',
+            sex:'',
+            major:'',
+            nameError:false,
+            passwordError:false
+        },
+        watch:{
+            name(val){
+                let numTest =/^.{3,20}$/;
+                if(!numTest.test(val)){
+                    this.nameError = true;
+                }else{
+                    this.nameError = false;
+                }
+            },
+            password(val){
+                let passwordTest =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,8}$/;
+                if(!passwordTest.test(val)){
+                    this.passwordError = true;
+                }else{
+                    this.passwordError = false;
+                }
+            }
+        },
+        methods:{
+            
+            toLogin:function(){
+                if(!this.nameError && !this.passwordError){
+                    if(this.sex!=''&&this.major!=''){
+                        window.location.href='./info.html'
+                    }else{
+                        alert('性别和专业不能为空');
+                    }
+                }else{
+                    alert('请输入正确的用户名和密码');
+                }
+                
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/001.png" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/001.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07ceaa91f2782d2f61d0adcafe8124ba4c54ceec
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/001.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/002.png" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/002.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c4d6d52f39ecf47cf1d0af0dc97a44bc98ad5d28
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/002.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/003.png" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/003.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5b39a7289a837f2e6cc71470c2afe9fc4b2b5734
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/003.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/004.png" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/004.png"
new file mode 100644
index 0000000000000000000000000000000000000000..50d4720f14f7a2f88caced1a2102740a0bd7011a
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/004.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/bg.png" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fb25e4572a2cbba370ede3d72abde5a37e7226a4
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/bg.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/boji.png" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/boji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c316ab7a3ef92daae922d8c0f3e9299d4d9a6e0c
Binary files /dev/null and "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/img/boji.png" differ
diff --git "a/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/info.html" "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/info.html"
new file mode 100644
index 0000000000000000000000000000000000000000..af5c3efc34aa58e12c2b6fc1d18eb9cde124f020
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/4.7\350\241\250\345\215\225/info.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    body{
+        background-image: url("./img/boji.png");
+        background-repeat: no-repeat;
+        background-size: 100%;
+    }
+    div{
+        position: absolute;
+        top: 30%;
+        left: 20%;
+        width: 60%;
+        height: 40%;
+        font-size: 10vw;
+        font-family:fantasy;
+        line-height: 100%;
+        text-align: center;
+        background: rgba(255,255,255,.3);
+		border-radius: 10px;
+        color: crimson;
+    }
+</style>
+<body>
+    <div>
+        恭喜你成为羊村村霸懒羊羊
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244/4.8\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/index.html" "b/\344\277\256\344\273\260\345\235\244/4.8\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0596797d130611f477e792a8565821cd77ab5297
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244/4.8\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/index.html"
@@ -0,0 +1,75 @@
+<!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"></script>
+    <title>大变懒羊羊</title>
+</head>
+<style>
+    div{
+        height:80vh;
+        width: 80vh;
+    }
+</style>
+<body>
+    <div id="main">
+        <div v-images="imgurl" @click="click"></div>
+
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el:'#main',
+        data:{
+            imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13453102950%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651997506&t=a11a7d4e584da97031ac36737abec655',
+            imgurl1:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13453102950%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651997506&t=a11a7d4e584da97031ac36737abec655',
+            imgurl2:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2345839304-05FB915BAF945B1ECEB19E0F61E93DB6%2F0%3Ffmt%3Djpg%26size%3D26%26h%3D431%26w%3D426%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651997506&t=85a53beb62545391a855caf50de03a27'
+        },  
+        methods:{
+            click:function(){
+                if(this.imgurl!=this.imgurl2){
+                    this.imgurl=this.imgurl2;
+                }else{
+                    this.imgurl=this.imgurl1;
+                }
+            }
+        },
+        directives:{
+            images:{
+                inserted:function(el,binding){
+                    console.log(el);
+                    // let imgurl=binding.value;
+                    let imgurl=binding.value;
+                    console.log(imgurl);
+                    let image = new Image();
+                    image.src = imgurl;
+                    image.onload=function(){
+                        console.log(image.width);
+                        console.log(image.height);
+                        el.style.background=`url(${imgurl})`;
+                        el.style.backgroundSize='cover';
+                    }
+                    
+                },
+                update:function(el,binding){
+                    console.log(el);
+                    // let imgurl=binding.value;
+                    let imgurl=binding.value;
+                    console.log(imgurl);
+                    let image = new Image();
+                    image.src = imgurl;
+                    image.onload=function(){
+                        console.log(image.width);
+                        console.log(image.height);
+                        // el.style.width=image.width+'px';
+                        // el.style.height=image.height+'px';
+                        el.style.background=`url(${imgurl})`;
+                        el.style.backgroundSize='cover';
+                    }
+                }
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
