1

Signed-off-by: lcw <1324309909@qq.com>

src/components/car.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="tip">
-			<img src="../assets/img/shop/tips.png" alt="" />
+			<img src="../assets/img/carJs.png" alt="" />
 		</div>
 		<div class="img">
 			<div

src/components/curtain.vue

@@ -0,0 +1,1604 @@
+<template>
+	<div>
+		<div class="tip">
+			<img src="../assets/img/curtainJs.png" alt="" />
+		</div>
+		<div class="img">
+			<div
+				id="C1"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/c1.png" alt="" />
+			</div>
+			<div
+				id="curtains"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/Curtains.png" alt="" />
+			</div>
+			<div
+				id="C2"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/c2.png" alt="" />
+			</div>
+			<div
+				id="C5One"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/c5One.png" alt="" />
+			</div>
+			<div
+				id="C5Two"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/c5Two.png" alt="" />
+			</div>
+			<div
+				id="line"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/line.png" alt="" />
+			</div>
+			<div
+				id="duobi"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/duobi.png" alt="" />
+			</div>
+			<div
+				id="C3"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/c3.png" alt="" />
+			</div>
+			<div
+				id="pj"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/pj.png" alt="" />
+			</div>
+			<div
+				id="C6"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/c6.png" alt="" />
+			</div>
+			<div
+				id="C4"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/curtains/c4.png" alt="" />
+			</div>
+			<div
+				id="screan"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/light/screan.png" alt="" />
+			</div>
+			<div
+				id="bottom"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/door/bottom.png" alt="" />
+			</div>
+			<div
+				id="ai"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setC5One,
+					getC5One,
+					setC5Two,
+					getC5Two,
+					setPj,
+					getPj,
+					setC6,
+					getC6,
+					setduoBi,
+					getduoBi,
+					setButtom,
+					getButtom,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setC4,
+					getC4,
+					setC3,
+					getC3,
+					setC1,
+					getC1,
+					setCurtains,
+					getCurtains,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/ai.png" alt="" />
+			</div>
+		</div>
+		<div class="right"><img src="../assets/img/right.png" alt="" /></div>
+		<div class="button">进入CocoBlockly编程平台</div>
+		<video
+			id="musicC"
+			:src="require('../assets/music/click.mp3')"
+			v-show="false"
+		></video>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				panThing: "",
+				c5One: "",
+				c5Two: "",
+				pj: "",
+				c6: "",
+				duobi: "",
+				buttom: "",
+				ai: "",
+				screan: "",
+				c4: "",
+				c3: "",
+				c1: "",
+				curtains: "",
+				line: "",
+			};
+		},
+		directives: {
+			drag: {
+				// 指令的定义
+				inserted: function (el, binding) {
+					// el.drag();
+					console.log(el);
+					//获取元素
+					// var dv = document.getElementById("dv");
+					let x = 0;
+					let y = 0;
+					let l = 0;
+					let t = 0;
+					let isDown = false;
+					var _screan = document.getElementById("screan");
+					var _bottom = document.getElementById("bottom");
+					var _ai = document.getElementById("ai");
+					var _C1 = document.getElementById("C1");
+					var _C2 = document.getElementById("C2");
+					var _curtains = document.getElementById("curtains");
+					var _C5One = document.getElementById("C5One");
+					var _C5Two = document.getElementById("C5Two");
+					var _line = document.getElementById("line");
+					var _duobi = document.getElementById("duobi");
+					var _C3 = document.getElementById("C3");
+					var _pj = document.getElementById("pj");
+					var _C6 = document.getElementById("C6");
+					var _C4 = document.getElementById("C4");
+					var musicC = document.getElementById("musicC");
+
+					//鼠标按下事件
+					el.onmousedown = function (e) {
+						//获取x坐标和y坐标
+						e.preventDefault();
+						x = e.clientX;
+						y = e.clientY;
+
+						//获取左部和顶部的偏移量
+						l = el.offsetLeft;
+						t = el.offsetTop;
+						//开关打开
+						isDown = true;
+						//设置样式
+						el.style.cursor = "move";
+						subiao(el);
+					};
+					function subiao(cdiv) {
+						document.onmousemove = function (e) {
+							if (isDown == false) {
+								return;
+							}
+							//获取x和y
+							var nx = e.clientX;
+							var ny = e.clientY;
+							//计算移动后的左偏移量和顶部的偏移量
+							var nl = nx - (x - l);
+							var nt = ny - (y - t);
+
+							cdiv.style.left = nl + "px";
+							cdiv.style.top = nt + "px";
+
+							if (el.id == "screan") {
+								binding.value.setPan("screan");
+								moveP(nl, nt, "screan");
+							}
+
+							if (el.id == "bottom") {
+								binding.value.setPan("bottom");
+								moveP(nl, nt, "bottom");
+							}
+
+							if (el.id == "ai") {
+								binding.value.setPan("ai");
+								moveP(nl, nt, "ai");
+							}
+
+							if (el.id == "C1") {
+								binding.value.setPan("C1");
+								moveP(nl, nt, "C1");
+							}
+
+							if (el.id == "C2") {
+								binding.value.setPan("C2");
+								moveP(nl, nt, "C2");
+							}
+
+							if (el.id == "curtains") {
+								binding.value.setPan("curtains");
+								moveP(nl, nt, "curtains");
+							}
+
+							if (el.id == "C5One") {
+								binding.value.setPan("C5One");
+								moveP(nl, nt, "C5One");
+							}
+
+							if (el.id == "C5Two") {
+								binding.value.setPan("C5Two");
+								moveP(nl, nt, "C5Two");
+							}
+
+							if (el.id == "line") {
+								binding.value.setPan("line");
+								moveP(nl, nt, "line");
+							}
+
+							if (el.id == "duobi") {
+								binding.value.setPan("duobi");
+								moveP(nl, nt, "duobi");
+							}
+
+							if (el.id == "C3") {
+								binding.value.setPan("C3");
+								moveP(nl, nt, "C3");
+							}
+
+							if (el.id == "pj") {
+								binding.value.setPan("pj");
+								moveP(nl, nt, "pj");
+							}
+
+							if (el.id == "C6") {
+								binding.value.setPan("C6");
+								moveP(nl, nt, "C6");
+							}
+
+							if (el.id == "C4") {
+								binding.value.setPan("C4");
+								moveP(nl, nt, "C4");
+							}
+						};
+					}
+					//鼠标抬起事件
+					el.onmouseup = function (e) {
+						//开关关闭
+						isDown = false;
+						el.style.cursor = "default";
+						document.onmousemove = null;
+						var nx = e.clientX;
+						var ny = e.clientY;
+						var nl = nx - (x - l);
+						var nt = ny - (y - t);
+
+						if (binding.value.getPan() == "screan") {
+							st(nl, nt, "screan");
+						}
+
+						if (binding.value.getPan() == "bottom") {
+							st(nl, nt, "bottom");
+						}
+
+						if (binding.value.getPan() == "ai") {
+							st(nl, nt, "ai");
+						}
+
+						if (binding.value.getPan() == "C1") {
+							st(nl, nt, "C1");
+						}
+
+						if (binding.value.getPan() == "C2") {
+							st(nl, nt, "C2");
+						}
+
+						if (binding.value.getPan() == "curtains") {
+							st(nl, nt, "curtains");
+						}
+
+						if (binding.value.getPan() == "C5One") {
+							st(nl, nt, "C5One");
+						}
+
+						if (binding.value.getPan() == "C5Two") {
+							st(nl, nt, "C5Two");
+						}
+
+						if (binding.value.getPan() == "line") {
+							st(nl, nt, "line");
+						}
+
+						if (binding.value.getPan() == "duobi") {
+							st(nl, nt, "duobi");
+						}
+
+						if (binding.value.getPan() == "C3") {
+							st(nl, nt, "C3");
+						}
+
+						if (binding.value.getPan() == "pj") {
+							st(nl, nt, "pj");
+						}
+
+						if (binding.value.getPan() == "C6") {
+							st(nl, nt, "C6");
+						}
+
+						if (binding.value.getPan() == "C4") {
+							st(nl, nt, "C4");
+						}
+						pan();
+					};
+					function pan() {
+						var policeL = _C2.offsetLeft;
+						var policeT = _C2.offsetTop;
+
+						var btn = document.getElementsByClassName("button")[0];
+						var right = document.getElementsByClassName("right")[0];
+
+						if (
+							binding.value.getduoBi() == 1 &&
+							binding.value.getC5One() == 1 &&
+							binding.value.getC5Two() == 1 &&
+              binding.value.getPj() == 1 &&
+              binding.value.getC6() == 1 &&
+              binding.value.getButtom() == 1 &&
+              binding.value.getAi() == 1 &&
+              binding.value.getScrean() == 1 &&
+              binding.value.getC4() == 1 &&
+              binding.value.getC3() == 1 &&
+              binding.value.getC1() == 1 &&
+              binding.value.getCurtains() == 1 &&
+              binding.value.getLine() == 1
+						) {
+							btn.className = "button dark";
+							btn.onclick = function () {
+								binding.value.go();
+							};
+							right.style.display = "block";
+							right.style.left = policeL + 390 + "px";
+							right.style.top = policeT - 20 + "px";
+						} else {
+							btn.className = "button";
+							btn.onclick = null;
+							right.style.display = "none";
+						}
+					}
+					function st(nl, nt, type) {
+						var screanL = _screan.offsetLeft;
+						var screanT = _screan.offsetTop;
+
+						var bottomL = _bottom.offsetLeft;
+						var bottomT = _bottom.offsetTop;
+
+						var aiL = _ai.offsetLeft;
+						var aiT = _ai.offsetTop;
+
+						var c1L = _C1.offsetLeft;
+						var c1T = _C1.offsetTop;
+
+						var c2L = _C2.offsetLeft;
+						var c2T = _C2.offsetTop;
+
+						var curtainL = _curtains.offsetLeft;
+						var curtainT = _curtains.offsetTop;
+
+						var c5OneL = _C5One.offsetLeft;
+						var c5OneT = _C5One.offsetTop;
+
+						var c5TwoL = _C5Two.offsetLeft;
+						var c5TwoT = _C5Two.offsetTop;
+
+						var lineL = _line.offsetLeft;
+						var lineT = _line.offsetTop;
+
+						var duobiL = _duobi.offsetLeft;
+						var duobiT = _duobi.offsetTop;
+
+						var c3L = _C3.offsetLeft;
+						var c3T = _C3.offsetTop;
+
+						var pjL = _pj.offsetLeft;
+						var pjT = _pj.offsetTop;
+
+						var c6L = _C6.offsetLeft;
+						var c6T = _C6.offsetTop;
+
+						var c4L = _C4.offsetLeft;
+						var c4T = _C4.offsetTop;
+
+						var firstL = c2L - c5OneL;
+						var firstT = c2T - c5OneT;
+
+						var secondL = c2L - c5TwoL;
+						var secondT = c2T - c5TwoT;
+
+						var thirdL = c4L - pjL;
+						var thirdT = c4T - pjT;
+
+						var fourthL = c3L - c6L;
+						var fourthT = c3T - c6T;
+
+						var fivethL = c1L - duobiL;
+						var fivethT = c1T - duobiT;
+
+						var sixthL = c1L - bottomL;
+						var sixthT = c1T - bottomT;
+
+						var seventhL = c1L - aiL;
+						var seventhT = c1T - aiT;
+
+						var eighthL = c1L - screanL;
+						var eighthT = c1T - screanT;
+
+						var nighthL = c1L - c4L;
+						var nighthT = c1T - c4T;
+
+						var tenthL = c4L - c3L;
+						var tenthT = c4T - c3T;
+
+						var eleventhL = c5OneL - c1L;
+						var eleventhT = c5OneT - c1T;
+
+						var twelvethL = c2L - curtainL;
+						var twelvethT = c2T - curtainT;
+
+						var thirteenthL = curtainL - lineL;
+						var thirteenthT = curtainT - lineT;
+
+						if (
+							-43 < firstL &&
+							firstL < -10 &&
+							-203 < firstT &&
+							firstT < 229 &&
+							type == "C5One"
+						) {
+							_C5One.style.left = c2L + 22 + "px";
+							_C5One.style.top = c2T - 202 + "px";
+							binding.value.setC5One(1);
+						} else if (type == "C5One") {
+							binding.value.setC5One(0);
+						}
+
+						if (
+							-332 < secondL &&
+							secondL < -291 &&
+							-203 < secondT &&
+							secondT < 218 &&
+							type == "C5Two"
+						) {
+							_C5Two.style.left = c2L + 309 + "px";
+							_C5Two.style.top = c2T - 202 + "px";
+							binding.value.setC5Two(1);
+						} else if (type == "C5Two") {
+							binding.value.setC5Two(0);
+						}
+
+						if (
+							-43 < thirdL &&
+							thirdL < -10 &&
+							-79 < thirdT &&
+							thirdT < -41 &&
+							type == "pj"
+						) {
+							_pj.style.left = c4L + 26 + "px";
+							_pj.style.top = c4T + 60 + "px";
+							binding.value.setPj(1);
+						} else if (type == "pj") {
+							binding.value.setPj(0);
+						}
+
+						if (
+							-283 < fourthL &&
+							fourthL < -259 &&
+							-146 < fourthT &&
+							fourthT < -35 &&
+							type == "C6"
+						) {
+							_C6.style.left = c3L + 260 + "px";
+							_C6.style.top = c3T + 109 + "px";
+							binding.value.setC6(1);
+						} else if (type == "C6") {
+							binding.value.setC6(0);
+						}
+
+						if (
+							-47 < fivethL &&
+							fivethL < 1 &&
+							-6 < fivethT &&
+							fivethT < 85 &&
+							type == "duobi"
+						) {
+							_duobi.style.left = c1L + 22 + "px";
+							_duobi.style.top = c1T - 38 + "px";
+							binding.value.setduoBi(1);
+						} else if (type == "duobi") {
+							binding.value.setduoBi(0);
+						}
+
+						if (
+							-192 < sixthL &&
+							sixthL < 30 &&
+							-114 < sixthT &&
+							sixthT < 91 &&
+							type == "bottom"
+						) {
+							_bottom.style.left = c1L + 82 + "px";
+							_bottom.style.top = c1T + 11 + "px";
+							binding.value.setButtom(1);
+						} else if (type == "bottom") {
+							binding.value.setButtom(0);
+						}
+
+						if (
+							-189 < seventhL &&
+							seventhL < 39 &&
+							-112 < seventhT &&
+							seventhT < 88 &&
+							type == "ai"
+						) {
+							_ai.style.left = c1L + 80 + "px";
+							_ai.style.top = c1T + 11 + "px";
+							binding.value.setAi(1);
+						} else if (type == "ai") {
+							binding.value.setAi(0);
+						}
+
+						if (
+							-196 < eighthL &&
+							eighthL < 36 &&
+							-120 < eighthT &&
+							eighthT < 99 &&
+							type == "screan"
+						) {
+							_screan.style.left = c1L + 84 + "px";
+							_screan.style.top = c1T + 12 + "px";
+							binding.value.setScrean(1);
+						} else if (type == "screan") {
+							binding.value.setScrean(0);
+						}
+
+						if (
+							-16 < nighthL &&
+							nighthL < 25 &&
+							105 < nighthT &&
+							nighthT < 139 &&
+							type == "C4" &&
+							binding.value.getPj() == 1 &&
+							binding.value.getduoBi() == 1
+						) {
+							_C4.style.left = c1L - 1 + "px";
+							_C4.style.top = c1T - 123 + "px";
+							if (binding.value.getPj() == 1) {
+								_pj.style.left = c1L - 1 + 26 + "px";
+								_pj.style.top = c1T - 123 + 60 + "px";
+							}
+							binding.value.setC4(1);
+						} else if (type == "C4") {
+							binding.value.setC4(0);
+						}
+
+						if (
+							-302 < tenthL &&
+							tenthL < -286 &&
+							-14 < tenthT &&
+							tenthT < 1 &&
+							type == "C3" &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC6() == 1
+						) {
+							_C3.style.left = c4L + 295 + "px";
+							_C3.style.top = c4T + 7 + "px";
+							if (binding.value.getC6() == 1) {
+								_C6.style.left = c4L + 295 + 260 + "px";
+								_C6.style.top = c4T + 7 + 109 + "px";
+							}
+							binding.value.setC3(1);
+						} else if (type == "C3") {
+							binding.value.setC3(0);
+						}
+
+						if (
+							218 < eleventhL &&
+							eleventhL < 255 &&
+							177 < eleventhT &&
+							eleventhT < 233 &&
+							type == "C1" &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getButtom() == 1 &&
+							binding.value.getduoBi() == 1 &&
+							binding.value.getPj() == 1 &&
+							binding.value.getC3() == 1 &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC6() == 1
+						) {
+							_C1.style.left = c5OneL - 239 + "px";
+							_C1.style.top = c5OneT - 186 + "px";
+							if (binding.value.getduoBi() == 1) {
+								_duobi.style.left = c5OneL - 239 + 22 + "px";
+								_duobi.style.top = c5OneT - 186 - 38 + "px";
+							}
+							if (binding.value.getButtom() == 1) {
+								_bottom.style.left = c5OneL - 239 + 82 + "px";
+								_bottom.style.top = c5OneT - 186 + 11 + "px";
+							}
+							if (binding.value.getAi() == 1) {
+								_ai.style.left = c5OneL - 239 + 80 + "px";
+								_ai.style.top = c5OneT - 186 + 11 + "px";
+							}
+							if (binding.value.getScrean() == 1) {
+								_screan.style.left = c5OneL - 239 + 84 + "px";
+								_screan.style.top = c5OneT - 186 + 12 + "px";
+							}
+							if (binding.value.getC4() == 1) {
+								_C4.style.left = c5OneL - 239 - 1 + "px";
+								_C4.style.top = c5OneT - 186 - 123 + "px";
+								if (binding.value.getPj() == 1) {
+									_pj.style.left = c5OneL - 239 - 1 + 26 + "px";
+									_pj.style.top = c5OneT - 186 - 123 + 60 + "px";
+								}
+							}
+							if (binding.value.getC3() == 1) {
+								_C3.style.left = c5OneL - 239 + 294 + "px";
+								_C3.style.top = c5OneT - 186 - 116 + "px";
+								if (binding.value.getC6() == 1) {
+									_C6.style.left = c5OneL - 239 + 294 + 260 + "px";
+									_C6.style.top = c5OneT - 186 - 116 + 109 + "px";
+								}
+							}
+							binding.value.setC1(1);
+						} else if (type == "C1") {
+							binding.value.setC1(0);
+						}
+
+						if (
+							-284 < twelvethL &&
+							twelvethL < 257 &&
+							-157 < twelvethT &&
+							twelvethT < 521 &&
+							type == "curtains" &&
+							binding.value.getC1() == 1
+						) {
+							_curtains.style.left = c2L + 13 + "px";
+							_curtains.style.top = c2T - 187 + "px";
+							binding.value.setCurtains(1);
+						} else if (type == "curtains") {
+							binding.value.setCurtains(0);
+						}
+
+						if (
+							-300 < thirteenthL &&
+							thirteenthL < 403 &&
+							174 < thirteenthT &&
+							thirteenthT < 193 &&
+							type == "line" &&
+							binding.value.getCurtains() == 1
+						) {
+							_line.style.left = curtainL - 84 + "px";
+							_line.style.top = curtainT - 183 + "px";
+							binding.value.setLine(1);
+						} else if (type == "curtains") {
+							binding.value.setLine(0);
+						}
+					}
+					function playMusic() {
+						musicC.play();
+					}
+
+					function moveP(nl, nt, type) {
+						if (binding.value.getC5One() == 1 && type == "C2") {
+							_C5One.style.left = nl + 22 + "px";
+							_C5One.style.top = nt - 202 + "px";
+						}
+
+						if (binding.value.getC5Two() == 1 && type == "C2") {
+							_C5Two.style.left = nl + 309 + "px";
+							_C5Two.style.top = nt - 202 + "px";
+						}
+
+						if (binding.value.getPj() == 1 && type == "C4") {
+							_pj.style.left = nl + 26 + "px";
+							_pj.style.top = nt + 60 + "px";
+						}
+
+						if (binding.value.getC6() == 1 && type == "C3") {
+							_C6.style.left = nl + 260 + "px";
+							_C6.style.top = nt + 109 + "px";
+						}
+
+						if (binding.value.getduoBi() == 1 && type == "C1") {
+							_duobi.style.left = nl + 22 + "px";
+							_duobi.style.top = nt - 38 + "px";
+						}
+
+						if (binding.value.getButtom() == 1 && type == "C1") {
+							_bottom.style.left = nl + 82 + "px";
+							_bottom.style.top = nt + 11 + "px";
+						}
+
+						if (binding.value.getAi() == 1 && type == "C1") {
+							_ai.style.left = nl + 80 + "px";
+							_ai.style.top = nt + 11 + "px";
+						}
+
+						if (binding.value.getScrean() == 1 && type == "C1") {
+							_screan.style.left = nl + 84 + "px";
+							_screan.style.top = nt + 12 + "px";
+						}
+
+						if (
+							binding.value.getButtom() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							type == "C1"
+						) {
+							_bottom.style.left = nl + 82 + "px";
+							_bottom.style.top = nt + 11 + "px";
+							_ai.style.left = nl + 80 + "px";
+							_ai.style.top = nt + 11 + "px";
+							_screan.style.left = nl + 84 + "px";
+							_screan.style.top = nt + 12 + "px";
+						}
+
+						if (
+							binding.value.getduoBi() == 1 &&
+							binding.value.getPj() == 1 &&
+							binding.value.getC4() == 1 &&
+							type == "C1"
+						) {
+							_C4.style.left = nl - 1 + "px";
+							_C4.style.top = nt - 123 + "px";
+							_pj.style.left = nl - 1 + 26 + "px";
+							_pj.style.top = nt - 123 + 60 + "px";
+						}
+
+						if (
+							binding.value.getduoBi() == 1 &&
+							binding.value.getPj() == 1 &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC3() == 1 &&
+							binding.value.getC6() == 1 &&
+							type == "C1"
+						) {
+							_C4.style.left = nl - 1 + "px";
+							_C4.style.top = nt - 123 + "px";
+							_pj.style.left = nl - 1 + 26 + "px";
+							_pj.style.top = nt - 123 + 60 + "px";
+							_C3.style.left = nl + 294 + "px";
+							_C3.style.top = nt - 116 + "px";
+							_C6.style.left = nl + 294 + 260 + "px";
+							_C6.style.top = nt - 116 + 109 + "px";
+						}
+
+						if (
+							binding.value.getduoBi() == 1 &&
+							binding.value.getPj() == 1 &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC3() == 1 &&
+							binding.value.getC6() == 1 &&
+							binding.value.getButtom() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							type == "C1"
+						) {
+							_bottom.style.left = nl + 82 + "px";
+							_bottom.style.top = nt + 11 + "px";
+							_ai.style.left = nl + 80 + "px";
+							_ai.style.top = nt + 11 + "px";
+							_screan.style.left = nl + 84 + "px";
+							_screan.style.top = nt + 12 + "px";
+							_C4.style.left = nl - 1 + "px";
+							_C4.style.top = nt - 123 + "px";
+							_pj.style.left = nl - 1 + 26 + "px";
+							_pj.style.top = nt - 123 + 60 + "px";
+							_C3.style.left = nl + 294 + "px";
+							_C3.style.top = nt - 116 + "px";
+							_C6.style.left = nl + 294 + 260 + "px";
+							_C6.style.top = nt - 116 + 109 + "px";
+						}
+
+						if (
+							binding.value.getduoBi() == 1 &&
+							binding.value.getPj() == 1 &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC3() == 1 &&
+							binding.value.getC6() == 1 &&
+							binding.value.getButtom() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getC1() == 1 &&
+							type == "C2"
+						) {
+							_C1.style.left = nl - 217 + "px";
+							_C1.style.top = nt - 388 + "px";
+							_duobi.style.left = nl - 195 + "px";
+							_duobi.style.top = nt - 426 + "px";
+							_bottom.style.left = nl - 135 + "px";
+							_bottom.style.top = nt - 377 + "px";
+							_ai.style.left = nl - 137 + "px";
+							_ai.style.top = nt - 377 + "px";
+							_screan.style.left = nl - 133 + "px";
+							_screan.style.top = nt - 376 + "px";
+							_C4.style.left = nl - 218 + "px";
+							_C4.style.top = nt - 511 + "px";
+							_pj.style.left = nl - 192 + "px";
+							_pj.style.top = nt - 451 + "px";
+							_C3.style.left = nl + 77 + "px";
+							_C3.style.top = nt - 504 + "px";
+							_C6.style.left = nl + 337 + "px";
+							_C6.style.top = nt - 395 + "px";
+						}
+
+						if (
+							binding.value.getduoBi() == 1 &&
+							binding.value.getPj() == 1 &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC3() == 1 &&
+							binding.value.getC6() == 1 &&
+							binding.value.getButtom() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getC1() == 1 &&
+							binding.value.getCurtains() == 1 &&
+							type == "C2"
+						) {
+							_C1.style.left = nl - 217 + "px";
+							_C1.style.top = nt - 388 + "px";
+							_duobi.style.left = nl - 195 + "px";
+							_duobi.style.top = nt - 426 + "px";
+							_bottom.style.left = nl - 135 + "px";
+							_bottom.style.top = nt - 377 + "px";
+							_ai.style.left = nl - 137 + "px";
+							_ai.style.top = nt - 377 + "px";
+							_screan.style.left = nl - 133 + "px";
+							_screan.style.top = nt - 376 + "px";
+							_C4.style.left = nl - 218 + "px";
+							_C4.style.top = nt - 511 + "px";
+							_pj.style.left = nl - 192 + "px";
+							_pj.style.top = nt - 451 + "px";
+							_C3.style.left = nl + 77 + "px";
+							_C3.style.top = nt - 504 + "px";
+							_C6.style.left = nl + 337 + "px";
+							_C6.style.top = nt - 395 + "px";
+							_curtains.style.left = nl + 13 + "px";
+							_curtains.style.top = nt - 187 + "px";
+						}
+
+						if (
+							binding.value.getduoBi() == 1 &&
+							binding.value.getPj() == 1 &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC3() == 1 &&
+							binding.value.getC6() == 1 &&
+							binding.value.getButtom() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getC1() == 1 &&
+							binding.value.getCurtains() == 1 &&
+							binding.value.getLine() == 1 &&
+							type == "C2"
+						) {
+							_C1.style.left = nl - 217 + "px";
+							_C1.style.top = nt - 388 + "px";
+							_duobi.style.left = nl - 195 + "px";
+							_duobi.style.top = nt - 426 + "px";
+							_bottom.style.left = nl - 135 + "px";
+							_bottom.style.top = nt - 377 + "px";
+							_ai.style.left = nl - 137 + "px";
+							_ai.style.top = nt - 377 + "px";
+							_screan.style.left = nl - 133 + "px";
+							_screan.style.top = nt - 376 + "px";
+							_C4.style.left = nl - 218 + "px";
+							_C4.style.top = nt - 511 + "px";
+							_pj.style.left = nl - 192 + "px";
+							_pj.style.top = nt - 451 + "px";
+							_C3.style.left = nl + 77 + "px";
+							_C3.style.top = nt - 504 + "px";
+							_C6.style.left = nl + 337 + "px";
+							_C6.style.top = nt - 395 + "px";
+							_curtains.style.left = nl + 13 + "px";
+							_curtains.style.top = nt - 187 + "px";
+							_line.style.left = nl - 71 + "px";
+							_line.style.top = nt - 370 + "px";
+						}
+					}
+				},
+			},
+		},
+		methods: {
+			go() {
+				this.$router.push("/blockly");
+			},
+			setPan(value) {
+				this.panThing = value;
+			},
+			getPan() {
+				return this.panThing;
+			},
+			setC5One(value) {
+				this.c5One = value;
+			},
+			getC5One() {
+				return this.c5One;
+			},
+			setC5Two(value) {
+				this.c5Two = value;
+			},
+			getC5Two() {
+				return this.c5Two;
+			},
+			setPj(value) {
+				this.pj = value;
+			},
+			getPj() {
+				return this.pj;
+			},
+			setC6(value) {
+				this.c6 = value;
+			},
+			getC6() {
+				return this.c6;
+			},
+			setduoBi(value) {
+				this.duobi = value;
+			},
+			getduoBi() {
+				return this.duobi;
+			},
+			setButtom(value) {
+				this.buttom = value;
+			},
+			getButtom() {
+				return this.buttom;
+			},
+			setAi(value) {
+				this.ai = value;
+			},
+			getAi() {
+				return this.ai;
+			},
+			setScrean(value) {
+				this.screan = value;
+			},
+			getScrean() {
+				return this.screan;
+			},
+			setC4(value) {
+				this.c4 = value;
+			},
+			getC4() {
+				return this.c4;
+			},
+			setC3(value) {
+				this.c3 = value;
+			},
+			getC3() {
+				return this.c3;
+			},
+			setC1(value) {
+				this.c1 = value;
+			},
+			getC1() {
+				return this.c1;
+			},
+			setCurtains(value) {
+				this.curtains = value;
+			},
+			getCurtains() {
+				return this.curtains;
+			},
+			setLine(value) {
+				this.line = value;
+			},
+			getLine() {
+				return this.line;
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+
+	.tip {
+		margin: 25px 0 30px 20px;
+	}
+
+	#screan > img,
+	#bottom > img,
+	#ai > img,
+	#C1 > img,
+	#C2 > img,
+	#curtains > img,
+	#C5One > img,
+	#C5Two > img,
+	#line > img,
+	#duobi > img,
+	#C3 > img,
+	#pj > img,
+	#C6 > img,
+	#C4 > img,
+	.right > img {
+		width: 100%;
+		height: 100%;
+		user-select: none;
+	}
+
+	.img {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		margin: auto;
+		width: 70%;
+		/* position: relative; */
+	}
+
+	#screan {
+		width: 150px;
+		position: absolute;
+		left: 65%;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 3;
+	}
+
+	#ai {
+		width: 150px;
+		position: absolute;
+		top: 75%;
+		left: 65%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	#bottom {
+		width: 150px;
+		position: absolute;
+		top: 30%;
+		left: 65%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#C1 {
+		width: 600px;
+		position: absolute;
+		top: 23%;
+		left: 20%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#C2 {
+		width: 380px;
+		position: absolute;
+		top: 79%;
+		left: 20%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#curtains {
+		width: 350px;
+		position: absolute;
+		top: 55%;
+		left: 17%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#C5One {
+		width: 40px;
+		position: absolute;
+		top: 51%;
+		left: 36%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#C5Two {
+		width: 40px;
+		position: absolute;
+		top: 51%;
+		left: 39%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#line {
+		width: 450px;
+		position: absolute;
+		top: 28%;
+		left: 34%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#duobi {
+		width: 38px;
+		position: absolute;
+		top: 20%;
+		left: 55%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#C3 {
+		width: 325px;
+		position: absolute;
+		top: 44%;
+		left: 43%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#pj {
+		width: 75px;
+		position: absolute;
+		top: 55%;
+		left: 45%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	#C6 {
+		width: 60px;
+		position: absolute;
+		top: 52%;
+		left: 48%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	#C4 {
+		width: 350px;
+		position: absolute;
+		top: 69%;
+		left: 45%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	.button {
+		color: #fff;
+		background: #8ca1de;
+		width: 550px;
+		height: 55px;
+		font-size: 20px;
+		text-align: center;
+		line-height: 55px;
+		position: absolute;
+		bottom: 10%;
+		left: 50%;
+		transform: translateX(-50%);
+		user-select: none;
+	}
+
+	.right {
+		width: 40px;
+		position: absolute;
+		left: 55%;
+		top: 70%;
+		display: none;
+	}
+
+	.dark {
+		background: #5b79d0;
+		cursor: pointer;
+	}
+</style>

src/components/index.vue

@@ -107,7 +107,7 @@
 					[
 						{ poster: require("../assets/img/light.png"), path: "light" },
 						{ poster: require("../assets/img/door.png"), path: "door" },
-						{ poster: require("../assets/img/curtain.png"), path: "" },
+						{ poster: require("../assets/img/curtain.png"), path: "curtain" },
 						{ poster: require("../assets/img/robot.png"), path: "robot" },
 						{ poster: require("../assets/img/car.png"), path: "car" },
 						{ poster: require("../assets/img/pay.png"), path: "shop" },
@@ -119,7 +119,7 @@
 					],
 					[],
 					[
-						{ poster: require("../assets/img/curtain.png"), path: "" },
+						{ poster: require("../assets/img/curtain.png"), path: "curtain" },
 						{ poster: require("../assets/img/robot.png"), path: "robot" },
 					],
 					[

src/router/index.js

@@ -15,6 +15,7 @@ import door from '@/components/door'
 import index from '@/components/index'
 import robot from '@/components/robot'
 import car from '@/components/car'
+import curtain from '@/components/curtain'
 
 Vue.use(Router).use(ElementUI)
 
@@ -85,6 +86,11 @@ export default new Router({
       path: '/car',
       name: 'car',
       component: car
+    },
+    {
+      path: '/curtain',
+      name: 'curtain',
+      component: curtain
     }
   ]
 })