From d5da6f3a372a9faa2cea6042bed06901dcd0d0e0 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 14 May 2022 14:59:28 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8F=96=E8=89=B2=E5=99=A8=E6=9C=80?=
 =?UTF-8?q?=E8=BF=91=E4=BD=BF=E7=94=A8=E9=A2=9C=E8=89=B2=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker/index.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index 8d755cd9..38b34d0c 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -63,10 +63,11 @@
       <div
         v-for="c in recentColors"
         :key="c"
-        class="picker-presets-color"
-        :style="{ background: c }"
+        class="picker-presets-color alpha"
         @click="selectPresetColor(c)"
-      ></div>
+      >
+        <div class="picker-presets-color-content" :style="{ background: c }"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -357,7 +358,7 @@ export default defineComponent({
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    font-size: 22px;
+    font-size: 20px;
     cursor: pointer;
   }
   .input {
@@ -376,6 +377,13 @@ export default defineComponent({
   flex-shrink: 0;
   position: relative;
   cursor: pointer;
+
+  &.alpha {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jfPbs2X8GPEBSUhKfNAPjqAHDIgz+//+PNx08f/4cfzoYNYCBceiHAQC5flV5JzgrxQAAAABJRU5ErkJggg==);
+  }
+}
+.picker-presets-color-content {
+  @include absolute-0();
 }
 .picker-gradient-presets {
   @include flex-grid-layout();