cocoroboBlockly/src/components/car.vue

<template>
	<div>
		<div class="tip">
			<img src="../assets/img/shop/tips.png" alt="" />
		</div>
		<div class="img">
			<div
            v-show="f3 != 1"
				id="screan"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/light/screan.png" alt="" />
			</div>
			<div
            v-show="f3 != 1"
				id="tou"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/tou1.png" alt="" />
			</div>
			<div
            v-show="f3 != 1"
				id="ai"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/ai.png" alt="" />
			</div>
			<div
				id="lightBlue"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/lightBlue.png" alt="" />
			</div>
			<div
				id="lightWhite"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/lightWhite.png" alt="" />
			</div>
			<div
            v-show="f3 != 1"
				id="F3"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/f3.png" alt="" />
			</div>
			<div
				id="F4"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/f4.png" alt="" />
			</div>
			<div
				id="F2"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/f2.png" alt="" />
			</div>
			<div
				id="f1White"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/f1White.png" alt="" />
			</div>
			<div
				id="f1Blue"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/f1Blue.png" alt="" />
			</div>
			<div
				id="wheelWhite"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/wheelWhite.png" alt="" />
			</div>
			<div
				id="wheelBlack"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/wheelBlack.png" alt="" />
			</div>
			<div
				id="light"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/light.png" alt="" />
			</div>
            <div
				v-show="f3 == 1"
				id="line"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setlightWhite,
					getlightWhite,
					setlightBlue,
					getlightBlue,
					setf1White,
					getf1White,
					setF4,
					getF4,
                    setF2,
                    getF2,
                    setLight,
                    getLight,
                    setwheelWhite,
                    getwheelWhite,
                    setwheelBlack,
                    getwheelBlack,
                    setF3,
                    getF3,
				}"
			>
				<img src="../assets/img/car/line.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: "",
				tou: "",
				ai: "",
				screan: "",
				lightWhite: "",
				lightBlue: "",
				f1White: "",
				f4: "",
                f2: "",
                light: "",
                wheelWhite: "",
                wheelBlack: "",
                f3: "",
			};
		},
		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 _tou = document.getElementById("tou");
					var _ai = document.getElementById("ai");
					var _lightBlue = document.getElementById("lightBlue");
					var _lightWhite = document.getElementById("lightWhite");
					var _F3 = document.getElementById("F3");
					var _F4 = document.getElementById("F4");
					var _F2 = document.getElementById("F2");
					var _f1White = document.getElementById("f1White");
					var _f1Blue = document.getElementById("f1Blue");
					var _wheelWhite = document.getElementById("wheelWhite");
					var _wheelBlack = document.getElementById("wheelBlack");
					var _light = document.getElementById("light");
                    var _line = document.getElementById("line");
					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 == "tou") {
								binding.value.setPan("tou");
								moveP(nl, nt, "tou");
							}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

						pan();
					};
					function pan() {
						var btn = document.getElementsByClassName("button")[0];
						var right = document.getElementsByClassName("right")[0];

                        var policeL = _wheelWhite.offsetLeft;
                        var policeT = _wheelWhite.offsetTop;

						if (binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							binding.value.getF4() == 1 &&
							binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
                            binding.value.getwheelWhite() == 1 &&
                            binding.value.getwheelBlack() == 1 &&
                            binding.value.getF3() == 1) {
							btn.className = "button dark";
							btn.onclick = function () {
								binding.value.go();
							};
							right.style.display = "block";
							right.style.left = policeL + 535 + "px";
							right.style.top = policeT + 65 + "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 touL = _tou.offsetLeft;
						var touT = _tou.offsetTop;

						var aiL = _ai.offsetLeft;
						var aiT = _ai.offsetTop;

						var lightBlueL = _lightBlue.offsetLeft;
						var lightBlueT = _lightBlue.offsetTop;

						var lightWhiteL = _lightWhite.offsetLeft;
						var lightWhiteT = _lightWhite.offsetTop;

						var f3L = _F3.offsetLeft;
						var f3T = _F3.offsetTop;

						var f4L = _F4.offsetLeft;
						var f4T = _F4.offsetTop;

						var f2L = _F2.offsetLeft;
						var f2T = _F2.offsetTop;

						var f1WhiteL = _f1White.offsetLeft;
						var f1WhiteT = _f1White.offsetTop;

						var f1BlueL = _f1Blue.offsetLeft;
						var f1BlueT = _f1Blue.offsetTop;

						var wheelWhiteL = _wheelWhite.offsetLeft;
						var wheelWhiteT = _wheelWhite.offsetTop;

						var wheelBlackL = _wheelBlack.offsetLeft;
						var wheelBlackT = _wheelBlack.offsetTop;

						var lightL = _light.offsetLeft;
						var lightT = _light.offsetTop;

                        var lineL = _line.offsetLeft;
                        var lineT = _line.offsetTop;

						var firstL = screanL - touL;
						var firstT = screanT - touT;

						var secondL = f3L - aiL;
						var secondT = f3T - aiT;

						var thirdL = f3L - screanL;
						var thirdT = f3T - screanT;

						var fourthL = f1WhiteL - lightWhiteL;
						var fourthT = f1WhiteT - lightWhiteT;

						var fivethL = f1BlueL - lightBlueL;
						var fivethT = f1BlueT - lightBlueT;

						var sixthL = f1BlueL - f1WhiteL;
						var sixthT = f1BlueT - f1WhiteT;

						var seventhL = f1WhiteL - f4L;
						var seventhT = f1WhiteT - f4T;

						var eighthL = f1WhiteL - f2L;
						var eighthT = f1WhiteT - f2T;

                        var nighthL = f2L - lightL;
                        var nighthT = f2T - lightT; 

                        var tenthL = f1WhiteL - wheelWhiteL;
                        var tenthT = f1WhiteT - wheelWhiteT;

                        var eleventhL = f1WhiteL - wheelBlackL;
                        var eleventhT = f1WhiteT - wheelBlackT;
                        
                        var twlevethL = f1WhiteL - f3L;
                        var twlevethT = f1WhiteT - f3T;

						if (
							-70 < firstL &&
							firstL < -15 &&
							33 < firstT &&
							firstT < 106 &&
							type == "tou"
						) {
							_tou.style.left = screanL + 40 + "px";
							_tou.style.top = screanT - 81 + "px";
							binding.value.setTou(1);
							playMusic();
						} else if (type == "tou") {
							binding.value.setTou(0);
						}

						if (
							-170 < secondL &&
							secondL < 42 &&
							-98 < secondT &&
							secondT < 99 &&
							type == "ai"
						) {
							_ai.style.left = f3L + 71 + "px";
							_ai.style.top = f3T - 3 + "px";
							binding.value.setAi(1);
							playMusic();
						} else if (type == "ai") {
							binding.value.setAi(0);
						}

						if (
							-170 < thirdL &&
							thirdL < 32 &&
							-103 < thirdT &&
							thirdT < 115 &&
							type == "screan"
						) {
							_screan.style.left = f3L + 70 + "px";
							_screan.style.top = f3T - 2 + "px";
							if (binding.value.getTou() == 1) {
								_tou.style.left = f3L + 70 + 40 + "px";
								_tou.style.top = f3T - 2 - 81 + "px";
							}
							binding.value.setScrean(1);
							playMusic();
						} else if (type == "screan") {
							binding.value.setScrean(0);
						}

						if (
							-175 < fourthL &&
							fourthL < -11 &&
							-76 < fourthT &&
							fourthT < 14 &&
							type == "lightWhite"
						) {
							_lightWhite.style.left = f1WhiteL + 42 + "px";
							_lightWhite.style.top = f1WhiteT + 28 + "px";
							binding.value.setlightWhite(1);
							playMusic();
						} else if (type == "lightWhite") {
							binding.value.setlightWhite(0);
						}

						if (
							-174 < fivethL &&
							fivethL < 68 &&
							-72 < fivethT &&
							fivethT < 14 &&
							type == "lightBlue"
						) {
							_lightBlue.style.left = f1BlueL + 42 + "px";
							_lightBlue.style.top = f1BlueT + 23 + "px";
							binding.value.setlightBlue(1);
							playMusic();
						} else if (type == "lightBlue") {
							binding.value.setlightBlue(0);
						}

						if (
							-244 < sixthL &&
							sixthL < 310 &&
							-93 < sixthT &&
							sixthT < 121 &&
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							type == "f1White"
						) {
							_f1White.style.left = f1BlueL + 0 + "px";
							_f1White.style.top = f1BlueT + 0 + "px";
							binding.value.setf1White(1);
							playMusic();
						} else if (type == "f1White") {
							binding.value.setf1White(0);
						}

						if (
							-21 < seventhL &&
							seventhL < -3 &&
							-72 < seventhT &&
							seventhT < 126 &&
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							type == "F4"
						) {
							_F4.style.left = f1WhiteL + 12 + "px";
							_F4.style.top = f1WhiteT - 4 + "px";
							binding.value.setF4(1);
							playMusic();
						} else if (type == "F4") {
							binding.value.setF4(0);
						}

						if (
							-250 < eighthL &&
							eighthL < 238 &&
							-88 < eighthT &&
							eighthT < -56 &&
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getF4() == 1 &&
							type == "F2"
						) {
							_F2.style.left = f1WhiteL - 2 + "px";
							_F2.style.top = f1WhiteT + 67 + "px";
							binding.value.setF2(1);
							playMusic();
						} else if (type == "F2") {
							binding.value.setF2(0);
						}

                        if (
							-393 < nighthL &&
							nighthL < -302 &&
							-113 < nighthT &&
							nighthT < -27 &&
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getF4() == 1 &&
                            binding.value.getF2() == 1 &&
							type == "light"
						) {
							_light.style.left = f2L + 354 + "px";
							_light.style.top = f2T + 23 + "px";
							binding.value.setLight(1);
							playMusic();
						} else if (type == "light") {
							binding.value.setLight(0);
						}

                        if (
							-5 < tenthL &&
							tenthL < 28 &&
							-42 < tenthT &&
							tenthT < -9 &&
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getF4() == 1 &&
                            binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
							type == "wheelWhite"
						) {
							_wheelWhite.style.left = f1WhiteL - 11 + "px";
							_wheelWhite.style.top = f1WhiteT + 23 + "px";
							binding.value.setwheelWhite(1);
							playMusic();
						} else if (type == "wheelWhite") {
							binding.value.setwheelWhite(0);
						}
                        if (
							-5 < eleventhL &&
							eleventhL < 28 &&
							-42 < eleventhT &&
							eleventhT < -9 &&
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getF4() == 1 &&
                            binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
                            binding.value.getwheelWhite() == 1 &&
							type == "wheelBlack"
						) {
							_wheelBlack.style.left = f1WhiteL - 11 + "px";
							_wheelBlack.style.top = f1WhiteT + 23 + "px";
							binding.value.setwheelBlack(1);
							playMusic();
						} else if (type == "wheelBlack") {
							binding.value.setwheelBlack(0);
						}

                        if (
							-436 < twlevethL &&
							twlevethL < -152 &&
							-136 < twlevethT &&
							twlevethT < 10 &&
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getF4() == 1 &&
                            binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
                            binding.value.getwheelWhite() == 1 &&
                            binding.value.getwheelBlack() == 1 &&
                            binding.value.getScrean() == 1 &&
                            binding.value.getAi() == 1 &&
                            binding.value.getTou() == 1 &&
							type == "F3"
						) {
							binding.value.setF3(1);
							_line.style.left = f1WhiteL + 73 + "px";
							_line.style.top = f1WhiteT - 22 + "px";
							playMusic();
						} else if (type == "F3") {
							binding.value.setF3(0);
						}
					}
					function playMusic() {
						musicC.play();
					}

					function moveP(nl, nt, type) {
						if (binding.value.getTou() == 1 && type == "screan") {
							_tou.style.left = nl + 40 + "px";
							_tou.style.top = nt - 81 + "px";
						}

						if (binding.value.getAi() == 1 && type == "F3") {
							_ai.style.left = nl + 71 + "px";
							_ai.style.top = nt - 3 + "px";
						}

						if (
							binding.value.getScrean() == 1 &&
							binding.value.getTou() == 1 &&
							type == "F3"
						) {
							_screan.style.left = nl + 70 + "px";
							_screan.style.top = nt - 2 + "px";
							_tou.style.left = nl + 110 + "px";
							_tou.style.top = nt - 83 + "px";
						}

						if (binding.value.getlightWhite() == 1 && type == "f1White") {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
						}

						if (binding.value.getlightBlue() == 1 && type == "f1Blue") {
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
						}

						if (
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							type == "f1White"
						) {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
							_f1Blue.style.left = nl + 0 + "px";
							_f1Blue.style.top = nt + 0 + "px";
						}

						if (
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							binding.value.getF4() == 1 &&
							type == "f1White"
						) {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
							_f1Blue.style.left = nl + 0 + "px";
							_f1Blue.style.top = nt + 0 + "px";
							_F4.style.left = nl + 12 + "px";
							_F4.style.top = nt - 4 + "px";
						}
						if (
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							binding.value.getF4() == 1 &&
							binding.value.getF2() == 1 &&
							type == "f1White"
						) {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
							_f1Blue.style.left = nl + 0 + "px";
							_f1Blue.style.top = nt + 0 + "px";
							_F4.style.left = nl + 12 + "px";
							_F4.style.top = nt - 4 + "px";
							_F2.style.left = nl - 2 + "px";
							_F2.style.top = nt + 67 + "px";
						}
                        if (
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							binding.value.getF4() == 1 &&
							binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
							type == "f1White"
						) {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
							_f1Blue.style.left = nl + 0 + "px";
							_f1Blue.style.top = nt + 0 + "px";
							_F4.style.left = nl + 12 + "px";
							_F4.style.top = nt - 4 + "px";
							_F2.style.left = nl - 2 + "px";
							_F2.style.top = nt + 67 + "px";
                            _light.style.left = nl + 352 + "px";
							_light.style.top = nt + 90 + "px";
						}
                        if (
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							binding.value.getF4() == 1 &&
							binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
                            binding.value.getwheelWhite() == 1 &&
							type == "f1White"
						) {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
							_f1Blue.style.left = nl + 0 + "px";
							_f1Blue.style.top = nt + 0 + "px";
							_F4.style.left = nl + 12 + "px";
							_F4.style.top = nt - 4 + "px";
							_F2.style.left = nl - 2 + "px";
							_F2.style.top = nt + 67 + "px";
                            _light.style.left = nl + 352 + "px";
							_light.style.top = nt + 90 + "px";
                            _wheelWhite.style.left = nl - 11 + "px";
							_wheelWhite.style.top = nt + 23 + "px";
						}

                        if (
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							binding.value.getF4() == 1 &&
							binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
                            binding.value.getwheelWhite() == 1 &&
                            binding.value.getwheelBlack() == 1 &&
							type == "f1White"
						) {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
							_f1Blue.style.left = nl + 0 + "px";
							_f1Blue.style.top = nt + 0 + "px";
							_F4.style.left = nl + 12 + "px";
							_F4.style.top = nt - 4 + "px";
							_F2.style.left = nl - 2 + "px";
							_F2.style.top = nt + 67 + "px";
                            _light.style.left = nl + 352 + "px";
							_light.style.top = nt + 90 + "px";
                            _wheelWhite.style.left = nl - 11 + "px";
							_wheelWhite.style.top = nt + 23 + "px";
                            _wheelBlack.style.left = nl - 11 + "px";
							_wheelBlack.style.top = nt + 23 + "px";
						}
                        if (
							binding.value.getlightWhite() == 1 &&
							binding.value.getlightBlue() == 1 &&
							binding.value.getf1White() == 1 &&
							binding.value.getF4() == 1 &&
							binding.value.getF2() == 1 &&
                            binding.value.getLight() == 1 &&
                            binding.value.getwheelWhite() == 1 &&
                            binding.value.getwheelBlack() == 1 &&
                            binding.value.getF3() == 1 &&
							type == "f1White"
						) {
							_lightWhite.style.left = nl + 42 + "px";
							_lightWhite.style.top = nt + 28 + "px";
							_lightBlue.style.left = nl + 42 + "px";
							_lightBlue.style.top = nt + 23 + "px";
							_f1Blue.style.left = nl + 0 + "px";
							_f1Blue.style.top = nt + 0 + "px";
							_F4.style.left = nl + 12 + "px";
							_F4.style.top = nt - 4 + "px";
							_F2.style.left = nl - 2 + "px";
							_F2.style.top = nt + 67 + "px";
                            _light.style.left = nl + 352 + "px";
							_light.style.top = nt + 90 + "px";
                            _wheelWhite.style.left = nl - 11 + "px";
							_wheelWhite.style.top = nt + 23 + "px";
                            _wheelBlack.style.left = nl - 11 + "px";
							_wheelBlack.style.top = nt + 23 + "px";
                            _line.style.left = nl + 73 + "px";
							_line.style.top = nt -22 + "px";
						}
					}
				},
			},
		},
		methods: {
			go() {
				this.$router.push("/blockly");
			},
			setPan(value) {
				this.panThing = value;
			},
			getPan() {
				return this.panThing;
			},
			setTou(value) {
				this.tou = value;
			},
			getTou() {
				return this.tou;
			},
			setAi(value) {
				this.ai = value;
			},
			getAi() {
				return this.ai;
			},
			setScrean(value) {
				this.screan = value;
			},
			getScrean() {
				return this.screan;
			},
			setlightWhite(value) {
				this.lightWhite = value;
			},
			getlightWhite() {
				return this.lightWhite;
			},
			setlightBlue(value) {
				this.lightBlue = value;
			},
			getlightBlue() {
				return this.lightBlue;
			},
			setf1White(value) {
				this.f1White = value;
			},
			getf1White() {
				return this.f1White;
			},
			setF4(value) {
				this.f4 = value;
			},
			getF4() {
				return this.f4;
			},
            setF2(value) {
				this.f2 = value;
			},
			getF2() {
				return this.f2;
			},
            setLight(value) {
				this.light = value;
			},
			getLight() {
				return this.light;
			},
            setwheelWhite(value) {
				this.wheelWhite = value;
			},
			getwheelWhite() {
				return this.wheelWhite;
			},
            setwheelBlack(value) {
				this.wheelBlack = value;
			},
			getwheelBlack() {
				return this.wheelBlack;
			},
            setF3(value) {
				this.f3 = value;
			},
			getF3() {
				return this.f3;
			},
		},
	};
</script>

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

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

	#screan > img,
	#tou > img,
	#ai > img,
	#lightBlue > img,
	#lightWhite > img,
	#F3 > img,
	#F4 > img,
	#F2 > img,
	#f1White > img,
	#f1Blue > img,
	#wheelWhite > img,
	#wheelBlack > img,
    #line>img,
	#light > 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: 10%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 11;
	}

	#ai {
		width: 150px;
		position: absolute;
		top: 68%;
		left: 10%;
		transform: translateY(-50%);
		z-index: 9;
	}

	#lightBlue {
		width: 240px;
		position: absolute;
		top: 37%;
		left: 23%;
		transform: translateY(-50%);
		z-index: 4;
	}

	#lightWhite {
		width: 240px;
		position: absolute;
		top: 48%;
		left: 23%;
		transform: translateY(-50%);
		z-index: 3;
	}

	#F3 {
		width: 300px;
		position: absolute;
		top: 68%;
		left: 21%;
		transform: translateY(-50%);
		z-index: 8;
	}

	#F4 {
		width: 25px;
		position: absolute;
		top: 68%;
		left: 40%;
		transform: translateY(-50%);
		z-index: 6;
	}

	#F2 {
		width: 480px;
		position: absolute;
		top: 27%;
		left: 41%;
		transform: translateY(-50%);
		z-index: 6;
	}

	#f1White {
		width: 480px;
		position: absolute;
		top: 42%;
		left: 42%;
		transform: translateY(-50%);
		z-index: 5;
	}

	#f1Blue {
		width: 480px;
		position: absolute;
		top: 65%;
		left: 42%;
		transform: translateY(-50%);
		z-index: 3;
	}

	#wheelWhite {
		width: 200px;
		position: absolute;
		top: 37%;
		left: 71%;
		transform: translateY(-50%);
		z-index: 6;
	}

	#wheelBlack {
		width: 200px;
		position: absolute;
		top: 58%;
		left: 71%;
		transform: translateY(-50%);
		z-index: 7;
	}

	#light {
		width: 65px;
		position: absolute;
		top: 72%;
		left: 75%;
		transform: translateY(-50%);
		z-index: 6;
	}

	#tou {
		width: 65px;
		position: absolute;
		top: 37%;
		left: 12%;
		transform: translateY(-50%);
		z-index: 10;
	}

    #line {
		width: 450px;
		position: absolute;
		top: 37%;
		left: 71%;
		transform: translateY(-50%);
		z-index: 3;
	}

	.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>