cocoroboBlockly/src/components/door.vue

<template>
	<div>
		<div class="tip">
			<img src="../assets/img/doorJs.png" alt="" />
		</div>
		<div class="img">
			<div
				id="two"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/bTwo.png" alt="" />
			</div>
			<div
				id="three"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/bThree.png" alt="" />
			</div>
			<div
				id="door"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/door.png" alt="" />
			</div>
			<div
				id="jjj1"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/gear.png" alt="" />
			</div>
			<div
				id="jjj2"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/bFour.png" alt="" />
			</div>
			<div
				id="seven"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/bSeven.png" alt="" />
			</div>
			<div
				id="tou"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/tou.png" alt="" />
			</div>
			<div
				id="arm"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/arm.png" alt="" />
			</div>
			<div
				id="screan"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/screan.png" alt="" />
			</div>
			<div
				id="ai"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/ai.png" alt="" />
			</div>
			<div
				id="bottom"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/bottom.png" alt="" />
			</div>
			<div
				id="five"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/bFive.png" alt="" />
			</div>
			<div
				id="six"
				v-drag="{
					go,
					setPan,
					getPan,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
				}"
			>
				<img src="../assets/img/door/bSix.png" alt="" />
			</div>
		</div>
		<div class="right"><img src="../assets/img/right.png" alt="" /></div>
		<div class="xian"><img src="../assets/img/door/xian.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 {
				that: this,
				panThing: "",
				two: "",
				three: "",
				four: "",
				five: "",
				six: "",
				seven: "",
				eight: "",
				night: "",
				ten: "",
				eleven: "",
				twelve: "",
				thirteen: "",
			};
		},
		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 dv = document.getElementById("two");
					var dv1 = document.getElementById("three");
					var dv2 = document.getElementById("door");
					var dvj1 = document.getElementById("jjj1");
					var dvj2 = document.getElementById("jjj2");
					var dv3 = document.getElementById("seven");
					var dv4 = document.getElementById("tou");
					var dv5 = document.getElementById("arm");
					var dv6 = document.getElementById("screan");
					var dv7 = document.getElementById("ai");
					var dv8 = document.getElementById("bottom");
					var dv9 = document.getElementById("five");
					var dv10 = document.getElementById("six");
					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 == "two") {
								binding.value.setPan("two");
								moveP(nl, nt, 1);
							}

							if (el.id == "three") {
								binding.value.setPan("three");
								moveP(nl, nt, 2);
							}

							if (el.id == "door") {
								binding.value.setPan("door");
								moveP(nl, nt, 3);
							}

							if (el.id == "jjj1") {
								binding.value.setPan("jjj1");
								moveP(nl, nt, 4);
							}

							if (el.id == "jjj2") {
								binding.value.setPan("jjj2");
								moveP(nl, nt, 5);
							}
							if (el.id == "seven") {
								binding.value.setPan("seven");
								moveP(nl, nt, 6);
							}

							if (el.id == "tou") {
								binding.value.setPan("tou");
								moveP(nl, nt, 7);
							}

							if (el.id == "arm") {
								binding.value.setPan("arm");
								moveP(nl, nt, 8);
							}

							if (el.id == "screan") {
								binding.value.setPan("screan");
								moveP(nl, nt, 9);
							}

							if (el.id == "ai") {
								binding.value.setPan("ai");
								moveP(nl, nt, 10);
							}

							if (el.id == "bottom") {
								binding.value.setPan("bottom");
								moveP(nl, nt, 11);
							}

							if (el.id == "five") {
								binding.value.setPan("five");
								moveP(nl, nt, 12);
							}

							if (el.id == "six") {
								binding.value.setPan("six");
								moveP(nl, nt, 13);
							}
						};
					}
					//鼠标抬起事件
					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() == "two") {
							st(nl, nt, 1);
						}

						if (binding.value.getPan() == "three") {
							st(nl, nt, 2);
						}

						if (binding.value.getPan() == "door") {
							st(nl, nt, 3);
						}

						if (binding.value.getPan() == "jjj1") {
							st(nl, nt, 4);
						}

						if (binding.value.getPan() == "jjj2") {
							st(nl, nt, 5);
						}

						if (binding.value.getPan() == "seven") {
							st(nl, nt, 6);
						}

						if (binding.value.getPan() == "tou") {
							st(nl, nt, 7);
						}

						if (binding.value.getPan() == "arm") {
							st(nl, nt, 8);
						}

						if (binding.value.getPan() == "screan") {
							st(nl, nt, 9);
						}

						if (binding.value.getPan() == "ai") {
							st(nl, nt, 10);
						}

						if (binding.value.getPan() == "bottom") {
							st(nl, nt, 11);
						}

						if (binding.value.getPan() == "five") {
							st(nl, nt, 12);
						}

						if (binding.value.getPan() == "six") {
							st(nl, nt, 13);
						}

						pan();
					};
					function pan() {
						var twoL = dv.offsetLeft;
						var twoP = dv.offsetTop;

						var threeL = dv1.offsetLeft;
						var threeP = dv1.offsetTop;

						var doorL = dv2.offsetLeft;
						var doorP = dv2.offsetTop;

						var j1L = dvj1.offsetLeft;
						var j1T = dvj1.offsetTop;

						var j2L = dvj2.offsetLeft;
						var j2T = dvj2.offsetTop;

						var sevenL = dv3.offsetLeft;
						var sevenP = dv3.offsetTop;

						var touL = dv4.offsetLeft;
						var touP = dv4.offsetTop;

						var armL = dv5.offsetLeft;
						var armP = dv5.offsetTop;

						var screanL = dv6.offsetLeft;
						var screanP = dv6.offsetTop;

						var aiL = dv7.offsetLeft;
						var aiP = dv7.offsetTop;

						var bottomL = dv8.offsetLeft;
						var bottomP = dv8.offsetTop;

						var nightL = dv9.offsetLeft;
						var nightP = dv9.offsetTop;

						var tenL = dv10.offsetLeft;
						var tenP = dv10.offsetTop;

						var btn = document.getElementsByClassName("button")[0];
						var right = document.getElementsByClassName("right")[0];
						var xian = document.getElementsByClassName("xian")[0];

						if (
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFour() == 1 &&
							binding.value.getFive() == 1 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							binding.value.getNight() == 1 &&
							binding.value.getTen() == 1 &&
							binding.value.getEleven() == 1 &&
							binding.value.getTwelve() == 1 &&
							binding.value.getThirteen() == 1
						) {
							btn.className = "button dark";
							btn.onclick = function () {
								binding.value.go();
							};
							right.style.display = "block";
							right.style.left = j2L + 335 + "px";
							right.style.top = j2T + 65 + "px";
							xian.style.display = "block";
							xian.style.left = j1L + 74 + "px";
							xian.style.top = j1T - 30 + "px";
						} else {
							btn.className = "button";
							btn.onclick = null;
							right.style.display = "none";
							xian.style.display = "none";
						}
					}
					function st(nl, nt, type) {
						var twoL = dv.offsetLeft;
						var twoP = dv.offsetTop;

						var threeL = dv1.offsetLeft;
						var threeP = dv1.offsetTop;

						var doorL = dv2.offsetLeft;
						var doorP = dv2.offsetTop;

						var j1L = dvj1.offsetLeft;
						var j1T = dvj1.offsetTop;

						var j2L = dvj2.offsetLeft;
						var j2T = dvj2.offsetTop;

						var sevenL = dv3.offsetLeft;
						var sevenP = dv3.offsetTop;

						var touL = dv4.offsetLeft;
						var touP = dv4.offsetTop;

						var armL = dv5.offsetLeft;
						var armP = dv5.offsetTop;

						var screanL = dv6.offsetLeft;
						var screanP = dv6.offsetTop;

						var aiL = dv7.offsetLeft;
						var aiP = dv7.offsetTop;

						var bottomL = dv8.offsetLeft;
						var bottomP = dv8.offsetTop;

						var fiveL = dv9.offsetLeft;
						var fiveP = dv9.offsetTop;

						var sixL = dv10.offsetLeft;
						var sixP = dv10.offsetTop;

						var oneL = sixL - twoL;
						var oneP = sixP - twoP;

						var secondL = sixL - threeL;
						var secondP = sixP - threeP;

						var thirdL = sixL - fiveL;
						var thirdP = sixP - fiveP;

						var fourthL = threeL - j2L;
						var fourthP = threeP - j2T;

						var fivthL = fiveL - j1L;
						var fivthP = fiveP - j1T;

						var sixthL = j2L - screanL;
						var sixthP = j2T - screanP;

						var seventhL = j2L - aiL;
						var seventhP = j2T - aiP;

						var eighthL = j2L - bottomL;
						var eighthP = j2T - bottomP;

						var nighthL = screanL - touL;
						var nighthP = screanP - touP;

						var tenthL = doorL - sevenL;
						var tenthP = doorP - sevenP;

						var eleventhL = sevenL - armL;
						var eleventhP = sevenP - armP;

						var twelfthL = twoL - doorL;
						var twelfthP = twoP - doorP;

						if (
							-59 < oneL &&
							oneL < -19 &&
							236 < oneP &&
							oneP < 274 &&
							type == 1
						) {
							dv.style.left = sixL + 39 + "px";
							dv.style.top = sixP - 256 + "px";
							binding.value.setTwo(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 1) {
							binding.value.setTwo(0);
						}
						if (
							-426 < secondL &&
							secondL < -386 &&
							236 < secondP &&
							secondP < 278 &&
							type == 2
						) {
							dv1.style.left = sixL + 406 + "px";
							dv1.style.top = sixP - 256 + "px";
							binding.value.setThree(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 2) {
							binding.value.setThree(0);
						}
						if (
							-17 < thirdL &&
							thirdL < 23 &&
							489 < thirdP &&
							thirdP < 529 &&
							type == 12 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1
						) {
							dv9.style.left = sixL + 3 + "px";
							dv9.style.top = sixP - 509 + "px";
							binding.value.setFour(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 12) {
							binding.value.setFour(0);
						}
						if (
							-61 < twelfthL &&
							twelfthL < -13 &&
							-37 < twelfthP &&
							twelfthP < 43 &&
							type == 3 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFour() == 1
						) {
							dv2.style.left = twoL + 24 + "px";
							dv2.style.top = twoP - 6 + "px";
							if (binding.value.getSeven() == 1) {
								dv3.style.left = twoL + 24 + 39 + "px";
								dv3.style.top = twoP - 6 - 222 + "px";
							}
							if (binding.value.getEight() == 1 && binding.value.getSeven() == 1) {
								dv5.style.left = twoL + 24 + 4 + "px";
								dv5.style.top = twoP - 6 - 242 + "px";
							}
							binding.value.setFive(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 3) {
							binding.value.setFive(0);
						}
						if (
							-47 < fourthL &&
							fourthL < 272 &&
							-451 < fourthP &&
							fourthP < -30 &&
							type == 5
						) {
							dvj2.style.left = threeL + 28 + "px";
							dvj2.style.top = threeP + 118 + "px";
							if (binding.value.getThirteen() == 1) {
								dv6.style.left = threeL + 28 + 37 + "px";
								dv6.style.top = threeP + 118 - 49 + "px";
								if (binding.value.getTwelve() == 1) {
									dv4.style.left = threeL + 28 + 37 + 45 + "px";
									dv4.style.top = threeP + 118 - 49 - 70 + "px";
								}
							}
							if (binding.value.getEleven() == 1) {
								dv7.style.left = threeL + 28 + 36 + "px";
								dv7.style.top = threeP + 118 - 50 + "px";
							}
							if (binding.value.getTen() == 1) {
								dv8.style.left = threeL + 28 + 36 + "px";
								dv8.style.top = threeP + 118 - 50 + "px";
							}
							binding.value.setSix(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 5) {
							binding.value.setSix(0);
						}
						if (
							-52 < tenthL &&
							tenthL < -28 &&
							173 < tenthP &&
							tenthP < 257 &&
							type == 6
						) {
							dv3.style.left = doorL + 39 + "px";
							dv3.style.top = doorP - 227 + "px";
							if (binding.value.getEight() == 1) {
								dv5.style.left = doorL + 39 - 36 + "px";
								dv5.style.top = doorP - 227 - 20 + "px";
							}
							binding.value.setSeven(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 6) {
							binding.value.setSeven(0);
						}
						if (
							-27 < eleventhL &&
							eleventhL < 62 &&
							3 < eleventhP &&
							eleventhP < 32 &&
							type == 8
						) {
							dv5.style.left = sevenL - 36 + "px";
							dv5.style.top = sevenP - 20 + "px";
							binding.value.setEight(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 8) {
							binding.value.setEight(0);
						}
						if (
							-67 < fivthL &&
							fivthL < 34 &&
							-2 < fivthP &&
							fivthP < 71 &&
							type == 4 &&
							binding.value.getFour() == 1
						) {
							dvj1.style.left = fiveL + 5 + "px";
							dvj1.style.top = fiveP - 33 + "px";
							dvj1.style.zIndex = 1;
							binding.value.setNight(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 4) {
							binding.value.setNight(0);
						}
						if (
							-206 < eighthL &&
							eighthL < 100 &&
							-66 < eighthP &&
							eighthP < 204 &&
							type == 11
						) {
							dv8.style.left = j2L + 36 + "px";
							dv8.style.top = j2T - 51 + "px";
							binding.value.setTen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 11) {
							binding.value.setTen(0);
						}
						if (
							-206 < seventhL &&
							seventhL < 100 &&
							-66 < seventhP &&
							seventhP < 204 &&
							type == 10
						) {
							dv7.style.left = j2L + 37 + "px";
							dv7.style.top = j2T - 52 + "px";
							binding.value.setEleven(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 10) {
							binding.value.setEleven(0);
						}
						if (
							-82 < nighthL &&
							nighthL < -19 &&
							63 < nighthP &&
							nighthP < 124 &&
							type == 7
						) {
							dv4.style.left = screanL + 45 + "px";
							dv4.style.top = screanP - 70 + "px";
							binding.value.setTwelve(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 7) {
							binding.value.setTwelve(0);
						}
						if (
							-206 < sixthL &&
							sixthL < 100 &&
							-66 < sixthP &&
							sixthP < 204 &&
							type == 9
						) {
							dv6.style.left = j2L + 37 + "px";
							dv6.style.top = j2T - 49 + "px";
							if (binding.value.getTwelve() == 1) {
								dv4.style.left = j2L + 37 + 45 + "px";
								dv4.style.top = j2T - 49 - 70 + "px";
							}
							binding.value.setThirteen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 9) {
							binding.value.setThirteen(0);
						}
					}
					function playMusic() {
						musicC.play();
					}

					function moveP(nl, nt, type) {
						if (binding.value.getTwo() == 1 && type == 13) {
							dv.style.left = nl + 39 + "px";
							dv.style.top = nt - 256 + "px";
						}
						if (binding.value.getThree() == 1 && type == 13) {
							dv1.style.left = nl + 406 + "px";
							dv1.style.top = nt - 256 + "px";
						}
						if (binding.value.getFour() == 1 && type == 13) {
							dv9.style.left = nl + 3 + "px";
							dv9.style.top = nt - 509 + "px";
						}
						if (binding.value.getFive() == 1 && type == 13) {
							dv2.style.left = nl + 63 + "px";
							dv2.style.top = nt - 262 + "px";
						}
						if (binding.value.getSix() == 1 && type == 13) {
							dvj2.style.left = nl + 434 + "px";
							dvj2.style.top = nt - 138 + "px";
						}
						if (
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							type == 3
						) {
							dv3.style.left = nl + 39 + "px";
							dv3.style.top = nt - 225 + "px";
							dv5.style.left = nl + 3 + "px";
							dv5.style.top = nt - 245 + "px";
						}
						if (
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							binding.value.getFive() == 1 &&
							type == 13
						) {
							dv2.style.left = nl + 63 + "px";
							dv2.style.top = nt - 262 + "px";
							dv3.style.left = nl + 102 + "px";
							dv3.style.top = nt - 489 + "px";
							dv5.style.left = nl + 66 + "px";
							dv5.style.top = nt - 509 + "px";
						}
						if (binding.value.getEight() == 1 && type == 6) {
							dv5.style.left = nl - 36 + "px";
							dv5.style.top = nt - 17 + "px";
						}
						if (binding.value.getNight() == 1 && type == 13) {
							dvj1.style.left = nl + 8 + "px";
							dvj1.style.top = nt - 542 + "px";
						}
						if (binding.value.getTen() == 1 && type == 13) {
							dv8.style.left = nl + 470 + "px";
							dv8.style.top = nt - 188 + "px";
						}
						if (binding.value.getEleven() == 1 && type == 13) {
							dv7.style.left = nl + 470 + "px";
							dv7.style.top = nt - 188 + "px";
						}
						if (binding.value.getThirteen() == 1 && type == 13) {
							dv6.style.left = nl + 471 + "px";
							dv6.style.top = nt - 187 + "px";
						}
						if (binding.value.getTwelve() == 1 && type == 9) {
							dv4.style.left = nl + 45 + "px";
							dv4.style.top = nt - 70 + "px";
						}
						if (binding.value.getThirteen() == 1 && type == 13) {
							dv4.style.left = nl + 516 + "px";
							dv4.style.top = nt - 257 + "px";
						}
						if (binding.value.getTen() == 1 && type == 5) {
							dv8.style.left = nl + 36 + "px";
							dv8.style.top = nt - 51 + "px";
						}
						if (binding.value.getThirteen() == 1 && type == 5) {
							dv6.style.left = nl + 37 + "px";
							dv6.style.top = nt - 49 + "px";
						}
						if (binding.value.getEleven() == 1 && type == 5) {
							dv7.style.left = nl + 37 + "px";
							dv7.style.top = nt - 52 + "px";
						}
						if (
							binding.value.getTwelve() == 1 &&
							binding.value.getThirteen() == 1 &&
							type == 5
						) {
							dv4.style.left = nl + 82 + "px";
							dv4.style.top = nt - 119 + "px";
						}
						if (binding.value.getEight() == 1 && type == 6) {
							dv5.style.left = nl - 36 + "px";
							dv5.style.top = nt - 20 + "px";
						}
					}
				},
			},
		},
		methods: {
			go() {
				this.$router.push("/blockly");
			},
			setPan(value) {
				this.panThing = value;
			},
			getPan() {
				return this.panThing;
			},
			setTwo(value) {
				this.two = value;
			},
			getTwo() {
				return this.two;
			},
			setThree(value) {
				this.three = value;
			},
			getThree() {
				return this.three;
			},
			setFour(value) {
				this.four = value;
			},
			getFour() {
				return this.four;
			},
			setFive(value) {
				this.five = value;
			},
			getFive() {
				return this.five;
			},
			setSix(value) {
				this.six = value;
			},
			getSix() {
				return this.six;
			},
			setSeven(value) {
				this.seven = value;
			},
			getSeven() {
				return this.seven;
			},
			setEight(value) {
				this.eight = value;
			},
			getEight() {
				return this.eight;
			},
			setNight(value) {
				this.night = value;
			},
			getNight() {
				return this.night;
			},
			setTen(value) {
				this.ten = value;
			},
			getTen() {
				return this.ten;
			},
			setEleven(value) {
				this.eleven = value;
			},
			getEleven() {
				return this.eleven;
			},
			setTwelve(value) {
				this.twelve = value;
			},
			getTwelve() {
				return this.twelve;
			},
			setThirteen(value) {
				this.thirteen = value;
			},
			getThirteen() {
				return this.thirteen;
			},
		},
	};
</script>

<style scoped>
	html,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.tip {
		margin: 25px 0 30px 20px;
	}

	#two > img,
	#door > img,
	#three > img,
	#seven > img,
	.right > img,
	.xian > img,
	#jjj1 > img,
	#jjj2 > img,
	#tou > img,
	#arm > img,
	#screan > img,
	#ai > img,
	#bottom > img,
	#five > img,
	#six > img {
		width: 100%;
		height: 100%;
		user-select: none;
	}

	.img {
		flex-direction: row;
		justify-content: flex-end;
		margin: auto;
		width: 70%;
		/* position: relative; */
	}

	#two {
		width: 45px;
		position: absolute;
		left: 25%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	#door {
		width: 368px;
		position: absolute;
		top: 50%;
		left: 40%;
		transform: translateY(-50%);
		z-index: 3;
	}

	#three {
		width: 56px;
		position: absolute;
		top: 50%;
		left: 30%;
		transform: translateY(-50%);
		z-index: 4;
	}

	#jjj1 {
		width: 100px;
		position: absolute;
		left: 62%;
		top: 63%;
		transform: translateY(-50%);
		z-index: 3;
	}
	#jjj2 {
		width: 215px;
		position: absolute;
		left: 62%;
		top: 47%;
		transform: translateY(-50%);
		z-index: 2;
	}
	#seven {
		width: 53px;
		position: absolute;
		left: 65%;
		top: 75%;
		transform: translateY(-50%);
		z-index: 6;
	}

	#tou {
		width: 55px;
		position: absolute;
		left: 69%;
		top: 75%;
		transform: translateY(-50%);
		z-index: 11;
	}
	#arm {
		width: 105px;
		position: absolute;
		left: 75%;
		top: 75%;
		transform: translateY(-50%);
		z-index: 6;
	}
	#screan {
		width: 150px;
		position: absolute;
		left: 82%;
		top: 75%;
		transform: translateY(-50%);
		z-index: 11;
	}
	#ai {
		width: 150px;
		position: absolute;
		left: 82%;
		top: 56%;
		transform: translateY(-50%);
		z-index: 10;
	}
	#bottom {
		width: 150px;
		position: absolute;
		left: 82%;
		top: 37%;
		transform: translateY(-50%);
		z-index: 9;
	}
	#five {
		width: 490px;
		position: absolute;
		left: 28%;
		top: 80%;
		transform: translateY(-50%);
		z-index: 5;
	}
	#six {
		width: 760px;
		position: absolute;
		left: 28%;
		top: 85%;
		transform: translateY(-50%);
		z-index: 99;
	}

	.button {
		color: #fff;
		background: #8ca1de;
		width: 550px;
		height: 55px;
		font-size: 20px;
		text-align: center;
		line-height: 55px;
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
		user-select: none;
	}

	.right {
		width: 40px;
		position: absolute;
		left: 55%;
		top: 70%;
		display: none;
	}

	.xian {
		width: 500px;
		position: absolute;
		left: 55%;
		top: 70%;
		z-index: 0;
		display: none;
	}

	.dark {
		background: #5b79d0;
		cursor: pointer;
	}
</style>