fix：kyc界面图片溢出容器问题修复

src/views/user-center/kyc/index.vue

@@ -42,16 +42,28 @@
               </ATag>
             </template>
             <template v-if="column.key === 'idFile'">
-              <a-image
-                :width="200"
-                :src="parseFile(record.idFile)"
-              />
+              <div class="table-image-wrapper">
+                <a-image
+                  class="kyc-image"
+                  :src="parseFile(record.idFile)"
+                  :preview="{
+                    src: parseFile(record.idFile),
+                    mask: t('common.clickToPreview')
+                  }"
+                />
+              </div>
             </template>
             <template v-if="column.key === 'identifyPicture'">
-              <a-image
-                :width="200"
-                :src="parseFile(record.identifyPicture)"
-              />
+              <div class="table-image-wrapper">
+                <a-image
+                  class="kyc-image"
+                  :src="parseFile(record.identifyPicture)"
+                  :preview="{
+                    src: parseFile(record.identifyPicture),
+                    mask: t('common.clickToPreview')
+                  }"
+                />
+              </div>
             </template>
 
             <template v-else-if="column.key === 'operate'">
@@ -175,21 +187,21 @@ const {
       dataIndex: 'userName',
       title: t('page.kyc.username'),
       align: 'center',
-      width: 150
+      width: 120
     },
     {
       key: 'realName',
       dataIndex: 'realName',
       title: t('page.kyc.realname'),
       align: 'center',
-      width: 150
+      width: 120
     },
     {
       key: 'idType',
       dataIndex: 'idType',
       title: t('page.kyc.type'),
       align: 'center',
-      width: 150
+      width: 100
     },
     {
       key: 'idFile',
@@ -197,17 +209,6 @@ const {
       title: t('page.kyc.file'),
       align: 'center',
       width: 150,
-      // customRender: ({ text }) => h('div', { class: 'image-wrapper' }, [
-      //   h(AImage, {
-      //     src: text || '',
-      //     alt: '证件照片',
-      //     height: 80,
-      //     width: 120,
-      //     style: { objectFit: 'cover' },
-      //     fallback: '/src/assets/images/image-error.png',
-      //     preview: true
-      //   })
-      // ])
     },
     {
       key: 'identifyPicture',
@@ -215,17 +216,6 @@ const {
       title: t('page.kyc.picture'),
       align: 'center',
       width: 150,
-    //   customRender: ({ text }) => h('div', { class: 'image-wrapper' }, [
-    //     h(AImage, {
-    //       src: text || '',
-    //       alt: '面部照片',
-    //       height: 80,
-    //       width: 120,
-    //       style: { objectFit: 'cover' },
-    //       fallback: '/src/assets/images/image-error.png',
-    //       preview: true
-    //     })
-    //   ])
     },
     {
       key: 'status',
@@ -239,7 +229,7 @@ const {
       dataIndex: 'createTime',
       title: t('page.kyc.createtime'),
       align: 'center',
-      width: 180
+      width: 150
     },
     {
       key: 'operate',
@@ -332,4 +322,32 @@ const handleReject = (record: Api.Kyc.KycInfo) => {
   overflow: hidden;
   cursor: pointer;
 }
+
+.table-image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  width: 100%;
+  height: 100%;
+  min-height: 80px;
+}
+
+:deep(.kyc-image) {
+  width: 90%;
+  max-width: 140px;
+  aspect-ratio: 3/2;
+  border-radius: 4px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+:deep(.ant-image-mask) {
+  border-radius: 4px;
+}
 </style>