From 54a6c69a7a8ddf8e9bf5b3c171d277de7f9ef859 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Thu, 18 Aug 2022 14:34:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=84=E4=B8=AAItem=E4=B9=8B?=
 =?UTF-8?q?=E9=97=B4=E5=88=86=E5=89=B2=E7=BA=BF=E5=9C=A8=E6=B7=B1=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=9A=84=E6=A0=B7=E5=BC=8F=20#6?=
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 | 22 ++++++++++++++--------
 src/views/Main.vue                 |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index e3ff187..b63f94b 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -26,7 +26,7 @@
           </template>
           <template v-if="item.type === 'image'">
             <img class="clip-data-image" :src="item.data" alt="Image" />
-            <div class="clip-data-status">{{ item.size }}</div>
+            <div class="clip-data-status image">{{ item.size }}</div>
           </template>
           <template v-if="item.type === 'file'">
             <div
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index c7e55c8..5e03586 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -4,13 +4,14 @@
     display: flex;
     justify-content: space-between;
     border: 0px solid @bg-color;
-    /* 有上边框占用px 但是不显示(与背景同色) */
-    border-width: 1px 0px 1px 0px;
-    border-color: @bg-color @bg-color #eee @bg-color;
+    margin: 0px 5px;
+    /* 占用px 但是不显示(与背景同色) */
+    border-width: 1px 1px 1px 1px;
+    border-color: @text-bg-color-lighter @bg-color @text-bg-color-lighter @bg-color;
     cursor: pointer;
     &.active {
       border: 0px solid @primary-color;
-      border-width: 1px 0px 1px 0px;
+      border-width: 1px 1px 1px 1px;
       background-color: @text-bg-color-lighter;
     }
     .clip-info {
@@ -46,19 +47,24 @@
         flex-direction: column;
         color: @text-color;
         img.clip-data-image {
+          // 此 class用于区分 file的 image
           max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
           max-width: 90%;
           padding: 5px;
-          background-color: @text-color-lighter;
+          background-color: @bg-color;
           border-radius: 5px;
         }
         .clip-data-status {
           position: absolute;
           width: fit-content;
-          color: @bg-color;
-          background-color: @text-color-lighter;
+          color: @text-color;
+          background-color: @primary-color-lighter;
           border-radius: 5px;
-          padding: 3px;
+          padding: 2px;
+          font-size: 13px;
+          &.image {
+            margin: 10px;
+          }
         }
       }
     }
diff --git a/src/views/Main.vue b/src/views/Main.vue
index f7a6933..b3b39f7 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -168,7 +168,7 @@ onMounted(() => {
   }
 }
 .clip-break {
-  height: 55px;
+  height: 60px;
 }
 .clip-empty-status {
   height: 100%;