1

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

src/components/index.vue

@@ -132,7 +132,7 @@
 				res1: [
 					[
 						{ poster: require("../assets/img/qcRobot.png"), path: "" },
-						{ poster: require("../assets/img/necklace.png"), path: "" },
+						{ poster: require("../assets/img/necklace.png"), path: "necklace" },
 						{ poster: require("../assets/img/qiRobot.png"), path: "" },
 						{ poster: require("../assets/img/policeCard.png"), path: "police" },
 					],
@@ -140,7 +140,7 @@
 					[],
 					[{ poster: require("../assets/img/qcRobot.png"), path: "" }],
 					[
-						{ poster: require("../assets/img/necklace.png"), path: "" },
+						{ poster: require("../assets/img/necklace.png"), path: "necklace" },
 						{ poster: require("../assets/img/qiRobot.png"), path: "" },
 					],
 					[{ poster: require("../assets/img/policeCard.png"), path: "police" }],

src/components/necklace.vue

@@ -0,0 +1,651 @@
+<template>
+	<div>
+		<div class="tip">
+			<img src="../assets/img/curtainJs.png" alt="" />
+		</div>
+		<div class="img">
+			<div
+				id="screan"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTou,
+					getTou,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setearphoneJack,
+					getearphoneJack,
+					setearphone,
+					getearphone,
+				}"
+			>
+				<img src="../assets/img/light/screan.png" alt="" />
+			</div>
+			<div
+				id="ai"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTou,
+					getTou,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setearphoneJack,
+					getearphoneJack,
+					setearphone,
+					getearphone,
+				}"
+			>
+				<img src="../assets/img/ai.png" alt="" />
+			</div>
+			<div
+				id="tou"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTou,
+					getTou,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setearphoneJack,
+					getearphoneJack,
+					setearphone,
+					getearphone,
+				}"
+			>
+				<img src="../assets/img/door/tou.png" alt="" />
+			</div>
+			<div
+				id="necklace"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTou,
+					getTou,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setearphoneJack,
+					getearphoneJack,
+					setearphone,
+					getearphone,
+				}"
+			>
+				<img src="../assets/img/necklace/necklace.png" alt="" />
+			</div>
+			<div
+				id="earphoneJack"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTou,
+					getTou,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setearphoneJack,
+					getearphoneJack,
+					setearphone,
+					getearphone,
+				}"
+			>
+				<img src="../assets/img/necklace/earphoneJack.png" alt="" />
+			</div>
+			<div
+				id="earphone"
+				v-drag="{
+					go,
+					setPan,
+					getPan,
+					setTou,
+					getTou,
+					setAi,
+					getAi,
+					setScrean,
+					getScrean,
+					setearphoneJack,
+					getearphoneJack,
+					setearphone,
+					getearphone,
+				}"
+			>
+				<img src="../assets/img/necklace/earphone.png" alt="" />
+			</div>
+		</div>
+		<div class="right"><img src="../assets/img/right.png" alt="" /></div>
+		<div class="button">进入CocoBlockly编程平台</div>
+		<video
+			id="musicC"
+			:src="require('../assets/music/click.mp3')"
+			v-show="false"
+		></video>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				panThing: "",
+				tou: "",
+				ai: "",
+				screan: "",
+				earphoneJack: "",
+				earphone: "",
+			};
+		},
+		directives: {
+			drag: {
+				// 指令的定义
+				inserted: function (el, binding) {
+					// el.drag();
+					console.log(el);
+					//获取元素
+					// var dv = document.getElementById("dv");
+					let x = 0;
+					let y = 0;
+					let l = 0;
+					let t = 0;
+					let isDown = false;
+					var _screan = document.getElementById("screan");
+					var _ai = document.getElementById("ai");
+					var _tou = document.getElementById("tou");
+					var _necklace = document.getElementById("necklace");
+					var _earphoneJack = document.getElementById("earphoneJack");
+					var _earphone = document.getElementById("earphone");
+					var musicC = document.getElementById("musicC");
+
+					//鼠标按下事件
+					el.onmousedown = function (e) {
+						//获取x坐标和y坐标
+						e.preventDefault();
+						x = e.clientX;
+						y = e.clientY;
+
+						//获取左部和顶部的偏移量
+						l = el.offsetLeft;
+						t = el.offsetTop;
+						//开关打开
+						isDown = true;
+						//设置样式
+						el.style.cursor = "move";
+						subiao(el);
+					};
+					function subiao(cdiv) {
+						document.onmousemove = function (e) {
+							if (isDown == false) {
+								return;
+							}
+							//获取x和y
+							var nx = e.clientX;
+							var ny = e.clientY;
+							//计算移动后的左偏移量和顶部的偏移量
+							var nl = nx - (x - l);
+							var nt = ny - (y - t);
+
+							cdiv.style.left = nl + "px";
+							cdiv.style.top = nt + "px";
+
+							if (el.id == "screan") {
+								binding.value.setPan("screan");
+								moveP(nl, nt, "screan");
+							}
+
+							if (el.id == "ai") {
+								binding.value.setPan("ai");
+								moveP(nl, nt, "ai");
+							}
+
+							if (el.id == "tou") {
+								binding.value.setPan("tou");
+								moveP(nl, nt, "tou");
+							}
+
+							if (el.id == "necklace") {
+								binding.value.setPan("necklace");
+								moveP(nl, nt, "necklace");
+							}
+
+							if (el.id == "earphoneJack") {
+								binding.value.setPan("earphoneJack");
+								moveP(nl, nt, "earphoneJack");
+							}
+
+							if (el.id == "earphone") {
+								binding.value.setPan("earphone");
+								moveP(nl, nt, "earphone");
+							}
+						};
+					}
+					//鼠标抬起事件
+					el.onmouseup = function (e) {
+						//开关关闭
+						isDown = false;
+						el.style.cursor = "default";
+						document.onmousemove = null;
+						var nx = e.clientX;
+						var ny = e.clientY;
+						var nl = nx - (x - l);
+						var nt = ny - (y - t);
+
+						if (binding.value.getPan() == "screan") {
+							st(nl, nt, "screan");
+						}
+
+						if (binding.value.getPan() == "ai") {
+							st(nl, nt, "ai");
+						}
+
+						if (binding.value.getPan() == "tou") {
+							st(nl, nt, "tou");
+						}
+
+						if (binding.value.getPan() == "necklace") {
+							st(nl, nt, "necklace");
+						}
+
+						if (binding.value.getPan() == "earphoneJack") {
+							st(nl, nt, "earphoneJack");
+						}
+
+						if (binding.value.getPan() == "earphone") {
+							st(nl, nt, "earphone");
+						}
+
+						pan();
+					};
+					function pan() {
+						var policeL = _necklace.offsetLeft;
+						var policeT = _necklace.offsetTop;
+
+						var btn = document.getElementsByClassName("button")[0];
+						var right = document.getElementsByClassName("right")[0];
+
+						if (
+							binding.value.getTou() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getearphoneJack() == 1 &&
+							binding.value.getearphone() == 1
+						) {
+							btn.className = "button dark";
+							btn.onclick = function () {
+								binding.value.go();
+							};
+							right.style.display = "block";
+							right.style.left = policeL + 390 + "px";
+							right.style.top = policeT - 20 + "px";
+						} else {
+							btn.className = "button";
+							btn.onclick = null;
+							right.style.display = "none";
+						}
+					}
+					function st(nl, nt, type) {
+						var screanL = _screan.offsetLeft;
+						var screanT = _screan.offsetTop;
+
+						var aiL = _ai.offsetLeft;
+						var aiT = _ai.offsetTop;
+
+						var touL = _tou.offsetLeft;
+						var touT = _tou.offsetTop;
+
+						var necklaceL = _necklace.offsetLeft;
+						var necklaceT = _necklace.offsetTop;
+
+						var earphoneJackL = _earphoneJack.offsetLeft;
+						var earphoneJackT = _earphoneJack.offsetTop;
+
+						var earphoneL = _earphone.offsetLeft;
+						var earphoneT = _earphone.offsetTop;
+
+						var firstL = aiL - touL;
+						var firstT = aiT - touT;
+
+						var secondL = necklaceL - aiL;
+						var secondT = necklaceT - aiT;
+
+						var thirdthL = necklaceL - screanL;
+						var thirdthT = necklaceT - screanT;
+
+						var fourthL = screanL - earphoneJackL;
+						var fourthT = screanT - earphoneJackT;
+
+						var fivethL = earphoneJackL - earphoneL;
+						var fivethT = earphoneJackT - earphoneT;
+
+						if (
+							-77 < firstL &&
+							firstL < -10 &&
+							15 < firstT &&
+							firstT < 100 &&
+							type == "tou"
+						) {
+							_tou.style.left = aiL + 40 + "px";
+							_tou.style.top = aiT - 73 + "px";
+							binding.value.setTou(1);
+						} else if (type == "tou") {
+							binding.value.setTou(0);
+						}
+
+						if (
+							-188 < secondL &&
+							secondL < 35 &&
+							-113 < secondT &&
+							secondT < 90 &&
+							type == "ai" &&
+							binding.value.getTou() == 1
+						) {
+							_ai.style.left = necklaceL + 74 + "px";
+							_ai.style.top = necklaceT + 11 + "px";
+							if (binding.value.getTou() == 1) {
+								_tou.style.left = necklaceL + 74 + 40 + "px";
+								_tou.style.top = necklaceT + 11 - 73 + "px";
+							}
+							binding.value.setAi(1);
+						} else if (type == "ai") {
+							binding.value.setAi(0);
+						}
+
+						if (
+							-180 < thirdthL &&
+							thirdthL < 32 &&
+							-108 < thirdthT &&
+							thirdthT < 86 &&
+							type == "screan"
+						) {
+							_screan.style.left = necklaceL + 74 + "px";
+							_screan.style.top = necklaceT + 12 + "px";
+							binding.value.setScrean(1);
+						} else if (type == "screan") {
+							binding.value.setScrean(0);
+						}
+
+						if (
+							-128 < fourthL &&
+							fourthL < -102 &&
+							-96 < fourthT &&
+							fourthT < -28 &&
+							binding.value.getTou() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							type == "earphoneJack"
+						) {
+							_earphoneJack.style.left = screanL + 115 + "px";
+							_earphoneJack.style.top = screanT + 68 + "px";
+							binding.value.setearphoneJack(1);
+						} else if (type == "earphoneJack") {
+							binding.value.setearphoneJack(0);
+						}
+
+						if (
+							-10 < fivethL &&
+							fivethL < 10 &&
+							-56 < fivethT &&
+							fivethT < 84 &&
+							binding.value.getTou() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getearphoneJack() == 1 &&
+							type == "earphone"
+						) {
+							_earphone.style.left = earphoneJackL + 0 + "px";
+							_earphone.style.top = earphoneJackT + 38 + "px";
+							binding.value.setearphone(1);
+						} else if (type == "earphone") {
+							binding.value.setearphone(0);
+						}
+					}
+					function playMusic() {
+						musicC.play();
+					}
+
+					function moveP(nl, nt, type) {
+						if (binding.value.getTou() == 1 && type == "ai") {
+							_tou.style.left = nl + 40 + "px";
+							_tou.style.top = nt - 73 + "px";
+						}
+
+						if (
+							binding.value.getTou() == 1 &&
+							binding.value.getAi() == 1 &&
+							type == "necklace"
+						) {
+							_ai.style.left = nl + 74 + "px";
+							_ai.style.top = nt + 11 + "px";
+							_tou.style.left = nl + 114 + "px";
+							_tou.style.top = nt - 62 + "px";
+						}
+
+						if (binding.value.getScrean() == 1 && type == "necklace") {
+							_screan.style.left = nl + 74 + "px";
+							_screan.style.top = nt + 12 + "px";
+						}
+
+						if (
+							binding.value.getTou() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							type == "necklace"
+						) {
+							_screan.style.left = nl + 74 + "px";
+							_screan.style.top = nt + 12 + "px";
+							_ai.style.left = nl + 74 + "px";
+							_ai.style.top = nt + 11 + "px";
+							_tou.style.left = nl + 114 + "px";
+							_tou.style.top = nt - 62 + "px";
+						}
+
+						if (
+							binding.value.getTou() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getearphoneJack() == 1 &&
+							type == "necklace"
+						) {
+							_screan.style.left = nl + 74 + "px";
+							_screan.style.top = nt + 12 + "px";
+							_ai.style.left = nl + 74 + "px";
+							_ai.style.top = nt + 11 + "px";
+							_tou.style.left = nl + 114 + "px";
+							_tou.style.top = nt - 62 + "px";
+							_earphoneJack.style.left = nl + 189 + "px";
+							_earphoneJack.style.top = nt + 80 + "px";
+						}
+
+						if (
+							binding.value.getTou() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getearphoneJack() == 1 &&
+							binding.value.getearphone() == 1 &&
+							type == "necklace"
+						) {
+							_screan.style.left = nl + 74 + "px";
+							_screan.style.top = nt + 12 + "px";
+							_ai.style.left = nl + 74 + "px";
+							_ai.style.top = nt + 11 + "px";
+							_tou.style.left = nl + 114 + "px";
+							_tou.style.top = nt - 62 + "px";
+							_earphoneJack.style.left = nl + 189 + "px";
+							_earphoneJack.style.top = nt + 80 + "px";
+							_earphone.style.left = nl + 189 + "px";
+							_earphone.style.top = nt + 118 + "px";
+						}
+					}
+				},
+			},
+		},
+		methods: {
+			go() {
+				this.$router.push("/blockly");
+			},
+			setPan(value) {
+				this.panThing = value;
+			},
+			getPan() {
+				return this.panThing;
+			},
+			setTou(value) {
+				this.tou = value;
+			},
+			getTou() {
+				return this.tou;
+			},
+			setAi(value) {
+				this.ai = value;
+			},
+			getAi() {
+				return this.ai;
+			},
+			setScrean(value) {
+				this.screan = value;
+			},
+			getScrean() {
+				return this.screan;
+			},
+			setearphoneJack(value) {
+				this.earphoneJack = value;
+			},
+			getearphoneJack() {
+				return this.earphoneJack;
+			},
+			setearphone(value) {
+				this.earphone = value;
+			},
+			getearphone() {
+				return this.earphone;
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+
+	.tip {
+		margin: 25px 0 30px 20px;
+	}
+
+	#screan > img,
+	#ai > img,
+	#tou > img,
+	#necklace > img,
+	#earphoneJack > img,
+	#earphone > img,
+	.right > img {
+		width: 100%;
+		height: 100%;
+		user-select: none;
+	}
+
+	.img {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		margin: auto;
+		width: 70%;
+		/* position: relative; */
+	}
+
+	#screan {
+		width: 150px;
+		position: absolute;
+		left: 12%;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 4;
+	}
+
+	#ai {
+		width: 150px;
+		position: absolute;
+		top: 50%;
+		left: 25%;
+		transform: translateY(-50%);
+		z-index: 3;
+	}
+
+	#tou {
+		width: 70px;
+		position: absolute;
+		top: 50%;
+		left: 38%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	#necklace {
+		width: 300px;
+		position: absolute;
+		top: 50%;
+		left: 47%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+
+	#earphoneJack {
+		width: 30px;
+		position: absolute;
+		top: 60%;
+		left: 66%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	#earphone {
+		width: 350px;
+		position: absolute;
+		top: 50%;
+		left: 71%;
+		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/router/index.js

@@ -16,6 +16,7 @@ import index from '@/components/index'
 import robot from '@/components/robot'
 import car from '@/components/car'
 import curtain from '@/components/curtain'
+import necklace from '@/components/necklace'
 
 Vue.use(Router).use(ElementUI)
 
@@ -91,6 +92,11 @@ export default new Router({
       path: '/curtain',
       name: 'curtain',
       component: curtain
+    },
+    {
+      path: '/necklace',
+      name: 'necklace',
+      component: necklace
     }
   ]
 })