From c972e993911acc44e4601fe9ae9f2fa4e29d2846 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Mon, 5 Aug 2024 10:59:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=9B=BE=E7=89=87=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MapList/ShowInfoModal/index.vue           | 128 ++++++++++------
 .../MapList/SplitPolygonModal/index.vue       | 140 +++++++++++-------
 .../MapList/ShowInfoModal/index.vue           | 128 ++++++++++------
 .../MapList/SplitPolygonModal/index.vue       | 140 +++++++++++-------
 4 files changed, 336 insertions(+), 200 deletions(-)

diff --git a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
index 557e6e87..4e5c05cf 100644
--- a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue
@@ -51,17 +51,23 @@
             <a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
             <a-descriptions-item label="图斑照片">
               <div class="image-div">
-                <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
@@ -142,17 +148,23 @@
             }}</a-descriptions-item>
             <a-descriptions-item label="照片">
               <div class="image-div">
-                <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
@@ -190,20 +202,26 @@
             </a-descriptions-item>
             <a-descriptions-item v-if="measure_name == 0" label="照片">
               <div class="image-div">
-                <template
-                  v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
-                  :key="imageIndex"
-                >
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template
+                    v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
+                    :key="imageIndex"
+                  >
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item v-if="measure_name == 1" label="附件">
@@ -221,17 +239,23 @@
             </a-descriptions-item>
             <a-descriptions-item v-if="measure_name == 1" label="照片">
               <div class="image-div">
-                <template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
@@ -509,7 +533,7 @@
 
 <style lang="scss" scoped>
   .image-div {
-    width: 300px;
+    width: 330px;
     max-height: 200px;
     overflow: auto;
   }
@@ -531,6 +555,12 @@
     height: calc(100vh - 100px);
     margin-right: 20px;
   }
+  :deep(.ant-image){
+    margin-right: 10px;
+  }
+  :deep(.ant-image-preview-switch-left){
+    position: absolute;
+  }
   .info-container {
     // float: left;
     position: relative;
@@ -545,7 +575,7 @@
       position: absolute;
       .ant-image-preview-operations {
         position: absolute;
-        bottom: 0;
+        top: 0;
         width: 100%;
         .ant-image-preview-operations-operation{
           flex:1;
diff --git a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue
index 2af93a25..63a04ee4 100644
--- a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue
+++ b/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue
@@ -48,17 +48,23 @@
               <a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
               <a-descriptions-item label="图斑照片">
                 <div class="image-div">
-                  <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                      }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                    <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
@@ -126,17 +132,23 @@
               }}</a-descriptions-item>
               <a-descriptions-item label="照片">
                 <div class="image-div">
-                  <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                        }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                    :preview="{
+                      getContainer:getContainer,
+                    }"
+                    >
+                    <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                          }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
@@ -170,20 +182,26 @@
               </a-descriptions-item>
               <a-descriptions-item v-if="measure_name == 0" label="照片">
                 <div class="image-div">
-                  <template
-                    v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
-                    :key="imageIndex"
-                  >
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                      }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                    :preview="{
+                      getContainer:getContainer,
+                    }"
+                    >
+                    <template
+                      v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
+                      :key="imageIndex"
+                    >
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item v-if="measure_name == 1" label="附件">
@@ -201,20 +219,26 @@
               </a-descriptions-item>
               <a-descriptions-item v-if="measure_name == 1" label="照片">
                 <div class="image-div">
-                  <template
-                    v-for="(imageItem, imageIndex) in bubanzhaopianList"
-                    :key="imageIndex"
-                  >
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                      }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                    :preview="{
+                      getContainer:getContainer,
+                    }"
+                    >
+                    <template
+                      v-for="(imageItem, imageIndex) in bubanzhaopianList"
+                      :key="imageIndex"
+                    >
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
@@ -875,6 +899,20 @@
 </script>
 
 <style lang="scss" scoped>
+  .image-div {
+    width: 330px;
+    max-height: 200px;
+    overflow: auto;
+  }
+  :deep(.ant-image){
+    margin-right: 10px;
+  }
+  :deep(.ant-image-preview-switch-right){
+    position: absolute;
+  }
+  :deep(.ant-image-preview-switch-left){
+    position: absolute;
+  }
   .detail-container {
     width: calc(100vw - 15px);
     height: calc(100vh - 120px);
@@ -905,7 +943,7 @@
           position: absolute;
           .ant-image-preview-operations {
             position: absolute;
-            bottom: 0;
+            top: 0;
             width: 100%;
             .ant-image-preview-operations-operation{
               flex:1;
diff --git a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
index 361019fc..b9892ca4 100644
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
@@ -51,17 +51,23 @@
             <a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
             <a-descriptions-item label="图斑照片">
               <div class="image-div">
-                <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
@@ -142,17 +148,23 @@
             }}</a-descriptions-item>
             <a-descriptions-item label="照片">
               <div class="image-div">
-                <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
@@ -190,20 +202,26 @@
             </a-descriptions-item>
             <a-descriptions-item v-if="measure_name == 0" label="照片">
               <div class="image-div">
-                <template
-                  v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
-                  :key="imageIndex"
-                >
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template
+                    v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
+                    :key="imageIndex"
+                  >
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item v-if="measure_name == 1" label="附件">
@@ -221,17 +239,23 @@
             </a-descriptions-item>
             <a-descriptions-item v-if="measure_name == 1" label="照片">
               <div class="image-div">
-                <template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
-                  <a-image
-                    v-if="imageItem"
-                    width="100px"
-                    height="100px"
-                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                    :preview="{
-                      getContainer,
-                    }"
-                  ></a-image>
-                </template>
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
               </div>
             </a-descriptions-item>
             <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
@@ -509,7 +533,7 @@
 
 <style lang="scss" scoped>
   .image-div {
-    width: 300px;
+    width: 330px;
     max-height: 200px;
     overflow: auto;
   }
@@ -531,6 +555,12 @@
     height: calc(100vh - 100px);
     margin-right: 20px;
   }
+  :deep(.ant-image){
+    margin-right: 10px;
+  }
+  :deep(.ant-image-preview-switch-left){
+    position: absolute;
+  }
   .info-container {
     // float: left;
     position: relative;
@@ -545,7 +575,7 @@
       position: absolute;
       .ant-image-preview-operations {
         position: absolute;
-        bottom: 0;
+        top: 0;
         width: 100%;
         .ant-image-preview-operations-operation{
           flex:1;
diff --git a/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
index f99d4650..d78f7638 100644
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
+++ b/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
@@ -48,17 +48,23 @@
               <a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
               <a-descriptions-item label="图斑照片">
                 <div class="image-div">
-                  <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                      }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                    <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
@@ -126,17 +132,23 @@
               }}</a-descriptions-item>
               <a-descriptions-item label="照片">
                 <div class="image-div">
-                  <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                        }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                    :preview="{
+                      getContainer:getContainer,
+                    }"
+                    >
+                    <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                          }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
@@ -170,20 +182,26 @@
               </a-descriptions-item>
               <a-descriptions-item v-if="measure_name == 0" label="照片">
                 <div class="image-div">
-                  <template
-                    v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
-                    :key="imageIndex"
-                  >
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                      }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                    :preview="{
+                      getContainer:getContainer,
+                    }"
+                    >
+                    <template
+                      v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
+                      :key="imageIndex"
+                    >
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item v-if="measure_name == 1" label="附件">
@@ -201,20 +219,26 @@
               </a-descriptions-item>
               <a-descriptions-item v-if="measure_name == 1" label="照片">
                 <div class="image-div">
-                  <template
-                    v-for="(imageItem, imageIndex) in bubanzhaopianList"
-                    :key="imageIndex"
-                  >
-                    <a-image
-                      v-if="imageItem"
-                      width="100px"
-                      height="100px"
-                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
-                      :preview="{
-                        getContainer,
-                      }"
-                    ></a-image>
-                  </template>
+                  <a-image-preview-group
+                    :preview="{
+                      getContainer:getContainer,
+                    }"
+                    >
+                    <template
+                      v-for="(imageItem, imageIndex) in bubanzhaopianList"
+                      :key="imageIndex"
+                    >
+                      <a-image
+                        v-if="imageItem"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      ></a-image>
+                    </template>
+                  </a-image-preview-group>
                 </div>
               </a-descriptions-item>
               <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
@@ -875,6 +899,20 @@
 </script>
 
 <style lang="scss" scoped>
+  .image-div {
+    width: 330px;
+    max-height: 200px;
+    overflow: auto;
+  }
+  :deep(.ant-image){
+    margin-right: 10px;
+  }
+  :deep(.ant-image-preview-switch-right){
+    position: absolute;
+  }
+  :deep(.ant-image-preview-switch-left){
+    position: absolute;
+  }
   .detail-container {
     width: calc(100vw - 15px);
     height: calc(100vh - 120px);
@@ -905,7 +943,7 @@
           position: absolute;
           .ant-image-preview-operations {
             position: absolute;
-            bottom: 0;
+            top: 0;
             width: 100%;
             .ant-image-preview-operations-operation{
               flex:1;