From 8d1629af92f29fe99c3c8b0ec0387a76a850724f Mon Sep 17 00:00:00 2001
From: dengfuchuan <389068019@qq.com>
Date: Tue, 20 Jul 2021 09:09:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/show_images/index.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/show_images/index.vue b/src/components/show_images/index.vue
index c3b3743a..4d7b59a4 100644
--- a/src/components/show_images/index.vue
+++ b/src/components/show_images/index.vue
@@ -2,13 +2,16 @@
   <el-collapse @change="handleChange">
     <el-collapse-item :title="title" name="1">
       <el-card>
-        <div v-if="imgList.length > 0">
+        <div v-if="imgList.length > 0" class="img-item">
           <div v-for="(item , i) in imgList" :key="i" class="img-box">
             <div class="img">
               <el-image :preview-src-list="imgPathList" :src="baseUrl +'?funid=sys_attach&pagetype=editgrid&eventcode=down&nousercheck=1&dataType=byte&keyid='+ item.sys_attach__attach_id +'&is_highimage=1'" />
             </div>
-            <span>{{ item.sys_attach__attach_name }}</span>
+            <div class="img-name" :title="item.sys_attach__attach_name">{{ item.sys_attach__attach_name }}</div>
           </div>
+          <template v-if="imgList.length % 3 > 0">
+            <div v-for="(l ,k) of (3 - imgList.length % 3)" :key="k" class="img-box" />
+          </template>
         </div>
         <div v-else class="no-data">
           无{{ title }}
@@ -143,6 +146,14 @@ export default {
       text-decoration: underline;
     }
   }
+  .img-item {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding-bottom: 20rpx;
+    align-content: flex-start;
+    align-items: flex-start;
+  }
   .buttons{
     display: flex;
   }
@@ -154,8 +165,13 @@ export default {
     overflow: auto;
   }
   .img-box{
-    display: inline-block;
     text-align: center;
+    width: 33%;
+  }
+  .img-name {
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
   }
   .img{
     width: 188px;
@@ -187,4 +203,8 @@ export default {
     text-align: center;
     color: #8a8f93;
   }
+  .uploader__img {
+    height: 200px;
+    width: 200px;
+  }
 </style>