function

src/components/function.vue

@@ -1,18 +1,133 @@
 <template>
-<div>
-    执行函数
-</div>
+  <div style="width: 100%; height: 100%">
+    <div class="img">
+      <div class="controlZ">
+        <div id="screan" ref="dv">
+          <img src="../assets/img/screan.png" alt="" />
+        </div>
+        <div id="tou" ref="dv1">
+          <img src="../assets/img/tou.png" alt="" />
+        </div>
+        <div id="ai" ref="dv2">
+          <img src="../assets/img/ai.png" alt="" />
+        </div>
+        <div id="police" ref="dv2">
+          <img src="../assets/img/police.png" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   data() {
     return {
-
-    }
-  }
-}
+      that: this,
+    };
+  },
+  methods: {},
+};
 </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-start;
+  align-items: center;
+  /* margin: auto; */
+  width: 100%;
+  height: 100%;
+  position: relative;
+  /* position: relative; */
+}
+
+#screan {
+  width: 130px;
+  position: absolute;
+  z-index: 4;
+  top: 85px;
+  left: 55.3px;
+}
+
+#ai {
+  width: 130px;
+  position: absolute;
+  z-index: 1;
+  top: 82px;
+  left: 55.3px;
+}
+
+#tou {
+  width: 45px;
+  position: absolute;
+  z-index: 3;
+  top: 56px;
+  left: 97.5px;
+}
+
+#police {
+  width: 240px;
+  position: absolute;
+  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;
+}
+
+.controlZ{
+        position: absolute;
+    width: 240px;
+    height: 450px;
+    margin-left: 10%;
+}
 </style>

src/components/police.vue

@@ -197,7 +197,7 @@ export default {
             dv.style.top = nt + 73 + "px";
 
             dv2.style.left = nl - 42 + "px";
-            dv2.style.top = nt + 73 + "px";
+            dv2.style.top = nt + 66 + "px";
 
             dv3.style.left = nl - 98 + "px";
             dv3.style.top = nt + 143 + "px";
@@ -222,7 +222,7 @@ export default {
             dv1.style.top = nt - 73 + "px";
 
             dv2.style.left = nl + "px";
-            dv2.style.top = nt + "px";
+            dv2.style.top = nt-7 + "px";
 
             dv3.style.left = nl - 56 + "px";
             dv3.style.top = nt + 70 + "px";
@@ -284,7 +284,7 @@ export default {
             dv1.style.top = nt - 143 + "px";
 
             dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 70 + "px";
+            dv2.style.top = nt - 76 + "px";
           }
 
           if (