1

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

src/components/car.vue

@@ -0,0 +1,1508 @@
+<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>

src/components/index.vue

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

src/components/tuoDemo.vue

@@ -304,10 +304,8 @@ body {
 
 .tip {
   margin: 25px 0 30px 20px;
-  width: 419px;
 }
 
-.tip > img,
 #screan > img,
 #tou > img,
 #ai > img,

src/router/index.js

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