From a21882a250f0bbed1b51c9b0e499805edfe65adb Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Mon, 15 Aug 2022 17:27:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4`more`=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=20=E6=94=B9=E4=B8=BA=E6=98=BE=E7=A4=BA=E5=9C=A8`data`?=
 =?UTF-8?q?=E5=B7=A6=E4=B8=8A=E8=A7=92=E7=9A=84div?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipItemList.vue          | 30 ++++++++++++++++--------------
 src/style/cpns/clip-item-list.less | 18 +++---------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index 36bd0f2..46f29c9 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -13,28 +13,32 @@
         </div>
         <div class="clip-data">
           <template v-if="item.type === 'text'">
+            <div
+              class="clip-data-status"
+              v-if="item.data.length >= 500"
+              @click.stop="handleDataClick(item)"
+            >
+              点此查看全部>>
+            </div>
             {{ item.data.slice(0, 500).trim() }}
           </template>
           <template v-if="item.type === 'image'">
             <img :src="item.data" alt="Image" />
-            <div class="clip-image-size">{{ item.size }}</div>
+            <div class="clip-data-status">{{ item.size }}</div>
           </template>
           <template v-if="item.type === 'file'">
+            <div
+              class="clip-data-status"
+              v-if="JSON.parse(item.data).length >= 8"
+              @click.stop="handleDataClick(item)"
+            >
+              点此查看全部>>
+            </div>
             <FileList :data="JSON.parse(item.data)" />
           </template>
         </div>
       </div>
       <div class="clip-count">{{ index + 1 }}</div>
-      <div
-        class="clip-more"
-        v-if="
-          (item.type === 'text' && item.data.length >= 500) ||
-          (item.type === 'file' && JSON.parse(item.data).length >= 8)
-        "
-        @click.stop="onDataChange(item)"
-      >
-        📃
-      </div>
     </div>
   </div>
 </template>
@@ -60,9 +64,7 @@ const handleItemClick = (ev, item) => {
     window.copy(item)
   }
 }
-const onDataChange = (item) => {
-  emit('onDataChange', item)
-}
+const handleDataClick = (item) => emit('onDataChange', item)
 </script>
 
 <style lang="less" scoped>
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index 335a8a9..409d5d5 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -46,9 +46,10 @@
         img {
           max-height: 150px;
         }
-        .clip-image-size {
+        .clip-data-status {
           position: absolute;
-          background-color: @bg-color;
+          color: @bg-color;
+          background-color: @text-color;
         }
       }
     }
@@ -62,18 +63,5 @@
       color: @text-color-lighter;
       padding: 10px;
     }
-    .clip-more {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
-      font-size: 13px;
-      cursor: pointer;
-      border-radius: 0px 5px 5px 0px;
-    }
-    .clip-more:hover {
-      background-color: @text-bg-color;
-      transition: all 0.15s;
-    }
   }
 }