1

src/components/function.vue

@@ -1,7 +1,12 @@
 <template>
   <div style="width: 100%; height: 100%">
-    <h1>{{ isdetected }}</h1>
     <div class="img">
+      <div class="left">
+        <div class="pFace">
+          <img src="../assets/img/face.png" alt="" />
+        </div>
+        <div style="text-align: center">{{ isdetected }}</div>
+      </div>
       <div class="controlZ">
         <div id="screan" ref="dv">
           <img :src="img[0]" alt v-show="!isCamera" />
@@ -44,19 +49,25 @@
             v-if="!isCamera"
             >开启摄像头</el-button
           >
-          <el-button size="mini" type="primary" @click="closeCamera" v-else
+          <!-- <el-button size="mini" type="primary" @click="closeCamera" v-else
             >关闭摄像头</el-button
-          >
-          <el-button
+          > -->
+          <div class="close" @click="closeCamera" v-else>
+            <img src="../assets/img/close.png" alt="" />
+          </div>
+          <!-- <el-button
             size="mini"
             type="primary"
             @click="photograph"
             v-if="isCamera"
             >确认保存</el-button
-          >
+          > -->
+          <div class="save" @click="photograph" v-if="isCamera">
+            <img src="../assets/img/save.png" alt="" />
+          </div>
         </div>
         <!--确认-->
-        <div v-if="isCamera">
+        <div v-if="isCamera" class="isPhoto">
           <!--canvas截取流-->
           <canvas
             ref="canvas"
@@ -249,6 +260,7 @@ body {
   width: 100%;
   height: 100%;
   position: relative;
+  margin-top: 50px;
   /* position: relative; */
 }
 
@@ -320,10 +332,10 @@ body {
 .cameraZ {
   display: flex;
   height: 340px;
+  flex-direction: column;
+  flex-wrap: nowrap;
 }
-.cameraZ div {
-  margin-left: 10px;
-}
+
 .cameraBtn {
   display: flex;
   flex-direction: column;
@@ -345,4 +357,32 @@ body {
   position: absolute;
   z-index: 2;
 }
+
+.left {
+  margin: 300px 130px 0 0;
+}
+
+.pFace {
+  width: 200px;
+}
+
+.close > img,
+.save > img,
+.pFace > img {
+  width: 100%;
+  height: 100%;
+}
+
+.cameraBtn {
+  margin-top: 80px;
+}
+
+.close {
+  margin-bottom: 25px;
+}
+
+.isPhoto {
+  padding: 20px 0 0 50px;
+  box-sizing: border-box;
+}
 </style>