function

src/components/function.vue

@@ -9,16 +9,16 @@
           <video
             ref="video"
             id="video_cam"
-            width="180"
-            height="180"
+            width="265"
+            height="212"
             class="face"
             autoplay
             v-show="isCamera"
           ></video>
           <canvas
             ref="canvasDOM"
-            width="180"
-            height="144"
+           width="265"
+            height="212"
             class="kuang"
             v-show="isCamera"
           ></canvas>
@@ -131,7 +131,7 @@ export default {
             canvasContext.clearRect(0, 0, canvas.width, canvas.height);
             event.data.forEach(function ({ x, y, width, height }) {
               canvasContext.strokeStyle = "#FFFF";
-              canvasContext.strokeRect(x, y, width-20, height-20);
+              canvasContext.strokeRect(x+10, y-30, width - 20, height);
               canvasContext.font = "11px Helvetica";
               canvasContext.fillStyle = "#fff";
             });
@@ -246,7 +246,7 @@ body {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  align-items: center;
+  /* align-items: center; */
   /* margin: auto; */
   width: 100%;
   height: 100%;
@@ -255,31 +255,31 @@ body {
 }
 
 #screan {
-  width: 180px;
+  width: 265px;
   position: absolute;
   z-index: 4;
-  top: 116px;
-  left: 75.3px;
+  top: 174px;
+  left: 114.3px;
 }
 
 #ai {
-  width: 180px;
+  width: 265px;
   position: absolute;
-  z-index: 1;
-  top: 112px;
-  left: 75.3px;
+  z-index: 3;
+  top: 170px;
+  left: 114.3px;
 }
 
 #tou {
-  width: 58px;
+  width: 83px;
   position: absolute;
-  z-index: 3;
-  top: 78px;
-  left: 136px;
+  z-index: 5;
+  top: 123px;
+  left: 205px;
 }
 
 #police {
-  width: 330px;
+  width: 490px;
   position: absolute;
   z-index: 2;
 }
@@ -313,9 +313,9 @@ body {
 }
 
 .controlZ {
-  width: 330px;
-  height: 605px;
-  margin-left: 10%;
+  width: 490px;
+  height: 900px;
+  margin-left: calc(50% - (490px / 2));
   position: relative;
 }
 
@@ -339,10 +339,11 @@ body {
 .face {
   position: absolute;
   z-index: 1;
+    padding: 26.5px 0;
 }
 
 .kuang {
-  padding: 17px 0;
+  padding: 26.5px 0;
   position: absolute;
   z-index: 2;
 }