From 5461dde2c8682615cf4bf05e5ead4dd35fc9e76e Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sun, 20 Dec 2020 12:41:24 +0800
Subject: [PATCH] update

---
 public/index.html                     |  2 +-
 src/views/Editor/CanvasTool/index.vue | 49 ++++++++++++++++++++++++++-
 src/views/Editor/Thumbnails/index.vue | 24 +++++++++++--
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 77fc4c4..e3f9d2d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,6 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
     
-    <script src="//at.alicdn.com/t/font_2266335_sink06liepd.js"></script>
+    <script src="//at.alicdn.com/t/font_2266335_1ahwvgfxj4ej.js"></script>
   </body>
 </html>
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 5b3b00c..43657e2 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -1,6 +1,25 @@
 <template>
   <div class="canvas-tool">
-    
+    <div class="left-handler">
+      <IconFont class="handler-item" type="icon-undo" />
+      <IconFont class="handler-item" type="icon-redo" />
+    </div>
+
+    <div class="add-element-handler">
+      <IconFont class="handler-item" type="icon-font-size" />
+      <IconFont class="handler-item" type="icon-image" />
+      <IconFont class="handler-item" type="icon-star" />
+      <IconFont class="handler-item" type="icon-line" />
+      <IconFont class="handler-item" type="icon-table" />
+      <IconFont class="handler-item" type="icon-piechart" />
+    </div>
+
+    <div class="right-handler">
+      <IconFont class="handler-item viewport-size" type="icon-minus" />
+      <span class="text">100%</span>
+      <IconFont class="handler-item viewport-size" type="icon-plus" />
+      <IconFont class="handler-item viewport-size" type="icon-number" />
+    </div>
   </div>
 </template>
 
@@ -14,7 +33,35 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .canvas-tool {
+  position: relative;
   border-bottom: 1px solid #eee;
   background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.left-handler {
+  display: flex;
+  align-items: center;
+}
+.add-element-handler {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.handler-item {
+  margin: 0 10px;
+  cursor: pointer;
+}
+.right-handler {
+  display: flex;
+  align-items: center;
+
+  .viewport-size {
+    font-size: 12px;
+    margin-top: -1px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index 2f667d5..e1094b7 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -4,6 +4,9 @@
     @mousedown="() => setThumbnailsFocus(true)"
     v-click-outside="() => setThumbnailsFocus(false)"
   >
+    <div class="add-slide">
+      <span>+ 添加幻灯片</span>
+    </div>
     <draggable 
       class="thumbnail-list"
       :modelValue="slides"
@@ -22,7 +25,7 @@
         >
           <div class="slide-index">{{ fillDigit(index + 1) }}</div>
           <div class="thumbnail"></div>
-        </div>        
+        </div>
       </template>
     </draggable>
   </div>
@@ -152,9 +155,26 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   overflow: auto;
-  padding: 5px 0;
   user-select: none;
 }
+.add-slide {
+  height: 40px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    cursor: pointer;
+    padding: 5px;
+    &:hover {
+      border: 1px solid #eee;
+    }
+  }
+}
+.thumbnail-list {
+  padding: 5px 0;
+}
 .thumbnail-wrapper {
   display: flex;
   justify-content: center;