From b5efda6a82b0ea48fbd74214c3b16a50f414bf45 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Wed, 17 Aug 2022 23:01:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20#5=20#11=20=E5=9B=BE=E7=89=87=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=A4=9A=E4=BD=99=E5=9B=BE=E5=9D=97=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E6=95=B0=E6=8D=AE=E5=BA=95=E9=83=A8=E8=89=B2=E5=9D=97?=
 =?UTF-8?q?=20=E8=B0=83=E6=95=B4=E5=9B=BE=E7=89=87=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipItemList.vue          |  2 +-
 src/style/cpns/clip-item-list.less | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index cba2e3b..99ad371 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -25,7 +25,7 @@
             <div>{{ item.data.slice(0, 500).trim() }}</div>
           </template>
           <template v-if="item.type === 'image'">
-            <img :src="item.data" alt="Image" />
+            <img class="clip-data-image" :src="item.data" alt="Image" />
             <div class="clip-data-status">{{ item.size }}</div>
           </template>
           <template v-if="item.type === 'file'">
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index df3bcd0..c7e55c8 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -45,16 +45,20 @@
         white-space: pre-wrap;
         flex-direction: column;
         color: @text-color;
-        background-color: @bg-color;
-        img {
-          max-height: 150px;
+        img.clip-data-image {
+          max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
           max-width: 90%;
+          padding: 5px;
+          background-color: @text-color-lighter;
+          border-radius: 5px;
         }
         .clip-data-status {
           position: absolute;
           width: fit-content;
           color: @bg-color;
-          background-color: @text-color;
+          background-color: @text-color-lighter;
+          border-radius: 5px;
+          padding: 3px;
         }
       }
     }