UI the page style issue is fixed 1.optimized the width and layout of

the operate bar on the summary list page   2.modified the theme colors
of the function buttons of the scalar, scalar comparison, histogram and
tensor modules

mindinsight/ui/src/components/debuggerGridTableSimple.vue

@@ -575,11 +575,11 @@ export default {
       line-height: 34px;
       cursor: pointer;
       :hover {
-        color: #3e98c5;
+        color: #00a5a7;
       }
     }
     .active-color {
-      color: #3e98c5;
+      color: #00a5a7;
     }
     .filter-container {
       float: left;

mindinsight/ui/src/components/gridTableSimple.vue

@@ -483,11 +483,11 @@ export default {
       line-height: 34px;
       cursor: pointer;
       :hover {
-        color: #3e98c5;
+        color: #00a5a7;
       }
     }
     .active-color {
-      color: #3e98c5;
+      color: #00a5a7;
     }
     .filter-container {
       float: left;

mindinsight/ui/src/components/histogramUnit.vue

@@ -212,6 +212,7 @@ export default {
           emphasis: {
             iconStyle: {
               textPosition: 'top',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -221,7 +222,7 @@ export default {
               show: true,
               title: this.$t('histogram.fullScreen'),
               iconStyle: {
-                borderColor: this.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: this.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -305,7 +306,7 @@ export default {
           this.charOption.grid.right = 140;
         }
         this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
       } else {
         this.charOption.grid.right = 80;
         this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =

mindinsight/ui/src/views/train-manage/compare-plate.vue

@@ -859,6 +859,7 @@ export default {
           emphasis: {
             iconStyle: {
               textPosition: 'top',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -868,7 +869,7 @@ export default {
               show: true,
               title: this.$t('scalar.fullScreen'),
               iconStyle: {
-                borderColor: sampleObject.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -879,7 +880,7 @@ export default {
               show: true,
               title: this.$t('scalar.toggleYaxisScale'),
               iconStyle: {
-                borderColor: sampleObject.log ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.log ? '#00A5A7' : '#6D7278',
               },
               icon:
                 'path://M0 150 c0 -18 7 -20 85 -20 78 0 85 2 85 20 0 18 -7 20 -85 20 -78 0 -85 -2 ' +
@@ -964,7 +965,7 @@ export default {
       sampleObject.fullScreen = !sampleObject.fullScreen;
       if (sampleObject.fullScreen) {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
         sampleObject.charData.charOption.grid.right = 80;
       } else {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
@@ -1636,7 +1637,7 @@ export default {
       const log = !sampleObject.log;
       if (log) {
         sampleObject.charData.charOption.toolbox.feature.myTool2.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
         sampleObject.charData.charOption.yAxis.type = 'log';
       } else {
         sampleObject.charData.charOption.yAxis.type = 'value';

mindinsight/ui/src/views/train-manage/histogram.vue

@@ -1172,6 +1172,7 @@ export default {
           emphasis: {
             iconStyle: {
               textPosition: 'top',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -1181,7 +1182,7 @@ export default {
               show: true,
               title: this.$t('histogram.fullScreen'),
               iconStyle: {
-                borderColor: sampleObject.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -1360,7 +1361,7 @@ export default {
           sampleObject.charOption.grid.right = 140;
         }
         sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
       } else {
         sampleObject.charOption.grid.right = 80;
         sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =

mindinsight/ui/src/views/train-manage/scalar.vue

@@ -1121,6 +1121,7 @@ export default {
             iconStyle: {
               textPosition: 'top',
               textAlign: 'right',
+              borderColor: '#00A5A7',
             },
           },
           // toolbox
@@ -1130,7 +1131,7 @@ export default {
               show: true,
               title: this.$t('scalar.fullScreen'),
               iconStyle: {
-                borderColor: sampleObject.fullScreen ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.fullScreen ? '#00A5A7' : '#6D7278',
               },
               icon: CommonProperty.fullScreenIcon,
               onclick() {
@@ -1141,7 +1142,7 @@ export default {
               show: true,
               title: this.$t('scalar.toggleYaxisScale'),
               iconStyle: {
-                borderColor: sampleObject.log ? '#3E98C5' : '#6D7278',
+                borderColor: sampleObject.log ? '#00A5A7' : '#6D7278',
               },
               icon:
                 'path://M0 150 c0 -18 7 -20 85 -20 78 0 85 2 85 20 0 18 -7 20 -85 20 -78 0 -85 -2 ' +
@@ -1260,7 +1261,7 @@ export default {
       sampleObject.fullScreen = !sampleObject.fullScreen;
       if (sampleObject.fullScreen) {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
-          '#3E98C5';
+          '#00A5A7';
         sampleObject.charData.charOption.grid.right = 80;
       } else {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
@@ -1810,7 +1811,7 @@ export default {
         const tempOriData = sampleObject.charData.oriData;
         const log = !sampleObject.log;
         if (log) {
-          tempOption.toolbox.feature.myTool2.iconStyle.borderColor = '#3E98C5';
+          tempOption.toolbox.feature.myTool2.iconStyle.borderColor = '#00A5A7';
           tempOption.yAxis.type = 'log';
         } else {
           tempOption.yAxis.type = 'value';

mindinsight/ui/src/views/train-manage/summary-manage.vue

@@ -72,7 +72,7 @@ limitations under the License.
             <el-table-column prop="operate"
                              :label="$t('summaryManage.operation')"
                              class-name="operate-container"
-                             width="400">
+                             :width="operateWidth">
               <template slot-scope="scope">
                 <span class="menu-item operate-btn"
                       v-if="scope.row.viewDashboard"
@@ -217,6 +217,7 @@ export default {
         type: 0,
       },
       tableDom: null,
+      operateWidth: localStorage.getItem('milang') === 'en-us' ? 415 : 300,
     };
   },
   computed: {},
@@ -542,12 +543,8 @@ export default {
     .list-table {
       height: 100%;
       .operate-container {
-        text-align: right;
         padding-right: 32px;
       }
-      th.operate-container {
-        text-align: center;
-      }
     }
   }
   .pagination-content {