From 3ad368b1100989a226c047058556c65306d0f9cf Mon Sep 17 00:00:00 2001
From: qin_jun_yan <qinjunyan1@huawei.com>
Date: Fri, 5 Jun 2020 16:18:59 +0800
Subject: [PATCH] Optimized the button style of the tag, modified the
 misalignment of the table header and the table border

---
 .../src/views/train-manage/data-traceback.vue | 55 ++++++++++-------
 .../views/train-manage/model-traceback.vue    | 59 +++++++++++--------
 2 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/mindinsight/ui/src/views/train-manage/data-traceback.vue b/mindinsight/ui/src/views/train-manage/data-traceback.vue
index 469f524..0c30d48 100644
--- a/mindinsight/ui/src/views/train-manage/data-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/data-traceback.vue
@@ -284,27 +284,33 @@ limitations under the License.
           </div>
         </div>
         <div class="btn-container-margin">
-          <el-button type="primary"
-                     size="mini"
-                     class="custom-btn"
-                     @click="iconChangeSave(tagScope)"
-                     plain>
-            {{ $t('public.sure')}}
-          </el-button>
-          <el-button type="primary"
-                     size="mini"
-                     class="custom-btn"
-                     @click="clearIcon(tagScope)"
-                     plain>
-            {{ $t('public.clear')}}
-          </el-button>
-          <el-button type="primary"
-                     size="mini"
-                     class="custom-btn"
-                     @click="cancelChangeIcon(tagScope.row)"
-                     plain>
-            {{ $t('public.cancel')}}
-          </el-button>
+          <div class="tag-button-container">
+            <el-button type="primary"
+                       size="mini"
+                       class="custom-btn"
+                       @click="iconChangeSave(tagScope)"
+                       plain>
+              {{ $t('public.sure')}}
+            </el-button>
+          </div>
+          <div class="tag-button-container">
+            <el-button type="primary"
+                       size="mini"
+                       class="custom-btn"
+                       @click="clearIcon(tagScope)"
+                       plain>
+              {{ $t('public.clear')}}
+            </el-button>
+          </div>
+          <div class="tag-button-container">
+            <el-button type="primary"
+                       size="mini"
+                       class="custom-btn"
+                       @click="cancelChangeIcon(tagScope.row)"
+                       plain>
+              {{ $t('public.cancel')}}
+            </el-button>
+          </div>
         </div>
       </div>
     </div>
@@ -1966,7 +1972,12 @@ export default {
     border: 1px solid #00a5a7 !important;
   }
   .btn-container-margin {
-    margin: 0 55px 10px;
+    margin: 0 10%;
+  }
+  .tag-button-container {
+    display: inline-block;
+    width: 33.3%;
+    text-align: center;
   }
   .custom-btn {
     border: 1px solid #00a5a7;
diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue
index b14adbf..e966da9 100644
--- a/mindinsight/ui/src/views/train-manage/model-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue
@@ -313,27 +313,33 @@ limitations under the License.
           </div>
         </div>
         <div class="btn-container-margin">
-          <el-button type="primary"
-                     size="mini"
-                     class="custom-btn"
-                     @click="iconChangeSave(tagScope)"
-                     plain>
-            {{$t('public.sure')}}
-          </el-button>
-          <el-button type="primary"
-                     size="mini"
-                     class="custom-btn"
-                     @click="clearIcon(tagScope)"
-                     plain>
-            {{$t('public.clear')}}
-          </el-button>
-          <el-button type="primary"
-                     size="mini"
-                     class="custom-btn"
-                     @click="cancelChangeIcon(tagScope.row)"
-                     plain>
-            {{$t('public.cancel')}}
-          </el-button>
+          <div class="tag-button-container">
+            <el-button type="primary"
+                       size="mini"
+                       class="custom-btn"
+                       @click="iconChangeSave(tagScope)"
+                       plain>
+              {{$t('public.sure')}}
+            </el-button>
+          </div>
+          <div class="tag-button-container">
+            <el-button type="primary"
+                       size="mini"
+                       class="custom-btn"
+                       @click="clearIcon(tagScope)"
+                       plain>
+              {{$t('public.clear')}}
+            </el-button>
+          </div>
+          <div class="tag-button-container">
+            <el-button type="primary"
+                       size="mini"
+                       class="custom-btn"
+                       @click="cancelChangeIcon(tagScope.row)"
+                       plain>
+              {{$t('public.cancel')}}
+            </el-button>
+          </div>
         </div>
       </div>
     </div>
@@ -1975,7 +1981,9 @@ export default {
   height: 100%;
   overflow-y: auto;
   position: relative;
-
+  .el-table th.gutter {
+    display: table-cell !important;
+  }
   .icon-border {
     border: 1px solid #00a5a7 !important;
   }
@@ -2022,7 +2030,12 @@ export default {
     height: 46px;
   }
   .btn-container-margin {
-    margin: 0 55px 10px;
+    margin: 0 10%;
+  }
+  .tag-button-container {
+    display: inline-block;
+    width: 33.3%;
+    text-align: center;
   }
   .btns-container {
     padding: 14px 32px 4px;
-- 
GitLab