Merge branch 'master' of https://git.cocorobo.cn/CocoRoboLabs/cocoroboBlockly

src/components/function.vue

@@ -1,42 +1,48 @@
 <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="265"
-            height="212"
-            class="face"
-            autoplay
-            v-show="isCamera"
-          ></video>
-          <canvas ref="canvasDOM" width="265" height="212" 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"
@@ -298,169 +304,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: 230px;
-  position: absolute;
-  z-index: 5;
-  top: 156px;
-  left: 108.3px;
-}
-
-#ai {
-  width: 230px;
-  position: absolute;
-  z-index: 3;
-  top: 155px;
-  left: 110px;
-}
-
-#tou {
-  width: 70px;
-  position: absolute;
-  z-index: 4;
-  top: 118px;
-  left: 190px;
-}
-
-#police {
-  width: 382px;
-  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: 26.5px 0;
-}
-
-.kuang {
-  padding: 26.5px 0;
-  position: absolute;
-  z-index: 2;
-}
-
-.left {
-  margin: 300px 130px 0 0;
-}
-
-.pFace {
-  width: 200px;
-  margin: 0 auto;
-}
-
-.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>