!246 Optimized the button style of the tag, modified the misalignment of the...

!246 Optimized the button style of the tag, modified the misalignment of the table header and the table border
Merge pull request !246 from 秦君艳/master

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;

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;