diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/demo.html" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..64f75ba95b49b53a1079dc9a489a1395d42f45fb
--- /dev/null
+++ "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/demo.html"
@@ -0,0 +1,116 @@
+<!-- 作业: 写一个详情页，来个倒计时，要求在倒计时1小时外，6折，
+在倒计时一小时1小时内，每10分钟折扣上升0.5，把价格计算出来,
+最好把计算属性与方法都用上，不需要讨论合理不合理 -->
+<!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>
+    <style>
+        div{
+            width: 500px;
+            margin: 0 auto;
+        }
+        #sfm{
+            margin: 5px 0 0 150px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+		<img src="./imgs/2.png" alt="" style="width: 500px;height: 400px;">
+        <br>
+		<div class="time" id="sfm">
+			<span>{{day}}天</span>
+			<span>{{hour}}小时</span>
+			<span>{{minute}}分</span>
+			<span>{{seconds}}秒</span>
+		</div>
+	</div>
+</body>
+<script>
+    var app = new Vue({
+			el: '#app',
+
+			data: {
+				// message: 'Hello Vue!',
+                day:"",
+				hour: "", //倒计时  小时
+				minute: "", // 倒计时 分钟
+				seconds: "", //倒计时 秒
+				interval: "",
+				countdownTime:1440
+			},
+
+			mounted() {
+				this.setTimer()
+				this.setTimeData(this.countdownTime * 60 * 1000);
+			},
+
+			methods: {
+				setTimeData(cm) {
+					console.log(cm, '--cm');
+
+                    this.day = Math.floor((cm / 1000 / 60 / 60/24) % 24);
+
+					this.day =this.day.toString().length == 1 ? "0" + this.day : this.day;
+
+					this.hour = Math.floor((cm / 1000 / 60 / 60) % 24);
+
+					this.hour =this.hour.toString().length == 1 ? "0" + this.hour : this.hour;
+
+					this.minute = Math.floor((cm / 1000 / 60) % 60);
+
+					this.minute =this.minute.toString().length == 1 ? "0" + this.minute : this.minute;
+
+					this.seconds = Math.floor((cm / 1000) % 60);
+
+					this.seconds =this.seconds.toString().length == 1? "0" + this.seconds: this.seconds;
+				},
+
+				setTimer() {
+					let _this = this;
+					this.interval = setInterval(function () {
+						_this.payCountdown(_this.countdownTime * 60 * 1000);
+						clearInterval(_this.interval);
+					}, 1000);
+				},
+
+				/**
+				 * 支付倒计时
+				 */
+                 
+				payCountdown(cm) {
+					let _this = this;
+				
+					if (cm >= 0 ) {
+                        this.day = Math.floor((cm / 1000 / 60 / 60/24) % 24);
+
+					    this.day =this.day.toString().length == 1 ? "0" + this.day : this.day;
+
+						this.hour = Math.floor((cm / 1000 / 60 / 60) % 24);
+
+						this.hour =this.hour.toString().length == 1 ? "0" + this.hour : this.hour;
+
+						this.minute = Math.floor((cm / 1000 / 60) % 60);
+
+						this.minute =this.minute.toString().length == 1? "0" + this.minute: this.minute;
+
+						this.seconds = Math.floor((cm / 1000) % 60);
+
+						this.seconds =this.seconds.toString().length == 1? "0" + this.seconds: this.seconds;
+
+						let _msThis = this;
+
+						setTimeout(function () {
+							cm -= 1000;
+							_msThis.payCountdown(cm);
+						}, 1000);
+					}
+				},
+			}
+		})
+</script>
+</html>
\ No newline at end of file
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/1.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bbad5a81ed4337ee3a38160f36f11eb2da978a88
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/1.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/2.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ccfb2dab2f0cbd0e786d35517b5a4320b9562402
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/2.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/3.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..04822c8f9c0616d38175b2b7f63548a5ebddc6f5
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/3.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/4.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..da40b55ade8a2c6e6b0a0bc78110d96f92b5e027
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\23220220406\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\350\277\207\346\273\244\345\231\250/imgs/4.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/1.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bbad5a81ed4337ee3a38160f36f11eb2da978a88
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/1.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/2.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ccfb2dab2f0cbd0e786d35517b5a4320b9562402
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/2.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/3.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..04822c8f9c0616d38175b2b7f63548a5ebddc6f5
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/3.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/4.png" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..da40b55ade8a2c6e6b0a0bc78110d96f92b5e027
Binary files /dev/null and "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/imgs/4.png" differ
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/sa.html" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/sa.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2c9947e2619efb25b73bbd73f384b55070bbaad7
--- /dev/null
+++ "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/sa.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>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <style>
+        div{
+            /* display: flex;
+            justify-content: center;
+ */
+            width: 500px;
+            margin: 0 auto;
+        }
+        #sfm{
+            margin: 5px 0 0 150px;
+           
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+		<img src="./imgs/2.png" alt="" style="width: 500px;height: 400px;">
+        <br>
+		<div class="time" id="sfm">
+			<span>{{day}}天</span>
+			<span>{{hour}}小时</span>
+			<span>{{minute}}分</span>
+			<span>{{seconds}}秒</span>
+		</div>
+	</div>
+</body>
+<script>
+    var app = new Vue({
+			el: '#app',
+
+			data: {
+				// message: 'Hello Vue!',
+                day:"",
+				hour: "", //倒计时  小时
+				minute: "", // 倒计时 分钟
+				seconds: "", //倒计时 秒
+				interval: "",
+				countdownTime:1440
+			},
+
+			mounted() {
+				this.setTimer()
+				this.setTimeData(this.countdownTime * 60 * 1000);
+			},
+
+			methods: {
+				setTimeData(cm) {
+					console.log(cm, '--cm');
+
+                    this.day = Math.floor((cm / 1000 / 60 / 60/24) % 24);
+
+					this.day =this.day.toString().length == 1 ? "0" + this.day : this.day;
+
+					this.hour = Math.floor((cm / 1000 / 60 / 60) % 24);
+
+					this.hour =this.hour.toString().length == 1 ? "0" + this.hour : this.hour;
+
+					this.minute = Math.floor((cm / 1000 / 60) % 60);
+
+					this.minute =this.minute.toString().length == 1 ? "0" + this.minute : this.minute;
+
+					this.seconds = Math.floor((cm / 1000) % 60);
+
+					this.seconds =this.seconds.toString().length == 1? "0" + this.seconds: this.seconds;
+				},
+
+				setTimer() {
+					let _this = this;
+					this.interval = setInterval(function () {
+						_this.payCountdown(_this.countdownTime * 60 * 1000);
+						clearInterval(_this.interval);
+					}, 1000);
+				},
+
+				/**
+				 * 支付倒计时
+				 */
+                 
+				payCountdown(cm) {
+					let _this = this;
+				
+					if (cm >= 0 ) {
+                        this.day = Math.floor((cm / 1000 / 60 / 60/24) % 24);
+
+					    this.day =this.day.toString().length == 1 ? "0" + this.day : this.day;
+
+						this.hour = Math.floor((cm / 1000 / 60 / 60) % 24);
+
+						this.hour =this.hour.toString().length == 1 ? "0" + this.hour : this.hour;
+
+						this.minute = Math.floor((cm / 1000 / 60) % 60);
+
+						this.minute =this.minute.toString().length == 1? "0" + this.minute: this.minute;
+
+						this.seconds = Math.floor((cm / 1000) % 60);
+
+						this.seconds =this.seconds.toString().length == 1? "0" + this.seconds: this.seconds;
+
+						let _msThis = this;
+
+						setTimeout(function () {
+							cm -= 1000;
+							_msThis.payCountdown(cm);
+						}, 1000);
+					}
+				},
+			}
+		})
+</script>
+</html>
\ No newline at end of file
diff --git "a/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/\351\200\273\350\276\221\345\210\244\346\226\255.html" "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/\351\200\273\350\276\221\345\210\244\346\226\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e9516a21cf62b186f20722f24a454dd57ee7e1fe
--- /dev/null
+++ "b/\350\213\217\345\215\216\346\235\260\344\275\234\344\270\232/vue/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232\351\200\273\350\276\221\345\210\244\346\226\255\344\270\216\345\210\227\350\241\25020220401/\351\200\273\350\276\221\345\210\244\346\226\255.html"
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>第四次作业逻辑判断20220401</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<style>
+    #mm{
+        display: flex;
+        justify-content: center;
+        margin: 100px;
+       
+    }
+    img{
+        width: 300px;
+        height: 200px;
+    }
+    table{
+        text-align: center;
+        /* border: 1px black solid; */
+        
+    }
+    #n{
+        width: 400px;
+        height: 400px;
+        border: 1px black solid;
+        text-align: center;
+    }
+   
+</style>
+<body>
+    <!-- 作业：建个商品列表，要有图片，还有商品的描述，日期，
+    点击后弹出个 大框框 把商品的图片，描述，产品名显示出来，用vue -->
+    <div id="mm">
+            <table v-show='xsshow'>
+                <tr>
+                    <th colspan="2">美女售卖店</th>
+                </tr>
+                <tr>
+                    <td>
+                        <img src="./imgs/1.png" alt=""><p><button @click='click'>购买</button></p>
+                    </td>
+                    <td>
+                        <img src="./imgs/2.png" alt=""><p><button @click='click'>购买</button></p>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <img src="./imgs/3.png" alt=""><p><button @click='click'>购买</button></p>
+                    </td>
+                    <td>
+                        <img src="./imgs/4.png" alt=""><p><button @click='click'>购买</button></p>
+                    </td>
+                </tr>
+            </table>
+        <div id="n" v-show="mmshow" >
+            <p style="text-align: center;">商品详情</p>
+            <img src="./imgs/1.png" alt="">
+            <p>他叫廖文杰</p>
+            <p>价格：200￥</p>
+            <button @click = 'close'>关闭</button>
+        </div>
+        <div id="n" v-show="mmshow" >
+            <p style="text-align: center;">商品详情</p>
+            <img src="./imgs/2.png" alt="">
+            <p>他叫廖文杰</p>
+            <p>价格：2000￥</p>
+            <button @click = 'close'>关闭</button>
+        </div>
+        <div id="n" v-show="mmshow" >
+            <p style="text-align: center;">商品详情</p>
+            <img src="./imgs/3.png" alt="">
+            <p>他叫廖文杰</p>
+            <p>价格：20000￥</p>
+            <button @click = 'close'>关闭</button>
+        </div>
+        <div id="n" v-show="mmshow" >
+            <p style="text-align: center;">商品详情</p>
+            <img src="./imgs/4.png" alt="">
+            <p>他叫廖文杰</p>
+            <p>价格：200000￥</p>
+            <button @click = 'close'>关闭</button>
+        </div>
+    </div>
+
+
+
+
+</body>
+<script>
+
+    let vue =  new Vue({
+        el:'#mm',
+        data:{
+            mmshow:false,
+            xsshow:true,
+        },
+        methods:{
+            click:function(){
+                alert('该商品已售完，给您推荐了其他相似商品')
+                vue.mmshow = true;
+                vue.xsshow = false
+            },
+            close:function(){
+                vue.mmshow = false;
+                vue.xsshow = true
+            }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
