修改图片

src/views/ecw/box/shippingDetail.vue

@@ -33,7 +33,15 @@
 
     <div v-if="(type === 'unload_container' || type === 'close_container') && srcStrs" style="marginTop:15px">
       <h1>{{$t('图片')}}</h1>
-      <ImagePreview :src="srcStrs" :width="146" :height="146" />
+      <!-- <ImagePreview :src="srcStrs" :width="146" :height="146" /> -->
+      <div style="display:flex">
+        <el-image v-for="(srcStr, i) in srcStrs" :key="i" :src="srcStr" fit="cover" style="width:146px;height:146px;margin-right:10px" :preview-src-list="[srcStr]">
+          <div slot="error" class="image-slot">
+            <i class="el-icon-picture-outline"></i>
+          </div>
+        </el-image>
+      </div>
+
     </div>
 
     <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.visible" fullscreen :modal-append-to-body=false append-to-body>
@@ -128,7 +136,7 @@ export default {
         title: "",
         visible: false,
       },
-      srcStrs: "",
+      srcStrs: [],
     };
   },
   created() {
@@ -146,10 +154,12 @@ export default {
           const ldPictures = res.data.cabinetVO.ldPictures
             ? JSON.parse(res.data.cabinetVO.ldPictures)
             : [];
-          this.srcStrs = ldPictures.map((item) => item.url).join(",");
+          this.srcStrs = ldPictures.map((item) => item.url);
         }
         if (this.type === "unload_container" && res.data.cabinetUnloadVO) {
-          this.srcStrs = res.data.cabinetUnloadVO.ulImgs ?? '';
+          this.srcStrs = res.data.cabinetUnloadVO.ulImgs
+            ? res.data.cabinetUnloadVO.ulImgs.split(",")
+            : [];
         }
       });
     },
@@ -227,4 +237,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-image {
+  border-radius: 5px;
+  background-color: #ebeef5;
+  box-shadow: 0 0 5px 1px #ccc;
+  ::v-deep .el-image__inner {
+    transition: all 0.3s;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+  ::v-deep .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
+}
 </style>