From ba3117fbad0246891a0976932b8161a8cd54c68a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 28 May 2021 10:18:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20UI=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/canvas/components/Toolbar.vue  |  8 ++---
 frontend/src/lang/tw.js                       |  1 +
 frontend/src/views/panel/edit/index.vue       | 29 ++++++++++++++-----
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 15825ee885..fb885067bf 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -11,10 +11,6 @@
       <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
       <!--        <input v-model="scale" @input="handleScaleChange"> %-->
       <!--      </div>-->
-
-      <el-tooltip :content="$t('panel.style')">
-        <el-button :class="buttonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
-      </el-tooltip>
       <el-tooltip :content="$t('panel.undo') ">
         <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
       </el-tooltip>
@@ -300,11 +296,11 @@ export default {
   }
 
   .button-show{
-    background-color: #ebf2fe
+    background-color: #ebf2fe!important;
   }
 
   .button-closed{
-    background-color: #ffffff
+    background-color: #ffffff!important;
   }
 
 </style>
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index f4217c1f0c..54d5e9df5a 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -87,6 +87,7 @@ export default {
     password_error: '密碼不小於8位'
   },
   commons: {
+    close: '关闭',
     icon: '圖標',
     all: '全部',
     enable: '啟用',
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index d671c5c6e3..6594527978 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -13,14 +13,14 @@
     </el-header>
     <de-container>
       <de-aside-container class="ms-aside-container">
-        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
-          <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
+        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
+          <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
             <!-- 视图图表 -->
-            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
+            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
               <el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
             </div>
             <!-- 视图文字 -->
-            <div style="position: relative; margin: 18px auto 30px;">
+            <div style="position: relative; margin: 18px auto 16px;">
               <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
                 {{ $t('panel.view') }}
               </div>
@@ -30,7 +30,7 @@
               <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
             </div>
             <!-- 过滤组件 -->
-            <div tabindex="-1" style="position: relative; margin: 20px auto">
+            <div tabindex="-1" style="position: relative; margin: 16px auto">
               <div style="height: 60px; position: relative">
                 <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
                   <el-button circle :class="show&&showIndex===1? 'button-show':'button-closed'" class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
@@ -42,6 +42,21 @@
                 </div>
               </div>
             </div>
+            <!-- 分割线 -->
+            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
+              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+            </div>
+
+            <!-- 视图图表 -->
+            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
+              <el-button :class="show&&showIndex===2? 'button-show':'button-closed'" circle class="el-icon-magic-stick" size="mini" @click="showPanel(2)" />
+            </div>
+            <!-- 视图文字 -->
+            <div style="position: relative; margin: 18px auto 16px;">
+              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                {{ $t('panel.style') }}
+              </div>
+            </div>
             <!-- 视图分割线 -->
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
               <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
@@ -490,11 +505,11 @@ export default {
   overflow-y: auto;
 }
 .button-show{
-    background-color: #ebf2fe
+    background-color: #ebf2fe!important;
 }
 
 .button-closed{
-  background-color: #ffffff
+  background-color: #ffffff!important;
 }
 
 </style>