1

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

src/App.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
 
-    <div style="height: calc(100% - 67.5px)">
+    <div>
       <!-- main 内容 -->
       <keep-alive v-if="$route.meta.keepAlive">
         <!-- 这里是会被缓存的视图组件 -->
@@ -64,6 +64,7 @@ body {
   width: 100%;
   /* background: #e6eaf0; */
   /* min-width: 1380px; */
+  background: #fff;
   min-width: 1000px;
 }
 .head {

src/components/door.vue

@@ -0,0 +1,1403 @@
+<template>
+	<div>
+		<div class="tip">
+			<img src="../assets/img/shop/tips.png" alt="" />
+		</div>
+		<div class="img">
+			<div
+				id="two"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/bTwo.png" alt="" />
+			</div>
+			<div
+				id="three"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/bThree.png" alt="" />
+			</div>
+			<div
+				id="door"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/door.png" alt="" />
+			</div>
+			<div
+				id="jjj1"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/gear.png" alt="" />
+			</div>
+			<div
+				id="jjj2"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/bFour.png" alt="" />
+			</div>
+			<div
+				id="seven"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/bSeven.png" alt="" />
+			</div>
+			<div
+				id="tou"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/tou.png" alt="" />
+			</div>
+			<div
+				id="arm"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/arm.png" alt="" />
+			</div>
+			<div
+				id="screan"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/screan.png" alt="" />
+			</div>
+			<div
+				id="ai"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/ai.png" alt="" />
+			</div>
+			<div
+				id="bottom"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/bottom.png" alt="" />
+			</div>
+			<div
+				id="five"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/bFive.png" alt="" />
+			</div>
+			<div
+				id="six"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTwo,
+					getTwo,
+					setThree,
+					getThree,
+					setFour,
+					getFour,
+					setFive,
+					getFive,
+					setSix,
+					getSix,
+					setSeven,
+					getSeven,
+					setEight,
+					getEight,
+					setNight,
+					getNight,
+					setTen,
+					getTen,
+					setEleven,
+					getEleven,
+					setTwelve,
+					getTwelve,
+					setThirteen,
+					getThirteen,
+				}"
+			>
+				<img src="../assets/img/door/bSix.png" alt="" />
+			</div>
+		</div>
+		<div class="right"><img src="../assets/img/right.png" alt="" /></div>
+		<div class="xian"><img src="../assets/img/door/xian.png" alt="" /></div>
+		<div class="button">进入CocoBlockly编程平台</div>
+		<video
+			id="musicC"
+			:src="require('../assets/music/click.mp3')"
+			v-show="false"
+		></video>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				that: this,
+				panThing: "",
+				two: "",
+				three: "",
+				four: "",
+				five: "",
+				six: "",
+				seven: "",
+				eight: "",
+				night: "",
+				ten: "",
+				eleven: "",
+				twelve: "",
+				thirteen: "",
+			};
+		},
+		directives: {
+			drag: {
+				// 指令的定义
+				inserted: function (el, binding) {
+					// el.drag();
+					console.log(el);
+					//获取元素
+					// var dv = document.getElementById("dv");
+					let x = 0;
+					let y = 0;
+					let l = 0;
+					let t = 0;
+					let isDown = false;
+					var dv = document.getElementById("two");
+					var dv1 = document.getElementById("three");
+					var dv2 = document.getElementById("door");
+					var dvj1 = document.getElementById("jjj1");
+					var dvj2 = document.getElementById("jjj2");
+					var dv3 = document.getElementById("seven");
+					var dv4 = document.getElementById("tou");
+					var dv5 = document.getElementById("arm");
+					var dv6 = document.getElementById("screan");
+					var dv7 = document.getElementById("ai");
+					var dv8 = document.getElementById("bottom");
+					var dv9 = document.getElementById("five");
+					var dv10 = document.getElementById("six");
+					var musicC = document.getElementById("musicC");
+
+					//鼠标按下事件
+					el.onmousedown = function (e) {
+						//获取x坐标和y坐标
+						e.preventDefault();
+						x = e.clientX;
+						y = e.clientY;
+
+						//获取左部和顶部的偏移量
+						l = el.offsetLeft;
+						t = el.offsetTop;
+						//开关打开
+						isDown = true;
+						//设置样式
+						el.style.cursor = "move";
+						subiao(el);
+					};
+					function subiao(cdiv) {
+						document.onmousemove = function (e) {
+							if (isDown == false) {
+								return;
+							}
+							//获取x和y
+							var nx = e.clientX;
+							var ny = e.clientY;
+							//计算移动后的左偏移量和顶部的偏移量
+							var nl = nx - (x - l);
+							var nt = ny - (y - t);
+
+							cdiv.style.left = nl + "px";
+							cdiv.style.top = nt + "px";
+
+							if (el.id == "two") {
+								binding.value.setPan("two");
+								moveP(nl, nt, 1);
+							}
+
+							if (el.id == "three") {
+								binding.value.setPan("three");
+								moveP(nl, nt, 2);
+							}
+
+							if (el.id == "door") {
+								binding.value.setPan("door");
+								moveP(nl, nt, 3);
+							}
+
+							if (el.id == "jjj1") {
+								binding.value.setPan("jjj1");
+								moveP(nl, nt, 4);
+							}
+
+							if (el.id == "jjj2") {
+								binding.value.setPan("jjj2");
+								moveP(nl, nt, 5);
+							}
+							if (el.id == "seven") {
+								binding.value.setPan("seven");
+								moveP(nl, nt, 6);
+							}
+
+							if (el.id == "tou") {
+								binding.value.setPan("tou");
+								moveP(nl, nt, 7);
+							}
+
+							if (el.id == "arm") {
+								binding.value.setPan("arm");
+								moveP(nl, nt, 8);
+							}
+
+							if (el.id == "screan") {
+								binding.value.setPan("screan");
+								moveP(nl, nt, 9);
+							}
+
+							if (el.id == "ai") {
+								binding.value.setPan("ai");
+								moveP(nl, nt, 10);
+							}
+
+							if (el.id == "bottom") {
+								binding.value.setPan("bottom");
+								moveP(nl, nt, 11);
+							}
+
+							if (el.id == "five") {
+								binding.value.setPan("five");
+								moveP(nl, nt, 12);
+							}
+
+							if (el.id == "six") {
+								binding.value.setPan("six");
+								moveP(nl, nt, 13);
+							}
+						};
+					}
+					//鼠标抬起事件
+					el.onmouseup = function (e) {
+						//开关关闭
+						isDown = false;
+						el.style.cursor = "default";
+						document.onmousemove = null;
+						var nx = e.clientX;
+						var ny = e.clientY;
+						var nl = nx - (x - l);
+						var nt = ny - (y - t);
+
+						if (binding.value.getPan() == "two") {
+							st(nl, nt, 1);
+						}
+
+						if (binding.value.getPan() == "three") {
+							st(nl, nt, 2);
+						}
+
+						if (binding.value.getPan() == "door") {
+							st(nl, nt, 3);
+						}
+
+						if (binding.value.getPan() == "jjj1") {
+							st(nl, nt, 4);
+						}
+
+						if (binding.value.getPan() == "jjj2") {
+							st(nl, nt, 5);
+						}
+
+						if (binding.value.getPan() == "seven") {
+							st(nl, nt, 6);
+						}
+
+						if (binding.value.getPan() == "tou") {
+							st(nl, nt, 7);
+						}
+
+						if (binding.value.getPan() == "arm") {
+							st(nl, nt, 8);
+						}
+
+						if (binding.value.getPan() == "screan") {
+							st(nl, nt, 9);
+						}
+
+						if (binding.value.getPan() == "ai") {
+							st(nl, nt, 10);
+						}
+
+						if (binding.value.getPan() == "bottom") {
+							st(nl, nt, 11);
+						}
+
+						if (binding.value.getPan() == "five") {
+							st(nl, nt, 12);
+						}
+
+						if (binding.value.getPan() == "six") {
+							st(nl, nt, 13);
+						}
+
+						pan();
+					};
+					function pan() {
+						var twoL = dv.offsetLeft;
+						var twoP = dv.offsetTop;
+
+						var threeL = dv1.offsetLeft;
+						var threeP = dv1.offsetTop;
+
+						var doorL = dv2.offsetLeft;
+						var doorP = dv2.offsetTop;
+
+						var j1L = dvj1.offsetLeft;
+						var j1T = dvj1.offsetTop;
+
+						var j2L = dvj2.offsetLeft;
+						var j2T = dvj2.offsetTop;
+
+						var sevenL = dv3.offsetLeft;
+						var sevenP = dv3.offsetTop;
+
+						var touL = dv4.offsetLeft;
+						var touP = dv4.offsetTop;
+
+						var armL = dv5.offsetLeft;
+						var armP = dv5.offsetTop;
+
+						var screanL = dv6.offsetLeft;
+						var screanP = dv6.offsetTop;
+
+						var aiL = dv7.offsetLeft;
+						var aiP = dv7.offsetTop;
+
+						var bottomL = dv8.offsetLeft;
+						var bottomP = dv8.offsetTop;
+
+						var nightL = dv9.offsetLeft;
+						var nightP = dv9.offsetTop;
+
+						var tenL = dv10.offsetLeft;
+						var tenP = dv10.offsetTop;
+
+						var btn = document.getElementsByClassName("button")[0];
+						var right = document.getElementsByClassName("right")[0];
+						var xian = document.getElementsByClassName("xian")[0];
+
+						if (
+							binding.value.getTwo() == 1 &&
+							binding.value.getThree() == 1 &&
+							binding.value.getFour() == 1 &&
+							binding.value.getFive() == 1 &&
+							binding.value.getSix() == 1 &&
+							binding.value.getSeven() == 1 &&
+							binding.value.getEight() == 1 &&
+							binding.value.getNight() == 1 &&
+							binding.value.getTen() == 1 &&
+							binding.value.getEleven() == 1 &&
+							binding.value.getTwelve() == 1 &&
+							binding.value.getThirteen() == 1
+						) {
+							btn.className = "button dark";
+							btn.onclick = function () {
+								binding.value.go();
+							};
+							right.style.display = "block";
+							right.style.left = j2L + 335 + "px";
+							right.style.top = j2T + 65 + "px";
+							xian.style.display = "block";
+							xian.style.left = j1L + 74 + "px";
+							xian.style.top = j1T - 30 + "px";
+						} else {
+							btn.className = "button";
+							btn.onclick = null;
+							right.style.display = "none";
+							xian.style.display = "none";
+						}
+					}
+					function st(nl, nt, type) {
+						var twoL = dv.offsetLeft;
+						var twoP = dv.offsetTop;
+
+						var threeL = dv1.offsetLeft;
+						var threeP = dv1.offsetTop;
+
+						var doorL = dv2.offsetLeft;
+						var doorP = dv2.offsetTop;
+
+						var j1L = dvj1.offsetLeft;
+						var j1T = dvj1.offsetTop;
+
+						var j2L = dvj2.offsetLeft;
+						var j2T = dvj2.offsetTop;
+
+						var sevenL = dv3.offsetLeft;
+						var sevenP = dv3.offsetTop;
+
+						var touL = dv4.offsetLeft;
+						var touP = dv4.offsetTop;
+
+						var armL = dv5.offsetLeft;
+						var armP = dv5.offsetTop;
+
+						var screanL = dv6.offsetLeft;
+						var screanP = dv6.offsetTop;
+
+						var aiL = dv7.offsetLeft;
+						var aiP = dv7.offsetTop;
+
+						var bottomL = dv8.offsetLeft;
+						var bottomP = dv8.offsetTop;
+
+						var fiveL = dv9.offsetLeft;
+						var fiveP = dv9.offsetTop;
+
+						var sixL = dv10.offsetLeft;
+						var sixP = dv10.offsetTop;
+
+						var oneL = sixL - twoL;
+						var oneP = sixP - twoP;
+
+						var secondL = sixL - threeL;
+						var secondP = sixP - threeP;
+
+						var thirdL = sixL - fiveL;
+						var thirdP = sixP - fiveP;
+
+						var fourthL = threeL - j2L;
+						var fourthP = threeP - j2T;
+
+						var fivthL = fiveL - j1L;
+						var fivthP = fiveP - j1T;
+
+						var sixthL = j2L - screanL;
+						var sixthP = j2T - screanP;
+
+						var seventhL = j2L - aiL;
+						var seventhP = j2T - aiP;
+
+						var eighthL = j2L - bottomL;
+						var eighthP = j2T - bottomP;
+
+						var nighthL = screanL - touL;
+						var nighthP = screanP - touP;
+
+						var tenthL = doorL - sevenL;
+						var tenthP = doorP - sevenP;
+
+						var eleventhL = sevenL - armL;
+						var eleventhP = sevenP - armP;
+
+						var twelfthL = twoL - doorL;
+						var twelfthP = twoP - doorP;
+
+						if (
+							-59 < oneL &&
+							oneL < -19 &&
+							236 < oneP &&
+							oneP < 274 &&
+							type == 1
+						) {
+							dv.style.left = sixL + 39 + "px";
+							dv.style.top = sixP - 256 + "px";
+							binding.value.setTwo(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 1) {
+							binding.value.setTwo(0);
+						}
+						if (
+							-426 < secondL &&
+							secondL < -386 &&
+							236 < secondP &&
+							secondP < 278 &&
+							type == 2
+						) {
+							dv1.style.left = sixL + 406 + "px";
+							dv1.style.top = sixP - 256 + "px";
+							binding.value.setThree(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 2) {
+							binding.value.setThree(0);
+						}
+						if (
+							-17 < thirdL &&
+							thirdL < 23 &&
+							489 < thirdP &&
+							thirdP < 529 &&
+							type == 12 &&
+							binding.value.getTwo() == 1 &&
+							binding.value.getThree() == 1
+						) {
+							dv9.style.left = sixL + 3 + "px";
+							dv9.style.top = sixP - 509 + "px";
+							binding.value.setFour(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 12) {
+							binding.value.setFour(0);
+						}
+						if (
+							-61 < twelfthL &&
+							twelfthL < -13 &&
+							-37 < twelfthP &&
+							twelfthP < 43 &&
+							type == 3 &&
+							binding.value.getTwo() == 1 &&
+							binding.value.getThree() == 1 &&
+							binding.value.getFour() == 1
+						) {
+							dv2.style.left = twoL + 24 + "px";
+							dv2.style.top = twoP - 6 + "px";
+							if (binding.value.getSeven() == 1) {
+								dv3.style.left = twoL + 24 + 39 + "px";
+								dv3.style.top = twoP - 6 - 222 + "px";
+							}
+							if (binding.value.getEight() == 1 && binding.value.getSeven() == 1) {
+								dv5.style.left = twoL + 24 + 4 + "px";
+								dv5.style.top = twoP - 6 - 242 + "px";
+							}
+							binding.value.setFive(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 3) {
+							binding.value.setFive(0);
+						}
+						if (
+							-47 < fourthL &&
+							fourthL < 272 &&
+							-451 < fourthP &&
+							fourthP < -30 &&
+							type == 5
+						) {
+							dvj2.style.left = twoL + 385 + "px";
+							dvj2.style.top = twoP + 65 + "px";
+							if (binding.value.getThirteen() == 1) {
+								dv6.style.left = twoL + 385 + 53 + "px";
+								dv6.style.top = twoP + 65 - 70 + "px";
+								if (binding.value.getTwelve() == 1) {
+									dv4.style.left = twoL + 385 + 54 + 61 + "px";
+									dv4.style.top = twoP + 65 - 70 - 100 + "px";
+								}
+							}
+							if (binding.value.getEleven() == 1) {
+								dv7.style.left = twoL + 385 + 53 + "px";
+								dv7.style.top = twoP + 65 - 70 + "px";
+							}
+							if (binding.value.getTen() == 1) {
+								dv8.style.left = twoL + 385 + 53 + "px";
+								dv8.style.top = twoP + 65 - 70 + "px";
+							}
+							binding.value.setSix(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 5) {
+							binding.value.setSix(0);
+						}
+						if (
+							-52 < tenthL &&
+							tenthL < -28 &&
+							173 < tenthP &&
+							tenthP < 257 &&
+							type == 6
+						) {
+							dv3.style.left = doorL + 39 + "px";
+							dv3.style.top = doorP - 227 + "px";
+							if (binding.value.getEight() == 1) {
+								dv5.style.left = doorL + 39 - 36 + "px";
+								dv5.style.top = doorP - 227 - 20 + "px";
+							}
+							binding.value.setSeven(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 6) {
+							binding.value.setSeven(0);
+						}
+						if (
+							-27 < eleventhL &&
+							eleventhL < 62 &&
+							3 < eleventhP &&
+							eleventhP < 32 &&
+							type == 8
+						) {
+							dv5.style.left = sevenL - 36 + "px";
+							dv5.style.top = sevenP - 20 + "px";
+							binding.value.setEight(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 8) {
+							binding.value.setEight(0);
+						}
+						if (
+							-67 < fivthL &&
+							fivthL < 34 &&
+							-2 < fivthP &&
+							fivthP < 71 &&
+							type == 4 &&
+							binding.value.getFour() == 1
+						) {
+							dvj1.style.left = fiveL + 5 + "px";
+							dvj1.style.top = fiveP - 33 + "px";
+							dvj1.style.zIndex = 1;
+							binding.value.setNight(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 4) {
+							binding.value.setNight(0);
+						}
+						if (
+							-206 < eighthL &&
+							eighthL < 100 &&
+							-66 < eighthP &&
+							eighthP < 204 &&
+							type == 11
+						) {
+							dv8.style.left = j2L + 49 + "px";
+							dv8.style.top = j2T - 70 + "px";
+							binding.value.setTen(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 11) {
+							binding.value.setTen(0);
+						}
+						if (
+							-206 < seventhL &&
+							seventhL < 100 &&
+							-66 < seventhP &&
+							seventhP < 204 &&
+							type == 10
+						) {
+							dv7.style.left = j2L + 54 + "px";
+							dv7.style.top = j2T - 70 + "px";
+							binding.value.setEleven(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 10) {
+							binding.value.setEleven(0);
+						}
+						if (
+							-82 < nighthL &&
+							nighthL < -19 &&
+							63 < nighthP &&
+							nighthP < 124 &&
+							type == 7
+						) {
+							dv4.style.left = screanL + 61 + "px";
+							dv4.style.top = screanP - 100 + "px";
+							binding.value.setTwelve(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 7) {
+							binding.value.setTwelve(0);
+						}
+						if (
+							-206 < sixthL &&
+							sixthL < 100 &&
+							-66 < sixthP &&
+							sixthP < 204 &&
+							type == 9
+						) {
+							dv6.style.left = j2L + 54 + "px";
+							dv6.style.top = j2T - 70 + "px";
+							if (binding.value.getTwelve() == 1) {
+								dv4.style.left = j2L + 54 + 61 + "px";
+								dv4.style.top = j2T - 70 - 100 + "px";
+							}
+							binding.value.setThirteen(1); //设置第一个j2可以跟着j1一起动
+							playMusic();
+						} else if (type == 9) {
+							binding.value.setThirteen(0);
+						}
+					}
+					function playMusic() {
+						musicC.play();
+					}
+
+					function moveP(nl, nt, type) {
+						if (binding.value.getTwo() == 1 && type == 13) {
+							dv.style.left = nl + 39 + "px";
+							dv.style.top = nt - 256 + "px";
+						}
+						if (binding.value.getThree() == 1 && type == 13) {
+							dv1.style.left = nl + 406 + "px";
+							dv1.style.top = nt - 256 + "px";
+						}
+						if (binding.value.getFour() == 1 && type == 13) {
+							dv9.style.left = nl + 3 + "px";
+							dv9.style.top = nt - 509 + "px";
+						}
+						if (binding.value.getFive() == 1 && type == 13) {
+							dv2.style.left = nl + 63 + "px";
+							dv2.style.top = nt - 262 + "px";
+						}
+						if (binding.value.getSix() == 1 && type == 13) {
+							dvj2.style.left = nl + 424 + "px";
+							dvj2.style.top = nt - 191 + "px";
+						}
+						if (
+							binding.value.getSeven() == 1 &&
+							binding.value.getEight() == 1 &&
+							type == 3
+						) {
+							dv3.style.left = nl + 39 + "px";
+							dv3.style.top = nt - 225 + "px";
+							dv5.style.left = nl + 3 + "px";
+							dv5.style.top = nt - 245 + "px";
+						}
+						if (
+							binding.value.getSeven() == 1 &&
+							binding.value.getEight() == 1 &&
+							type == 13
+						) {
+							dv3.style.left = nl + 102 + "px";
+							dv3.style.top = nt - 489 + "px";
+							dv5.style.left = nl + 66 + "px";
+							dv5.style.top = nt - 509 + "px";
+						}
+						if (binding.value.getEight() == 1 && type == 6) {
+							dv5.style.left = nl - 36 + "px";
+							dv5.style.top = nt - 17 + "px";
+						}
+						if (binding.value.getNight() == 1 && type == 13) {
+							dvj1.style.left = nl + 8 + "px";
+							dvj1.style.top = nt - 542 + "px";
+						}
+						if (binding.value.getTen() == 1 && type == 13) {
+							dv8.style.left = nl + 477 + "px";
+							dv8.style.top = nt - 261 + "px";
+						}
+						if (binding.value.getEleven() == 1 && type == 13) {
+							dv7.style.left = nl + 477 + "px";
+							dv7.style.top = nt - 261 + "px";
+						}
+						if (binding.value.getThirteen() == 1 && type == 13) {
+							dv6.style.left = nl + 477 + "px";
+							dv6.style.top = nt - 261 + "px";
+						}
+						if (binding.value.getTwelve() == 1 && type == 9) {
+							dv4.style.left = nl + 61 + "px";
+							dv4.style.top = nt - 100 + "px";
+						}
+						if (binding.value.getThirteen() == 1 && type == 13) {
+							dv4.style.left = nl + 538 + "px";
+							dv4.style.top = nt - 361 + "px";
+						}
+						if (binding.value.getTen() == 1 && type == 5) {
+							dv8.style.left = nl + 53 + "px";
+							dv8.style.top = nt - 70 + "px";
+						}
+						if (binding.value.getThirteen() == 1 && type == 5) {
+							dv6.style.left = nl + 53 + "px";
+							dv6.style.top = nt - 70 + "px";
+						}
+						if (binding.value.getEleven() == 1 && type == 5) {
+							dv7.style.left = nl + 53 + "px";
+							dv7.style.top = nt - 70 + "px";
+						}
+						if (
+							binding.value.getTwelve() == 1 &&
+							binding.value.getThirteen() == 1 &&
+							type == 5
+						) {
+							dv4.style.left = nl + 114 + "px";
+							dv4.style.top = nt - 170 + "px";
+						}
+						if (binding.value.getEight() == 1 && type == 6) {
+							dv5.style.left = nl - 36 + "px";
+							dv5.style.top = nt - 20 + "px";
+						}
+					}
+				},
+			},
+		},
+		methods: {
+			go() {
+				this.$router.push("/blockly");
+			},
+			setPan(value) {
+				this.panThing = value;
+			},
+			getPan() {
+				return this.panThing;
+			},
+			setTwo(value) {
+				this.two = value;
+			},
+			getTwo() {
+				return this.two;
+			},
+			setThree(value) {
+				this.three = value;
+			},
+			getThree() {
+				return this.three;
+			},
+			setFour(value) {
+				this.four = value;
+			},
+			getFour() {
+				return this.four;
+			},
+			setFive(value) {
+				this.five = value;
+			},
+			getFive() {
+				return this.five;
+			},
+			setSix(value) {
+				this.six = value;
+			},
+			getSix() {
+				return this.six;
+			},
+			setSeven(value) {
+				this.seven = value;
+			},
+			getSeven() {
+				return this.seven;
+			},
+			setEight(value) {
+				this.eight = value;
+			},
+			getEight() {
+				return this.eight;
+			},
+			setNight(value) {
+				this.night = value;
+			},
+			getNight() {
+				return this.night;
+			},
+			setTen(value) {
+				this.ten = value;
+			},
+			getTen() {
+				return this.ten;
+			},
+			setEleven(value) {
+				this.eleven = value;
+			},
+			getEleven() {
+				return this.eleven;
+			},
+			setTwelve(value) {
+				this.twelve = value;
+			},
+			getTwelve() {
+				return this.twelve;
+			},
+			setThirteen(value) {
+				this.thirteen = value;
+			},
+			getThirteen() {
+				return this.thirteen;
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+
+	.tip {
+		margin: 25px 0 30px 20px;
+		width: 419px;
+	}
+
+	.tip > img,
+	#two > img,
+	#door > img,
+	#three > img,
+	#seven > img,
+	.right > img,
+	.xian > img,
+	#jjj1 > img,
+	#jjj2 > img,
+	#tou > img,
+	#arm > img,
+	#screan > img,
+	#ai > img,
+	#bottom > img,
+	#five > img,
+	#six > img {
+		width: 100%;
+		height: 100%;
+		user-select: none;
+	}
+
+	.img {
+		flex-direction: row;
+		justify-content: flex-end;
+		margin: auto;
+		width: 70%;
+		/* position: relative; */
+	}
+
+	#two {
+		width: 45px;
+		position: absolute;
+		left: 10%;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	#door {
+		width: 368px;
+		position: absolute;
+		top: 50%;
+		left: 25%;
+		transform: translateY(-50%);
+		z-index: 3;
+	}
+
+	#three {
+		width: 56px;
+		position: absolute;
+		top: 50%;
+		left: 15%;
+		transform: translateY(-50%);
+		z-index: 4;
+	}
+
+	#jjj1 {
+		width: 100px;
+		position: absolute;
+		left: 47%;
+		top: 63%;
+		transform: translateY(-50%);
+		z-index: 3;
+	}
+	#jjj2 {
+		width: 299px;
+		position: absolute;
+		left: 47%;
+		top: 47%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+	#seven {
+		width: 53px;
+		position: absolute;
+		left: 50%;
+		top: 75%;
+		transform: translateY(-50%);
+		z-index: 6;
+	}
+
+	#tou {
+		width: 85px;
+		position: absolute;
+		left: 54%;
+		top: 75%;
+		transform: translateY(-50%);
+		z-index: 11;
+	}
+	#arm {
+		width: 105px;
+		position: absolute;
+		left: 59%;
+		top: 75%;
+		transform: translateY(-50%);
+		z-index: 6;
+	}
+	#screan {
+		width: 205px;
+		position: absolute;
+		left: 67%;
+		top: 75%;
+		transform: translateY(-50%);
+		z-index: 11;
+	}
+	#ai {
+		width: 205px;
+		position: absolute;
+		left: 67%;
+		top: 56%;
+		transform: translateY(-50%);
+		z-index: 10;
+	}
+	#bottom {
+		width: 210px;
+		position: absolute;
+		left: 67%;
+		top: 37%;
+		transform: translateY(-50%);
+		z-index: 9;
+	}
+	#five {
+		width: 490px;
+		position: absolute;
+		left: 13%;
+		top: 80%;
+		transform: translateY(-50%);
+		z-index: 5;
+	}
+	#six {
+		width: 760px;
+		position: absolute;
+		left: 13%;
+		top: 85%;
+		transform: translateY(-50%);
+		z-index: 99;
+	}
+
+	.button {
+		color: #fff;
+		background: #8ca1de;
+		width: 550px;
+		height: 55px;
+		font-size: 20px;
+		text-align: center;
+		line-height: 55px;
+		position: absolute;
+		bottom: 5%;
+		left: 50%;
+		transform: translateX(-50%);
+		user-select: none;
+	}
+
+	.right {
+		width: 40px;
+		position: absolute;
+		left: 55%;
+		top: 70%;
+		display: none;
+	}
+
+	.xian {
+		width: 500px;
+		position: absolute;
+		left: 55%;
+		top: 70%;
+		z-index: 0;
+		display: none;
+	}
+
+	.dark {
+		background: #5b79d0;
+		cursor: pointer;
+	}
+</style>

src/components/index.vue

@@ -0,0 +1,132 @@
+<template>
+	<div style="background: #fff;">
+		<div class="one">
+			<div class="class"><img src="../assets/img/class.png" alt="" /></div>
+			<div class="grade"><img src="../assets/img/grade.png" alt="" /></div>
+		</div>
+		<div class="two">
+			<div class="all" :class="{'active' : type == 0}" @click="type = 0"><img src="../assets/img/all.png" alt="" /></div>
+			<div class="first" :class="{'active' : type == 1}" @click="type = 1"><img src="../assets/img/first.png" alt="" /></div>
+			<div class="second" :class="{'active' : type == 2}" @click="type = 2"><img src="../assets/img/second.png" alt="" /></div>
+			<div class="third" :class="{'active' : type == 3}" @click="type = 3"><img src="../assets/img/third.png" alt="" /></div>
+			<div class="fourth" :class="{'active' : type == 4}" @click="type = 4"><img src="../assets/img/fourth.png" alt="" /></div>
+			<div class="fiveth" :class="{'active' : type == 5}" @click="type = 5"><img src="../assets/img/fiveth.png" alt="" /></div>
+			<div class="sixth" :class="{'active' : type == 6}" @click="type = 6"><img src="../assets/img/sixth.png" alt="" /></div>
+		</div>
+		<div class="three">
+			<div class="light" @click="light"><img src="../assets/img/light.png" alt="" /></div>
+			<div class="door" @click="door"><img src="../assets/img/door.png" alt="" /></div>
+			<div class="curtain"><img src="../assets/img/curtain.png" alt="" /></div>
+			<div class="robot"><img src="../assets/img/robot.png" alt="" /></div>
+			<div class="car"><img src="../assets/img/car.png" alt="" /></div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+                type: 0,
+            };
+		},
+		directives: {
+			drag: {},
+		},
+		methods: {
+            light(){
+                window.location.href = '../#/light'
+            },
+            door(){
+                window.location.href = '../#/door'
+            },
+        },
+	};
+</script>
+
+<style scoped>
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+
+	.one {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.class {
+		margin: 30px 0 0 35px;
+		width: 250px;
+	}
+
+	.grade {
+		margin: 30px 35px 0 0;
+		width: 110px;
+	}
+
+    .active{
+        opacity: 1 !important;
+    }
+
+	.two {
+		margin: 10px 0 0 55px;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+	}
+
+	.three {
+		width: 1465px;
+		display: flex;
+		-webkit-box-orient: horizontal;
+		-webkit-box-direction: normal;
+		flex-direction: row;
+		margin: 50px 0 0 35px;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+
+	.all,
+	.first,
+	.second,
+	.third,
+	.fourth,
+	.fiveth,
+	.sixth {
+		width: 115px;
+		margin-right: 30px;
+        cursor: pointer;
+        opacity: 0.5;
+	}
+
+	.light,
+	.door,
+	.curtain,
+	.robot,
+	.car {
+		    width: 380px;
+		margin: 0 60px 40px 0;
+        cursor: pointer;
+	}
+
+	.class > img,
+	.grade > img,
+	.all > img,
+	.first > img,
+	.second > img,
+	.third > img,
+	.fourth > img,
+	.fiveth > img,
+	.sixth > img,
+	.light > img,
+	.door > img,
+	.curtain > img,
+	.robot > img,
+	.car > img {
+		width: 100%;
+	}
+</style>

src/router/index.js

@@ -10,6 +10,8 @@ import test from '@/components/test'
 import shop from '@/components/shop'
 import light from '@/components/light'
 import demo from '@/components/tuoDemo'
+import door from '@/components/door'
+import index from '@/components/index'
 
 Vue.use(Router).use(ElementUI)
 
@@ -49,12 +51,21 @@ export default new Router({
       path: '/shop',
       name: 'shop',
       component: shop
-    }
-    ,
+    },
     {
       path: '/demo',
       name: 'demo',
       component: demo
+    },
+    {
+      path: '/door',
+      name: 'door',
+      component: door
+    },
+    {
+      path: '/index',
+      name: 'index',
+      component: index
     }
   ]
 })