1

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

src/components/door.vue

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

src/components/police.vue

@@ -1,536 +1,406 @@
 <template>
-  <div>
-    <div class="tip">
-      <img src="../assets/img/tips.png" alt="" />
-    </div>
-    <div class="img">
-      <div
-        id="screan"
-        ref="dv"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
-      >
-        <img src="../assets/img/light/screan.png" alt="" />
-      </div>
-      <div
-        id="tou"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
-      >
-        <img src="../assets/img/tou1.png" alt="" />
-      </div>
-      <div
-        id="ai"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
-      >
-        <img src="../assets/img/ai.png" alt="" />
-      </div>
-      <div
-        id="police"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
-      >
-        <img src="../assets/img/police.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>
+	<div>
+		<div class="tip">
+			<img src="../assets/img/tips.png" alt="" />
+		</div>
+		<div class="img">
+			<div
+				id="screan"
+				ref="dv"
+				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
+			>
+				<img src="../assets/img/light/screan.png" alt="" />
+			</div>
+			<div
+				id="tou"
+				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
+			>
+				<img src="../assets/img/tou1.png" alt="" />
+			</div>
+			<div
+				id="ai"
+				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
+			>
+				<img src="../assets/img/ai.png" alt="" />
+			</div>
+			<div
+				id="police"
+				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
+			>
+				<img src="../assets/img/police.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 {
-      that: this,
-      kkk: 0,
-      ccc: 0,
-      aaa: 0,
-    };
-  },
-  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 Count = 0;
-        let isDown = false;
-        var dv = document.getElementById("screan");
-        var dv1 = document.getElementById("tou");
-        var dv2 = document.getElementById("ai");
-        var dv3 = document.getElementById("police");
-        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, 1);
-            }
-
-            if (el.id == "tou") {
-              binding.value.setPan("tou");
-              moveP(nl, nt, 2);
-            }
-
-            if (el.id == "ai") {
-              binding.value.setPan("ai");
-              moveP(nl, nt, 4);
-            }
-
-            if (el.id == "police") {
-              binding.value.setPan("police");
-              moveP(nl, nt, 3);
-            }
-          };
-        }
-        //鼠标抬起事件
-        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, 1);
-          }
-
-          if (binding.value.getPan() == "tou") {
-            st(nl, nt, 2);
-          }
-
-          if (binding.value.getPan() == "ai") {
-            st(nl, nt, 4);
-          }
-
-          if (binding.value.getPan() == "police") {
-            st(nl, nt, 3);
-          }
-          pan();
-        };
-        function pan() {
-          var _panL = dv.offsetLeft;
-          var _panT = dv.offsetTop;
-
-          var touL = dv1.offsetLeft;
-          var touT = dv1.offsetTop;
-
-          var aiL = dv2.offsetLeft;
-          var aiT = dv2.offsetTop;
-
-          var policeL = dv3.offsetLeft;
-          var policeT = dv3.offsetTop;
-
-          var stL = _panL - touL;
-          var saL = _panL - aiL;
-          var spL = _panL - policeL;
-
-          var stP = _panT - touT;
-          var saP = _panT - aiT;
-          var spP = _panT - policeT;
-
-          var btn = document.getElementsByClassName("button")[0];
-          var right = document.getElementsByClassName("right")[0];
-
-          if (
-            -50 < stL &&
-            stL < -35 &&
-            68 < stP &&
-            stP < 80 &&
-            -5 <= saL &&
-            saL < 8 &&
-            -5 <= saP &&
-            saP < 8 &&
-            47 < spL &&
-            spL < 65 &&
-            -75 < spP &&
-            spP < -62
-          ) {
-            btn.className = "button dark";
-            btn.onclick = function () {
-              binding.value.go();
-            };
-            right.style.display = "block";
-            right.style.left = policeL + 240 + "px";
-            right.style.top = policeT + "px";
-          } else {
-            btn.className = "button";
-            btn.onclick = null;
-            right.style.display = "none";
-          }
-        }
-        function st(nl, nt, type) {
-          var _panL = dv.offsetLeft;
-          var _panT = dv.offsetTop;
-          var touL = dv1.offsetLeft;
-          var touT = dv1.offsetTop;
-
-          var policeL = dv3.offsetLeft;
-          var policeT = dv3.offsetTop;
-
-          var aiL = dv2.offsetLeft;
-          var aiT = dv2.offsetTop;
-
-          var stL = _panL - touL;
-          var stP = _panT - touT;
-
-          var spL = _panL - policeL;
-          var spP = _panT - policeT;
-
-          var saL = _panL - aiL;
-          var saP = _panT - aiT;
-
-          var saL2 = aiL - policeL;
-          var saP2 = aiT - policeT;
-
-          if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40 && type == 4) {
-            dv2.style.left = policeL + 56 + "px";
-            dv2.style.top = policeT - 77 + "px";
-            if (binding.value.getC() == 2) {
-              binding.value.setA(2);
-            } else {
-              binding.value.setA(1);
-            }
-            playMusic();
-          } else if (type == 4) {
-            binding.value.setA(0);
-          }
-
-          if (
-            -70 < stL &&
-            stL < -15 &&
-            45 < stP &&
-            stP < 100 &&
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            type == 1
-          ) {
-            dv.style.left = policeL + 56 + "px";
-            dv.style.top = policeT - 70 + "px";
-
-            dv1.style.left = policeL + 98 + "px";
-            dv1.style.top = policeT - 139 + "px";
-            if (binding.value.getA() == 1) {
-              binding.value.setC(3);
-            } else {
-              binding.value.setC(2);
-              binding.value.setA(0);
-            }
-            playMusic();
-          } else if (
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            type == 1
-          ) {
-            dv.style.left = policeL + 56 + "px";
-            dv.style.top = policeT - 70 + "px";
-
-            if (binding.value.getA() == 1) {
-              binding.value.setC(3);
-            } else {
-              binding.value.setC(1);
-              binding.value.setA(0);
-            }
-            playMusic();
-          } else if (type == 1) {
-            if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40) {
-              binding.value.setA(1);
-            }
-            binding.value.setC(0);
-          }
-
-          if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 2) {
-            dv1.style.left = _panL + 42 + "px";
-            dv1.style.top = _panT - 69 + "px";
-
-            if (binding.value.getA() == 1) {
-              binding.value.setC(3);
-            }
-            if (binding.value.getC() == 1) {
-              binding.value.setC(2);
-            }
-            binding.value.setk(1);
-            playMusic();
-          } else if (type == 2) {
-            if (25 < spL && spL < 85 && -95 < spP && spP < -40) {
-              if (binding.value.getA() == 1) {
-                binding.value.setC(3);
-              } else {
-                binding.value.setC(1);
-              }
-            } else {
-              binding.value.setC(0);
-            }
-            binding.value.setk(0);
-          }
-        }
-        function playMusic() {
-          musicC.play();
-        }
-
-        function moveP(nl, nt, type) {
-          if (binding.value.getK() == 1 && type == 1) {
-            dv1.style.left = nl + 42 + "px";
-            dv1.style.top = nt - 69 + "px";
-          }
-
-          if (binding.value.getC() == 1 && type == 3) {
-            dv.style.left = nl + 56 + "px";
-            dv.style.top = nt - 70 + "px";
-          }
-
-          if (
-            binding.value.getC() == 2 &&
-            type == 3 &&
-            binding.value.getA() != 2
-          ) {
-            dv.style.left = nl + 56 + "px";
-            dv.style.top = nt - 70 + "px";
-
-            dv1.style.left = nl + 98 + "px";
-            dv1.style.top = nt - 139 + "px";
-          } else if (
-            binding.value.getA() == 1 &&
-            type == 3 &&
-            binding.value.getC() != 3
-          ) {
-            dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 77 + "px";
-          } else if (
-            type == 3 &&
-            binding.value.getC() == 3 &&
-            binding.value.getK() == 1
-          ) {
-            dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 77 + "px";
-
-            dv.style.left = nl + 56 + "px";
-            dv.style.top = nt - 70 + "px";
-
-            dv1.style.left = nl + 98 + "px";
-            dv1.style.top = nt - 139 + "px";
-          } else if (
-            type == 3 &&
-            binding.value.getC() == 3 &&
-            binding.value.getK() == 0
-          ) {
-            dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 77 + "px";
-
-            dv.style.left = nl + 56 + "px";
-            dv.style.top = nt - 70 + "px";
-          } else if (
-            binding.value.getA() == 2 &&
-            type == 3 &&
-            binding.value.getC() == 2 &&
-            binding.value.getK() == 1
-          ) {
-            dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 77 + "px";
-
-            dv.style.left = nl + 56 + "px";
-            dv.style.top = nt - 70 + "px";
-
-            dv1.style.left = nl + 98 + "px";
-            dv1.style.top = nt - 139 + "px";
-          } else if (
-            binding.value.getA() == 2 &&
-            type == 3 &&
-            binding.value.getC() == 2 &&
-            binding.value.getK() == 0
-          ) {
-            dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 77 + "px";
-
-            dv.style.left = nl + 56 + "px";
-            dv.style.top = nt - 70 + "px";
-          } else if (
-            binding.value.getA() == 2 &&
-            type == 3 &&
-            binding.value.getC() == 1 &&
-            binding.value.getK() == 0
-          ) {
-            dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 77 + "px";
-
-            dv.style.left = nl + 56 + "px";
-            dv.style.top = nt - 70 + "px";
-          }
-        }
-      },
-    },
-  },
-  methods: {
-    go() {
-      this.$router.push("/blockly");
-    },
-    setk(value) {
-      this.kkk = value;
-    },
-    getK() {
-      return this.kkk;
-    },
-    setC(value) {
-      this.ccc = value;
-    },
-    getC() {
-      return this.ccc;
-    },
-    setA(value) {
-      this.aaa = value;
-    },
-    getA() {
-      return this.aaa;
-    },
-    setPan(value) {
-      this.panThing = value;
-    },
-    getPan() {
-      return this.panThing;
-    },
-  },
-};
+	export default {
+		data() {
+			return {
+				that: this,
+				kkk: 0,
+				ccc: 0,
+				aaa: 0,
+			};
+		},
+		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 Count = 0;
+					let isDown = false;
+					var dv = document.getElementById("screan");
+					var dv1 = document.getElementById("tou");
+					var dv2 = document.getElementById("ai");
+					var dv3 = document.getElementById("police");
+					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, 1);
+							}
+
+							if (el.id == "tou") {
+								binding.value.setPan("tou");
+								moveP(nl, nt, 2);
+							}
+
+							if (el.id == "ai") {
+								binding.value.setPan("ai");
+								moveP(nl, nt, 4);
+							}
+
+							if (el.id == "police") {
+								binding.value.setPan("police");
+								moveP(nl, nt, 3);
+							}
+						};
+					}
+					//鼠标抬起事件
+					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, 1);
+						}
+
+						if (binding.value.getPan() == "tou") {
+							st(nl, nt, 2);
+						}
+
+						if (binding.value.getPan() == "ai") {
+							st(nl, nt, 4);
+						}
+
+						if (binding.value.getPan() == "police") {
+							st(nl, nt, 3);
+						}
+						pan();
+					};
+					function pan() {
+						var _panL = dv.offsetLeft;
+						var _panT = dv.offsetTop;
+
+						var touL = dv1.offsetLeft;
+						var touT = dv1.offsetTop;
+
+						var aiL = dv2.offsetLeft;
+						var aiT = dv2.offsetTop;
+
+						var policeL = dv3.offsetLeft;
+						var policeT = dv3.offsetTop;
+
+						var stL = _panL - touL;
+						var saL = _panL - aiL;
+						var spL = _panL - policeL;
+
+						var stP = _panT - touT;
+						var saP = _panT - aiT;
+						var spP = _panT - policeT;
+
+						var btn = document.getElementsByClassName("button")[0];
+						var right = document.getElementsByClassName("right")[0];
+
+						if (
+							binding.value.getA() == 1 &&
+							binding.value.getC() == 1 &&
+							binding.value.getK() == 1
+						) {
+							btn.className = "button dark";
+							btn.onclick = function () {
+								binding.value.go();
+							};
+							right.style.display = "block";
+							right.style.left = policeL + 240 + "px";
+							right.style.top = policeT + 100 + "px";
+						} else {
+							btn.className = "button";
+							btn.onclick = null;
+							right.style.display = "none";
+						}
+					}
+					function st(nl, nt, type) {
+						var _panL = dv.offsetLeft;
+						var _panT = dv.offsetTop;
+						var touL = dv1.offsetLeft;
+						var touT = dv1.offsetTop;
+
+						var policeL = dv3.offsetLeft;
+						var policeT = dv3.offsetTop;
+
+						var aiL = dv2.offsetLeft;
+						var aiT = dv2.offsetTop;
+
+						var stL = _panL - touL;
+						var stP = _panT - touT;
+
+						var spL = policeL - _panL;
+						var spP = policeT - _panT;
+
+						var saL = _panL - aiL;
+						var saP = _panT - aiT;
+
+						var saL2 = policeL - aiL;
+						var saP2 = policeT - aiT;
+
+						if (
+							-222 < saL2 &&
+							saL2 < 52 &&
+							-33 < saP2 &&
+							saP2 < 240 &&
+							type == 4
+						) {
+							dv2.style.left = policeL + 76 + "px";
+							dv2.style.top = policeT - 105 + "px";
+							binding.value.setA(1);
+							playMusic();
+						} else if (type == 4) {
+							binding.value.setA(0);
+						}
+						if (-203 < spL && spL < 60 && -41 < spP && spP < 254 && type == 1) {
+							dv.style.left = policeL + 75 + "px";
+							dv.style.top = policeT - 109 + "px";
+							binding.value.setC(1);
+							playMusic();
+						} else if (type == 1) {
+							binding.value.setC(0);
+						}
+
+						if (-101 < stL && stL < -34 && 68 < stP && stP < 130 && type == 2) {
+							dv1.style.left = _panL + 61 + "px";
+							dv1.style.top = _panT - 106 + "px";
+							binding.value.setk(1);
+							playMusic();
+						} else if (type == 2) {
+							binding.value.setk(0);
+						}
+					}
+					function playMusic() {
+						musicC.play();
+					}
+
+					function moveP(nl, nt, type) {
+						if (binding.value.getK() == 1 && type == 1) {
+							dv1.style.left = nl + 61 + "px";
+							dv1.style.top = nt - 106 + "px";
+						}
+
+						if (binding.value.getC() == 1 && type == 3) {
+							dv.style.left = nl + 75 + "px";
+							dv.style.top = nt - 109 + "px";
+						}
+
+            if (binding.value.getC() == 1 && binding.value.getA() == 1 && binding.value.getK() == 1 && type == 3) {
+              dv.style.left = nl + 75 + "px";
+							dv.style.top = nt - 109 + "px";
+							dv1.style.left = nl + 140 + "px";
+							dv1.style.top = nt - 214 + "px";
+              dv2.style.left = nl + 76 + "px";
+							dv2.style.top = nt - 105 + "px";
+						}
+
+					}
+				},
+			},
+		},
+		methods: {
+			go() {
+				this.$router.push("/blockly");
+			},
+			setk(value) {
+				this.kkk = value;
+			},
+			getK() {
+				return this.kkk;
+			},
+			setC(value) {
+				this.ccc = value;
+			},
+			getC() {
+				return this.ccc;
+			},
+			setA(value) {
+				this.aaa = value;
+			},
+			getA() {
+				return this.aaa;
+			},
+			setPan(value) {
+				this.panThing = value;
+			},
+			getPan() {
+				return this.panThing;
+			},
+		},
+	};
 </script>
 
 <style scoped>
-html,
-body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.tip {
-  margin: 25px 0 30px 20px;
-  width: 419px;
-}
-
-.tip > img,
-#screan > img,
-#tou > img,
-#ai > img,
-#police > 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: 205px;
-  position: absolute;
-  left: 10%;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 5;
-}
-
-#ai {
-  width: 205px;
-  position: absolute;
-  top: 50%;
-  left: 30%;
-  transform: translateY(-50%);
-  z-index: 3;
-}
-
-#tou {
-  width: 70px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateY(-50%);
-  z-index: 4;
-}
-
-#police {
-  width: 350px;
-  position: absolute;
-  left: 70%;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
-}
-
-.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;
-}
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+
+	.tip {
+		margin: 25px 0 30px 20px;
+		width: 419px;
+	}
+
+	.tip > img,
+	#screan > img,
+	#tou > img,
+	#ai > img,
+	#police > 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: 205px;
+		position: absolute;
+		left: 10%;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 5;
+	}
+
+	#ai {
+		width: 205px;
+		position: absolute;
+		top: 50%;
+		left: 30%;
+		transform: translateY(-50%);
+		z-index: 3;
+	}
+
+	#tou {
+		width: 70px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translateY(-50%);
+		z-index: 4;
+	}
+
+	#police {
+		width: 350px;
+		position: absolute;
+		left: 70%;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	.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/traffic.vue

@@ -1,945 +1,945 @@
 <template>
-  <div>
-    <div class="tip">
-      <img src="../assets/img/shop/tips.png" alt="" />
-    </div>
-    <div class="img">
-      <div
-        id="ai"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/ai.png" alt="" />
-      </div>
-      <div
-        id="light1"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/light1.png" alt="" />
-      </div>
-      <div
-        id="line"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/line.png" alt="" />
-      </div>
-      <div
-        id="light2"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/light2.png" alt="" />
-      </div>
-      <div
-        id="G1"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/G1.png" alt="" />
-      </div>
-      <div
-        id="G5"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/G5.png" alt="" />
-      </div>
-      <div
-        id="G2"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/G2.png" alt="" />
-      </div>
-      <div
-        id="G4"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/G4.png" alt="" />
-      </div>
-      <div
-        id="G3"
-        v-drag="{
-          go,
-          setPan,
-          getPan,
-          setAi,
-          getAi,
-          setG5,
-          getG5,
-          setG4,
-          getG4,
-          setG2,
-          getG2,
-          setG3,
-          getG3,
-          setLight1,
-          getLight1,
-          setLight2,
-          getLight2,
-          setLine,
-          getLine,
-        }"
-      >
-        <img src="../assets/img/traffic/G3.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>
+	<div>
+		<div class="tip">
+			<img src="../assets/img/lightJs.png" alt="" />
+		</div>
+		<div class="img">
+			<div
+				id="ai"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/ai.png" alt="" />
+			</div>
+			<div
+				id="light1"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/light1.png" alt="" />
+			</div>
+			<div
+				id="line"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/line.png" alt="" />
+			</div>
+			<div
+				id="light2"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/light2.png" alt="" />
+			</div>
+			<div
+				id="G1"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/G1.png" alt="" />
+			</div>
+			<div
+				id="G5"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/G5.png" alt="" />
+			</div>
+			<div
+				id="G2"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/G2.png" alt="" />
+			</div>
+			<div
+				id="G4"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/G4.png" alt="" />
+			</div>
+			<div
+				id="G3"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setAi,
+					getAi,
+					setG5,
+					getG5,
+					setG4,
+					getG4,
+					setG2,
+					getG2,
+					setG3,
+					getG3,
+					setLight1,
+					getLight1,
+					setLight2,
+					getLight2,
+					setLine,
+					getLine,
+				}"
+			>
+				<img src="../assets/img/traffic/G3.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 {
-      that: this,
-      panThing: "",
-      ai: "",
-      G5: "",
-      G4: "",
-      G2: "",
-      G3: "",
-      Light1: "",
-      Light2: "",
-      Line: "",
-    };
-  },
-  directives: {
-    drag: {
-      // 指令的定义
-      inserted: function (el, binding) {
-        // el.drag();
-        console.log(el);
-        //获取元素
-        // var dv = document.getElementById("dv");
-        let x = 0;
-        let y = 0;
-        let l = 0;
-        let t = 0;
-        let isDown = false;
-        var _ai = document.getElementById("ai");
-        var _G1 = document.getElementById("G1");
-        var _G5 = document.getElementById("G5");
-        var _G4 = document.getElementById("G4");
-        var _G2 = document.getElementById("G2");
-        var _G3 = document.getElementById("G3");
-        var _light1 = document.getElementById("light1");
-        var _light2 = document.getElementById("light2");
-        var _line = document.getElementById("line");
-
-        //鼠标按下事件
-        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 == "ai") {
-              binding.value.setPan("ai");
-              moveP(nl, nt, "ai");
-            }
-
-            if (el.id == "G1") {
-              binding.value.setPan("G1");
-              moveP(nl, nt, "G1");
-            }
-            if (el.id == "G5") {
-              binding.value.setPan("G5");
-              moveP(nl, nt, "G5");
-            }
-            if (el.id == "G4") {
-              binding.value.setPan("G4");
-              moveP(nl, nt, "G4");
-            }
-            if (el.id == "G2") {
-              binding.value.setPan("G2");
-              moveP(nl, nt, "G2");
-            }
-            if (el.id == "G3") {
-              binding.value.setPan("G3");
-              moveP(nl, nt, "G3");
-            }
-            if (el.id == "light1") {
-              binding.value.setPan("light1");
-              moveP(nl, nt, "light1");
-            }
-            if (el.id == "light2") {
-              binding.value.setPan("light2");
-              moveP(nl, nt, "light2");
-            }
-            if (el.id == "line") {
-              binding.value.setPan("line");
-              moveP(nl, nt, "line");
-            }
-          };
-        }
-        //鼠标抬起事件
-        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() == "ai") {
-            st(nl, nt, "ai");
-          }
-
-          if (binding.value.getPan() == "G1") {
-            st(nl, nt, "G1");
-          }
-
-          if (binding.value.getPan() == "G5") {
-            st(nl, nt, "G5");
-          }
-
-          if (binding.value.getPan() == "G4") {
-            st(nl, nt, "G4");
-          }
-          if (binding.value.getPan() == "G2") {
-            st(nl, nt, "G2");
-          }
-          if (binding.value.getPan() == "G3") {
-            st(nl, nt, "G3");
-          }
-          if (binding.value.getPan() == "light1") {
-            st(nl, nt, "light1");
-          }
-          if (binding.value.getPan() == "light2") {
-            st(nl, nt, "light2");
-          }
-          if (binding.value.getPan() == "line") {
-            st(nl, nt, "line");
-          }
-          pan();
-        };
-        function pan() {
-          var policeL = _G1.offsetLeft;
-          var policeT = _G1.offsetTop;
-
-          var btn = document.getElementsByClassName("button")[0];
-          var right = document.getElementsByClassName("right")[0];
-
-          if (
-            binding.value.getAi() === 1 &&
-            binding.value.getG5() === 1 &&
-            binding.value.getG4() === 1 &&
-            binding.value.getG2() === 1 &&
-            binding.value.getG3() === 1 &&
-            ((binding.value.getLight1() === 1 &&
-              binding.value.getLight2() === 1) ||
-              (binding.value.getLight1() === 2 &&
-                binding.value.getLight2() === 2) ||
-              (binding.value.getLight1() === 2 &&
-                binding.value.getLight2() === 1) ||
-              (binding.value.getLight1() === 1 &&
-                binding.value.getLight2() === 1)) &&
-            binding.value.getLine() === 1
-          ) {
-            btn.className = "button dark";
-            btn.onclick = function () {
-              binding.value.go();
-            };
-            right.style.display = "block";
-            right.style.left = policeL + 300 + "px";
-            right.style.top = policeT + 35 + "px";
-          } else {
-            btn.className = "button";
-            btn.onclick = null;
-            right.style.display = "none";
-          }
-        }
-        function st(nl, nt, type) {
-          var _aiL = _ai.offsetLeft;
-          var _aiT = _ai.offsetTop;
-
-          var _G1L = _G1.offsetLeft;
-          var _G1T = _G1.offsetTop;
-
-          var _G5L = _G5.offsetLeft;
-          var _G5T = _G5.offsetTop;
-
-          var _G4L = _G4.offsetLeft;
-          var _G4T = _G4.offsetTop;
-
-          var _G2L = _G2.offsetLeft;
-          var _G2T = _G2.offsetTop;
-
-          var _G3L = _G3.offsetLeft;
-          var _G3T = _G3.offsetTop;
-
-          var _light1L = _light1.offsetLeft;
-          var _light1T = _light1.offsetTop;
-
-          var _light2L = _light2.offsetLeft;
-          var _light2T = _light2.offsetTop;
-
-          var _lineL = _line.offsetLeft;
-          var _lineT = _line.offsetTop;
-
-          var ag1L = _aiL - _G1L;
-          var ag1T = _aiT - _G1T;
-
-          var g5g1L = _G5L - _G1L;
-          var g5g1T = _G5T - _G1T;
-
-          var g4g1L = _G4L - _G1L;
-          var g4g1T = _G4T - _G1T;
-
-          var g2g1L = _G2L - _G1L;
-          var g2g1T = _G2T - _G1T;
-
-          var g3g1L = _G3L - _G1L;
-          var g3g1T = _G3T - _G1T;
-
-          var l1g1L = _light1L - _G1L;
-          var l1g1T = _light1T - _G1T;
-
-          var l2g1L = _light2L - _G1L;
-          var l2g1T = _light2T - _G1T;
-
-          var lg1L = _lineL - _G1L;
-          var lg1T = _lineT - _G1T;
-
-          var l1lL = _light1L - _lineL;
-          var l1lT = _light1T - _lineT;
-
-          var l2lL = _light2L - _lineL;
-          var l2lT = _light2T - _lineT;
-
-          if (
-            22 < ag1L &&
-            ag1L < 62 &&
-            -156 < ag1T &&
-            ag1T < -116 &&
-            type == "ai"
-          ) {
-            _ai.style.left = _G1L + 42 + "px";
-            _ai.style.top = _G1T - 136 + "px";
-            binding.value.setAi(1);
-            playMusic();
-          } else if (type == "ai") {
-            binding.value.setAi(0);
-          }
-
-          if (
-            -10 < g5g1L &&
-            g5g1L < 30 &&
-            -165 < g5g1T &&
-            g5g1T < -125 &&
-            type == "G5"
-          ) {
-            _G5.style.left = _G1L + 10 + "px";
-            _G5.style.top = _G1T - 145 + "px";
-            binding.value.setG5(1);
-            playMusic();
-          } else if (type == "G5") {
-            binding.value.setG5(0);
-          }
-
-          if (
-            -20 < g4g1L &&
-            g4g1L < 20 &&
-            -58 < g4g1T &&
-            g4g1T < -18 &&
-            type == "G4"
-          ) {
-            _G4.style.left = _G1L + "px";
-            _G4.style.top = _G1T - 38 + "px";
-            binding.value.setG4(1);
-            playMusic();
-          } else if (type == "G4") {
-            binding.value.setG4(0);
-          }
-
-          if (
-            95 < g2g1L &&
-            g2g1L < 135 &&
-            84 < g2g1T &&
-            g2g1T < 124 &&
-            type == "G2"
-          ) {
-            _G2.style.left = _G1L + 115 + "px";
-            _G2.style.top = _G1T + 104 + "px";
-            binding.value.setG2(1);
-            playMusic();
-          } else if (type == "G2") {
-            binding.value.setG2(0);
-          }
-
-          if (
-            24 < g3g1L &&
-            g3g1L < 64 &&
-            87 < g3g1T &&
-            g3g1T < 127 &&
-            type == "G3" &&
-            binding.value.getG2() == 1
-          ) {
-            _G3.style.left = _G1L + 44 + "px";
-            _G3.style.top = _G1T + 107 + "px";
-            binding.value.setG3(1);
-            playMusic();
-          } else if (type == "G3") {
-            binding.value.setG3(0);
-          }
-
-          if (
-            24 < l1g1L &&
-            l1g1L < 64 &&
-            -156 < l1g1T &&
-            l1g1T < -116 &&
-            type == "light1"
-          ) {
-            _light1.style.left = _G1L + 44 + "px";
-            _light1.style.top = _G1T - 136 + "px";
-            binding.value.setLight1(1);
-            playMusic();
-          } else if (
-            24 < l1lL &&
-            l1lL < 64 &&
-            29 < l1lT &&
-            l1lT < 69 &&
-            type == "light1"
-          ) {
-            _light1.style.left = _lineL + 44 + "px";
-            _light1.style.top = _lineT + 49 + "px";
-            binding.value.setLight1(2);
-            playMusic();
-          } else if (type == "light1") {
-            binding.value.setLight1(0);
-          }
-
-          if (
-            -38 < l2g1L &&
-            l2g1L < 8 &&
-            -171 < l2g1T &&
-            l2g1T < -131 &&
-            type == "light2"
-          ) {
-            _light2.style.left = _G1L - 18 + "px";
-            _light2.style.top = _G1T - 151 + "px";
-            binding.value.setLight2(1);
-            playMusic();
-          } else if (
-            -38 < l2lL &&
-            l2lL < 2 &&
-            14 < l2lT &&
-            l2lT < 54 &&
-            type == "light2"
-          ) {
-            _light2.style.left = _lineL - 18 + "px";
-            _light2.style.top = _lineT + 34 + "px";
-            binding.value.setLight2(2);
-            playMusic();
-          } else if (type == "light2") {
-            binding.value.setLight2(0);
-          }
-
-          if (
-            -20 < lg1L &&
-            lg1L < 20 &&
-            -205 < lg1T &&
-            lg1T < -165 &&
-            type == "line" &&
-            (binding.value.getLight1() === 1 ||
-              binding.value.getLight2() === 1 ||
-              binding.value.getLight1() === 2 ||
-              binding.value.getLight2() === 2)
-          ) {
-            _line.style.left = _G1L + "px";
-            _line.style.top = _G1T - 185 + "px";
-            if (
-              binding.value.getLight1() === 2 ||
-              binding.value.getLight1() === 1
-            ) {
-              _light1.style.left = _G1L + 44 + "px";
-              _light1.style.top = _G1T - 136 + "px";
-            }
-            if (
-              binding.value.getLight2() === 2 ||
-              binding.value.getLight2() === 1
-            ) {
-              _light2.style.left = _G1L - 18 + "px";
-              _light2.style.top = _G1T - 151 + "px";
-            }
-            binding.value.setLine(1);
-            playMusic();
-          } else if (type == "line") {
-            binding.value.setLine(0);
-          }
-        }
-        function playMusic() {
-          musicC.play();
-        }
-
-        function moveP(nl, nt, type) {
-          if (binding.value.getAi() === 1 && type == "G1") {
-            _ai.style.left = nl + 42 + "px";
-            _ai.style.top = nt - 136 + "px";
-          }
-
-          if (binding.value.getG5() === 1 && type == "G1") {
-            _G5.style.left = nl + 10 + "px";
-            _G5.style.top = nt - 145 + "px";
-          }
-          if (binding.value.getG4() === 1 && type == "G1") {
-            _G4.style.left = nl + "px";
-            _G4.style.top = nt - 38 + "px";
-          }
-
-          if (binding.value.getG2() === 1 && type == "G1") {
-            _G2.style.left = nl + 115 + "px";
-            _G2.style.top = nt + 104 + "px";
-          }
-
-          if (binding.value.getG3() === 1 && type == "G1") {
-            _G3.style.left = nl + 44 + "px";
-            _G3.style.top = nt + 107 + "px";
-          }
-
-          if (
-            (binding.value.getLight1() === 1 ||
-              (binding.value.getLight1() === 2 &&
-                binding.value.getLine() === 1)) &&
-            type == "G1"
-          ) {
-            _light1.style.left = nl + 44 + "px";
-            _light1.style.top = nt - 136 + "px";
-          }
-
-          if (
-            (binding.value.getLight2() === 1 ||
-              (binding.value.getLight2() === 2 &&
-                binding.value.getLine() === 1)) &&
-            type == "G1"
-          ) {
-            _light2.style.left = nl - 18 + "px";
-            _light2.style.top = nt - 151 + "px";
-          }
-          if (binding.value.getLine() === 1 && type == "G1") {
-            _line.style.left = nl + "px";
-            _line.style.top = nt - 185 + "px";
-          }
-
-          if (binding.value.getLight1() === 2 && type == "line") {
-            _light1.style.left = nl + 44 + "px";
-            _light1.style.top = nt + 49 + "px";
-          }
-
-          if (binding.value.getLight2() === 2 && type == "line") {
-            _light2.style.left = nl - 18 + "px";
-            _light2.style.top = nt + 34 + "px";
-          }
-
-          if (
-            binding.value.getLight1() === 1 &&
-            binding.value.getLine() === 1 &&
-            type == "line"
-          ) {
-            _light1.style.left = nl + 44 + "px";
-            _light1.style.top = nt + 49 + "px";
-            binding.value.setLight1(2);
-          }
-
-          if (
-            binding.value.getLight2() === 1 &&
-            binding.value.getLine() === 1 &&
-            type == "line"
-          ) {
-            _light2.style.left = nl - 18 + "px";
-            _light2.style.top = nt + 34 + "px";
-            binding.value.setLight2(2);
-          }
-        }
-      },
-    },
-  },
-  methods: {
-    go() {
-      this.$router.push("/blockly");
-    },
-    setPan(value) {
-      this.panThing = value;
-    },
-    getPan() {
-      return this.panThing;
-    },
-    setAi(value) {
-      this.ai = value;
-    },
-    getAi() {
-      return this.ai;
-    },
-    setG5(value) {
-      this.G5 = value;
-    },
-    getG5() {
-      return this.G5;
-    },
-    setG4(value) {
-      this.G4 = value;
-    },
-    getG4() {
-      return this.G4;
-    },
-    setG2(value) {
-      this.G2 = value;
-    },
-    getG2() {
-      return this.G2;
-    },
-    setG3(value) {
-      this.G3 = value;
-    },
-    getG3() {
-      return this.G3;
-    },
-    setLight1(value) {
-      this.Light1 = value;
-    },
-    getLight1() {
-      return this.Light1;
-    },
-    setLight2(value) {
-      this.Light2 = value;
-    },
-    getLight2() {
-      return this.Light2;
-    },
-    setLine(value) {
-      this.Line = value;
-    },
-    getLine() {
-      return this.Line;
-    },
-  },
-};
+	export default {
+		data() {
+			return {
+				that: this,
+				panThing: "",
+				ai: "",
+				G5: "",
+				G4: "",
+				G2: "",
+				G3: "",
+				Light1: "",
+				Light2: "",
+				Line: "",
+			};
+		},
+		directives: {
+			drag: {
+				// 指令的定义
+				inserted: function (el, binding) {
+					// el.drag();
+					console.log(el);
+					//获取元素
+					// var dv = document.getElementById("dv");
+					let x = 0;
+					let y = 0;
+					let l = 0;
+					let t = 0;
+					let isDown = false;
+					var _ai = document.getElementById("ai");
+					var _G1 = document.getElementById("G1");
+					var _G5 = document.getElementById("G5");
+					var _G4 = document.getElementById("G4");
+					var _G2 = document.getElementById("G2");
+					var _G3 = document.getElementById("G3");
+					var _light1 = document.getElementById("light1");
+					var _light2 = document.getElementById("light2");
+					var _line = document.getElementById("line");
+
+					//鼠标按下事件
+					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 == "ai") {
+								binding.value.setPan("ai");
+								moveP(nl, nt, "ai");
+							}
+
+							if (el.id == "G1") {
+								binding.value.setPan("G1");
+								moveP(nl, nt, "G1");
+							}
+							if (el.id == "G5") {
+								binding.value.setPan("G5");
+								moveP(nl, nt, "G5");
+							}
+							if (el.id == "G4") {
+								binding.value.setPan("G4");
+								moveP(nl, nt, "G4");
+							}
+							if (el.id == "G2") {
+								binding.value.setPan("G2");
+								moveP(nl, nt, "G2");
+							}
+							if (el.id == "G3") {
+								binding.value.setPan("G3");
+								moveP(nl, nt, "G3");
+							}
+							if (el.id == "light1") {
+								binding.value.setPan("light1");
+								moveP(nl, nt, "light1");
+							}
+							if (el.id == "light2") {
+								binding.value.setPan("light2");
+								moveP(nl, nt, "light2");
+							}
+							if (el.id == "line") {
+								binding.value.setPan("line");
+								moveP(nl, nt, "line");
+							}
+						};
+					}
+					//鼠标抬起事件
+					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() == "ai") {
+							st(nl, nt, "ai");
+						}
+
+						if (binding.value.getPan() == "G1") {
+							st(nl, nt, "G1");
+						}
+
+						if (binding.value.getPan() == "G5") {
+							st(nl, nt, "G5");
+						}
+
+						if (binding.value.getPan() == "G4") {
+							st(nl, nt, "G4");
+						}
+						if (binding.value.getPan() == "G2") {
+							st(nl, nt, "G2");
+						}
+						if (binding.value.getPan() == "G3") {
+							st(nl, nt, "G3");
+						}
+						if (binding.value.getPan() == "light1") {
+							st(nl, nt, "light1");
+						}
+						if (binding.value.getPan() == "light2") {
+							st(nl, nt, "light2");
+						}
+						if (binding.value.getPan() == "line") {
+							st(nl, nt, "line");
+						}
+						pan();
+					};
+					function pan() {
+						var policeL = _G1.offsetLeft;
+						var policeT = _G1.offsetTop;
+
+						var btn = document.getElementsByClassName("button")[0];
+						var right = document.getElementsByClassName("right")[0];
+
+						if (
+							binding.value.getAi() === 1 &&
+							binding.value.getG5() === 1 &&
+							binding.value.getG4() === 1 &&
+							binding.value.getG2() === 1 &&
+							binding.value.getG3() === 1 &&
+							((binding.value.getLight1() === 1 &&
+								binding.value.getLight2() === 1) ||
+								(binding.value.getLight1() === 2 &&
+									binding.value.getLight2() === 2) ||
+								(binding.value.getLight1() === 2 &&
+									binding.value.getLight2() === 1) ||
+								(binding.value.getLight1() === 1 &&
+									binding.value.getLight2() === 1)) &&
+							binding.value.getLine() === 1
+						) {
+							btn.className = "button dark";
+							btn.onclick = function () {
+								binding.value.go();
+							};
+							right.style.display = "block";
+							right.style.left = policeL + 300 + "px";
+							right.style.top = policeT + 35 + "px";
+						} else {
+							btn.className = "button";
+							btn.onclick = null;
+							right.style.display = "none";
+						}
+					}
+					function st(nl, nt, type) {
+						var _aiL = _ai.offsetLeft;
+						var _aiT = _ai.offsetTop;
+
+						var _G1L = _G1.offsetLeft;
+						var _G1T = _G1.offsetTop;
+
+						var _G5L = _G5.offsetLeft;
+						var _G5T = _G5.offsetTop;
+
+						var _G4L = _G4.offsetLeft;
+						var _G4T = _G4.offsetTop;
+
+						var _G2L = _G2.offsetLeft;
+						var _G2T = _G2.offsetTop;
+
+						var _G3L = _G3.offsetLeft;
+						var _G3T = _G3.offsetTop;
+
+						var _light1L = _light1.offsetLeft;
+						var _light1T = _light1.offsetTop;
+
+						var _light2L = _light2.offsetLeft;
+						var _light2T = _light2.offsetTop;
+
+						var _lineL = _line.offsetLeft;
+						var _lineT = _line.offsetTop;
+
+						var ag1L = _G1L - _aiL;
+						var ag1T = _G1T - _aiT;
+
+						var g5g1L = _G1L - _G5L;
+						var g5g1T = _G1T - _G5T;
+
+						var g4g1L = _G4L - _G1L;
+						var g4g1T = _G4T - _G1T;
+
+						var g2g1L = _G1L - _G2L;
+						var g2g1T = _G1T - _G2T;
+
+						var g3g1L = _G3L - _G1L;
+						var g3g1T = _G3T - _G1T;
+
+						var l1g1L = _G1L - _light1L;
+						var l1g1T = _G1T - _light1T;
+
+						var l2g1L = _G1L - _light2L;
+						var l2g1T = _G1T - _light2T;
+
+						var lg1L = _G1L - _lineL;
+						var lg1T = _G1T - _lineT;
+
+						var l1lL = _light1L - _lineL;
+						var l1lT = _light1T - _lineT;
+
+						var l2lL = _light2L - _lineL;
+						var l2lT = _light2T - _lineT;
+
+						if (
+							-189 < ag1L &&
+							ag1L < 85 &&
+							34 < ag1T &&
+							ag1T < 304 &&
+							type == "ai"
+						) {
+							_ai.style.left = _G1L + 51 + "px";
+							_ai.style.top = _G1T - 162 + "px";
+							binding.value.setAi(1);
+							playMusic();
+						} else if (type == "ai") {
+							binding.value.setAi(0);
+						}
+
+						if (
+							-26 < g5g1L &&
+							g5g1L < -5 &&
+							95 < g5g1T &&
+							g5g1T < 353 &&
+							type == "G5"
+						) {
+							_G5.style.left = _G1L + 16 + "px";
+							_G5.style.top = _G1T - 191 + "px";
+							binding.value.setG5(1);
+							playMusic();
+						} else if (type == "G5") {
+							binding.value.setG5(0);
+						}
+
+						if (
+							-20 < g4g1L &&
+							g4g1L < 20 &&
+							-58 < g4g1T &&
+							g4g1T < -18 &&
+							type == "G4"
+						) {
+							_G4.style.left = _G1L + "px";
+							_G4.style.top = _G1T - 38 + "px";
+							binding.value.setG4(1);
+							playMusic();
+						} else if (type == "G4") {
+							binding.value.setG4(0);
+						}
+
+						if (
+							-149 < g2g1L &&
+							g2g1L < -126 &&
+							-413 < g2g1T &&
+							g2g1T < -29 &&
+							type == "G2"
+						) {
+							_G2.style.left = _G1L + 136 + "px";
+							_G2.style.top = _G1T + 123 + "px";
+							binding.value.setG2(1);
+							playMusic();
+						} else if (type == "G2") {
+							binding.value.setG2(0);
+						}
+
+						if (
+							24 < g3g1L &&
+							g3g1L < 64 &&
+							87 < g3g1T &&
+							g3g1T < 127 &&
+							type == "G3" &&
+							binding.value.getG2() == 1
+						) {
+							_G3.style.left = _G1L + 56 + "px";
+							_G3.style.top = _G1T + 121 + "px";
+							binding.value.setG3(1);
+							playMusic();
+						} else if (type == "G3") {
+							binding.value.setG3(0);
+						}
+
+						if (
+							-187 < l1g1L &&
+							l1g1L < 93 &&
+							22 < l1g1T &&
+							l1g1T < 299 &&
+							type == "light1"
+						) {
+							_light1.style.left = _G1L + 54 + "px";
+							_light1.style.top = _G1T - 157 + "px";
+							binding.value.setLight1(1);
+							playMusic();
+						} else if (
+							24 < l1lL &&
+							l1lL < 64 &&
+							29 < l1lT &&
+							l1lT < 69 &&
+							type == "light1"
+						) {
+							_light1.style.left = _lineL + 44 + "px";
+							_light1.style.top = _lineT + 49 + "px";
+							binding.value.setLight1(2);
+							playMusic();
+						} else if (type == "light1") {
+							binding.value.setLight1(0);
+						}
+
+						if (
+							-13 < l2g1L &&
+							l2g1L < 26 &&
+							121 < l2g1T &&
+							l2g1T < 302 &&
+							type == "light2"
+						) {
+							_light2.style.left = _G1L - 11 + "px";
+							_light2.style.top = _G1T - 187 + "px";
+							binding.value.setLight2(1);
+							playMusic();
+						} else if (
+							-38 < l2lL &&
+							l2lL < 2 &&
+							14 < l2lT &&
+							l2lT < 54 &&
+							type == "light2"
+						) {
+							_light2.style.left = _lineL - 18 + "px";
+							_light2.style.top = _lineT + 34 + "px";
+							binding.value.setLight2(2);
+							playMusic();
+						} else if (type == "light2") {
+							binding.value.setLight2(0);
+						}
+
+						if (
+							-20 < lg1L &&
+							lg1L < 10 &&
+							200 < lg1T &&
+							lg1T < 267 &&
+							type == "line" &&
+							(binding.value.getLight1() === 1 ||
+								binding.value.getLight2() === 1 ||
+								binding.value.getLight1() === 2 ||
+								binding.value.getLight2() === 2)
+						) {
+							_line.style.left = _G1L + 5 + "px";
+							_line.style.top = _G1T - 230 + "px";
+							if (
+								binding.value.getLight1() === 2 ||
+								binding.value.getLight1() === 1
+							) {
+								_light1.style.left = _G1L + 54 + "px";
+								_light1.style.top = _G1T - 157 + "px";
+							}
+							if (
+								binding.value.getLight2() === 2 ||
+								binding.value.getLight2() === 1
+							) {
+								_light2.style.left = _G1L - 11 + "px";
+								_light2.style.top = _G1T - 187 + "px";
+							}
+							binding.value.setLine(1);
+							playMusic();
+						} else if (type == "line") {
+							binding.value.setLine(0);
+						}
+					}
+					function playMusic() {
+						musicC.play();
+					}
+
+					function moveP(nl, nt, type) {
+						if (binding.value.getAi() === 1 && type == "G1") {
+							_ai.style.left = nl + 51 + "px";
+							_ai.style.top = nt - 162 + "px";
+						}
+
+						if (binding.value.getG5() === 1 && type == "G1") {
+							_G5.style.left = nl + 16 + "px";
+							_G5.style.top = nt - 191 + "px";
+						}
+						if (binding.value.getG4() === 1 && type == "G1") {
+							_G4.style.left = nl + "px";
+							_G4.style.top = nt - 38 + "px";
+						}
+
+						if (binding.value.getG2() === 1 && type == "G1") {
+							_G2.style.left = nl + 136 + "px";
+							_G2.style.top = nt + 123 + "px";
+						}
+
+						if (binding.value.getG3() === 1 && type == "G1") {
+							_G3.style.left = nl + 56 + "px";
+							_G3.style.top = nt + 121 + "px";
+						}
+
+						if (
+							(binding.value.getLight1() === 1 ||
+								(binding.value.getLight1() === 2 &&
+									binding.value.getLine() === 1)) &&
+							type == "G1"
+						) {
+							_light1.style.left = nl + 54 + "px";
+							_light1.style.top = nt - 157 + "px";
+						}
+
+						if (
+							(binding.value.getLight2() === 1 ||
+								(binding.value.getLight2() === 2 &&
+									binding.value.getLine() === 1)) &&
+							type == "G1"
+						) {
+							_light2.style.left = nl - 11 + "px";
+							_light2.style.top = nt - 187 + "px";
+						}
+						if (binding.value.getLine() === 1 && type == "G1") {
+							_line.style.left = nl + 5 + "px";
+							_line.style.top = nt - 230 + "px";
+						}
+
+						if (binding.value.getLight1() === 2 && type == "line") {
+							_light1.style.left = nl + 44 + "px";
+							_light1.style.top = nt + 49 + "px";
+						}
+
+						if (binding.value.getLight2() === 2 && type == "line") {
+							_light2.style.left = nl - 18 + "px";
+							_light2.style.top = nt + 34 + "px";
+						}
+
+						if (
+							binding.value.getLight1() === 1 &&
+							binding.value.getLine() === 1 &&
+							type == "line"
+						) {
+							_light1.style.left = nl + 44 + "px";
+							_light1.style.top = nt + 49 + "px";
+							binding.value.setLight1(2);
+						}
+
+						if (
+							binding.value.getLight2() === 1 &&
+							binding.value.getLine() === 1 &&
+							type == "line"
+						) {
+							_light2.style.left = nl - 18 + "px";
+							_light2.style.top = nt + 34 + "px";
+							binding.value.setLight2(2);
+						}
+					}
+				},
+			},
+		},
+		methods: {
+			go() {
+				this.$router.push("/blockly");
+			},
+			setPan(value) {
+				this.panThing = value;
+			},
+			getPan() {
+				return this.panThing;
+			},
+			setAi(value) {
+				this.ai = value;
+			},
+			getAi() {
+				return this.ai;
+			},
+			setG5(value) {
+				this.G5 = value;
+			},
+			getG5() {
+				return this.G5;
+			},
+			setG4(value) {
+				this.G4 = value;
+			},
+			getG4() {
+				return this.G4;
+			},
+			setG2(value) {
+				this.G2 = value;
+			},
+			getG2() {
+				return this.G2;
+			},
+			setG3(value) {
+				this.G3 = value;
+			},
+			getG3() {
+				return this.G3;
+			},
+			setLight1(value) {
+				this.Light1 = value;
+			},
+			getLight1() {
+				return this.Light1;
+			},
+			setLight2(value) {
+				this.Light2 = value;
+			},
+			getLight2() {
+				return this.Light2;
+			},
+			setLine(value) {
+				this.Line = value;
+			},
+			getLine() {
+				return this.Line;
+			},
+		},
+	};
 </script>
 
 <style scoped>
-html,
-body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.tip {
-  margin: 25px 0 30px 20px;
-  width: 419px;
-}
-
-.right > img,
-#ai > img,
-#light1 > img,
-#line > img,
-#light2 > img,
-#G1 > img,
-#G5 > img,
-#G4 > img,
-#G2 > img,
-#G3 > img {
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
-
-.img {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin: auto;
-  width: 70%;
-  /* position: relative; */
-}
-
-#ai {
-  width: 170px;
-  position: absolute;
-  top: 45%;
-  left: 20%;
-  transform: translateY(-50%);
-  z-index: 5;
-}
-
-#light1 {
-  width: 165px;
-  position: absolute;
-  top: 65%;
-  left: 20%;
-  transform: translateY(-50%);
-  z-index: 5;
-}
-#line {
-  width: 200px;
-  position: absolute;
-  top: 45%;
-  left: 19.2%;
-  transform: translateY(-50%);
-  z-index: 3;
-}
-#light2 {
-  width: 40px;
-  position: absolute;
-  left: 31%;
-  top: 64%;
-  transform: translateY(-50%);
-  z-index: 6;
-}
-#G1 {
-  width: 235px;
-  position: absolute;
-  left: 38%;
-  top: 56%;
-  transform: translateY(-50%);
-  z-index: 4;
-}
-#G5 {
-  width: 27px;
-  position: absolute;
-  left: 56%;
-  top: 58%;
-  transform: translateY(-50%);
-  z-index: 9;
-}
-
-#G4 {
-  width: 240px;
-  position: absolute;
-  left: 55%;
-  top: 32%;
-  transform: translateY(-50%);
-  z-index: 9;
-}
-#G2 {
-  width: 25px;
-  position: absolute;
-  left: 60%;
-  top: 57%;
-  transform: translateY(-50%);
-  z-index: 6;
-}
-#G3 {
-  width: 170px;
-  position: absolute;
-  left: 65%;
-  top: 58%;
-  transform: translateY(-50%);
-  z-index: 9;
-}
-.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;
-}
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+
+	.tip {
+		margin: 25px 0 30px 20px;
+		width: 419px;
+	}
+
+	.right > img,
+	#ai > img,
+	#light1 > img,
+	#line > img,
+	#light2 > img,
+	#G1 > img,
+	#G5 > img,
+	#G4 > img,
+	#G2 > img,
+	#G3 > img {
+		width: 100%;
+		height: 100%;
+		user-select: none;
+	}
+
+	.img {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		margin: auto;
+		width: 70%;
+		/* position: relative; */
+	}
+
+	#ai {
+		width: 205px;
+		position: absolute;
+		top: 45%;
+		left: 20%;
+		transform: translateY(-50%);
+		z-index: 5;
+	}
+
+	#light1 {
+		width: 205px;
+		position: absolute;
+		top: 65%;
+		left: 20%;
+		transform: translateY(-50%);
+		z-index: 5;
+	}
+	#line {
+		width: 200px;
+		position: absolute;
+		top: 45%;
+		left: 19.2%;
+		transform: translateY(-50%);
+		z-index: 3;
+	}
+	#light2 {
+		width: 40px;
+		position: absolute;
+		left: 31%;
+		top: 64%;
+		transform: translateY(-50%);
+		z-index: 6;
+	}
+	#G1 {
+		width: 280px;
+		position: absolute;
+		left: 38%;
+		top: 56%;
+		transform: translateY(-50%);
+		z-index: 4;
+	}
+	#G5 {
+		width: 27px;
+		position: absolute;
+		left: 56%;
+		top: 58%;
+		transform: translateY(-50%);
+		z-index: 9;
+	}
+
+	#G4 {
+		width: 280px;
+		position: absolute;
+		left: 55%;
+		top: 32%;
+		transform: translateY(-50%);
+		z-index: 9;
+	}
+	#G2 {
+		width: 30px;
+		position: absolute;
+		left: 60%;
+		top: 57%;
+		transform: translateY(-50%);
+		z-index: 6;
+	}
+	#G3 {
+		width: 195px;
+		position: absolute;
+		left: 65%;
+		top: 58%;
+		transform: translateY(-50%);
+		z-index: 9;
+	}
+	.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>