图片查看优化

src/views/additionalOrder/additional/index.vue

@@ -1782,9 +1782,7 @@
       <el-button type="primary" @click="handleSubmit(AdditionalFormRefs)">提交</el-button>
     </div>
     <el-image-viewer v-if="showImage" :url-list="showImageUrl" @close="showImage = false" />
-    <el-dialog title="图片预览" v-model="imageShow" width="400">
-      <img class="image-view" :src="imageUrl" />
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>

src/views/additionalOrder/order/orderDetail.vue

@@ -396,9 +396,7 @@
         </div>
       </div>
     </div>
-    <el-dialog title="图片预览" v-model="imageShow">
-      <img class="image-view" :src="imageUrl" />
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>

src/views/contentManagement/advertisement.vue

@@ -57,11 +57,7 @@
       :treeProps="{ children: 'children', hasChildren: 'hasChildren' }">
     </Table>
   </el-dialog>
-  <el-dialog v-model="imageShow" title="图片查看" width="500">
-    <div class="image-box">
-      <img :src="imageUrl" />
-    </div>
-  </el-dialog>
+  <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
 </template>
 
 <script setup lang="ts">

src/views/externalAgreement/agreement/agreementAdd.vue

@@ -448,22 +448,4 @@ onMounted(() => {
   }
 }
 
-.image-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: rgb(0 0 0 / 60%);
-
-  img {
-    width: 800px;
-    height: 800px;
-    border-radius: 5px;
-  }
-}
 </style>

src/views/finance/modules/auditDetail.vue

@@ -912,9 +912,7 @@
         }
       })">关闭</el-button>
     </div>
-    <el-dialog title="图片预览" v-model="imageShow">
-      <img class="image-view" :src="imageUrl" />
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>

src/views/insurancePolicy/orderDetail.vue

@@ -1059,9 +1059,7 @@
     <el-dialog v-model="JYXDetailShow" title="驾意险详情" width="600">
       <detail ref="JYXDetail"></detail>
     </el-dialog>
-    <el-dialog v-model="imageShow" title="查看" width="400">
-      <img style="display: block; width: 100%; height: 260px;" :src="imageData">
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[imageData]" @close="imageShow = false" />
     <el-drawer title="查看出单费用" v-model="costViewShow" size="50%">
       <costView :agreementInfo="agreementInfo" :costitemEditInfo="costInfo"></costView>
     </el-drawer>

src/views/operationManagement/modules/addCard.vue

@@ -164,42 +164,6 @@ onMounted(() => {
       color: #ccc;
     }
   }
-  .image-view{
-    width: 80px;
-    height: 80px;
-    border-radius: 5px;
-    position: relative;
-    img{
-      display: block;
-      width: 100%;
-      height: 100%;
-      border-radius: 5px;
-    }
-    .btns{
-      display: none;
-    }
-    &:hover{
-      .btns{
-        width: 100%;
-        height: 100%;
-        border-radius: 5px;
-        position: absolute;
-        background: rgba(0,0,0, .3);
-        top: 0;
-        left: 0;
-        line-height: 80px;
-        display: flex;
-        align-content: center;
-        justify-content: center;
-        .btn-icon{
-          color: #fff;
-          font-size: 18px;
-          margin: 0 10px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
   .image-show{
     width: 100%;
     height: 100%;

src/views/operationManagement/modules/addOperation.vue

@@ -531,9 +531,6 @@
         <el-button type="primary" size="default" @click="onSubmit(OperationFormRef, 1)">确定</el-button>
       </div>
     </el-form>
-    <!--    <div class="image-view" v-if="imageShow" @click="imageShow = false">
-      <img :src="imageUrl" />
-    </div>-->
     <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>

src/views/operationManagement/operationDetail.vue

@@ -207,11 +207,7 @@
     <el-dialog v-model="allocationShow" title="分配管理人" width="800">
       <allocation ref="AllocationRef" @closeDialog="closeAllocation"></allocation>
     </el-dialog>
-    <el-dialog v-model="imageShow" title="预览" width="500">
-      <div class="image-box">
-        <img class="image-view" :src="imageUrl" />
-      </div>
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>
@@ -883,10 +879,6 @@ onMounted(async () => {
   align-content: center;
   justify-content: center;
 
-  .image-view {
-    width: 300px;
-    height: 200px;
-  }
 }
 
 :deep(.el-table th.el-table__cell) {

src/views/partnerManagement/modules/addPartner.vue

@@ -545,12 +545,7 @@
         <el-button type="primary" @click="onSubmit(OperationFormRef, 1)">确定</el-button>
       </div>
     </el-form>
-    <!--    <div class="image-view" v-if="imageShow" @click="imageShow = false">
-      <img :src="imageUrl" />
-    </div>-->
-    <el-dialog title="图片预览" v-model="imageShow">
-      <img class="image-view" :src="imageUrl" />
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>
@@ -1610,14 +1605,6 @@ defineExpose({
 
 }
 
-.image-view {
-  display: block;
-  width: 400px;
-  height: 260px;
-  border-radius: 5px;
-  margin: 0 auto;
-}
-
 :deep(.el-input__inner[type=number]::-webkit-outer-spin-button) {
   -webkit-appearance: none;
   margin: 0;

src/views/partnerManagement/partnerDetail.vue

@@ -158,15 +158,7 @@
     >
       <allocation ref="AllocationRef" @closeDialog="closeAllocation"></allocation>
     </el-dialog>
-    <el-dialog
-      v-model="imageShow"
-      title="预览"
-      width="500"
-    >
-      <div class="image-box">
-        <img class="image-view" :src="imageUrl" />
-      </div>
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
   </div>
 </template>
 
@@ -646,10 +638,6 @@ const getGradeOptions = () => {
     display: flex;
     align-content: center;
     justify-content: center;
-    .image-view{
-      width: 300px;
-      height: 200px;
-    }
   }
   :deep(.el-table th.el-table__cell) {
     background-color: #F7F7F9;

src/views/personnel/modules/memberMessage.vue

@@ -311,9 +311,7 @@
         </div>
       </div>
     </div>
-    <div class="image-view" v-if="imageShow" @click="imageShow = false">
-      <img :src="imageUrl" />
-    </div>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
 
     <el-dialog
       v-model="dialogVisible"
@@ -1101,25 +1099,6 @@ function delUser() {
   }
 }
 
-.image-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: rgb(0 0 0 / 60%);
-
-  img {
-    width: 800px;
-    height: 800px;
-    border-radius: 5px;
-  }
-}
-
 .custom-tree-node {
   display: flex;
   flex: 1;

src/views/quoteConfig/agreement/agreementAdd.vue

@@ -611,22 +611,4 @@ onMounted(() => {
   }
 }
 
-.image-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: rgb(0 0 0 / 60%);
-
-  img {
-    width: 800px;
-    height: 800px;
-    border-radius: 5px;
-  }
-}
 </style>

src/views/receivable/handingFee/invoiceRecord.vue

@@ -139,9 +139,7 @@
         <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
       </template>
     </el-dialog>
-    <el-dialog v-model="imageShow" width="400" title="查看">
-      <img class="bigImage" :src="bigImageUrl">
-    </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[bigImageUrl]" @close="imageShow = false" />
   </PageMain>
 </template>
 

src/views/representative/detail.vue

@@ -580,9 +580,7 @@
         >
       </div> -->
     </el-form>
-    <div class="image-view" v-if="imageShow" @click="imageShow = false">
-      <img :src="imageUrl" />
-    </div>
+    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
     <el-dialog v-model="dialogVisible" title="审核不通过" width="500" draggable>
       <el-input
         type="textarea"
@@ -928,23 +926,6 @@ watch(filterText, (val) => {
     }
   }
 }
-.image-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  img {
-    width: 800px;
-    height: 800px;
-    border-radius: 5px;
-  }
-}
 .custom-tree-node {
   flex: 1;
   display: flex;