From 4108e68927ae78b0286da24f3ff13800e7da94ac Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 2 Jun 2021 19:22:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(fix):=E5=89=8D=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/index.vue            |  2 +-
 frontend/src/views/dataset/index.vue          |  4 +-
 frontend/src/views/panel/list/PanelList.vue   |  2 +-
 frontend/src/views/panel/list/PanelMain.vue   |  6 +-
 .../src/views/panel/list/PanelViewShow.vue    | 66 +++++++++----------
 5 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/frontend/src/views/chart/index.vue b/frontend/src/views/chart/index.vue
index 4047c86112..df5e2c6de1 100644
--- a/frontend/src/views/chart/index.vue
+++ b/frontend/src/views/chart/index.vue
@@ -53,7 +53,7 @@ export default {
 <style scoped>
   .ms-aside-container {
     height: calc(100vh - 56px);
-    padding: 15px;
+    padding: 10px 15px;
     min-width: 260px;
     max-width: 460px;
   }
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index eb9e12d16c..22f9d42af4 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -73,14 +73,14 @@ export default {
 <style scoped>
   .ms-aside-container {
     height: calc(100vh - 56px);
-    padding: 15px;
+    padding: 10px 15px;
     min-width: 260px;
     max-width: 460px;
   }
 
   .ms-main-container {
     height: calc(100vh - 56px);
-    padding: 15px 15px 0 15px;
+    padding: 10px 15px 0 15px;
   }
 
 </style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index de9b7c46da..52f38538e4 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -1,5 +1,5 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col style="padding: 0 10px 0 10px;">
+  <el-col style="padding: 0 5px 0 5px;">
     <el-col>
       <el-row>
         <span class="header-title">{{ $t('panel.default_panel') }}</span>
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index ae4c3e114f..bcbfd5b6c4 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -1,6 +1,6 @@
 <template>
   <de-container>
-    <de-aside-container>
+    <de-aside-container style="padding: 0 10px;">
       <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
         <el-tab-pane name="PanelList">
           <span slot="label"><i class="el-icon-document" />{{ $t('panel.panel_list') }}</span>
@@ -107,4 +107,8 @@ export default {
   .tab-panel>>>.el-tabs__nav-wrap::after {
     height: 1px;
   }
+  .tab-panel>>>.el-tabs__item{
+    width: 10px;
+    padding: 0 10px;
+  }
 </style>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 7af7f7c141..909e16caea 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -3,39 +3,40 @@
     <el-col v-if="panelInfo.name.length>0" class="panel-design">
       <el-row class="panel-design-head">
         <!--仪表板头部区域-->
-        <el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
-          <span>{{ panelInfo.name || '测试仪表板' }}</span>
-        </el-col>
-        <el-col :span="12">
-          <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
-            <el-tooltip :content="$t('panel.save_to_panel')">
-              <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
-            </el-tooltip>
-          </span>
-          <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
-            <el-tooltip :content="$t('panel.export_to_panel')">
-              <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
-            </el-tooltip>
-          </span>
-          <span style="float: right;margin-right: 10px">
-            <el-tooltip :content="$t('panel.preview')">
-              <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
-            </el-tooltip>
-          </span>
+        <div style="border-bottom: 1px solid #dfe4ed;height: 100%;">
+          <el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
+            <span>{{ panelInfo.name || '测试仪表板' }}</span>
+          </el-col>
+          <el-col :span="12">
+            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
+              <el-tooltip :content="$t('panel.save_to_panel')">
+                <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
+              </el-tooltip>
+            </span>
+            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
+              <el-tooltip :content="$t('panel.export_to_panel')">
+                <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
+              </el-tooltip>
+            </span>
+            <span style="float: right;margin-right: 10px">
+              <el-tooltip :content="$t('panel.preview')">
+                <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
+              </el-tooltip>
+            </span>
 
-          <span v-if="!hasStar && panelInfo" style="float: right;margin-right: 10px">
-            <el-tooltip :content="$t('panel.store')">
-              <el-button class="el-icon-star-off" size="mini" circle @click="star" />
-            </el-tooltip>
-          </span>
-
-          <span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
-            <el-tooltip :content="$t('commons.cancel')">
-              <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
-            </el-tooltip>
-          </span>
-        </el-col>
+            <span v-if="!hasStar && panelInfo" style="float: right;margin-right: 10px">
+              <el-tooltip :content="$t('panel.store')">
+                <el-button class="el-icon-star-off" size="mini" circle @click="star" />
+              </el-tooltip>
+            </span>
 
+            <span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
+              <el-tooltip :content="$t('commons.cancel')">
+                <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
+              </el-tooltip>
+            </span>
+          </el-col>
+        </div>
       </el-row>
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
@@ -217,9 +218,8 @@ export default {
   .panel-design-head {
     height: 40px;
     background-color: white;
-    padding: 0 6px;
+    padding: 0 10px;
     line-height: 40px;
-    border-bottom: 1px solid #dfe4ed;
   }
 
   .panel-design-preview {