demo

src/components/tuoDemo.vue

@@ -0,0 +1,399 @@
+<template>
+  <div>
+    <div class="tip">
+      <img src="../assets/img/shop/tips.png" alt="" />
+    </div>
+    <div class="img">
+      <div
+        id="screan"
+        v-drag="{
+          go,
+        }"
+      >
+        <img src="../assets/img/light/screan.png" alt="" />
+      </div>
+      <div
+        id="tou"
+        v-drag="{
+          go,
+        }"
+      >
+        <img src="../assets/img/tou1.png" alt="" />
+      </div>
+      <div
+        id="ai"
+        v-drag="{
+          go,
+        }"
+      >
+        <img src="../assets/img/ai.png" alt="" />
+      </div>
+      <div
+        id="jjj1"
+        v-drag="{
+          go,
+        }"
+      >
+        <img src="../assets/img/shop/j21.png" alt="" />
+      </div>
+      <div
+        id="jjj2"
+        v-drag="{
+          go,
+        }"
+      >
+        <img src="../assets/img/shop/j22.png" alt="" />
+      </div>
+      <div
+        id="police"
+        v-drag="{
+          go,
+        }"
+      >
+        <img src="../assets/img/shop/j1.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: "",
+    };
+  },
+  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("screan");
+        var dv1 = document.getElementById("tou");
+        var dv2 = document.getElementById("ai");
+        var dvj1 = document.getElementById("jjj1");
+        var dvj2 = document.getElementById("jjj2");
+        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 == "jjj1") {
+              binding.value.setPan("jjj1");
+              moveP(nl, nt, 5);
+            }
+
+            if (el.id == "jjj2") {
+              binding.value.setPan("jjj2");
+              moveP(nl, nt, 6);
+            }
+
+            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() == "jjj1") {
+            st(nl, nt, 5);
+          }
+
+          if (binding.value.getPan() == "jjj2") {
+            st(nl, nt, 6);
+          }
+
+          if (binding.value.getPan() == "police") {
+            st(nl, nt, 3);
+          }
+          pan();
+        };
+        function pan() {
+          var pinL = dv.offsetLeft;
+          var pinT = dv.offsetTop;
+
+          var touL = dv1.offsetLeft;
+          var touT = dv1.offsetTop;
+
+          var aiL = dv2.offsetLeft;
+          var aiT = dv2.offsetTop;
+
+          var j1L = dvj1.offsetLeft;
+          var j1T = dvj1.offsetTop;
+
+          var j2L = dvj2.offsetLeft;
+          var j2T = dvj2.offsetTop;
+
+          var policeL = dv3.offsetLeft;
+          var policeT = dv3.offsetTop;
+
+          var btn = document.getElementsByClassName("button")[0];
+          var right = document.getElementsByClassName("right")[0];
+
+          if (0) {
+            btn.className = "button dark";
+            btn.onclick = function () {
+              binding.value.go();
+            };
+            right.style.display = "block";
+            right.style.left = policeL + 335 + "px";
+            right.style.top = policeT + 65 + "px";
+          } else {
+            btn.className = "button";
+            btn.onclick = null;
+            right.style.display = "none";
+          }
+        }
+        function st(nl, nt, type) {
+          var pinL = dv.offsetLeft;
+          var pinT = dv.offsetTop;
+
+          var touL = dv1.offsetLeft;
+          var touT = dv1.offsetTop;
+
+          var aiL = dv2.offsetLeft;
+          var aiT = dv2.offsetTop;
+
+          var j1L = dvj1.offsetLeft;
+          var j1T = dvj1.offsetTop;
+
+          var j2L = dvj2.offsetLeft;
+          var j2T = dvj2.offsetTop;
+
+          var policeL = dv3.offsetLeft;
+          var policeT = dv3.offsetTop;
+
+          var jp1L = j1L - policeL;
+          var jp1T = j1T - policeT;
+
+          var jp2L = j2L - policeL;
+          var jp2T = j2T - policeT;
+
+          var apL = aiL - policeL;
+          var apT = aiT - policeT;
+
+          var ppL = pinL - policeL;
+          var ppT = pinT - policeT;
+
+          var tpL = touL - pinL;
+          var tpT = touT - pinT;
+        }
+        function playMusic() {
+          musicC.play();
+        }
+
+        function moveP(nl, nt, type) {}
+      },
+    },
+  },
+  methods: {
+    go() {
+      this.$router.push("/blockly");
+    },
+    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,
+#jjj1 > img,
+#jjj2 > 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: 130px;
+  position: absolute;
+  left: 10%;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+}
+
+#ai {
+  width: 130px;
+  position: absolute;
+  top: 50%;
+  left: 25%;
+  transform: translateY(-50%);
+  z-index: 3;
+}
+
+#tou {
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+  transform: translateY(-50%);
+  z-index: 4;
+}
+
+#jjj1 {
+  width: 45px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+}
+#jjj2 {
+  width: 45px;
+  position: absolute;
+  left: 58%;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+}
+#police {
+  width: 315px;
+  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/router/index.js

@@ -9,6 +9,7 @@ import camera from '@/components/camera'
 import test from '@/components/test'
 import shop from '@/components/shop'
 import light from '@/components/light'
+import demo from '@/components/tuoDemo'
 
 Vue.use(Router).use(ElementUI)
 
@@ -49,5 +50,11 @@ export default new Router({
       name: 'shop',
       component: shop
     }
+    ,
+    {
+      path: '/demo',
+      name: 'demo',
+      component: demo
+    }
   ]
 })