1

index.html

@@ -28,7 +28,24 @@
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
     background-color: rgba(0, 0, 0, 0.1);
   }
+  .gdt::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 10px;
+}
 
+/*定义滚动条轨道 内阴影+圆角*/
+.gdt::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #eee;
+}
+
+/*定义滑块 内阴影+圆角*/
+.gdt::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
   html,
   body {
     height: 100%;

src/components/function.vue

@@ -3,7 +3,7 @@
     <div class="img">
       <div class="left" style="width: 380px">
         <div class="pFace">
-          <img src="../assets/img/face.png" alt />
+          <img :src="shibieImg" class="changeImg" alt />
         </div>
         <div class="nav">{{ isdetected }}</div>
       </div>
@@ -83,12 +83,12 @@
       <div
         style="width: 98%; overflow: auto; display: flex; margin: 20px 0 0 10px"
       >
-        <div
-          style="display: flex; flex-direction: column"
-          v-for="(res, index) in sampleArr"
-          :key="index"
-        >
-          <img :src="res.img[0]" alt="" style="margin-right: 10px" />
+        <div v-for="(res, index) in sampleArr" :key="index" class="gdt">
+          <img
+            :src="res.img[0]"
+            alt=""
+            style="margin-right: 10px; width: 195px; height: 156px"
+          />
           <div class="spotNumber">{{ res.name }}</div>
         </div>
       </div>
@@ -125,12 +125,12 @@
       </el-form>
       <el-button class="update" @click="update">添加</el-button>
       <el-button
-        @click="updateMessage = false"
+        @click="cancel"
         style="font-size: 16px !important"
         >取消</el-button
       >
     </el-dialog>
-    <el-dialog
+    <!-- <el-dialog
       title="识别"
       :visible.sync="closeUpdateMessage"
       :append-to-body="true"
@@ -146,7 +146,7 @@
         style="margin: 20px 0 0 35%; font-size: 16px !important"
         >确认</el-button
       >
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 <script>
@@ -164,6 +164,7 @@ export default {
         require("../assets/img/tou1.png"),
         require("../assets/img/policeNew.png"),
       ],
+      shibieImg: require("../assets/img/face.png"),
       isCamera: false,
       count: 0,
       change: 0,
@@ -198,14 +199,22 @@ export default {
     };
   },
   methods: {
+    cancel(){
+      this.updateMessage = false
+      this.sampleArr[this.sampleArr.length - 1].name = "编号:" + this.number;
+      if (this.sampleArr.length > 0) {
+        // var a = document.getElementsByClassName("spot");
+        // a[0].style.display = "block";
+        this.fnsample();
+      }
+    },
     update() {
       this.change = 1;
       this.number = this.number + 1;
       if (this.change == 1) {
         if (this.sampleArr.length > 0) {
           this.sampleArr[this.sampleArr.length - 1].name = this.upName;
-        }else{
-          this.sampleArr[this.sampleArr.length - 1].name = "编号:"+this.number;
+          this.isdetected = "已识别到" + this.resultImg.name + "的图片";
         }
       }
       if (this.sampleArr.length > 0) {
@@ -258,7 +267,10 @@ export default {
                 if (_this.count < 0) _this.count = 0;
                 _this.count += 1;
                 if (_this.count > 10) {
-                  _this.isdetected = "已检测到人脸";
+                  if (_this.sampleArr.length == 0) {
+                    _this.isdetected = "已检测到人脸";
+                  }
+                  // _this.isdetected = "已检测到人脸";
                   if (
                     _this.sampleArr.length > 0 &&
                     _this.$store.state.function.indexOf("police=1;") != -1
@@ -379,12 +391,14 @@ export default {
         console.log(this.resultArr);
         for (var i = 0; i < this.sampleArr.length; i++) {
           if (this.sampleArr[i].name == bestMatch.label) {
-            this.closeUpdateMessage = true;
-            if (this.change == 1) {
-              this.resultImg.name = this.upName;
-            } else {
-              this.resultImg.name = this.sampleArr[i].name;
-            }
+            // this.closeUpdateMessage = true;
+            // if (this.change == 1) {
+            //   this.resultImg.name = this.upName;
+            // } else {
+            //   this.resultImg.name = this.sampleArr[i].name;
+            // }
+            this.isdetected = "已识别到" + this.sampleArr[i].name + "的图片";
+            this.shibieImg = this.sampleArr[i].img[0];
             this.resultImg.img[0] = this.sampleArr[i].img[0];
           }
         }
@@ -591,7 +605,8 @@ body {
 }
 
 .pFace {
-  width: 180px;
+  width: 300px;
+  height: 240px;
   margin: 0 auto;
   margin-top: 220px;
 }
@@ -659,4 +674,9 @@ body {
   margin-top: 20px;
   font-size: 20px;
 }
+
+.gdt {
+  display: flex;
+  flex-direction: column;
+}
 </style>