Jelajahi Sumber

feat(photography): 添加最后拍摄照片预览关闭功能

- 在最后拍摄照片预览区域添加关闭按钮
- 实现 closeLastPhoto 方法用于隐藏预览
- 添加关闭按钮的样式定义
- 按钮使用圆形危险样式并带有关闭图标
- 设置按钮绝对定位位于预览区域右上角
- 点击按钮可关闭最后拍摄的照片预览显示
panqiuyao 18 jam lalu
induk
melakukan
879c9d6148
1 mengubah file dengan 25 tambahan dan 0 penghapusan
  1. 25 0
      frontend/src/views/Photography/shot.vue

+ 25 - 0
frontend/src/views/Photography/shot.vue

@@ -56,6 +56,13 @@
       </div>
 
       <div class="last-photo" v-show="showlastPhoto && (lastPhoto as any)?.file_path" v-key="(lastPhoto as any)?.file_path">
+        <el-button
+          class="close-btn"
+          type="danger"
+          icon="Close"
+          circle
+          @click="closeLastPhoto"
+        />
         <el-image  :src="getFilePath((lastPhoto as any)?.file_path || '')"  fit="contain" ></el-image>
       </div>
 
@@ -222,6 +229,11 @@ const {
   totalPages,
 } = usePhotography()
 
+// 关闭最后拍摄的照片预览
+const closeLastPhoto = () => {
+  showlastPhoto.value = false
+}
+
 // 选中的货号列表
 const selectedGoods = ref<Set<string>>(new Set())
 
@@ -854,6 +866,19 @@ watch(goodsList, () => {
   z-index: 1000;
   background-color: rgba(0,0,0,.5);
 
+  .close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1001;
+    width: 32px;
+    height: 32px;
+
+    ::v-deep(.el-icon) {
+      font-size: 16px;
+    }
+  }
+
   .el-image {
     width: 100%;
     height:100%;