删除图片功能缺少接口

src/components/LayoutTabs.vue

@@ -221,11 +221,28 @@ export default {
     border: 1px solid #dcdfe6;
     box-shadow: none;
   }
+  .el-icon-refresh {
+    margin: 0px 8px 0px 4px;
+  }
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #fff;
+    background-color: #169e8c;
+  }
+  .el-tabs--border-card
+    > .el-tabs__header
+    .el-tabs__item:not(.is-disabled):hover {
+    color: #fff;
+    background-color: #169e8c;
+  }
+  .el-tabs__item .el-icon-close {
+    transition: none;
+  }
 
   .el-tabs__item {
     height: 30px;
     line-height: 30px;
     font-size: 12px;
+    padding: 0 10px !important;
   }
   .el-tabs__content {
     display: none;

src/views/realTimeSearch/index.vue

@@ -147,6 +147,14 @@
                   }}
                 </p>
               </div>
+              <div class="deleteBox">
+                <el-button
+                  title="删除照片"
+                  type="primary"
+                  icon="el-icon-delete"
+                  @click.stop="deletePic(item)"
+                ></el-button>
+              </div>
             </div>
             <div class="bigpic" v-else>
               <!-- <el-image :src="item.path" lazy></el-image> -->
@@ -397,6 +405,28 @@ export default {
       this.pageSize = val;
       this.getPicData();
     },
+    deletePic(val) {
+      console.log(val);
+      this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            showClose: true,
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            showClose: true,
+            message: "已取消删除",
+          });
+        });
+    },
   },
 };
 </script>
@@ -453,6 +483,11 @@ export default {
             height: 200px;
           }
         }
+        &:hover {
+          .deleteBox {
+            display: block;
+          }
+        }
       }
       .caption {
         position: absolute;
@@ -478,6 +513,27 @@ export default {
           padding-right: 5px;
         }
       }
+      .deleteBox {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        z-index: 2;
+        display: none;
+        .el-button {
+          width: auto;
+          background: rgba(0, 0, 0, 0.5);
+          border: 1px solid transparent;
+          color: #fff;
+          font-size: 16px;
+          padding: 3px;
+        }
+        &:hover {
+          .el-button {
+            background: #f56c6c;
+            //color: #f56c6c;
+          }
+        }
+      }
     }
     .noPicBox {
       display: flex;