From 66da683c0f54e338f4694df069184f61fa44a17a Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sun, 3 Jan 2021 01:25:42 +0800
Subject: [PATCH] update

---
 src/assets/styles/global.scss                | 16 +++++++++++++++-
 src/components/ColorPicker/index.vue         |  1 +
 src/views/Editor/Toolbar/SlideStylePanel.vue | 10 +++++++++-
 src/views/Editor/Toolbar/index.vue           |  2 +-
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index cb54c1a4..7989097f 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -59,4 +59,18 @@ a {
 }
 ::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
-}
\ No newline at end of file
+}
+
+.ant-popover {
+  padding-top: 5px !important;
+}
+.ant-popover-arrow {
+  display: none;
+}
+.ant-popover-inner {
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
+  border: 1px solid #eee;
+}
+.ant-popover-inner-content {
+  padding: 12px !important;
+}
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index 096d167b..76f0e1f5 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -160,6 +160,7 @@ export default defineComponent({
   width: 240px;
   background: #fff;
   user-select: none;
+  margin-bottom: -10px;
 }
 .picker-saturation-wrap {
   width: 100%;
diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue
index dccc76b6..e97903e8 100644
--- a/src/views/Editor/Toolbar/SlideStylePanel.vue
+++ b/src/views/Editor/Toolbar/SlideStylePanel.vue
@@ -1,17 +1,25 @@
 <template>
   <div class="slide-style-panel">
-    <ColorPicker v-model="color" />
+    <Popover trigger="click">
+      <template v-slot:content>
+        <ColorPicker v-model="color" />
+      </template>
+      <button>Hover me</button>
+    </Popover>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+
 import ColorPicker from '@/components/ColorPicker/index.vue'
+import { Popover } from 'ant-design-vue'
 
 export default defineComponent({
   name: 'slide-style-panel',
   components: {
     ColorPicker,
+    Popover,
   },
   setup() {
     const color = ref('#888')
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 0969ff56..e279ef5b 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -120,7 +120,7 @@ export default defineComponent({
   }
 }
 .content {
-  padding: 5px;
+  padding: 12px;
   overflow: auto;
 }
 </style>
\ No newline at end of file