1

src/components/function.vue

@@ -5,7 +5,7 @@
         <div class="pFace">
           <img src="../assets/img/face.png" alt="" />
         </div>
-        <div style="text-align: center">{{ isdetected }}</div>
+        <div class="nav">{{ isdetected }}</div>
       </div>
       <div class="controlZ">
         <div id="screan" ref="dv">
@@ -42,13 +42,16 @@
       <div class="cameraZ">
         <!--开启摄像头-->
         <div class="cameraBtn">
-          <el-button
+          <!-- <el-button
             size="mini"
             type="primary"
             @click="callCamera"
             v-if="!isCamera"
-            >开启摄像头</el-button
-          >
+            >开启摄像头</el-button -->
+          <!-- > -->
+          <div class="open" @click="callCamera" v-if="!isCamera">
+            <img src="../assets/img/open.png" alt="" />
+          </div>
           <!-- <el-button size="mini" type="primary" @click="closeCamera" v-else
             >关闭摄像头</el-button
           > -->
@@ -334,6 +337,7 @@ body {
   height: 340px;
   flex-direction: column;
   flex-wrap: nowrap;
+  width: 300px;
 }
 
 .cameraBtn {
@@ -364,11 +368,13 @@ body {
 
 .pFace {
   width: 200px;
+  margin: 0 auto;
 }
 
 .close > img,
 .save > img,
-.pFace > img {
+.pFace > img,
+.open > img {
   width: 100%;
   height: 100%;
 }
@@ -382,7 +388,13 @@ body {
 }
 
 .isPhoto {
-  padding: 20px 0 0 50px;
+  padding: 20px 0 0 0;
   box-sizing: border-box;
 }
+
+.nav {
+  text-align: center;
+  font-size: 32px;
+  color: #ccc;
+}
 </style>