update

src/components/function.vue

@@ -1,48 +1,42 @@
 <template>
-	<div style="width: 100%; height: calc(100% - 67.5px); background: #fff">
-		<div class="img">
-			<div class="left">
-				<div class="pFace">
-					<img src="../assets/img/face.png" alt="" />
-				</div>
-				<div class="nav">{{ isdetected }}</div>
-			</div>
-			<div class="controlZ">
-				<div id="screan" ref="dv">
-					<img :src="img[0]" alt v-show="!isCamera" />
-					<!--图片展示-->
-					<video
-						ref="video"
-						id="video_cam"
-						width="195"
-						height="156"
-						class="face"
-						autoplay
-						v-show="isCamera"
-					></video>
-					<canvas
-						ref="canvasDOM"
-						width="195"
-						height="156"
-						class="kuang"
-						v-show="isCamera"
-					></canvas>
-				</div>
-				<div id="tou" ref="dv1">
-					<img :src="img[2]" alt />
-				</div>
-				<div id="ai" ref="dv2">
-					<img :src="img[1]" alt />
-				</div>
-				<div id="police" ref="dv2">
-					<img :src="img[3]" alt />
-				</div>
-			</div>
-
-			<div class="cameraZ">
-				<!--开启摄像头-->
-				<div class="cameraBtn">
-					<!-- <el-button
+  <div style="width: 100%; height: calc(100% - 67.5px); background: #fff">
+    <div class="img">
+      <div class="left">
+        <div class="pFace">
+          <img src="../assets/img/face.png" alt />
+        </div>
+        <div class="nav">{{ isdetected }}</div>
+      </div>
+      <div class="controlZ">
+        <div id="screan" ref="dv">
+          <img :src="img[0]" alt v-show="!isCamera" />
+          <!--图片展示-->
+          <video
+            ref="video"
+            id="video_cam"
+            width="195"
+            height="156"
+            class="face"
+            autoplay
+            v-show="isCamera"
+          ></video>
+          <canvas ref="canvasDOM" width="195" height="156" class="kuang" v-show="isCamera"></canvas>
+        </div>
+        <div id="tou" ref="dv1">
+          <img :src="img[2]" alt />
+        </div>
+        <div id="ai" ref="dv2">
+          <img :src="img[1]" alt />
+        </div>
+        <div id="police" ref="dv2">
+          <img :src="img[3]" alt />
+        </div>
+      </div>
+
+      <div class="cameraZ">
+        <!--开启摄像头-->
+        <div class="cameraBtn">
+          <!-- <el-button
             size="mini"
             type="primary"
             @click="callCamera"
@@ -107,7 +101,7 @@ export default {
       ],
       // 匹配图，支持本地，网络，beas64
       detArr: [
-
+        //"" 图片1
       ],
       // 匹配结果
       resultArr: [],
@@ -304,166 +298,166 @@ export default {
 </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;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
-
-	#screan {
-		width: 185px;
-		position: absolute;
-		z-index: 5;
-		top: 132px;
-		left: 93px;
-	}
-
-	#ai {
-		width: 185px;
-		position: absolute;
-		z-index: 3;
-		top: 130px;
-		left: 93px;
-	}
-
-	#tou {
-		width: 65px;
-		position: absolute;
-		z-index: 4;
-		top: 97px;
-		left: 153px;
-	}
-
-	#police {
-		width: 300px;
-		position: absolute;
-		z-index: 2;
-		top: 30px;
-		left: 35px;
-	}
-
-	.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 {
-		width: 490px;
-		height: 900px;
-		/* margin-left: calc(50% - (490px / 2)); */
-		position: relative;
-	}
-
-	.cameraZ {
-		display: flex;
-		height: 340px;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		width: 300px;
-	}
-
-	.cameraBtn {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.cameraBtn button {
-		margin: 0 0 10px 0;
-	}
-
-	.face {
-		position: absolute;
-    z-index: 1;
-    padding: 5px 0px;
-	}
-
-	.kuang {
-		padding: 26.5px 0;
-		position: absolute;
-		z-index: 2;
-	}
-
-	.pFace {
-		width: 180px;
-		margin: 0 auto;
-		margin-top: 220px;
-	}
-
-	.close > img,
-	.save > img,
-	.pFace > img,
-	.open > img {
-		width: 100%;
-		height: 100%;
-	}
-
-	.cameraBtn {
-		margin-top: 80px;
-	}
-
-	.close {
-		margin-bottom: 25px;
-	}
-
-	.isPhoto {
-		padding: 20px 0 0 0;
-		box-sizing: border-box;
-	}
-
-	.nav {
-		text-align: center;
-		font-size: 32px;
-		color: #ccc;
-	}
+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;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+#screan {
+  width: 185px;
+  position: absolute;
+  z-index: 5;
+  top: 132px;
+  left: 93px;
+}
+
+#ai {
+  width: 185px;
+  position: absolute;
+  z-index: 3;
+  top: 130px;
+  left: 93px;
+}
+
+#tou {
+  width: 65px;
+  position: absolute;
+  z-index: 4;
+  top: 97px;
+  left: 153px;
+}
+
+#police {
+  width: 300px;
+  position: absolute;
+  z-index: 2;
+  top: 30px;
+  left: 35px;
+}
+
+.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 {
+  width: 490px;
+  height: 900px;
+  /* margin-left: calc(50% - (490px / 2)); */
+  position: relative;
+}
+
+.cameraZ {
+  display: flex;
+  height: 340px;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 300px;
+}
+
+.cameraBtn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.cameraBtn button {
+  margin: 0 0 10px 0;
+}
+
+.face {
+  position: absolute;
+  z-index: 1;
+  padding: 5px 0px;
+}
+
+.kuang {
+  padding: 26.5px 0;
+  position: absolute;
+  z-index: 2;
+}
+
+.pFace {
+  width: 180px;
+  margin: 0 auto;
+  margin-top: 220px;
+}
+
+.close > img,
+.save > img,
+.pFace > img,
+.open > img {
+  width: 100%;
+  height: 100%;
+}
+
+.cameraBtn {
+  margin-top: 80px;
+}
+
+.close {
+  margin-bottom: 25px;
+}
+
+.isPhoto {
+  padding: 20px 0 0 0;
+  box-sizing: border-box;
+}
+
+.nav {
+  text-align: center;
+  font-size: 32px;
+  color: #ccc;
+}
 </style>