diff --git a/mindinsight/ui/package.json b/mindinsight/ui/package.json
index 952fe9f1..be70fa39 100644
--- a/mindinsight/ui/package.json
+++ b/mindinsight/ui/package.json
@@ -30,8 +30,6 @@
     "eslint": "6.6.0",
     "eslint-config-google": "0.13.0",
     "eslint-plugin-vue": "5.2.3",
-    "sass": "1.30.0",
-    "sass-loader": "8.0.0",
     "vue-cli-plugin-i18n": "0.6.1",
     "vue-template-compiler": "2.6.11"
   }
diff --git a/mindinsight/ui/src/app.vue b/mindinsight/ui/src/app.vue
index d221055c..2949a6fd 100644
--- a/mindinsight/ui/src/app.vue
+++ b/mindinsight/ui/src/app.vue
@@ -63,21 +63,21 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 #app {
   height: 100%;
   background-color: #e7ecf2;
   min-width: 1260px;
   min-height: 664px;
-  .el-slider__runway {
-    height: 3px;
-  }
-  .el-slider__bar {
-    height: 3px;
-  }
-  .el-slider__button-wrapper {
-    top: -16px;
-  }
+}
+#app .el-slider__runway {
+  height: 3px;
+}
+#app .el-slider__bar {
+  height: 3px;
+}
+#app .el-slider__button-wrapper {
+  top: -16px;
 }
 
 .warm-content {
@@ -87,15 +87,14 @@ export default {
   font-size: 12px;
   padding: 0 14px;
   line-height: 40px;
-  .cancel-icon {
-    width: 12px;
-    height: 40px;
-    background: url('./assets/images/cancel-warm-text.png') no-repeat
-      center/12px 12px;
-    cursor: pointer;
-    float: right;
-    display: block;
-  }
+}
+.warm-content .cancel-icon {
+  width: 12px;
+  height: 40px;
+  background: url('./assets/images/cancel-warm-text.png') no-repeat center/12px 12px;
+  cursor: pointer;
+  float: right;
+  display: block;
 }
 
 .cl-center {
@@ -107,18 +106,21 @@ export default {
 .cl-center-height {
   height: calc(100% - 104px);
 }
+
 .cl-title {
   height: 50px;
   line-height: 50px;
   display: flex;
   background-color: #fff;
 }
+
 .cl-title-left {
   font-size: 20px;
   font-weight: bold;
   padding-left: 32px;
   flex: 1;
 }
+
 .cl-title-right {
   padding-right: 32px;
   flex: 1;
diff --git a/mindinsight/ui/src/assets/css/reset.scss b/mindinsight/ui/src/assets/css/reset.css
similarity index 79%
rename from mindinsight/ui/src/assets/css/reset.scss
rename to mindinsight/ui/src/assets/css/reset.css
index d6e166c0..024f9c3a 100644
--- a/mindinsight/ui/src/assets/css/reset.scss
+++ b/mindinsight/ui/src/assets/css/reset.css
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@import './variable.scss';
-
 html,
 body,
 div,
@@ -80,11 +78,12 @@ td {
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
-  font-family: $bodyFontFamily;
-  font-size: $bodyFontSize;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+  font-size: 14px;
   vertical-align: baseline;
   box-sizing: border-box;
 }
+
 :focus {
   outline: 0;
 }
@@ -98,29 +97,35 @@ a:active {
 }
 
 a {
-  color: $linkColor;
+  color: #3399ff;
 }
+
 a:hover {
-  color: $linkActiveColor;
+  color: #3399ff;
 }
+
 table {
   border-collapse: separate;
   border-spacing: 0;
 }
+
 th,
 td {
   text-align: left;
   font-weight: normal;
 }
+
 img,
 iframe {
   border: none;
   text-decoration: none;
 }
+
 ol,
 ul {
   list-style: none;
 }
+
 input,
 textarea,
 select,
@@ -128,27 +133,29 @@ button {
   font-size: 100%;
   font-family: inherit;
 }
+
 select {
   margin: inherit;
 }
+
 hr {
   margin: 0;
   padding: 0;
   border: 0;
-  color: $bodyColor;
-  background-color: $bodyColor;
+  color: #333;
+  background-color: #333;
   height: 1px;
 }
 
 html,
 body {
   height: 100%;
-  background-color: $bodyBg;
-  font-family: $bodyFontFamily;
-  font-size: $bodyFontSize;
+  background-color: #fff;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: $bodyColor;
+  color: #333;
   box-sizing: border-box;
 }
 
@@ -173,10 +180,15 @@ body {
 ::-webkit-scrollbar-thumb {
   background-color: #dfe7f5;
 }
+
 .select-disable {
-  -moz-user-select: none; /* Firefox */
-  -webkit-user-select: none; /* webkitbrowser */
-  -ms-user-select: none; /* IE10 */
-  -khtml-user-select: none; /* Early browser */
+  -moz-user-select: none;
+  /* Firefox */
+  -webkit-user-select: none;
+  /* webkitbrowser */
+  -ms-user-select: none;
+  /* IE10 */
+  -khtml-user-select: none;
+  /* Early browser */
   user-select: none;
-}
+}
\ No newline at end of file
diff --git a/mindinsight/ui/src/assets/css/variable.scss b/mindinsight/ui/src/assets/css/variable.scss
deleted file mode 100644
index d503342d..00000000
--- a/mindinsight/ui/src/assets/css/variable.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright 2019 Huawei Technologies Co., Ltd.All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* body */
-$bodyBg: #fff; // Default background color
-$bodyColor: #333; // Default font color
-$bodyFontSize: 14px; // Default font size
-$bodyFontFamily: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-  'Microsoft YaHei', Arial, sans-serif; // Default font
-
-/* link */
-$linkColor: #3399ff;
-$linkActiveColor: #3399ff;
-
-/* header */
-$headerBackground: linear-gradient(
-  180deg,
-  #263d5f 0%,
-  #16233b 100%
-); // Head background color
-$headerHeight: 64px; // Head height
-$headerColor: #fff; // Head font color
diff --git a/mindinsight/ui/src/components/autocomplete.vue b/mindinsight/ui/src/components/autocomplete.vue
index c58fe816..3c831dc4 100644
--- a/mindinsight/ui/src/components/autocomplete.vue
+++ b/mindinsight/ui/src/components/autocomplete.vue
@@ -88,7 +88,7 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .rtl-item {
   text-align: right;
   direction: rtl;
diff --git a/mindinsight/ui/src/components/benchmark-bar-chart.vue b/mindinsight/ui/src/components/benchmark-bar-chart.vue
index 1d208319..ceb07499 100644
--- a/mindinsight/ui/src/components/benchmark-bar-chart.vue
+++ b/mindinsight/ui/src/components/benchmark-bar-chart.vue
@@ -224,7 +224,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 .cl-bar-chart {
   width: 100%;
   height: 100%;
diff --git a/mindinsight/ui/src/components/debugger-grid-table-simple.vue b/mindinsight/ui/src/components/debugger-grid-table-simple.vue
index 92f9b4b0..e02521a1 100644
--- a/mindinsight/ui/src/components/debugger-grid-table-simple.vue
+++ b/mindinsight/ui/src/components/debugger-grid-table-simple.vue
@@ -487,12 +487,7 @@ export default {
       if (indexArr.length) {
         const lastIndex = indexArr.pop();
         const filterItem = this.filterArr[lastIndex];
-        if (
-          this.columnLimitNum > 0 &&
-          filterItem &&
-          !filterItem.showError &&
-          filterItem.max >= this.columnLimitNum
-        ) {
+        if (this.columnLimitNum > 0 && filterItem && !filterItem.showError && filterItem.max >= this.columnLimitNum) {
           const result = this.checkFilterLimitOver(filterItem);
           if (result) {
             filterItem.showError = true;
@@ -525,7 +520,7 @@ export default {
       let endValue = tempArr[1] ? tempArr[1] : filter.max + 1;
       startValue = startValue < 0 ? filter.max + Number(startValue) + 1 : Number(startValue);
       endValue = endValue < 0 ? filter.max + Number(endValue) + 1 : Number(endValue);
-      if ((endValue - startValue) > this.columnLimitNum) {
+      if (endValue - startValue > this.columnLimitNum) {
         result = true;
       }
       return result;
@@ -638,126 +633,125 @@ export default {
   destroyed() {},
 };
 </script>
-<style lang="scss">
+<style>
 .cl-slickgrid-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  .data-show-container {
-    width: 100%;
-    flex: 1;
-    .grid-item {
-      width: 100%;
-      height: 100%;
-      ::-webkit-scrollbar-button {
-        z-index: 200;
-        width: 10px;
-        height: 10px;
-        background: #fff;
-        cursor: pointer;
-      }
-      ::-webkit-scrollbar-button:horizontal:single-button:start {
-        background-image: url('../assets/images/scroll-btn-left.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-button:horizontal:single-button:end {
-        background-image: url('../assets/images/scroll-btn-right.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-button:vertical:single-button:start {
-        background-image: url('../assets/images/scroll-btn-up.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-button:vertical:single-button:end {
-        background-image: url('../assets/images/scroll-btn-down.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-thumb {
-        background-color: #bac5cc;
-      }
-      ::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-      }
-    }
-    .error-msg-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .info-show-container {
-    width: 100%;
-  }
-  .operate-container {
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    z-index: 9;
-    flex-wrap: wrap;
-    .full-screen-icon {
-      float: right;
-      margin-left: 15px;
-      height: 100%;
-      line-height: 34px;
-      cursor: pointer;
-      :hover {
-        color: #00a5a7;
-      }
-    }
-    .active-color {
-      color: #00a5a7;
-    }
-    .filter-container {
-      float: left;
-      flex-wrap: wrap;
-      display: flex;
-      .filter-input-title {
-        line-height: 34px;
-        margin-right: 10px;
-      }
-      .error-border {
-        input {
-          border-color: red;
-        }
-      }
-      .filter-input {
-        text-align: center;
-      }
-      .long-input {
-        width: 120px;
-      }
-      .input-behind {
-        padding: 0 5px;
-      }
-      .filter-incorrect-text {
-        margin-left: 10px;
-        line-height: 32px;
-        color: red;
-      }
-    }
-    .shape-wrap {
-      float: left;
-      line-height: 34px;
-      margin-left: 10px;
-    }
-    .accuracy-container {
-      float: right;
-      .select-item-debugger {
-        width: 65px;
-        margin-left: 5px;
-      }
-      .select-category {
-        width: 105px;
-        margin-left: 5px;
-      }
-    }
-  }
 }
+.cl-slickgrid-container .data-show-container {
+  width: 100%;
+  flex: 1;
+}
+.cl-slickgrid-container .data-show-container .grid-item {
+  width: 100%;
+  height: 100%;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button {
+  z-index: 200;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  cursor: pointer;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:horizontal:single-button:start {
+  background-image: url('../assets/images/scroll-btn-left.png');
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:horizontal:single-button:end {
+  background-image: url('../assets/images/scroll-btn-right.png');
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:vertical:single-button:start {
+  background-image: url('../assets/images/scroll-btn-up.png');
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:vertical:single-button:end {
+  background-image: url('../assets/images/scroll-btn-down.png');
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-thumb {
+  background-color: #bac5cc;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.cl-slickgrid-container .data-show-container .error-msg-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cl-slickgrid-container .info-show-container {
+  width: 100%;
+}
+.cl-slickgrid-container .operate-container {
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 9;
+  flex-wrap: wrap;
+}
+.cl-slickgrid-container .operate-container .full-screen-icon {
+  float: right;
+  margin-left: 15px;
+  height: 100%;
+  line-height: 34px;
+  cursor: pointer;
+}
+.cl-slickgrid-container .operate-container .full-screen-icon :hover {
+  color: #00a5a7;
+}
+.cl-slickgrid-container .operate-container .active-color {
+  color: #00a5a7;
+}
+.cl-slickgrid-container .operate-container .filter-container {
+  float: left;
+  flex-wrap: wrap;
+  display: flex;
+}
+.cl-slickgrid-container .operate-container .filter-container .filter-input-title {
+  line-height: 34px;
+  margin-right: 10px;
+}
+.cl-slickgrid-container .operate-container .filter-container .error-border input {
+  border-color: red;
+}
+.cl-slickgrid-container .operate-container .filter-container .filter-input {
+  text-align: center;
+}
+.cl-slickgrid-container .operate-container .filter-container .long-input {
+  width: 120px;
+}
+.cl-slickgrid-container .operate-container .filter-container .input-behind {
+  padding: 0 5px;
+}
+.cl-slickgrid-container .operate-container .filter-container .filter-incorrect-text {
+  margin-left: 10px;
+  line-height: 32px;
+  color: red;
+}
+.cl-slickgrid-container .operate-container .shape-wrap {
+  float: left;
+  line-height: 34px;
+  margin-left: 10px;
+}
+.cl-slickgrid-container .operate-container .accuracy-container {
+  float: right;
+}
+.cl-slickgrid-container .operate-container .accuracy-container .select-item-debugger {
+  width: 65px;
+  margin-left: 5px;
+}
+.cl-slickgrid-container .operate-container .accuracy-container .select-category {
+  width: 105px;
+  margin-left: 5px;
+}
+
 .slick-cell,
 .slick-headerrow-column,
 .slick-footerrow-column {
@@ -770,15 +764,18 @@ export default {
 .ui-widget-content {
   background: none;
 }
+
 .headerStyle {
   vertical-align: middle;
   text-align: center;
 }
+
 .filter-check {
   font-size: 18px;
   color: #00a5a7;
   cursor: pointer;
 }
+
 .table-item-span {
   display: block;
   width: 100%;
diff --git a/mindinsight/ui/src/components/debugger-tensor.vue b/mindinsight/ui/src/components/debugger-tensor.vue
index 6999d59e..74585be4 100644
--- a/mindinsight/ui/src/components/debugger-tensor.vue
+++ b/mindinsight/ui/src/components/debugger-tensor.vue
@@ -1147,431 +1147,412 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .deb-tensor-wrap {
   height: 100%;
   background-color: white;
   position: relative;
   overflow: hidden;
-  & > div {
-    float: left;
-    height: 100%;
-  }
-  .deb-tensor-left {
-    width: 400px;
-    padding-right: 25px;
-    height: 100%;
-    background-color: white;
-    position: relative;
-    transition: width 0.2s;
-    -moz-transition: width 0.2s; /* Firefox 4 */
-    -webkit-transition: width 0.2s; /* Safari and Chrome */
-    -o-transition: width 0.2s; /* Opera */
-    .left-content-title {
-      padding-left: 15px;
-      height: 50px;
-      line-height: 50px;
-      font-weight: bold;
-    }
-    .left-advice {
-      overflow-y: auto;
-      text-overflow: ellipsis;
-      height: calc(100% - 50px);
-    }
-    .left-content-list {
-      border-top: 1px solid #f2f2f2;
-      padding-bottom: 10px;
-      > div {
-        padding-left: 15px;
-      }
-      .detection-judgment {
-        height: 40px;
-        line-height: 40px;
-        font-weight: bold;
-      }
-      .hit-tip {
-        padding: 10px 15px 0 15px;
-        .el-icon-warning {
-          font-size: 14px;
-          color: #e6a23c;
-          padding-right: 4px;
-        }
-      }
-      .reason {
-        display: flex;
-        padding: 1px 15px;
-        width: 100%;
-      }
-      .tensor-icon {
-        width: 6px;
-        height: 6px;
-        border-radius: 3px;
-      }
-      .icon-secondary {
-        background-color: #00a5a7;
-        margin-top: 8px;
-      }
-      .tensor-content {
-        padding-left: 6px;
-        width: calc(100% - 12px);
-      }
-      .tensor-value {
-        padding: 5px 2px;
-        span {
-          padding-right: 5px;
-        }
-      }
-      .tensor-advice {
-        width: 344px;
-        background-color: #f5f7fa;
-        margin-left: 15px;
-        margin-top: 10px;
-        padding: 10px;
-        span {
-          font-weight: bold;
-        }
-      }
-      .advice-list-title {
-        padding: 0px;
-        padding-top: 10px;
-        padding-left: 10px;
-        .advice-list {
-          padding-top: 5px;
-        }
-        .advice-icon {
-          width: 6px;
-          height: 6px;
-          border-radius: 3px;
-          background-color: #00a5a7;
-          display: inline-block;
-        }
-        .advice-content {
-          display: inline-block;
-          padding: 0px 12px;
-          height: 25px;
-          line-height: 25px;
-        }
-      }
-    }
-    .leftNoData {
-      text-align: center;
-      border-top: 1px solid #f2f2f2;
-      padding-top: 15px;
-    }
-    .collapse-btn {
-      position: absolute;
-      right: 2px;
-      width: 31px;
-      height: 100px;
-      top: 50%;
-      margin-top: -50px;
-      cursor: pointer;
-      line-height: 86px;
-      z-index: 1;
-      text-align: center;
-      background-image: url('../assets/images/collapse-left.svg');
-    }
-    .collapse-btn.collapse {
-      background-image: url('../assets/images/collapse-right.svg');
-    }
-    .deb-tensor-left-content {
-      height: 100%;
-      border-right: 1px solid #ebeef5;
-      overflow: auto;
-    }
-  }
-  .deb-tensor-left.collapse {
-    width: 0px;
-  }
-  .deb-tensor-right {
-    width: calc(100% - 400px);
-    height: 100%;
-    transition: width 0.2s;
-    -moz-transition: width 0.2s; /* Firefox 4 */
-    -webkit-transition: width 0.2s; /* Safari and Chrome */
-    -o-transition: width 0.2s; /* Opera */
-    display: flex;
-    flex-direction: column;
-    .deb-con-title {
-      height: 40px;
-      line-height: 40px;
-      flex-shrink: 0;
-      position: relative;
-
-      .deb-con-title-left {
-        position: absolute;
-        left: 0;
-        font-weight: bold;
-        font-size: 16px;
-        width: calc(100% - 100px);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .deb-con-title-right {
-        position: absolute;
-        right: 32px;
-
-        .close-btn {
-          width: 20px;
-          height: 20px;
-          vertical-align: -3px;
-          cursor: pointer;
-          display: inline-block;
-          line-height: 20px;
-          margin-left: 32px;
-        }
-      }
-    }
-    .deb-compare-detail {
-      flex-shrink: 0;
-      padding-right: 32px;
-      span {
-        margin-right: 10px;
-        padding-left: 10px;
-        border-left: 1px solid #e4e7ec;
-      }
-      label {
-        display: inline-block;
-        min-width: 123px;
-        span {
-          border-left: none;
-        }
-      }
-    }
-    .deb-con-slide {
-      height: 40px;
-      line-height: 40px;
-      flex-shrink: 0;
-      position: relative;
-      margin: 5px 0;
-
-      .deb-con-slide-left {
-        float: left;
-        display: flex;
-        margin-left: 10px;
-
-        .deb-slide-title {
-          margin-right: 20px;
-        }
-
-        .deb-slide-width {
-          width: 160px;
-        }
-        .deb-slide-input {
-          width: 60px;
-          margin-left: 10px;
-        }
-      }
-      .deb-con-slide-right {
-        float: left;
-
-        .custom-btn {
-          border: 1px solid #00a5a7;
-          border-radius: 2px;
-        }
-        .green {
-          background-color: #00a5a7;
-          color: white;
-        }
-        .white {
-          background-color: white;
-          color: #00a5a7;
-        }
-      }
-      .deb-con-slide-middle {
-        position: absolute;
-        right: 32px;
-        width: 150px;
-        padding: 10px 0;
-        line-height: 15px;
-        .grident {
-          display: inline-block;
-          width: calc(100% - 70px);
-          background-image: linear-gradient(to right, rgba(227, 125, 41), #fff, rgba(0, 165, 167));
-          text-align: center;
-          color: transparent;
-          border-radius: 10px;
-        }
-      }
-    }
-
-    .deb-con-table {
-      flex: 1;
-      flex-grow: 1;
-      flex-shrink: 1;
-      padding-right: 32px;
-      flex-shrink: 0;
-      .deb-compare-wrap {
-        height: 100%;
-      }
-    }
-    .deb-graph-container {
-      flex: 1;
-      flex-grow: 1;
-      flex-shrink: 1;
-      padding: 10px 32px 10px 0px;
-      position: relative;
-      display: flex;
-      overflow: hidden;
-      .graph-title {
-        position: absolute;
-        font-weight: bold;
-        font-size: 14px;
-        .tip {
-          font-size: 16px;
-          margin-left: 10px;
-          cursor: pointer;
-        }
-      }
-      .nodata {
-        width: calc(100% - 375px);
-        text-align: center;
-        margin-top: 120px;
-      }
-      .deb-graph {
-        width: calc(100% - 375px);
-        .edge {
-          path {
-            stroke: rgb(120, 120, 120);
-          }
-          polygon {
-            stroke: rgb(120, 120, 120);
-            fill: rgb(120, 120, 120);
-          }
-        }
-        .node.operator > ellipse {
-          stroke: #e3aa00;
-          fill: #ffe794;
-        }
-        .node.slot {
-          & > polygon {
-            stroke: #4ea6e6;
-            fill: #c7f5f4;
-          }
-          &.current {
-            & > polygon {
-              stroke: #4ea6e6;
-              fill: #00a5a7;
-            }
-            text {
-              fill: white;
-            }
-          }
-        }
-        .node {
-          &:hover {
-            cursor: pointer;
-            & > polygon,
-            & > ellipse {
-              stroke-width: 2px;
-            }
-          }
-        }
+}
+.deb-tensor-wrap > div {
+  float: left;
+  height: 100%;
+}
+.deb-tensor-wrap .deb-tensor-left {
+  width: 400px;
+  padding-right: 25px;
+  height: 100%;
+  background-color: white;
+  position: relative;
+  transition: width 0.2s;
+  -moz-transition: width 0.2s;
+  /* Firefox 4 */
+  -webkit-transition: width 0.2s;
+  /* Safari and Chrome */
+  -o-transition: width 0.2s;
+  /* Opera */
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-title {
+  padding-left: 15px;
+  height: 50px;
+  line-height: 50px;
+  font-weight: bold;
+}
+.deb-tensor-wrap .deb-tensor-left .left-advice {
+  overflow-y: auto;
+  text-overflow: ellipsis;
+  height: calc(100% - 50px);
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list {
+  border-top: 1px solid #f2f2f2;
+  padding-bottom: 10px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list > div {
+  padding-left: 15px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .detection-judgment {
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .hit-tip {
+  padding: 10px 15px 0 15px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .hit-tip .el-icon-warning {
+  font-size: 14px;
+  color: #e6a23c;
+  padding-right: 4px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .reason {
+  display: flex;
+  padding: 1px 15px;
+  width: 100%;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .tensor-icon {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .icon-secondary {
+  background-color: #00a5a7;
+  margin-top: 8px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .tensor-content {
+  padding-left: 6px;
+  width: calc(100% - 12px);
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .tensor-value {
+  padding: 5px 2px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .tensor-value span {
+  padding-right: 5px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .tensor-advice {
+  width: 344px;
+  background-color: #f5f7fa;
+  margin-left: 15px;
+  margin-top: 10px;
+  padding: 10px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .tensor-advice span {
+  font-weight: bold;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .advice-list-title {
+  padding: 0px;
+  padding-top: 10px;
+  padding-left: 10px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .advice-list-title .advice-list {
+  padding-top: 5px;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .advice-list-title .advice-icon {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #00a5a7;
+  display: inline-block;
+}
+.deb-tensor-wrap .deb-tensor-left .left-content-list .advice-list-title .advice-content {
+  display: inline-block;
+  padding: 0px 12px;
+  height: 25px;
+  line-height: 25px;
+}
+.deb-tensor-wrap .deb-tensor-left .leftNoData {
+  text-align: center;
+  border-top: 1px solid #f2f2f2;
+  padding-top: 15px;
+}
+.deb-tensor-wrap .deb-tensor-left .collapse-btn {
+  position: absolute;
+  right: 2px;
+  width: 31px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+  cursor: pointer;
+  line-height: 86px;
+  z-index: 1;
+  text-align: center;
+  background-image: url('../assets/images/collapse-left.svg');
+}
+.deb-tensor-wrap .deb-tensor-left .collapse-btn.collapse {
+  background-image: url('../assets/images/collapse-right.svg');
+}
+.deb-tensor-wrap .deb-tensor-left .deb-tensor-left-content {
+  height: 100%;
+  border-right: 1px solid #ebeef5;
+  overflow: auto;
+}
+.deb-tensor-wrap .deb-tensor-left.collapse {
+  width: 0px;
+}
+.deb-tensor-wrap .deb-tensor-right {
+  width: calc(100% - 400px);
+  height: 100%;
+  transition: width 0.2s;
+  -moz-transition: width 0.2s;
+  /* Firefox 4 */
+  -webkit-transition: width 0.2s;
+  /* Safari and Chrome */
+  -o-transition: width 0.2s;
+  /* Opera */
+  display: flex;
+  flex-direction: column;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-title {
+  height: 40px;
+  line-height: 40px;
+  flex-shrink: 0;
+  position: relative;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-title .deb-con-title-left {
+  position: absolute;
+  left: 0;
+  font-weight: bold;
+  font-size: 16px;
+  width: calc(100% - 100px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-title .deb-con-title-right {
+  position: absolute;
+  right: 32px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-title .deb-con-title-right .close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 20px;
+  margin-left: 32px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-compare-detail {
+  flex-shrink: 0;
+  padding-right: 32px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-compare-detail span {
+  margin-right: 10px;
+  padding-left: 10px;
+  border-left: 1px solid #e4e7ec;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-compare-detail label {
+  display: inline-block;
+  min-width: 123px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-compare-detail label span {
+  border-left: none;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide {
+  height: 40px;
+  line-height: 40px;
+  flex-shrink: 0;
+  position: relative;
+  margin: 5px 0;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-left {
+  float: left;
+  display: flex;
+  margin-left: 10px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-left .deb-slide-title {
+  margin-right: 20px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-left .deb-slide-width {
+  width: 160px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-left .deb-slide-input {
+  width: 60px;
+  margin-left: 10px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-right {
+  float: left;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-right .custom-btn {
+  border: 1px solid #00a5a7;
+  border-radius: 2px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-right .green {
+  background-color: #00a5a7;
+  color: white;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-right .white {
+  background-color: white;
+  color: #00a5a7;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-middle {
+  position: absolute;
+  right: 32px;
+  width: 150px;
+  padding: 10px 0;
+  line-height: 15px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-slide .deb-con-slide-middle .grident {
+  display: inline-block;
+  width: calc(100% - 70px);
+  background-image: linear-gradient(to right, #e37d29, #fff, #00a5a7);
+  text-align: center;
+  color: transparent;
+  border-radius: 10px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-table {
+  flex: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding-right: 32px;
+  flex-shrink: 0;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-con-table .deb-compare-wrap {
+  height: 100%;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container {
+  flex: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 10px 32px 10px 0px;
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .graph-title {
+  position: absolute;
+  font-weight: bold;
+  font-size: 14px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .graph-title .tip {
+  font-size: 16px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .nodata {
+  width: calc(100% - 375px);
+  text-align: center;
+  margin-top: 120px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph {
+  width: calc(100% - 375px);
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .edge path {
+  stroke: #787878;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .edge polygon {
+  stroke: #787878;
+  fill: #787878;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node.operator > ellipse {
+  stroke: #e3aa00;
+  fill: #ffe794;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node.slot > polygon {
+  stroke: #4ea6e6;
+  fill: #c7f5f4;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node.slot.current > polygon {
+  stroke: #4ea6e6;
+  fill: #00a5a7;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node.slot.current text {
+  fill: white;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node:hover {
+  cursor: pointer;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node:hover > polygon,
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node:hover > ellipse {
+  stroke-width: 2px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .cluster > polygon {
+  stroke: #e4e7ed;
+  fill: #e9fcf9;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node.selected polygon,
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .node.selected ellipse {
+  stroke: red !important;
+  stroke-width: 2px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .edge.selected path {
+  stroke: red;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-graph .edge.selected polygon {
+  stroke: red;
+  fill: red;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info {
+  width: 375px;
+  height: 100%;
+  border-left: solid 2px #e4e7ed;
+  padding-left: 20px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-title {
+  font-size: 14px;
+  font-weight: bold;
+  padding-bottom: 8px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-detail {
+  overflow: auto;
+  height: calc(100% - 30px);
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-detail span {
+  display: inline-block;
+  padding: 5px 0px;
+  min-width: 50%;
+  word-break: break-all;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-detail ul li {
+  padding: 5px 10px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-detail ul li > div {
+  display: inline-block;
+  vertical-align: top;
+  word-break: break-all;
+  line-height: 16px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-detail ul li .attr-key {
+  width: 30%;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-detail ul li .attr-value {
+  width: 70%;
+  padding-left: 10px;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor .tensor-detail ul li:hover {
+  background-color: #e9fcf9;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .tensor {
+  height: 50%;
+  overflow: auto;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .watch-point {
+  height: 50%;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .watch-point .point-list {
+  height: calc(100% - 35px);
+  overflow: auto;
+  text-overflow: ellipsis;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .watch-point .watchPoint-title {
+  padding: 8px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+.deb-tensor-wrap .deb-tensor-right .deb-graph-container .deb-tensor-info .watch-point .watch-judgment {
+  padding: 5px 0;
+}
+.deb-tensor-wrap .deb-tensor-right.collapse {
+  width: calc(100% - 25px);
+}
 
-        .cluster > polygon {
-          stroke: #e4e7ed;
-          fill: #e9fcf9;
-        }
-        .node.selected {
-          polygon,
-          ellipse {
-            stroke: red !important;
-            stroke-width: 2px;
-          }
-        }
-        .edge.selected {
-          path {
-            stroke: red;
-          }
-          polygon {
-            stroke: red;
-            fill: red;
-          }
-        }
-      }
-      .deb-tensor-info {
-        width: 375px;
-        height: 100%;
-        border-left: solid 2px #e4e7ed;
-        padding-left: 20px;
-        .tensor {
-          .tensor-title {
-            font-size: 14px;
-            font-weight: bold;
-            padding-bottom: 8px;
-          }
-          .tensor-detail {
-            overflow: auto;
-            height: calc(100% - 30px);
-            span {
-              display: inline-block;
-              padding: 5px 0px;
-              min-width: 50%;
-              word-break: break-all;
-            }
-            ul {
-              li {
-                padding: 5px 10px;
-                & > div {
-                  display: inline-block;
-                  vertical-align: top;
-                  word-break: break-all;
-                  line-height: 16px;
-                }
-                .attr-key {
-                  width: 30%;
-                }
-                .attr-value {
-                  width: 70%;
-                  padding-left: 10px;
-                }
-                &:hover {
-                  background-color: #e9fcf9;
-                }
-              }
-            }
-          }
-        }
-        .tensor {
-          height: 50%;
-          overflow: auto;
-        }
-        .watch-point {
-          height: 50%;
-          .point-list {
-            height: calc(100% - 35px);
-            overflow: auto;
-            text-overflow: ellipsis;
-          }
-          .watchPoint-title {
-            padding: 8px 0;
-            font-size: 14px;
-            font-weight: bold;
-          }
-          .watch-judgment {
-            padding: 5px 0;
-          }
-        }
-      }
-    }
-  }
-  .deb-tensor-right.collapse {
-    width: calc(100% - 25px);
-  }
-}
-.legend-tip {
-  .legend {
-    margin-top: 10px;
-    .item {
-      display: inline-block;
-      width: 50%;
-      img {
-        vertical-align: sub;
-        height: 20px;
-        margin-left: 10px;
-      }
-    }
-  }
+.legend-tip .legend {
+  margin-top: 10px;
+}
+.legend-tip .legend .item {
+  display: inline-block;
+  width: 50%;
+}
+.legend-tip .legend .item img {
+  vertical-align: sub;
+  height: 20px;
+  margin-left: 10px;
 }
 </style>
diff --git a/mindinsight/ui/src/components/grid-table-simple.vue b/mindinsight/ui/src/components/grid-table-simple.vue
index 33e8326e..9235eef7 100644
--- a/mindinsight/ui/src/components/grid-table-simple.vue
+++ b/mindinsight/ui/src/components/grid-table-simple.vue
@@ -576,122 +576,121 @@ export default {
   destroyed() {},
 };
 </script>
-<style lang="scss">
+<style>
 .cl-slickgrid-container {
   height: 100%;
   display: flex;
   flex-direction: column;
-  .data-show-container {
-    width: 100%;
-    flex: 1;
-    .grid-item {
-      width: 100%;
-      height: 100%;
-      ::-webkit-scrollbar-button {
-        z-index: 200;
-        width: 10px;
-        height: 10px;
-        background: #fff;
-        cursor: pointer;
-      }
-      ::-webkit-scrollbar-button:horizontal:single-button:start {
-        background-image: url('../assets/images/scroll-btn-left.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-button:horizontal:single-button:end {
-        background-image: url('../assets/images/scroll-btn-right.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-button:vertical:single-button:start {
-        background-image: url('../assets/images/scroll-btn-up.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-button:vertical:single-button:end {
-        background-image: url('../assets/images/scroll-btn-down.png');
-        background-position: center;
-      }
-      ::-webkit-scrollbar-thumb {
-        background-color: #bac5cc;
-      }
-      ::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-      }
-    }
-    .error-msg-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .info-show-container {
-    width: 100%;
-  }
-  .operate-container {
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    z-index: 99;
-    flex-wrap: wrap;
-    .full-screen-icon {
-      float: right;
-      margin-left: 15px;
-      height: 100%;
-      line-height: 34px;
-      cursor: pointer;
-      :hover {
-        color: #00a5a7;
-      }
-    }
-    .active-color {
-      color: #00a5a7;
-    }
-    .filter-container {
-      float: left;
-      flex-wrap: wrap;
-      display: flex;
-      .error-border {
-        input {
-          border-color: red;
-        }
-      }
-      .filter-input {
-        text-align: center;
-      }
-      .short-input {
-        width: 50px;
-      }
-      .long-input {
-        width: 120px;
-      }
-      .input-behind {
-        padding: 0 5px;
-      }
-      .filter-incorrect-text {
-        margin-left: 10px;
-        line-height: 32px;
-        color: red;
-      }
-      .filter-input-title {
-        line-height: 34px;
-        margin-right: 10px;
-      }
-    }
-    .accuracy-container {
-      float: right;
-      .select-item {
-        width: 60px;
-      }
-      .select-category {
-        width: 105px;
-        margin-left: 5px;
-      }
-    }
-  }
 }
+.cl-slickgrid-container .data-show-container {
+  width: 100%;
+  flex: 1;
+}
+.cl-slickgrid-container .data-show-container .grid-item {
+  width: 100%;
+  height: 100%;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button {
+  z-index: 200;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  cursor: pointer;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:horizontal:single-button:start {
+  background-image: url("../assets/images/scroll-btn-left.png");
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:horizontal:single-button:end {
+  background-image: url("../assets/images/scroll-btn-right.png");
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:vertical:single-button:start {
+  background-image: url("../assets/images/scroll-btn-up.png");
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-button:vertical:single-button:end {
+  background-image: url("../assets/images/scroll-btn-down.png");
+  background-position: center;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar-thumb {
+  background-color: #bac5cc;
+}
+.cl-slickgrid-container .data-show-container .grid-item ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.cl-slickgrid-container .data-show-container .error-msg-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cl-slickgrid-container .info-show-container {
+  width: 100%;
+}
+.cl-slickgrid-container .operate-container {
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 99;
+  flex-wrap: wrap;
+}
+.cl-slickgrid-container .operate-container .full-screen-icon {
+  float: right;
+  margin-left: 15px;
+  height: 100%;
+  line-height: 34px;
+  cursor: pointer;
+}
+.cl-slickgrid-container .operate-container .full-screen-icon :hover {
+  color: #00a5a7;
+}
+.cl-slickgrid-container .operate-container .active-color {
+  color: #00a5a7;
+}
+.cl-slickgrid-container .operate-container .filter-container {
+  float: left;
+  flex-wrap: wrap;
+  display: flex;
+}
+.cl-slickgrid-container .operate-container .filter-container .error-border input {
+  border-color: red;
+}
+.cl-slickgrid-container .operate-container .filter-container .filter-input {
+  text-align: center;
+}
+.cl-slickgrid-container .operate-container .filter-container .short-input {
+  width: 50px;
+}
+.cl-slickgrid-container .operate-container .filter-container .long-input {
+  width: 120px;
+}
+.cl-slickgrid-container .operate-container .filter-container .input-behind {
+  padding: 0 5px;
+}
+.cl-slickgrid-container .operate-container .filter-container .filter-incorrect-text {
+  margin-left: 10px;
+  line-height: 32px;
+  color: red;
+}
+.cl-slickgrid-container .operate-container .filter-container .filter-input-title {
+  line-height: 34px;
+  margin-right: 10px;
+}
+.cl-slickgrid-container .operate-container .accuracy-container {
+  float: right;
+}
+.cl-slickgrid-container .operate-container .accuracy-container .select-item {
+  width: 60px;
+}
+.cl-slickgrid-container .operate-container .accuracy-container .select-category {
+  width: 105px;
+  margin-left: 5px;
+}
+
 .slick-cell,
 .slick-headerrow-column,
 .slick-footerrow-column {
@@ -704,15 +703,18 @@ export default {
 .ui-widget-content {
   background: none;
 }
+
 .headerStyle {
   vertical-align: middle;
   text-align: center;
 }
+
 .filter-check {
   font-size: 18px;
   color: #00a5a7;
   cursor: pointer;
 }
+
 .table-item-span {
   display: block;
   width: 100%;
diff --git a/mindinsight/ui/src/components/header.vue b/mindinsight/ui/src/components/header.vue
index af84c3ab..3e1b1312 100644
--- a/mindinsight/ui/src/components/header.vue
+++ b/mindinsight/ui/src/components/header.vue
@@ -210,115 +210,101 @@ export default {
   },
 };
 </script>
-<style lang="scss">
-@import '@/assets/css/variable';
-
-// header style
+<style>
 .cl-header {
-  height: $headerHeight;
-  background-image: $headerBackground;
+  height: 64px;
+  background-image: linear-gradient(180deg, #263d5f 0%, #16233b 100%);
   display: flex;
-  color: $headerColor;
+  color: #fff;
   flex-shrink: 0;
-  .md-header-language {
-    width: 100px;
-    line-height: 64px;
-    .spanLine {
-      margin: 0 5px;
-    }
-    .spanLanguage {
-      cursor: pointer;
-    }
-    .active {
-      color: #00a5a7;
-    }
-  }
-  // logo style
-  .cl-header-logo {
-    width: 161px;
-    margin-left: 36px;
-    margin-top: 17px;
-    img {
-      cursor: pointer;
-    }
-  }
-
-  // header right style
-  .cl-header-right {
-    flex: 1;
-    padding-right: 36px;
-    color: #9ea4b3;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    .cl-header-img {
-      margin-left: 20px;
-      cursor: pointer;
-    }
-    .el-icon-edit {
-      margin-left: 5px;
-    }
-
-    i {
-      font-size: 18px;
-      margin: 0 2px;
-      color: #00a5a7;
-      cursor: pointer;
-    }
-
-    .el-icon-close {
-      color: #f56c6c;
-    }
-    .el-input {
-      width: 45px;
-      input {
-        padding: 0;
-        text-align: center;
-      }
-    }
-  }
-
-  // reload style
-  .cl-reload {
-    animation: rotate 1s infinite linear;
-  }
-  @keyframes rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(1turn);
-    }
+}
+.cl-header .md-header-language {
+  width: 100px;
+  line-height: 64px;
+}
+.cl-header .md-header-language .spanLine {
+  margin: 0 5px;
+}
+.cl-header .md-header-language .spanLanguage {
+  cursor: pointer;
+}
+.cl-header .md-header-language .active {
+  color: #00a5a7;
+}
+.cl-header .cl-header-logo {
+  width: 161px;
+  margin-left: 36px;
+  margin-top: 17px;
+}
+.cl-header .cl-header-logo img {
+  cursor: pointer;
+}
+.cl-header .cl-header-right {
+  flex: 1;
+  padding-right: 36px;
+  color: #9ea4b3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.cl-header .cl-header-right .cl-header-img {
+  margin-left: 20px;
+  cursor: pointer;
+}
+.cl-header .cl-header-right .el-icon-edit {
+  margin-left: 5px;
+}
+.cl-header .cl-header-right i {
+  font-size: 18px;
+  margin: 0 2px;
+  color: #00a5a7;
+  cursor: pointer;
+}
+.cl-header .cl-header-right .el-icon-close {
+  color: #f56c6c;
+}
+.cl-header .cl-header-right .el-input {
+  width: 45px;
+}
+.cl-header .cl-header-right .el-input input {
+  padding: 0;
+  text-align: center;
+}
+.cl-header .cl-reload {
+  animation: rotate 1s infinite linear;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
   }
-
-  .cl-header-nav {
-    margin-left: 50px;
-    flex: 2.2;
-
-    .el-menu {
-      border-bottom: none;
-    }
-    .el-menu--horizontal > .el-menu-item {
-      font-size: 16px;
-      color: #fff;
-      padding-top: 4px;
-      max-width: 20%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    .el-menu--horizontal > .el-menu-item.is-active {
-      color: #00a5a7 !important;
-      background: none;
-    }
-
-    .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
-    .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
-    .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
-      background: none;
-      color: #fff;
-    }
+  100% {
+    transform: rotate(1turn);
   }
 }
+.cl-header .cl-header-nav {
+  margin-left: 50px;
+  flex: 2.2;
+}
+.cl-header .cl-header-nav .el-menu {
+  border-bottom: none;
+}
+.cl-header .cl-header-nav .el-menu--horizontal > .el-menu-item {
+  font-size: 16px;
+  color: #fff;
+  padding-top: 4px;
+  max-width: 20%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.cl-header .cl-header-nav .el-menu--horizontal > .el-menu-item.is-active {
+  color: #00a5a7 !important;
+  background: none;
+}
+.cl-header .cl-header-nav .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
+.cl-header .cl-header-nav .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
+.cl-header .cl-header-nav .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+  background: none;
+  color: #fff;
+}
 </style>
diff --git a/mindinsight/ui/src/components/histogram-unit.vue b/mindinsight/ui/src/components/histogram-unit.vue
index 0dce94a0..073d78f4 100644
--- a/mindinsight/ui/src/components/histogram-unit.vue
+++ b/mindinsight/ui/src/components/histogram-unit.vue
@@ -864,26 +864,26 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-histogram-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  .data-show-container {
-    width: 100%;
-    flex: 1;
-    .data-item {
-      width: 100%;
-      height: 100%;
-    }
-    .error-msg-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
+}
+.cl-histogram-container .data-show-container {
+  width: 100%;
+  flex: 1;
+}
+.cl-histogram-container .data-show-container .data-item {
+  width: 100%;
+  height: 100%;
+}
+.cl-histogram-container .data-show-container .error-msg-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/mindinsight/ui/src/components/multiselect-group.vue b/mindinsight/ui/src/components/multiselect-group.vue
index c0a548c8..ad144299 100644
--- a/mindinsight/ui/src/components/multiselect-group.vue
+++ b/mindinsight/ui/src/components/multiselect-group.vue
@@ -390,129 +390,134 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-checklist-container {
   width: 100%;
   height: 100%;
-  .select-content {
-    display: flex;
-    align-items: center;
-    .title {
-      font-size: 14px;
-      vertical-align: middle;
-      flex-shrink: 0;
-    }
-    .select-all {
-      cursor: pointer;
-      flex-shrink: 0;
-    }
-    .select-item-content {
-      display: flex;
-      height: 16px;
-      flex-wrap: wrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .select-content-open {
-      flex: 1;
-      text-align: right;
-      font-size: 14px;
-      color: #00a5a7;
-      cursor: pointer;
-      min-width: 60px;
-    }
-  }
-  .select-content-all {
-    max-height: 150px;
-    padding-left: 72px;
-    overflow-x: hidden;
-    display: flex;
-    flex-wrap: wrap;
-    .label-item {
-      line-height: 14px;
-    }
-    .select-item {
-      height: 25px;
-      margin-top: 25px;
-    }
-  }
-  .select-item {
-    margin-right: 20px;
-    flex-shrink: 0;
-    margin-bottom: 1px;
-    .label-item {
-      width: 100px;
-      display: block;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      text-align: left;
-      position: relative;
-      .loading-icon {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        background: rgba(255, 255, 255, 0.5);
-        i {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-  .item-disable {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  .item-able {
-    cursor: pointer;
-  }
-  .multiCheckBox-border {
-    width: 16px;
-    height: 16px;
-    display: block;
-    margin-right: 20px;
-    float: left;
-  }
-  .checkbox-checked {
-    background-image: url('../assets/images/mult-select.png');
-  }
-  .checkbox-unchecked {
-    background-image: url('../assets/images/mult-unselect.png');
-  }
-  .label-item {
-    font-size: 14px;
-    line-height: 14px;
-    vertical-align: middle;
-    .el-tooltip {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      text-align: left;
-      height: 16px;
-    }
-    span {
-      font-size: 14px;
-      line-height: 14px;
-      display: block;
-    }
-  }
-  .mr24 {
-    margin-right: 24px;
-  }
-  .select-disable {
-    -moz-user-select: none; /*Firefox*/
-    -webkit-user-select: none; /*webkitbrowser*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*Early browser*/
-    user-select: none;
-  }
-  .search-input-item {
-    width: 290px;
-  }
 }
+.cl-checklist-container .select-content {
+  display: flex;
+  align-items: center;
+}
+.cl-checklist-container .select-content .title {
+  font-size: 14px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+.cl-checklist-container .select-content .select-all {
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.cl-checklist-container .select-content .select-item-content {
+  display: flex;
+  height: 16px;
+  flex-wrap: wrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cl-checklist-container .select-content .select-content-open {
+  flex: 1;
+  text-align: right;
+  font-size: 14px;
+  color: #00a5a7;
+  cursor: pointer;
+  min-width: 60px;
+}
+.cl-checklist-container .select-content-all {
+  max-height: 150px;
+  padding-left: 72px;
+  overflow-x: hidden;
+  display: flex;
+  flex-wrap: wrap;
+}
+.cl-checklist-container .select-content-all .label-item {
+  line-height: 14px;
+}
+.cl-checklist-container .select-content-all .select-item {
+  height: 25px;
+  margin-top: 25px;
+}
+.cl-checklist-container .select-item {
+  margin-right: 20px;
+  flex-shrink: 0;
+  margin-bottom: 1px;
+}
+.cl-checklist-container .select-item .label-item {
+  width: 100px;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+  position: relative;
+}
+.cl-checklist-container .select-item .label-item .loading-icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.5);
+}
+.cl-checklist-container .select-item .label-item .loading-icon i {
+  font-weight: bold;
+}
+.cl-checklist-container .item-disable {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.cl-checklist-container .item-able {
+  cursor: pointer;
+}
+.cl-checklist-container .multiCheckBox-border {
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin-right: 20px;
+  float: left;
+}
+.cl-checklist-container .checkbox-checked {
+  background-image: url("../assets/images/mult-select.png");
+}
+.cl-checklist-container .checkbox-unchecked {
+  background-image: url("../assets/images/mult-unselect.png");
+}
+.cl-checklist-container .label-item {
+  font-size: 14px;
+  line-height: 14px;
+  vertical-align: middle;
+}
+.cl-checklist-container .label-item .el-tooltip {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+  height: 16px;
+}
+.cl-checklist-container .label-item span {
+  font-size: 14px;
+  line-height: 14px;
+  display: block;
+}
+.cl-checklist-container .mr24 {
+  margin-right: 24px;
+}
+.cl-checklist-container .select-disable {
+  -moz-user-select: none;
+  /*Firefox*/
+  -webkit-user-select: none;
+  /*webkitbrowser*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*Early browser*/
+  user-select: none;
+}
+.cl-checklist-container .search-input-item {
+  width: 290px;
+}
+
 .tooltip-show-content {
   max-width: 50%;
 }
diff --git a/mindinsight/ui/src/components/radar-chart.vue b/mindinsight/ui/src/components/radar-chart.vue
index 9a1a645a..c86484b9 100644
--- a/mindinsight/ui/src/components/radar-chart.vue
+++ b/mindinsight/ui/src/components/radar-chart.vue
@@ -356,7 +356,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .radar {
   width: 100%;
   height: 100%;
diff --git a/mindinsight/ui/src/components/scatter.vue b/mindinsight/ui/src/components/scatter.vue
index 8102c029..766609c8 100644
--- a/mindinsight/ui/src/components/scatter.vue
+++ b/mindinsight/ui/src/components/scatter.vue
@@ -193,23 +193,23 @@ export default {
   components: {},
 };
 </script>
-<style lang="scss">
+<style>
 .chart-dialog {
   height: 100%;
   position: relative;
-  .y-axis {
-    position: absolute;
-    left: 50px;
-    top: 20px;
-  }
-  .scatter {
-    height: 100%;
-  }
-  .x-axis {
-    position: absolute;
-    bottom: 0;
-    right: 20px;
-  }
+}
+.chart-dialog .y-axis {
+  position: absolute;
+  left: 50px;
+  top: 20px;
+}
+.chart-dialog .scatter {
+  height: 100%;
+}
+.chart-dialog .x-axis {
+  position: absolute;
+  bottom: 0;
+  right: 20px;
 }
 
 .tooltip-msg {
diff --git a/mindinsight/ui/src/components/search-select.vue b/mindinsight/ui/src/components/search-select.vue
index c16d5a8e..b55a2225 100644
--- a/mindinsight/ui/src/components/search-select.vue
+++ b/mindinsight/ui/src/components/search-select.vue
@@ -440,170 +440,166 @@ export default {
   },
 };
 </script>
-<style lang="scss">
-.cl-search-select {
-  .filter-container {
-    .el-input {
-      width: 0;
-      flex-grow: 1;
-      .el-input__inner {
-        padding: 0 9px;
-      }
-    }
-  }
+<style>
+.cl-search-select .filter-container .el-input {
+  width: 0;
+  flex-grow: 1;
+}
+.cl-search-select .filter-container .el-input .el-input__inner {
+  padding: 0 9px;
 }
 </style>
-<style lang="scss" scoped>
+<style scoped>
 .cl-search-select {
   height: 100%;
   width: 100%;
   position: relative;
-  .cl-search-select-inner {
-    height: 100%;
-    border: 1px solid #dcdfe6;
-    border-radius: 1px;
-    background-color: #fff;
-    color: #606266;
-    padding: 0 15px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-  .is-focus {
-    border-color: #00a5a7;
-  }
-  .mul-tag {
-    height: 24px;
-    padding: 0 4px 0 8px;
-    border: 1px solid #d9ecff;
-    border-radius: 4px;
-    background-color: #f4f4f5;
-    border-color: #e9e9eb;
-    margin-right: 6px;
-    max-width: 70%;
-    display: flex;
-    align-items: center;
-    .mul-tag-content {
-      font-size: 12px;
-      white-space: nowrap;
-      overflow: hidden;
-      color: #909399;
-      margin-right: 4px;
-    }
-    .mul-tag-del {
-      font-size: 12px;
-      background-color: #c0c4cc;
-      min-height: 12.8px;
-      min-width: 12.8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      &:hover {
-        background-color: #909399;
-      }
-      .el-icon-close {
-        color: #909399;
-        &:hover {
-          color: #fff;
-        }
-      }
-    }
-  }
-  .single-tag {
-    flex-wrap: nowrap;
-    overflow: hidden;
-  }
-  .select-container {
-    position: absolute;
-    border: 1px solid #e4e7ed;
-    border-radius: 4px;
-    background-color: #fff;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    margin: 5px 0;
-    display: flex;
-    flex-direction: column;
-    max-height: 244px;
-    z-index: 9998;
-    .filter-container {
-      margin-top: 4px;
-      flex-shrink: 0;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 10px;
-      .has-gap {
-        margin-right: 6px;
-      }
-      .able {
-        color: #00a5a7;
-        cursor: pointer;
-      }
-      .disable {
-        color: #c3c3c3;
-        cursor: not-allowed;
-      }
-    }
-    .option-container {
-      overflow-x: hidden;
-      overflow-y: scroll;
-      .select-option {
-        padding: 0 20px;
-        height: 34px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        cursor: pointer;
-        &:hover {
-          background-color: #f5f7fa;
-        }
-        .label-container {
-          white-space: nowrap;
-          max-width: 320px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .icon-container {
-          width: 14px;
-          .icon-no-selected {
-            display: none;
-          }
-        }
-      }
-      .is-selected {
-        color: #00a5a7;
-      }
-      .is-disabled {
-        color: #c0c4cc;
-        cursor: not-allowed !important;
-      }
-      &::-webkit-scrollbar {
-        cursor: pointer;
-        width: 6px;
-      }
-      &::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 6px #fff;
-        background-color: #fff;
-        border-radius: 3px;
-      }
-      &::-webkit-scrollbar-thumb {
-        border-radius: 7px;
-        -webkit-box-shadow: inset 0 0 6px rgba(144, 147, 153, 0.3);
-        background-color: #e8e8e8;
-      }
-      &::-webkit-scrollbar-thumb:hover {
-        -webkit-box-shadow: inset 0 0 6px rgba(144, 147, 153, 0.3);
-        background-color: #cacaca;
-        border-radius: 3px;
-      }
-    }
-    .option-empty {
-      height: 34px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
+}
+.cl-search-select .cl-search-select-inner {
+  height: 100%;
+  border: 1px solid #dcdfe6;
+  border-radius: 1px;
+  background-color: #fff;
+  color: #606266;
+  padding: 0 15px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.cl-search-select .is-focus {
+  border-color: #00a5a7;
+}
+.cl-search-select .mul-tag {
+  height: 24px;
+  padding: 0 4px 0 8px;
+  border: 1px solid #d9ecff;
+  border-radius: 4px;
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+  margin-right: 6px;
+  max-width: 70%;
+  display: flex;
+  align-items: center;
+}
+.cl-search-select .mul-tag .mul-tag-content {
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #909399;
+  margin-right: 4px;
+}
+.cl-search-select .mul-tag .mul-tag-del {
+  font-size: 12px;
+  background-color: #c0c4cc;
+  min-height: 12.8px;
+  min-width: 12.8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.cl-search-select .mul-tag .mul-tag-del:hover {
+  background-color: #909399;
+}
+.cl-search-select .mul-tag .mul-tag-del .el-icon-close {
+  color: #909399;
+}
+.cl-search-select .mul-tag .mul-tag-del .el-icon-close:hover {
+  color: #fff;
+}
+.cl-search-select .single-tag {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.cl-search-select .select-container {
+  position: absolute;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  margin: 5px 0;
+  display: flex;
+  flex-direction: column;
+  max-height: 244px;
+  z-index: 9998;
+}
+.cl-search-select .select-container .filter-container {
+  margin-top: 4px;
+  flex-shrink: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+}
+.cl-search-select .select-container .filter-container .has-gap {
+  margin-right: 6px;
+}
+.cl-search-select .select-container .filter-container .able {
+  color: #00a5a7;
+  cursor: pointer;
+}
+.cl-search-select .select-container .filter-container .disable {
+  color: #c3c3c3;
+  cursor: not-allowed;
+}
+.cl-search-select .select-container .option-container {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.cl-search-select .select-container .option-container .select-option {
+  padding: 0 20px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.cl-search-select .select-container .option-container .select-option:hover {
+  background-color: #f5f7fa;
+}
+.cl-search-select .select-container .option-container .select-option .label-container {
+  white-space: nowrap;
+  max-width: 320px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.cl-search-select .select-container .option-container .select-option .icon-container {
+  width: 14px;
+}
+.cl-search-select .select-container .option-container .select-option .icon-container .icon-no-selected {
+  display: none;
+}
+.cl-search-select .select-container .option-container .is-selected {
+  color: #00a5a7;
+}
+.cl-search-select .select-container .option-container .is-disabled {
+  color: #c0c4cc;
+  cursor: not-allowed !important;
+}
+.cl-search-select .select-container .option-container::-webkit-scrollbar {
+  cursor: pointer;
+  width: 6px;
+}
+.cl-search-select .select-container .option-container::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px #fff;
+  background-color: #fff;
+  border-radius: 3px;
+}
+.cl-search-select .select-container .option-container::-webkit-scrollbar-thumb {
+  border-radius: 7px;
+  -webkit-box-shadow: inset 0 0 6px rgba(144, 147, 153, 0.3);
+  background-color: #e8e8e8;
+}
+.cl-search-select .select-container .option-container::-webkit-scrollbar-thumb:hover {
+  -webkit-box-shadow: inset 0 0 6px rgba(144, 147, 153, 0.3);
+  background-color: #cacaca;
+  border-radius: 3px;
+}
+.cl-search-select .select-container .option-empty {
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/mindinsight/ui/src/components/select-group.vue b/mindinsight/ui/src/components/select-group.vue
index d534bd26..f3b27ae5 100644
--- a/mindinsight/ui/src/components/select-group.vue
+++ b/mindinsight/ui/src/components/select-group.vue
@@ -122,69 +122,69 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .cl-checkboxes-container {
   display: flex;
-  .left {
-    width: 100px;
-    min-width: 100px;
-    .checkboxes-title {
-      line-height: 22px;
-      font-size: 14px;
-      color: #333333;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-  .right {
-    flex-shrink: 1;
-    display: flex;
-    flex-wrap: wrap;
-    .checkboxes-item {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      .checkbox {
-        height: 16px;
-        width: 16px;
-        margin-right: 16px;
-      }
-      .label {
-        width: 100px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        font-size: 14px;
-        color: #333333;
-      }
-      .label-disabled {
-        color: #c0c4cc;
-      }
-      .is-checked {
-        background-image: url('../assets/images/mult-select.png');
-      }
-      .is-unchecked {
-        background-image: url('../assets/images/mult-unselect.png');
-      }
-      .is-disabled {
-        border: 1px solid #dbdbdb;
-        background-color: #e7e7e7;
-      }
-    }
-  }
-  .item {
-    padding-bottom: 10px;
-    margin-right: 20px;
-    height: 32px;
-  }
-  .item-disabled {
-    cursor: not-allowed !important;
-  }
-  .checkboxes-last {
-    display: flex;
-    align-items: center;
-  }
+}
+.cl-checkboxes-container .left {
+  width: 100px;
+  min-width: 100px;
+}
+.cl-checkboxes-container .left .checkboxes-title {
+  line-height: 22px;
+  font-size: 14px;
+  color: #333333;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.cl-checkboxes-container .right {
+  flex-shrink: 1;
+  display: flex;
+  flex-wrap: wrap;
+}
+.cl-checkboxes-container .right .checkboxes-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.cl-checkboxes-container .right .checkboxes-item .checkbox {
+  height: 16px;
+  width: 16px;
+  margin-right: 16px;
+}
+.cl-checkboxes-container .right .checkboxes-item .label {
+  width: 100px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 14px;
+  color: #333333;
+}
+.cl-checkboxes-container .right .checkboxes-item .label-disabled {
+  color: #c0c4cc;
+}
+.cl-checkboxes-container .right .checkboxes-item .is-checked {
+  background-image: url("../assets/images/mult-select.png");
+}
+.cl-checkboxes-container .right .checkboxes-item .is-unchecked {
+  background-image: url("../assets/images/mult-unselect.png");
+}
+.cl-checkboxes-container .right .checkboxes-item .is-disabled {
+  border: 1px solid #dbdbdb;
+  background-color: #e7e7e7;
+}
+.cl-checkboxes-container .item {
+  padding-bottom: 10px;
+  margin-right: 20px;
+  height: 32px;
+}
+.cl-checkboxes-container .item-disabled {
+  cursor: not-allowed !important;
+}
+.cl-checkboxes-container .checkboxes-last {
+  display: flex;
+  align-items: center;
 }
 </style>
diff --git a/mindinsight/ui/src/components/superpose-img.vue b/mindinsight/ui/src/components/superpose-img.vue
index a506b8cc..4a6c056b 100644
--- a/mindinsight/ui/src/components/superpose-img.vue
+++ b/mindinsight/ui/src/components/superpose-img.vue
@@ -96,12 +96,12 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .cl-superpose-image {
   position: relative;
   overflow: hidden;
-  .overlay-background {
-    background: #371956;
-  }
+}
+.cl-superpose-image .overlay-background {
+  background: #371956;
 }
 </style>
diff --git a/mindinsight/ui/src/main.js b/mindinsight/ui/src/main.js
index 985efaa5..ecf83f64 100644
--- a/mindinsight/ui/src/main.js
+++ b/mindinsight/ui/src/main.js
@@ -20,7 +20,7 @@ import store from './store';
 
 import ElementUI from 'element-ui';
 import './assets/css/element.css';
-import './assets/css/reset.scss';
+import './assets/css/reset.css';
 import i18n from './i18n';
 import $ from 'jquery';
 import locale from 'element-ui/lib/locale/lang/en';
diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue
index af667f45..b24c01b5 100644
--- a/mindinsight/ui/src/views/debugger/debugger.vue
+++ b/mindinsight/ui/src/views/debugger/debugger.vue
@@ -1775,645 +1775,640 @@ export default {
   destroyed() {},
 };
 </script>
-<style lang="scss">
+<style>
 .deb-wrap {
   height: 100%;
   background-color: white;
   position: relative;
   overflow: hidden;
-  & > div {
-    float: left;
-    height: 100%;
-  }
-  .left-wrap {
-    width: 400px;
-    padding-right: 25px;
-    height: 100%;
-    background-color: white;
-    position: relative;
-    transition: width 0.2s;
-    -moz-transition: width 0.2s; /* Firefox 4 */
-    -webkit-transition: width 0.2s; /* Safari and Chrome */
-    -o-transition: width 0.2s; /* Opera */
-    .left {
-      height: 100%;
-      background: #fff;
-      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.22);
-      .header {
-        padding: 15px;
-        border-bottom: 1px solid #ebeef5;
-        position: relative;
-        font-weight: bold;
-        .radio-tabs {
-          position: absolute;
-          right: 10px;
-          top: 10px;
-        }
-        .outdate-tip {
-          display: inline-block;
-          margin-left: 7px;
-          .el-icon-warning {
-            color: #e6a23c;
-            font-size: 16px;
-            cursor: pointer;
-          }
-        }
-      }
-      .content {
-        height: calc(100% - 145px);
-        .node-type {
-          height: 50px;
-          padding: 15px 15px 0 15px;
-          .label {
-            display: inline-block;
-            width: 80px;
-          }
-          .el-select {
-            width: calc(100% - 80px);
-          }
-        }
-        .select-wrap {
-          padding: 10px 15px;
-          font-size: 14px;
-          .el-select .el-input {
-            width: 100%;
-          }
-          .input-with-select .el-input-group__prepend {
-            background-color: #fff;
-          }
-          .el-input--suffix .el-input__inner {
-            padding-left: 5px;
-            padding-right: 30px;
-            font-size: 12px;
-          }
-        }
-        .tree-wrap {
-          height: calc(70% - 155px);
-          overflow-y: auto;
-          padding: 0 15px 15px;
-          position: relative;
-          z-index: 2;
-          .image-type {
-            width: 20px;
-            height: 10px;
-            margin-right: 10px;
-          }
-          .el-tree {
-            & > .el-tree-node {
-              min-width: 100%;
-              display: inline-block;
-            }
-          }
-        }
-        .watch-point-wrap {
-          height: 30%;
-          border-top: 1px solid #ebeef5;
-          .title-wrap {
-            height: 30px;
-            line-height: 30px;
-            padding: 0 20px;
-            position: relative;
-            border-bottom: 1px solid #ebeef5;
-            font-weight: bold;
-          }
-          .check-wrap {
-            position: absolute;
-            right: 60px;
-            top: 0px;
-            .el-icon-circle-check {
-              color: #00a5a7;
-              cursor: pointer;
-            }
-            .disable:before {
-              cursor: not-allowed;
-              color: #adb0b8;
-            }
-          }
-          .delete-wrap {
-            position: absolute;
-            right: 35px;
-            top: 0px;
-            .el-icon-delete:before {
-              color: #00a5a7;
-              cursor: pointer;
-            }
-            .disable:before {
-              cursor: not-allowed;
-              color: #adb0b8;
-            }
-          }
-          .add-wrap {
-            position: absolute;
-            right: 10px;
-            top: 0px;
-            .el-icon-circle-plus:before {
-              color: #00a5a7;
-              cursor: pointer;
-            }
-            .disable:before {
-              cursor: not-allowed;
-              color: #adb0b8;
-            }
-          }
-          .content-wrap {
-            padding-left: 20px;
-            position: relative;
-            height: calc(100% - 30px);
-            .list-wrap {
-              max-height: 100%;
-              overflow: auto;
-              padding: 10px 0;
-              .list {
-                margin-bottom: 10px;
-                .name {
-                  .item-content {
-                    display: inline-block;
-                    width: 300px;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
-                  }
-                }
-                .name:hover {
-                  cursor: pointer;
-                  color: #00a5a7;
-                }
-                .name.selected {
-                  color: #00a5a7;
-                  position: relative;
-                  .el-icon-close {
-                    right: 10px;
-                  }
-                  .el-icon-check {
-                    right: 30px;
-                  }
-                  .icon {
-                    position: absolute;
-                    top: 3px;
-                    border: solid 1px;
-                    padding: 1px;
-                    border-radius: 2px;
-                    font-size: 12px;
-                  }
-                }
-              }
-            }
-          }
-        }
-        .custom-tree-node {
-          padding-right: 8px;
-          .const {
-            margin-left: 22px;
-          }
-        }
-        .custom-tree-node.highlight {
-          color: red;
-        }
-        .hit-list-wrap {
-          height: 100%;
-          padding: 10px;
-          .watchpoint-table {
-            max-height: calc(100% - 45px);
-            overflow: auto;
-          }
-          .el-table::before {
-            height: 0;
-          }
-          .watchpoint-page {
-            padding-top: 20px;
-          }
-          .hit-item {
-            word-break: break-all;
-            line-height: 18px;
-            padding: 10px;
-            &:hover {
-              cursor: pointer;
-            }
-          }
-          .selected {
-            color: #00a5a7;
-          }
-          .el-table__expanded-cell[class*='cell'] {
-            padding: 0px 10px 0 50px;
-            ul {
-              background-color: #f5f7fa;
-              li {
-                line-height: 18px;
-                padding: 10px;
-                word-break: break-all;
-                border-top: 1px solid white;
-                border-bottom: 1px solid white;
-                &:hover {
-                  background-color: #ebeef5;
-                }
-                .param {
-                  .tensor-icon {
-                    display: inline-block;
-                    width: 6px;
-                    height: 6px;
-                    border-radius: 3px;
-                    background-color: #00a5a7;
-                    margin-top: 8px;
-                  }
-                }
-                .hit-tip {
-                  margin-top: 10px;
-                  font-size: 12px;
-                  .el-icon-warning {
-                    font-size: 14px;
-                    color: #e6a23c;
-                    padding-right: 4px;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      .btn-wrap {
-        padding: 10px 20px;
-        border-top: 1px solid #ebeef5;
-        .step {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          .custom-btn {
-            margin-left: 10px;
-          }
-        }
-        .btn-two {
-          width: 100%;
-          .custom-btn {
-            height: 30px;
-            margin-top: 10px;
-          }
-        }
-        .el-button + .el-button {
-          margin-left: 0px;
-        }
-        .el-button:not(:last-child) {
-          margin-right: 10px;
-        }
-      }
-    }
-    .collapse-btn {
-      position: absolute;
-      right: 2px;
-      width: 31px;
-      height: 100px;
-      top: 50%;
-      margin-top: -50px;
-      cursor: pointer;
-      line-height: 86px;
-      z-index: 1;
-      text-align: center;
-      background-image: url('../../assets/images/collapse-left.svg');
-    }
-    .collapse-btn.collapse {
-      background-image: url('../../assets/images/collapse-right.svg');
-    }
-  }
-  .left-wrap.collapse {
-    width: 0px;
-  }
-  .right {
-    width: calc(100% - 400px);
-    height: 100%;
-    padding-right: 20px;
-    transition: width 0.2s;
-    -moz-transition: width 0.2s; /* Firefox 4 */
-    -webkit-transition: width 0.2s; /* Safari and Chrome */
-    -o-transition: width 0.2s; /* Opera */
-    .header {
-      padding: 15px;
-      border-bottom: 1px solid #ebeef5;
-      position: relative;
-      background: #fff;
-      .link {
-        color: #00a5a7;
-      }
-      .host {
-        margin-left: 25px;
-      }
-      span.item {
-        .content {
-          color: #00a5a7;
-        }
-      }
-      .item + .item {
-        margin-left: 15px;
-      }
-      .tooltip {
-        margin-left: 5px;
-        cursor: pointer;
-      }
-    }
-    .svg-wrap {
-      height: 50%;
-      border-bottom: 1px solid #ebeef5;
-      position: relative;
-      .btn-wrap {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-      }
-      .graph-container {
-        height: 100%;
-        width: 100%;
-        position: relative;
-        #graph {
-          height: 100%;
-          background-color: #f7faff;
-          .node:hover > path,
-          .node:hover > ellipse,
-          .node:hover > polygon,
-          .node:hover > rect {
-            stroke-width: 2px;
-          }
-          .node.cluster > rect:hover {
-            stroke: #8df1f2;
-          }
-          .selected {
-            stroke: red !important;
-            stroke-width: 2px;
-          }
-          #graph0 > polygon {
-            fill: transparent;
-          }
-          .node {
-            cursor: pointer;
-          }
-          .edge {
-            path {
-              stroke: rgb(120, 120, 120);
-            }
-            polygon {
-              fill: rgb(120, 120, 120);
-            }
-          }
-          .edge.highlighted {
-            path {
-              stroke: red;
-            }
-            polygon {
-              stroke: red;
-              fill: red;
-            }
-            marker {
-              path {
-                fill: red;
-              }
-            }
-          }
-          .node.aggregation > polygon {
-            stroke: #e3aa00;
-            fill: #ffe794;
-          }
-          .node.cluster.aggregation > rect {
-            stroke: #e3aa00;
-            fill: #ffe794;
-            stroke-dasharray: 3, 3;
-          }
-          .node > polygon {
-            stroke: #00a5a7;
-            fill: rgb(141, 241, 242);
-          }
-          .node > ellipse {
-            stroke: #4ea6e6;
-            fill: #b8e0ff;
-          }
-          .plain > path,
-          .plain ellipse {
-            stroke: #e6a23c;
-            fill: #ffd0a6;
-            stroke-dasharray: 1.5, 1.5;
-          }
-          .edge-point ellipse {
-            stroke: #a7a7a7;
-            fill: #a7a7a7;
-          }
-          text {
-            fill: black;
-          }
-        }
-        #contextMenu {
-          display: none;
-          position: absolute;
-          min-width: 150px;
-          border: 1px solid #d4d4d4;
-          ul {
-            background-color: #e2e2e2;
-            border-radius: 2px;
-            li {
-              padding: 5px 18px;
-              cursor: pointer;
-              &:hover {
-                background-color: rgb(120, 120, 120);
-                color: white;
-              }
-            }
-          }
-        }
-      }
-    }
-    .table-container {
-      background: #fff;
-      height: calc(50% - 60px);
-      position: relative;
-      img {
-        position: absolute;
-        right: 10px;
-        top: 12px;
-        cursor: pointer;
-        z-index: 99;
-      }
-      .el-tabs.el-tabs--top {
-        height: 100%;
-        .el-tabs__content {
-          height: calc(100% - 60px);
-          .el-tab-pane {
-            height: 100%;
-          }
-        }
-      }
-      .table-content {
-        height: 100%;
-        overflow: hidden;
-        position: relative;
-        .table-wrap {
-          height: 100%;
-          overflow-y: auto;
-          .el-table .success-row {
-            background: #f0f9eb;
-          }
-        }
-        .value-wrap {
-          text-align: right;
-        }
-        .center {
-          display: inline-block;
-          text-align: center;
-          width: 100%;
-        }
-        .value {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          cursor: pointer;
-          color: #00a5a7;
-          display: inline-block;
-          width: 100%;
-        }
-        .value-tip {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 50px;
-          display: inline-block;
-          vertical-align: middle;
-          text-align: right;
-        }
-        .el-table--border {
-          border-right: none;
-          border-left: none;
-        }
-        .el-table--border td {
-          border-right: none;
-          border-left: none;
-        }
-        .el-table--border th {
-          border-right: none;
-          border-left: none;
-        }
-
-        .el-table th > .cell {
-          border-left: 1px solid #d9d8dd;
-          word-break: keep-all;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .el-table-column--selection .cell {
-          border-left: none !important;
-        }
-      }
-    }
-    .svg-wrap.collapse {
-      height: calc(100% - 100px);
-    }
-    .table-container.collapse {
-      height: 35px;
-      .el-tabs__header {
-        margin: 0;
-      }
-      .table-content {
-        display: none;
-      }
-    }
-  }
-  .right.collapse {
-    width: calc(100% - 25px);
-  }
-  .custom-btn {
-    border: 1px solid #00a5a7;
-    border-radius: 2px;
-    background-color: white;
-    color: #00a5a7;
-  }
-  .custom-btn:hover {
-    background-color: #e9f7f7;
-  }
-  .custom-btn.green {
-    background-color: #00a5a7;
-    color: white;
-  }
-  .custom-btn.green:hover {
-    background-color: #33b7b9;
-  }
-  .is-disabled.custom-btn {
-    background-color: #f5f5f6;
-    border: 1px solid #dfe1e6 !important;
-    color: #adb0b8;
-    &:hover {
-      background-color: #f5f5f6;
-    }
-  }
-  .notShow {
-    display: none;
-  }
-  .creat-watch-point-dialog {
-    .conditions-container {
-      .collection {
-        width: 200px;
-      }
-      .condition,
-      .param,
-      .param-value {
-        margin-left: 10px;
-        width: 200px;
-      }
-      .percent-sign {
-        display: inline-block;
-        text-align: right;
-        width: 20px;
-      }
-      .inclusive-param {
-        text-align: right;
-        .item {
-          margin-top: 10px;
-          display: inline-block;
-        }
-        .item + .item {
-          margin-left: 10px;
-        }
-      }
-    }
-    .error-msg {
-      float: left;
-      .el-icon-warning {
-        color: #e6a23c;
-        font-size: 16px;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .el-dialog__wrapper.pendingTips {
-    position: absolute;
-    .dialog-icon {
-      .el-icon-warning {
-        font-size: 24px;
-        color: #e6a23c;
-        vertical-align: bottom;
-      }
-    }
-    .el-dialog__body {
-      padding: 2px 20px 32px 20px;
-      .dialog-content {
-        line-height: 24px;
-        margin-left: 10px;
-      }
-    }
-    .el-dialog__footer {
-      text-align: center;
-      padding: 10px 20px 32px;
-    }
-  }
-  .el-dialog__wrapper.pendingTips + .v-modal {
-    position: absolute;
-  }
-  .deb-con {
-    position: absolute;
-    top: 0px;
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    z-index: 999;
-  }
 }
+.deb-wrap > div {
+  float: left;
+  height: 100%;
+}
+.deb-wrap .left-wrap {
+  width: 400px;
+  padding-right: 25px;
+  height: 100%;
+  background-color: white;
+  position: relative;
+  transition: width 0.2s;
+  -moz-transition: width 0.2s;
+  /* Firefox 4 */
+  -webkit-transition: width 0.2s;
+  /* Safari and Chrome */
+  -o-transition: width 0.2s;
+  /* Opera */
+}
+.deb-wrap .left-wrap .left {
+  height: 100%;
+  background: #fff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.22);
+}
+.deb-wrap .left-wrap .left .header {
+  padding: 15px;
+  border-bottom: 1px solid #ebeef5;
+  position: relative;
+  font-weight: bold;
+}
+.deb-wrap .left-wrap .left .header .radio-tabs {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.deb-wrap .left-wrap .left .header .outdate-tip {
+  display: inline-block;
+  margin-left: 7px;
+}
+.deb-wrap .left-wrap .left .header .outdate-tip .el-icon-warning {
+  color: #e6a23c;
+  font-size: 16px;
+  cursor: pointer;
+}
+.deb-wrap .left-wrap .left .content {
+  height: calc(100% - 145px);
+}
+.deb-wrap .left-wrap .left .content .node-type {
+  height: 50px;
+  padding: 15px 15px 0 15px;
+}
+.deb-wrap .left-wrap .left .content .node-type .label {
+  display: inline-block;
+  width: 80px;
+}
+.deb-wrap .left-wrap .left .content .node-type .el-select {
+  width: calc(100% - 80px);
+}
+.deb-wrap .left-wrap .left .content .select-wrap {
+  padding: 10px 15px;
+  font-size: 14px;
+}
+.deb-wrap .left-wrap .left .content .select-wrap .el-select .el-input {
+  width: 100%;
+}
+.deb-wrap .left-wrap .left .content .select-wrap .input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+.deb-wrap .left-wrap .left .content .select-wrap .el-input--suffix .el-input__inner {
+  padding-left: 5px;
+  padding-right: 30px;
+  font-size: 12px;
+}
+.deb-wrap .left-wrap .left .content .tree-wrap {
+  height: calc(70% - 155px);
+  overflow-y: auto;
+  padding: 0 15px 15px;
+  position: relative;
+  z-index: 2;
+}
+.deb-wrap .left-wrap .left .content .tree-wrap .image-type {
+  width: 20px;
+  height: 10px;
+  margin-right: 10px;
+}
+.deb-wrap .left-wrap .left .content .tree-wrap .el-tree > .el-tree-node {
+  min-width: 100%;
+  display: inline-block;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap {
+  height: 30%;
+  border-top: 1px solid #ebeef5;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .title-wrap {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 20px;
+  position: relative;
+  border-bottom: 1px solid #ebeef5;
+  font-weight: bold;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .check-wrap {
+  position: absolute;
+  right: 60px;
+  top: 0px;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .check-wrap .el-icon-circle-check {
+  color: #00a5a7;
+  cursor: pointer;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .check-wrap .disable:before {
+  cursor: not-allowed;
+  color: #adb0b8;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .delete-wrap {
+  position: absolute;
+  right: 35px;
+  top: 0px;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .delete-wrap .el-icon-delete:before {
+  color: #00a5a7;
+  cursor: pointer;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .delete-wrap .disable:before {
+  cursor: not-allowed;
+  color: #adb0b8;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .add-wrap {
+  position: absolute;
+  right: 10px;
+  top: 0px;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .add-wrap .el-icon-circle-plus:before {
+  color: #00a5a7;
+  cursor: pointer;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .add-wrap .disable:before {
+  cursor: not-allowed;
+  color: #adb0b8;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap {
+  padding-left: 20px;
+  position: relative;
+  height: calc(100% - 30px);
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap {
+  max-height: 100%;
+  overflow: auto;
+  padding: 10px 0;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list {
+  margin-bottom: 10px;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name .item-content {
+  display: inline-block;
+  width: 300px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name:hover {
+  cursor: pointer;
+  color: #00a5a7;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name.selected {
+  color: #00a5a7;
+  position: relative;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name.selected .el-icon-close {
+  right: 10px;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name.selected .el-icon-check {
+  right: 30px;
+}
+.deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name.selected .icon {
+  position: absolute;
+  top: 3px;
+  border: solid 1px;
+  padding: 1px;
+  border-radius: 2px;
+  font-size: 12px;
+}
+.deb-wrap .left-wrap .left .content .custom-tree-node {
+  padding-right: 8px;
+}
+.deb-wrap .left-wrap .left .content .custom-tree-node .const {
+  margin-left: 22px;
+}
+.deb-wrap .left-wrap .left .content .custom-tree-node.highlight {
+  color: red;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap {
+  height: 100%;
+  padding: 10px;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .watchpoint-table {
+  max-height: calc(100% - 45px);
+  overflow: auto;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .el-table::before {
+  height: 0;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .watchpoint-page {
+  padding-top: 20px;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .hit-item {
+  word-break: break-all;
+  line-height: 18px;
+  padding: 10px;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .hit-item:hover {
+  cursor: pointer;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .selected {
+  color: #00a5a7;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .el-table__expanded-cell[class*='cell'] {
+  padding: 0px 10px 0 50px;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .el-table__expanded-cell[class*='cell'] ul {
+  background-color: #f5f7fa;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .el-table__expanded-cell[class*='cell'] ul li {
+  line-height: 18px;
+  padding: 10px;
+  word-break: break-all;
+  border-top: 1px solid white;
+  border-bottom: 1px solid white;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .el-table__expanded-cell[class*='cell'] ul li:hover {
+  background-color: #ebeef5;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .el-table__expanded-cell[class*='cell'] ul li .param .tensor-icon {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #00a5a7;
+  margin-top: 8px;
+}
+.deb-wrap .left-wrap .left .content .hit-list-wrap .el-table__expanded-cell[class*='cell'] ul li .hit-tip {
+  margin-top: 10px;
+  font-size: 12px;
+}
+.deb-wrap
+  .left-wrap
+  .left
+  .content
+  .hit-list-wrap
+  .el-table__expanded-cell[class*='cell']
+  ul
+  li
+  .hit-tip
+  .el-icon-warning {
+  font-size: 14px;
+  color: #e6a23c;
+  padding-right: 4px;
+}
+.deb-wrap .left-wrap .left .btn-wrap {
+  padding: 10px 20px;
+  border-top: 1px solid #ebeef5;
+}
+.deb-wrap .left-wrap .left .btn-wrap .step {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.deb-wrap .left-wrap .left .btn-wrap .step .custom-btn {
+  margin-left: 10px;
+}
+.deb-wrap .left-wrap .left .btn-wrap .btn-two {
+  width: 100%;
+}
+.deb-wrap .left-wrap .left .btn-wrap .btn-two .custom-btn {
+  height: 30px;
+  margin-top: 10px;
+}
+.deb-wrap .left-wrap .left .btn-wrap .el-button + .el-button {
+  margin-left: 0px;
+}
+.deb-wrap .left-wrap .left .btn-wrap .el-button:not(:last-child) {
+  margin-right: 10px;
+}
+.deb-wrap .left-wrap .collapse-btn {
+  position: absolute;
+  right: 2px;
+  width: 31px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+  cursor: pointer;
+  line-height: 86px;
+  z-index: 1;
+  text-align: center;
+  background-image: url('../../assets/images/collapse-left.svg');
+}
+.deb-wrap .left-wrap .collapse-btn.collapse {
+  background-image: url('../../assets/images/collapse-right.svg');
+}
+.deb-wrap .left-wrap.collapse {
+  width: 0px;
+}
+.deb-wrap .right {
+  width: calc(100% - 400px);
+  height: 100%;
+  padding-right: 20px;
+  transition: width 0.2s;
+  -moz-transition: width 0.2s;
+  /* Firefox 4 */
+  -webkit-transition: width 0.2s;
+  /* Safari and Chrome */
+  -o-transition: width 0.2s;
+  /* Opera */
+}
+.deb-wrap .right .header {
+  padding: 15px;
+  border-bottom: 1px solid #ebeef5;
+  position: relative;
+  background: #fff;
+}
+.deb-wrap .right .header .link {
+  color: #00a5a7;
+}
+.deb-wrap .right .header .host {
+  margin-left: 25px;
+}
+.deb-wrap .right .header span.item .content {
+  color: #00a5a7;
+}
+.deb-wrap .right .header .item + .item {
+  margin-left: 15px;
+}
+.deb-wrap .right .header .tooltip {
+  margin-left: 5px;
+  cursor: pointer;
+}
+.deb-wrap .right .svg-wrap {
+  height: 50%;
+  border-bottom: 1px solid #ebeef5;
+  position: relative;
+}
+.deb-wrap .right .svg-wrap .btn-wrap {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.deb-wrap .right .svg-wrap .graph-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph {
+  height: 100%;
+  background-color: #f7faff;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .node:hover > path,
+.deb-wrap .right .svg-wrap .graph-container #graph .node:hover > ellipse,
+.deb-wrap .right .svg-wrap .graph-container #graph .node:hover > polygon,
+.deb-wrap .right .svg-wrap .graph-container #graph .node:hover > rect {
+  stroke-width: 2px;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .node.cluster > rect:hover {
+  stroke: #8df1f2;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .selected {
+  stroke: red !important;
+  stroke-width: 2px;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph #graph0 > polygon {
+  fill: transparent;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .node {
+  cursor: pointer;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .edge path {
+  stroke: #787878;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .edge polygon {
+  fill: #787878;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .edge.highlighted path {
+  stroke: red;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .edge.highlighted polygon {
+  stroke: red;
+  fill: red;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .edge.highlighted marker path {
+  fill: red;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .node.aggregation > polygon {
+  stroke: #e3aa00;
+  fill: #ffe794;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .node.cluster.aggregation > rect {
+  stroke: #e3aa00;
+  fill: #ffe794;
+  stroke-dasharray: 3, 3;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .node > polygon {
+  stroke: #00a5a7;
+  fill: #8df1f2;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .node > ellipse {
+  stroke: #4ea6e6;
+  fill: #b8e0ff;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .plain > path,
+.deb-wrap .right .svg-wrap .graph-container #graph .plain ellipse {
+  stroke: #e6a23c;
+  fill: #ffd0a6;
+  stroke-dasharray: 1.5, 1.5;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph .edge-point ellipse {
+  stroke: #a7a7a7;
+  fill: #a7a7a7;
+}
+.deb-wrap .right .svg-wrap .graph-container #graph text {
+  fill: black;
+}
+.deb-wrap .right .svg-wrap .graph-container #contextMenu {
+  display: none;
+  position: absolute;
+  min-width: 150px;
+  border: 1px solid #d4d4d4;
+}
+.deb-wrap .right .svg-wrap .graph-container #contextMenu ul {
+  background-color: #e2e2e2;
+  border-radius: 2px;
+}
+.deb-wrap .right .svg-wrap .graph-container #contextMenu ul li {
+  padding: 5px 18px;
+  cursor: pointer;
+}
+.deb-wrap .right .svg-wrap .graph-container #contextMenu ul li:hover {
+  background-color: #787878;
+  color: white;
+}
+.deb-wrap .right .table-container {
+  background: #fff;
+  height: calc(50% - 60px);
+  position: relative;
+}
+.deb-wrap .right .table-container img {
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  cursor: pointer;
+  z-index: 99;
+}
+.deb-wrap .right .table-container .el-tabs.el-tabs--top {
+  height: 100%;
+}
+.deb-wrap .right .table-container .el-tabs.el-tabs--top .el-tabs__content {
+  height: calc(100% - 60px);
+}
+.deb-wrap .right .table-container .el-tabs.el-tabs--top .el-tabs__content .el-tab-pane {
+  height: 100%;
+}
+.deb-wrap .right .table-container .table-content {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.deb-wrap .right .table-container .table-content .table-wrap {
+  height: 100%;
+  overflow-y: auto;
+}
+.deb-wrap .right .table-container .table-content .table-wrap .el-table .success-row {
+  background: #f0f9eb;
+}
+.deb-wrap .right .table-container .table-content .value-wrap {
+  text-align: right;
+}
+.deb-wrap .right .table-container .table-content .center {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+}
+.deb-wrap .right .table-container .table-content .value {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  color: #00a5a7;
+  display: inline-block;
+  width: 100%;
+}
+.deb-wrap .right .table-container .table-content .value-tip {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 50px;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: right;
+}
+.deb-wrap .right .table-container .table-content .el-table--border {
+  border-right: none;
+  border-left: none;
+}
+.deb-wrap .right .table-container .table-content .el-table--border td {
+  border-right: none;
+  border-left: none;
+}
+.deb-wrap .right .table-container .table-content .el-table--border th {
+  border-right: none;
+  border-left: none;
+}
+.deb-wrap .right .table-container .table-content .el-table th > .cell {
+  border-left: 1px solid #d9d8dd;
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.deb-wrap .right .table-container .table-content .el-table-column--selection .cell {
+  border-left: none !important;
+}
+.deb-wrap .right .svg-wrap.collapse {
+  height: calc(100% - 100px);
+}
+.deb-wrap .right .table-container.collapse {
+  height: 35px;
+}
+.deb-wrap .right .table-container.collapse .el-tabs__header {
+  margin: 0;
+}
+.deb-wrap .right .table-container.collapse .table-content {
+  display: none;
+}
+.deb-wrap .right.collapse {
+  width: calc(100% - 25px);
+}
+.deb-wrap .custom-btn {
+  border: 1px solid #00a5a7;
+  border-radius: 2px;
+  background-color: white;
+  color: #00a5a7;
+}
+.deb-wrap .custom-btn:hover {
+  background-color: #e9f7f7;
+}
+.deb-wrap .custom-btn.green {
+  background-color: #00a5a7;
+  color: white;
+}
+.deb-wrap .custom-btn.green:hover {
+  background-color: #33b7b9;
+}
+.deb-wrap .is-disabled.custom-btn {
+  background-color: #f5f5f6;
+  border: 1px solid #dfe1e6 !important;
+  color: #adb0b8;
+}
+.deb-wrap .is-disabled.custom-btn:hover {
+  background-color: #f5f5f6;
+}
+.deb-wrap .notShow {
+  display: none;
+}
+.deb-wrap .creat-watch-point-dialog .conditions-container .collection {
+  width: 200px;
+}
+.deb-wrap .creat-watch-point-dialog .conditions-container .condition,
+.deb-wrap .creat-watch-point-dialog .conditions-container .param,
+.deb-wrap .creat-watch-point-dialog .conditions-container .param-value {
+  margin-left: 10px;
+  width: 200px;
+}
+.deb-wrap .creat-watch-point-dialog .conditions-container .percent-sign {
+  display: inline-block;
+  text-align: right;
+  width: 20px;
+}
+.deb-wrap .creat-watch-point-dialog .conditions-container .inclusive-param {
+  text-align: right;
+}
+.deb-wrap .creat-watch-point-dialog .conditions-container .inclusive-param .item {
+  margin-top: 10px;
+  display: inline-block;
+}
+.deb-wrap .creat-watch-point-dialog .conditions-container .inclusive-param .item + .item {
+  margin-left: 10px;
+}
+.deb-wrap .creat-watch-point-dialog .error-msg {
+  float: left;
+}
+.deb-wrap .creat-watch-point-dialog .error-msg .el-icon-warning {
+  color: #e6a23c;
+  font-size: 16px;
+  cursor: pointer;
+}
+.deb-wrap .el-dialog__wrapper.pendingTips {
+  position: absolute;
+}
+.deb-wrap .el-dialog__wrapper.pendingTips .dialog-icon .el-icon-warning {
+  font-size: 24px;
+  color: #e6a23c;
+  vertical-align: bottom;
+}
+.deb-wrap .el-dialog__wrapper.pendingTips .el-dialog__body {
+  padding: 2px 20px 32px 20px;
+}
+.deb-wrap .el-dialog__wrapper.pendingTips .el-dialog__body .dialog-content {
+  line-height: 24px;
+  margin-left: 10px;
+}
+.deb-wrap .el-dialog__wrapper.pendingTips .el-dialog__footer {
+  text-align: center;
+  padding: 10px 20px 32px;
+}
+.deb-wrap .el-dialog__wrapper.pendingTips + .v-modal {
+  position: absolute;
+}
+.deb-wrap .deb-con {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  z-index: 999;
+}
+
 .deb-indent {
   padding-left: 40px;
 }
+
 #graphTemp,
 #subgraphTemp {
   position: absolute;
diff --git a/mindinsight/ui/src/views/explain/saliency-map.vue b/mindinsight/ui/src/views/explain/saliency-map.vue
index d53ec8e6..e9646e01 100644
--- a/mindinsight/ui/src/views/explain/saliency-map.vue
+++ b/mindinsight/ui/src/views/explain/saliency-map.vue
@@ -695,285 +695,269 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.saliency-map-selector {
-  .selected {
-    font-weight: normal;
-  }
+<style>
+.saliency-map-selector .selected {
+  font-weight: normal;
 }
-.cl-saliency-map {
-  .el-icon-info {
-    color: #6c7280;
-  }
-  .el-checkbox__input {
-    border-radius: 0px;
-    height: 16px;
-    width: 16px;
-    .el-checkbox__inner {
-      border-radius: 0px;
-    }
-  }
-  .el-checkbox__label {
-    color: #333333 !important;
-  }
-  .cl-saliency-map-table {
-    .table-data {
-      .el-table__body {
-        .pic-cell {
-          .cell {
-            text-overflow: clip;
-            & img {
-              height: 250px;
-              width: 250px;
-              object-fit: contain;
-            }
-          }
-        }
-        .canvas-cell {
-          & img {
-            cursor: pointer;
-          }
-        }
-        .cell {
-          height: 270px;
-          padding: 10px;
-        }
-      }
-    }
-  }
+
+.cl-saliency-map .el-icon-info {
+  color: #6c7280;
+}
+.cl-saliency-map .el-checkbox__input {
+  border-radius: 0px;
+  height: 16px;
+  width: 16px;
+}
+.cl-saliency-map .el-checkbox__input .el-checkbox__inner {
+  border-radius: 0px;
+}
+.cl-saliency-map .el-checkbox__label {
+  color: #333333 !important;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .pic-cell .cell {
+  text-overflow: clip;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .pic-cell .cell img {
+  height: 250px;
+  width: 250px;
+  object-fit: contain;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .canvas-cell img {
+  cursor: pointer;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .el-table__body .cell {
+  height: 270px;
+  padding: 10px;
 }
+
 .table-tooltip {
   max-width: 650px;
 }
-.el-tooltip__popper {
-  .tooltip-container {
-    .cl-saliency-map-tip {
-      padding: 10px;
-      .tip-title {
-        font-size: 16px;
-        font-weight: bold;
-      }
-      .tip-part {
-        line-height: 20px;
-        word-break: normal;
-      }
-    }
-    .tag-tip {
-      .tip-item {
-        margin-bottom: 10px;
-        font-size: 12px;
-        color: #575d6c;
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
-        .tip-icon {
-          margin-right: 4px;
-        }
-      }
-      .tip-item:last-of-type {
-        margin-bottom: 0px;
-      }
-      .tip-title {
-        color: #333333;
-      }
-    }
-  }
+
+.el-tooltip__popper .tooltip-container .cl-saliency-map-tip {
+  padding: 10px;
+}
+.el-tooltip__popper .tooltip-container .cl-saliency-map-tip .tip-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.el-tooltip__popper .tooltip-container .cl-saliency-map-tip .tip-part {
+  line-height: 20px;
+  word-break: normal;
+}
+.el-tooltip__popper .tooltip-container .tag-tip .tip-item {
+  margin-bottom: 10px;
+  font-size: 12px;
+  color: #575d6c;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+.el-tooltip__popper .tooltip-container .tag-tip .tip-item .tip-icon {
+  margin-right: 4px;
+}
+.el-tooltip__popper .tooltip-container .tag-tip .tip-item:last-of-type {
+  margin-bottom: 0px;
+}
+.el-tooltip__popper .tooltip-container .tag-tip .tip-title {
+  color: #333333;
 }
 </style>
-<style lang="scss" scoped>
+<style scoped>
 .cl-saliency-map {
   height: 100%;
   box-sizing: border-box;
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
-  .cl-saliency-map-title {
-    display: flex;
-    align-items: center;
-    height: 56px;
-    padding: 0 32px;
-    font-size: 20px;
-    color: #282b33;
-    letter-spacing: -0.86px;
-    font-weight: bold;
-    .el-icon-info {
-      margin-left: 12px;
-    }
-  }
-  .line-title {
-    font-size: 14px;
-    width: 100px;
-    min-width: 100px;
-    margin-right: 0px !important;
-  }
-  .cl-saliency-map-methods {
-    padding: 8px 32px 12px 32px;
-    .methods-action {
-      cursor: pointer;
-      font-size: 14px;
-      color: #00a5a7;
-      text-decoration: underline;
-    }
-  }
-  .cl-saliency-map-condition {
-    padding: 0px 32px 21px 32px;
-    height: 58px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid #e6ebf5;
-    .condition-left {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      .condition-item {
-        margin-right: 16px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        .condition-button {
-          padding: 7px 15px;
-          border-radius: 2px;
-          border: 1px solid #00a5a7;
-        }
-        .el-icon-info {
-          margin-right: 4px;
-          margin-left: 2px;
-        }
-      }
-      .search-select {
-        width: 200px;
-        height: 32px;
-      }
-    }
-    .condition-right {
-      display: flex;
-      align-items: center;
-      .condition-item {
-        margin-right: 24px;
-        display: flex;
-        align-items: center;
-        .item-children {
-          margin-right: 12px;
-        }
-      }
-      & .condition-item:last-of-type {
-        margin-right: 0px;
-      }
-    }
-  }
-  .cl-saliency-map-table {
-    padding: 21px 32px 0 32px;
-    flex-grow: 1;
-    overflow: hidden;
-    .table-nodata {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      .nodata-text {
-        margin-top: 16px;
-        font-size: 16px;
-      }
-    }
-    .table-data {
-      height: 100%;
-      .table-forecast-tag {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        .center {
-          text-align: center;
-        }
-        & div,
-        span {
-          font-size: 12px;
-        }
-        .tag-title-true {
-          display: grid;
-          grid-template-columns: 35% 35% 30%;
-          .first {
-            padding-left: 12px;
-          }
-        }
-        .tag-title-false {
-          display: grid;
-          grid-template-columns: 20% 40% 40%;
-        }
-        .tag-content {
-          flex-grow: 1;
-          overflow-y: scroll;
-          &::-webkit-scrollbar {
-            width: 0px;
-            height: 0px;
-          }
-          .tag-content-item {
-            background-repeat: no-repeat;
-            background-position: 2px 0px;
-            box-sizing: border-box;
-            cursor: pointer;
-            height: 48px;
-            border: 1px solid #d9ecff;
-            background-color: #f5fbfb;
-            border-radius: 3px;
-            margin-bottom: 6px;
-            .first {
-              padding-left: 10px;
-              background-color: rgba(0, 0, 0, 0) !important;
-            }
-            .more-action {
-              cursor: pointer;
-              text-decoration: underline;
-            }
-            .content-label {
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-          }
-          .tag-content-item-true {
-            display: grid;
-            grid-template-columns: 35% 35% 30%;
-            align-items: center;
-          }
-          .tag-content-item-false {
-            display: grid;
-            grid-template-columns: 20% 40% 40%;
-            align-items: center;
-          }
-          .tag-active {
-            background-color: #00a5a7;
-            color: #ffffff;
-          }
-          & :hover {
-            background-color: #00a5a7;
-            color: #ffffff;
-          }
-          .tag-tp {
-            background-image: url('../../assets/images/explain-tp.svg');
-          }
-          .tag-fn {
-            background-image: url('../../assets/images/explain-fn.svg');
-          }
-          .tag-fp {
-            background-image: url('../../assets/images/explain-fp.svg');
-          }
-          .tag-tn {
-            background-image: url('../../assets/images/explain-tn.svg');
-          }
-        }
-      }
-    }
-  }
-  .cl-saliency-map-pagination {
-    padding: 0 32px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
 }
+.cl-saliency-map .cl-saliency-map-title {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 32px;
+  font-size: 20px;
+  color: #282b33;
+  letter-spacing: -0.86px;
+  font-weight: bold;
+}
+.cl-saliency-map .cl-saliency-map-title .el-icon-info {
+  margin-left: 12px;
+}
+.cl-saliency-map .line-title {
+  font-size: 14px;
+  width: 100px;
+  min-width: 100px;
+  margin-right: 0px !important;
+}
+.cl-saliency-map .cl-saliency-map-methods {
+  padding: 8px 32px 12px 32px;
+}
+.cl-saliency-map .cl-saliency-map-methods .methods-action {
+  cursor: pointer;
+  font-size: 14px;
+  color: #00a5a7;
+  text-decoration: underline;
+}
+.cl-saliency-map .cl-saliency-map-condition {
+  padding: 0px 32px 21px 32px;
+  height: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e6ebf5;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-left {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-left .condition-item {
+  margin-right: 16px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-left .condition-item .condition-button {
+  padding: 7px 15px;
+  border-radius: 2px;
+  border: 1px solid #00a5a7;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-left .condition-item .el-icon-info {
+  margin-right: 4px;
+  margin-left: 2px;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-left .search-select {
+  width: 200px;
+  height: 32px;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-right {
+  display: flex;
+  align-items: center;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-right .condition-item {
+  margin-right: 24px;
+  display: flex;
+  align-items: center;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-right .condition-item .item-children {
+  margin-right: 12px;
+}
+.cl-saliency-map .cl-saliency-map-condition .condition-right .condition-item:last-of-type {
+  margin-right: 0px;
+}
+.cl-saliency-map .cl-saliency-map-table {
+  padding: 21px 32px 0 32px;
+  flex-grow: 1;
+  overflow: hidden;
+}
+.cl-saliency-map .cl-saliency-map-table .table-nodata {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-saliency-map .cl-saliency-map-table .table-nodata .nodata-text {
+  margin-top: 16px;
+  font-size: 16px;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data {
+  height: 100%;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .center {
+  text-align: center;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag div,
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag span {
+  font-size: 12px;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-title-true {
+  display: grid;
+  grid-template-columns: 35% 35% 30%;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-title-true .first {
+  padding-left: 12px;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-title-false {
+  display: grid;
+  grid-template-columns: 20% 40% 40%;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content {
+  flex-grow: 1;
+  overflow-y: scroll;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item {
+  background-repeat: no-repeat;
+  background-position: 2px 0px;
+  box-sizing: border-box;
+  cursor: pointer;
+  height: 48px;
+  border: 1px solid #d9ecff;
+  background-color: #f5fbfb;
+  border-radius: 3px;
+  margin-bottom: 6px;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item .first {
+  padding-left: 10px;
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item .more-action {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item .content-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item-true {
+  display: grid;
+  grid-template-columns: 35% 35% 30%;
+  align-items: center;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-content-item-false {
+  display: grid;
+  grid-template-columns: 20% 40% 40%;
+  align-items: center;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-active {
+  background-color: #00a5a7;
+  color: #ffffff;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content :hover {
+  background-color: #00a5a7;
+  color: #ffffff;
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-tp {
+  background-image: url("../../assets/images/explain-tp.svg");
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-fn {
+  background-image: url("../../assets/images/explain-fn.svg");
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-fp {
+  background-image: url("../../assets/images/explain-fp.svg");
+}
+.cl-saliency-map .cl-saliency-map-table .table-data .table-forecast-tag .tag-content .tag-tn {
+  background-image: url("../../assets/images/explain-tn.svg");
+}
+.cl-saliency-map .cl-saliency-map-pagination {
+  padding: 0 32px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .detail-container {
   display: flex;
   align-items: center;
diff --git a/mindinsight/ui/src/views/explain/summary-list.vue b/mindinsight/ui/src/views/explain/summary-list.vue
index 26ff9a2a..afed041e 100644
--- a/mindinsight/ui/src/views/explain/summary-list.vue
+++ b/mindinsight/ui/src/views/explain/summary-list.vue
@@ -293,185 +293,178 @@ export default {
   components: {},
 };
 </script>
-<style lang="scss">
+<style>
 #cl-summary-manage {
   height: 100%;
   width: 100%;
   background-color: #fff;
-  .no-data-page {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .no-data-img {
-      background: #fff;
-      text-align: center;
-      height: 200px;
-      width: 310px;
-      margin: auto;
-      img {
-        max-width: 100%;
-      }
-      p {
-        font-size: 16px;
-        padding-top: 10px;
-      }
-    }
-  }
-  .cl-summary-manage-container {
-    height: 100%;
-    padding: 14px 32px 32px;
-  }
-  .cl-title {
-    border: none;
-    height: 55px;
-    line-height: 75px;
-  }
-  .cl-title-left {
-    padding-left: 0;
-    height: 55px;
-    line-height: 55px;
-  }
-  .summary-title {
-    font-size: 20px;
-    font-weight: bold;
-    margin-right: 15px;
-  }
-  .summary-subtitle {
-    margin-left: 20px;
-  }
-  .container {
-    height: calc(100% - 97px);
-    overflow-y: auto;
-    .list-table {
-      height: 100%;
-      .operate-container {
-        padding-right: 32px;
-      }
-    }
-  }
-  .pagination-content {
-    margin-top: 16px;
-    text-align: right;
-  }
-  .operate-btn {
-    margin-left: 20px;
-    padding: 12px 0;
-  }
-  .el-dialog {
-    min-width: 500px;
-    padding-bottom: 30px;
-  }
-  .operate-btn.button-disable {
-    -moz-user-select: none; /*Firefox*/
-    -webkit-user-select: none; /*webkitbrowser*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*Early browser*/
-    user-select: none;
-    color: rgb(192, 196, 204);
-    cursor: not-allowed;
-  }
-  .menu-item {
-    color: #00a5a7;
-    cursor: pointer;
-  }
-  .menu-item.operate-btn.first-btn {
-    margin-left: 0;
-  }
-  #contextMenu {
-    position: absolute;
-    min-width: 150px;
-    border: 1px solid #d4d4d4;
-    ul {
-      background-color: #f7faff;
-      border-radius: 2px;
-      li {
-        padding: 5px 18px;
-        cursor: pointer;
-        &:hover {
-          background-color: rgb(167, 167, 167);
-          color: white;
-        }
-      }
-    }
-  }
-  .details-data-list {
-    .el-table td,
-    .el-table th.is-leaf {
-      border: none;
-      border-top: 1px solid #ebeef5;
-    }
-    .el-table {
-      th {
-        padding: 10px 0;
-        border-top: 1px solid #ebeef5;
-        .cell {
-          border-left: 1px solid #d9d8dd;
-          height: 14px;
-          line-height: 14px;
-        }
-      }
-      th:first-child {
-        .cell {
-          border-left: none;
-        }
-      }
-      th:nth-child(2),
-      td:nth-child(2) {
-        max-width: 30%;
-      }
-      td {
-        padding: 8px 0;
-      }
-    }
-    .el-table__row--level-0 td:first-child:after {
-      width: 20px;
-      height: 1px;
-      background: #ebeef5;
-      z-index: 11;
-      position: absolute;
-      left: 0;
-      bottom: -1px;
-      content: '';
-      display: block;
-    }
-    .el-table__row--level-1 {
-      td {
-        padding: 4px 0;
-        position: relative;
-      }
-      td:first-child::before {
-        width: 42px;
-        background: #f0fdfd;
-        border-right: 2px #00a5a7 solid;
-        z-index: 10;
-        position: absolute;
-        left: 0;
-        top: -1px;
-        bottom: 0px;
-        content: '';
-        display: block;
-      }
-    }
-
-    .el-table__row--level-1:first-child {
-      td:first-child::before {
-        bottom: 0;
-      }
-    }
-    .el-dialog__title {
-      font-weight: bold;
-    }
-    .el-dialog__body {
-      max-height: 500px;
-      padding-top: 10px;
-      padding-bottom: 0px;
-      overflow: auto;
-      .details-data-title {
-        margin-bottom: 20px;
-      }
-    }
-  }
+}
+#cl-summary-manage .no-data-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#cl-summary-manage .no-data-page .no-data-img {
+  background: #fff;
+  text-align: center;
+  height: 200px;
+  width: 310px;
+  margin: auto;
+}
+#cl-summary-manage .no-data-page .no-data-img img {
+  max-width: 100%;
+}
+#cl-summary-manage .no-data-page .no-data-img p {
+  font-size: 16px;
+  padding-top: 10px;
+}
+#cl-summary-manage .cl-summary-manage-container {
+  height: 100%;
+  padding: 14px 32px 32px;
+}
+#cl-summary-manage .cl-title {
+  border: none;
+  height: 55px;
+  line-height: 75px;
+}
+#cl-summary-manage .cl-title-left {
+  padding-left: 0;
+  height: 55px;
+  line-height: 55px;
+}
+#cl-summary-manage .summary-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-right: 15px;
+}
+#cl-summary-manage .summary-subtitle {
+  margin-left: 20px;
+}
+#cl-summary-manage .container {
+  height: calc(100% - 97px);
+  overflow-y: auto;
+}
+#cl-summary-manage .container .list-table {
+  height: 100%;
+}
+#cl-summary-manage .container .list-table .operate-container {
+  padding-right: 32px;
+}
+#cl-summary-manage .pagination-content {
+  margin-top: 16px;
+  text-align: right;
+}
+#cl-summary-manage .operate-btn {
+  margin-left: 20px;
+  padding: 12px 0;
+}
+#cl-summary-manage .el-dialog {
+  min-width: 500px;
+  padding-bottom: 30px;
+}
+#cl-summary-manage .operate-btn.button-disable {
+  -moz-user-select: none;
+  /*Firefox*/
+  -webkit-user-select: none;
+  /*webkitbrowser*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*Early browser*/
+  user-select: none;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+#cl-summary-manage .menu-item {
+  color: #00a5a7;
+  cursor: pointer;
+}
+#cl-summary-manage .menu-item.operate-btn.first-btn {
+  margin-left: 0;
+}
+#cl-summary-manage #contextMenu {
+  position: absolute;
+  min-width: 150px;
+  border: 1px solid #d4d4d4;
+}
+#cl-summary-manage #contextMenu ul {
+  background-color: #f7faff;
+  border-radius: 2px;
+}
+#cl-summary-manage #contextMenu ul li {
+  padding: 5px 18px;
+  cursor: pointer;
+}
+#cl-summary-manage #contextMenu ul li:hover {
+  background-color: #a7a7a7;
+  color: white;
+}
+#cl-summary-manage .details-data-list .el-table td,
+#cl-summary-manage .details-data-list .el-table th.is-leaf {
+  border: none;
+  border-top: 1px solid #ebeef5;
+}
+#cl-summary-manage .details-data-list .el-table th {
+  padding: 10px 0;
+  border-top: 1px solid #ebeef5;
+}
+#cl-summary-manage .details-data-list .el-table th .cell {
+  border-left: 1px solid #d9d8dd;
+  height: 14px;
+  line-height: 14px;
+}
+#cl-summary-manage .details-data-list .el-table th:first-child .cell {
+  border-left: none;
+}
+#cl-summary-manage .details-data-list .el-table th:nth-child(2),
+#cl-summary-manage .details-data-list .el-table td:nth-child(2) {
+  max-width: 30%;
+}
+#cl-summary-manage .details-data-list .el-table td {
+  padding: 8px 0;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-0 td:first-child:after {
+  width: 20px;
+  height: 1px;
+  background: #ebeef5;
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  content: "";
+  display: block;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-1 td {
+  padding: 4px 0;
+  position: relative;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-1 td:first-child::before {
+  width: 42px;
+  background: #f0fdfd;
+  border-right: 2px #00a5a7 solid;
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  bottom: 0px;
+  content: "";
+  display: block;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-1:first-child td:first-child::before {
+  bottom: 0;
+}
+#cl-summary-manage .details-data-list .el-dialog__title {
+  font-weight: bold;
+}
+#cl-summary-manage .details-data-list .el-dialog__body {
+  max-height: 500px;
+  padding-top: 10px;
+  padding-bottom: 0px;
+  overflow: auto;
+}
+#cl-summary-manage .details-data-list .el-dialog__body .details-data-title {
+  margin-bottom: 20px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/explain/xai-metric.vue b/mindinsight/ui/src/views/explain/xai-metric.vue
index e05166ea..3fa18d29 100644
--- a/mindinsight/ui/src/views/explain/xai-metric.vue
+++ b/mindinsight/ui/src/views/explain/xai-metric.vue
@@ -768,7 +768,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 .cl-xai {
   height: 100%;
   background-color: #fff;
@@ -776,254 +776,223 @@ export default {
   padding-bottom: 32px;
   display: flex;
   flex-direction: column;
+}
+.cl-xai .cl-xai-title {
+  height: 56px;
+  line-height: 56px;
+  display: flex;
+  overflow: hidden;
+  flex-direction: 0;
+}
+.cl-xai .cl-xai-title .cl-xai-title-left {
+  flex: 1;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: -0.86px;
+}
+.cl-xai .cl-xai-title .cl-xai-title-left i {
+  color: #6c7280;
+  margin-left: 12px;
+}
+.cl-xai .cl-xai-title .cl-xai-title-right {
+  flex: 1;
+  text-align: right;
+}
+.cl-xai .cl-xai-title .cl-xai-title-right .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 20px;
+  margin-left: 32px;
+}
+.cl-xai .el-tabs__active-bar {
+  width: 76px;
+}
+.cl-xai .el-tabs__item:nth-child(2) {
+  margin-right: 10px;
+}
+.cl-xai .el-tabs__item:last-child {
+  margin-left: 10px;
+}
+.cl-xai .is-active:nth-child(2) {
+  margin-right: 10px;
+}
+.cl-xai .is-active:last-child {
+  margin-left: 10px;
+}
+.cl-xai .el-tabs__active-bar {
+  width: 0px;
+  height: 0px;
+}
+.cl-xai .el-table__footer tr td:nth-child(2) {
+  text-align: center;
+}
+.cl-xai .el-tabs__item {
+  font-size: 14px;
+  color: #303133;
+  height: 40px;
+  line-height: 36px;
+  padding: 0px;
+}
+.cl-xai .el-tabs__item span {
+  font-weight: 500;
+  font-size: 14px;
+  color: #303133;
+}
+.cl-xai .el-tabs__item span:hover {
+  color: #00a5a7;
+}
+.cl-xai .el-tabs__item span:hover i {
+  color: #00a5a7;
+}
+.cl-xai .el-tabs__item i {
+  color: #6c7280;
+  font-size: 14px;
+}
+.cl-xai .el-tabs__item.is-active {
+  color: #00a5a7;
+  border-bottom: 2px solid #00a5a7;
+}
+.cl-xai .el-tabs__item.is-active span {
+  color: #00a5a7;
+  font-weight: 700;
+  font-size: 14px;
+}
+.cl-xai .el-tabs__item.is-active i {
+  color: #00a5a7;
+  font-size: 14px;
+}
+.cl-xai .el-tabs__header {
+  margin: 0px;
+}
+.cl-xai .cl-xai-con {
+  height: calc(100% - 95px);
+}
+.cl-xai .cl-xai-con .cl-xai-con-flex {
+  height: 100%;
+  display: flex;
+}
+.cl-xai .cl-xai-con .cl-xai-con-flex-item {
+  flex: 1;
+  overflow: hidden;
+}
+.cl-xai .cl-xai-con .cl-xai-con-flex-item .input-container .el-input-number {
+  width: 100%;
+}
+.cl-xai .cl-xai-con .cl-xai-con-flex-chart {
+  width: 400px;
+  flex-shrink: 0;
+  border: 1px solid #e6ebf5;
+  margin-left: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.cl-xai .comprehensiveEvaluation {
+  padding: 25px 0;
+}
+.cl-xai .comprehensiveEvaluation .resultFalse {
+  color: #f00;
+}
+.cl-xai .comprehensiveEvaluation .firstColumn {
+  color: #00a5a7;
+}
+.cl-xai .comprehensiveEvaluation .thTooltip {
+  max-width: calc(100% - 25px);
+  padding: 0px;
+  vertical-align: middle;
+  overflow: hidden;
+}
+.cl-xai .comprehensiveEvaluation .evaluation-table-header th {
+  background: #f5f7fa;
+}
+.cl-xai .comprehensiveEvaluation td.columnHover {
+  background: rgba(0, 165, 167, 0.05);
+}
+.cl-xai .comprehensiveEvaluation td.columnNoHover {
+  background: none;
+}
+.cl-xai .image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-xai .image-noData .noData-text {
+  margin-top: 33px;
+  font-size: 18px;
+}
+.cl-xai .classify-container {
+  height: 100%;
+}
+.cl-xai .classify-container .left-item {
+  padding-right: 10px;
+}
+.cl-xai .classify-container .right-itemm {
+  padding-left: 10px;
+}
+.cl-xai .classify-container .half-item {
+  width: 50%;
+  float: left;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.cl-xai .classify-container .half-item .operate-container {
+  width: 100%;
+}
+.cl-xai .classify-container .half-item .operate-container .container-name {
+  font-size: 16px;
+  font-weight: 700;
+  padding: 15px 0px;
+}
+.cl-xai .classify-container .half-item .operate-container .select-see {
+  padding-bottom: 10px;
+}
+.cl-xai .classify-container .half-item .operate-container .see-methods {
+  font-size: 13px;
+}
+.cl-xai .classify-container .half-item .operate-container .select-name {
+  display: inline-block;
+  padding-right: 10px;
+}
+.cl-xai .classify-container .half-item .chart-container {
+  flex: 1;
+  overflow: hidden;
+}
+.cl-xai .classify-container .half-item .methods-show {
+  padding: 10px 0px;
+}
+.cl-xai .classify {
+  border-right: solid 1px #ddd;
+}
+.cl-xai .slectMethod {
+  color: darkmagenta;
+}
+.cl-xai .el-select {
+  height: 32px;
+  width: 217px;
+}
+.cl-xai .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  padding: 0px 15px;
+}
 
-  .cl-xai-title {
-    height: 56px;
-    line-height: 56px;
-    display: flex;
-    overflow: hidden;
-    flex-direction: 0;
-
-    .cl-xai-title-left {
-      flex: 1;
-      font-size: 20px;
-      font-weight: bold;
-      letter-spacing: -0.86px;
-
-      i {
-        color: #6c7280;
-        margin-left: 12px;
-      }
-    }
-
-    .cl-xai-title-right {
-      flex: 1;
-      text-align: right;
-
-      .cl-close-btn {
-        width: 20px;
-        height: 20px;
-        vertical-align: -3px;
-        cursor: pointer;
-        display: inline-block;
-        line-height: 20px;
-        margin-left: 32px;
-      }
-    }
-  }
-  .el-tabs__active-bar {
-    width: 76px;
-  }
-  .el-tabs__item:nth-child(2) {
-    margin-right: 10px;
-  }
-  .el-tabs__item:last-child {
-    margin-left: 10px;
-  }
-  .is-active:nth-child(2) {
-    margin-right: 10px;
-  }
-  .is-active:last-child {
-    margin-left: 10px;
-  }
-  .el-tabs__active-bar {
-    width: 0px;
-    height: 0px;
-  }
-  .el-table__footer {
-    tr td:nth-child(2) {
-      text-align: center;
-    }
-  }
-  .el-tabs__item {
-    font-size: 14px;
-    color: #303133;
-    height: 40px;
-    line-height: 36px;
-    padding: 0px;
-    span {
-      font-weight: 500;
-      font-size: 14px;
-      color: #303133;
-    }
-    span:hover {
-      color: #00a5a7;
-      i {
-        color: #00a5a7;
-      }
-    }
-    i {
-      color: #6c7280;
-      font-size: 14px;
-    }
-  }
-  .el-tabs__item.is-active {
-    color: #00a5a7;
-    border-bottom: 2px solid #00a5a7;
-
-    span {
-      color: #00a5a7;
-      font-weight: 700;
-      font-size: 14px;
-    }
-    i {
-      color: #00a5a7;
-      font-size: 14px;
-    }
-  }
-
-  .el-tabs__header {
-    margin: 0px;
-  }
-
-  .cl-xai-con {
-    height: calc(100% - 95px);
-    .cl-xai-con-flex {
-      height: 100%;
-      display: flex;
-    }
-
-    .cl-xai-con-flex-item {
-      flex: 1;
-      overflow: hidden;
-      .input-container {
-        .el-input-number {
-          width: 100%;
-        }
-      }
-    }
-
-    .cl-xai-con-flex-chart {
-      width: 400px;
-      flex-shrink: 0;
-      border: 1px solid #e6ebf5;
-      margin-left: 20px;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
-
-  .comprehensiveEvaluation {
-    padding: 25px 0;
-
-    .resultFalse {
-      color: #f00;
-    }
-
-    .firstColumn {
-      color: #00a5a7;
-    }
-
-    .thTooltip {
-      max-width: calc(100% - 25px);
-      padding: 0px;
-      vertical-align: middle;
-      overflow: hidden;
-    }
-    .evaluation-table-header {
-      th {
-        background: #f5f7fa;
-      }
-    }
-
-    td.columnHover {
-      background: rgba(0, 165, 167, 0.05);
-    }
-
-    td.columnNoHover {
-      background: none;
-    }
-  }
-
-  .image-noData {
-    // Set the width and white on the right.
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    .noData-text {
-      margin-top: 33px;
-      font-size: 18px;
-    }
-  }
-
-  .classify-container {
-    height: 100%;
-
-    .left-item {
-      padding-right: 10px;
-    }
-    .right-itemm {
-      padding-left: 10px;
-    }
-    .half-item {
-      width: 50%;
-      float: left;
-      height: 100%;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      .operate-container {
-        width: 100%;
-        .container-name {
-          font-size: 16px;
-          font-weight: 700;
-          padding: 15px 0px;
-        }
-        .select-see {
-          padding-bottom: 10px;
-        }
-        .see-methods {
-          font-size: 13px;
-        }
-        .select-name {
-          display: inline-block;
-          padding-right: 10px;
-        }
-      }
-      .chart-container {
-        flex: 1;
-        overflow: hidden;
-      }
-      .methods-show {
-        padding: 10px 0px;
-      }
-    }
-  }
-
-  .classify {
-    border-right: solid 1px #ddd;
-  }
-  .slectMethod {
-    color: darkmagenta;
-  }
-
-  .el-select {
-    height: 32px;
-    width: 217px;
-  }
-  .el-input__inner {
-    height: 32px;
-    line-height: 32px;
-    padding: 0px 15px;
-  }
+.el-tooltip__popper .tooltip-container {
+  word-break: normal;
 }
-.el-tooltip__popper {
-  .tooltip-container {
-    word-break: normal;
-    .tooltip-style {
-      .tooltip-title {
-        font-size: 16px;
-        font-weight: bold;
-        color: #333333;
-      }
-      .tooltip-content {
-        line-height: 20px;
-        word-break: normal;
-      }
-    }
-  }
+.el-tooltip__popper .tooltip-container .tooltip-style .tooltip-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333333;
+}
+.el-tooltip__popper .tooltip-container .tooltip-style .tooltip-content {
+  line-height: 20px;
+  word-break: normal;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling-gpu/operator.vue b/mindinsight/ui/src/views/profiling-gpu/operator.vue
index ee2613b5..e17eed24 100644
--- a/mindinsight/ui/src/views/profiling-gpu/operator.vue
+++ b/mindinsight/ui/src/views/profiling-gpu/operator.vue
@@ -1179,236 +1179,221 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .operator {
   height: 100%;
-  .clear {
-    clear: both;
-  }
-  .el-tabs__item {
-    color: #6c7280;
-    line-height: 36px;
-    height: 36px;
-  }
-  .el-tabs__item.is-active {
-    color: #00a5a7;
-    font-weight: bold;
-  }
-  .operator-title {
-    padding: 0 15px;
-    font-size: 16px;
-    font-weight: bold;
-  }
-  .cl-profiler {
-    height: calc(100% - 21px);
-    overflow-y: auto;
-    width: 100%;
-    background: #fff;
-    padding: 0 16px;
-    overflow: hidden;
-    .custom-label {
-      max-width: calc(100% - 25px);
-      padding: 0;
-      vertical-align: middle;
-    }
-    .el-tabs {
-      height: 100%;
-      .el-tabs__header {
-        margin-bottom: 10px;
-      }
-    }
-    .el-tabs__content {
-      height: calc(100% - 46px);
-    }
-    .el-tab-pane {
-      height: 100%;
-    }
-    .cl-search-box {
-      float: right;
-      margin-bottom: 10px;
-      margin-right: 20px;
-      .el-input {
-        width: 300px;
-      }
-    }
-    .cl-profiler-top {
-      height: 47%;
-      .chart-title {
-        float: left;
-        font-weight: bold;
-        height: 32px;
-      }
-    }
-    .cl-profiler-top.fullScreen {
-      display: none;
-    }
-    .cl-profiler-bottom {
-      height: 53%;
-      padding-top: 10px;
-      .fullScreen {
-        float: right;
-        margin-top: 5px;
-        cursor: pointer;
-      }
-    }
-    .cl-profiler-bottom.fullScreen {
-      height: 100%;
-    }
-    .core-search-type {
-      float: right;
-      width: 130px;
-      margin-right: 10px;
-    }
-    .cl-profiler-echarts {
-      width: 100%;
-      height: calc(100% - 32px);
-      display: inline-block;
-      position: relative;
-      overflow: auto;
-      #core-echarts,
-      #operator-echarts {
-        width: 100%;
-        height: 100%;
-        min-width: 1300px;
-        min-height: 321px;
-        overflow: hidden;
-      }
-    }
-    .core-tab {
-      .cl-profiler-top {
-        height: 47%;
-      }
-      .cl-profiler-bottom {
-        height: 53%;
-      }
-      .cl-profiler-echarts {
-        height: calc(100% - 32px);
-      }
-      .cl-profiler-bottom.fullScreen {
-        height: 100%;
-      }
-    }
-    .chart-radio-group {
-      float: right;
-    }
-    .el-radio-group {
-      .el-radio-button--small .el-radio-button__inner {
-        height: 30px;
-        width: 70px;
-        font-size: 14px;
-        line-height: 10px;
-      }
-    }
-    .cl-profiler-bar {
-      display: inline-block;
-      width: calc(100% - 400px);
-      vertical-align: top;
-      height: 100%;
-      padding: 20px;
-    }
-    .cl-profiler-table-type {
-      display: inline-block;
-      width: calc(100% - 400px);
-      vertical-align: top;
-      height: 100%;
-    }
-    .el-pagination {
-      margin: 7px 0;
-      float: right;
-    }
-    .details-data-list {
-      .el-table {
-        th {
-          padding: 10px 0;
-          border-top: 1px solid #ebeef5;
-          .cell {
-            border-left: 1px solid #d9d8dd;
-            height: 14px;
-            line-height: 14px;
-          }
-        }
-        th:first-child {
-          .cell {
-            border-left: none;
-          }
-        }
-        th:nth-child(2),
-        td:nth-child(2) {
-          max-width: 30%;
-        }
-        td {
-          padding: 8px 0;
-        }
-      }
-      .el-table__row--level-0 td:first-child:after {
-        width: 20px;
-        height: 1px;
-        background: #ebeef5;
-        z-index: 11;
-        position: absolute;
-        left: 0;
-        bottom: -1px;
-        content: '';
-        display: block;
-      }
-      .el-table__row--level-1 {
-        td {
-          padding: 4px 0;
-          position: relative;
-        }
-        td:first-child::before {
-          width: 42px;
-          background: #f0fdfd;
-          border-right: 2px #00a5a7 solid;
-          z-index: 10;
-          position: absolute;
-          left: 0;
-          top: -1px;
-          bottom: 0px;
-          content: '';
-          display: block;
-        }
-      }
-
-      .el-table__row--level-1:first-child {
-        td:first-child::before {
-          bottom: 0;
-        }
-      }
-    }
-    .el-table__expanded-cell[class*='cell'] {
-      padding: 0;
-    }
-    .expand-table {
-      position: relative;
-      padding-left: 44px;
-    }
-    .expand-table::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      background: #f0fdfd;
-      width: 42px;
-      border-right: 2px #00a5a7 solid;
-    }
-    .el-radio-button:last-child .el-radio-button__inner,
-    .el-radio-button:first-child .el-radio-button__inner {
-      border-radius: 0;
-    }
-    .image-noData {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      p {
-        font-size: 16px;
-        padding-top: 10px;
-      }
-    }
-  }
+}
+.operator .clear {
+  clear: both;
+}
+.operator .el-tabs__item {
+  color: #6c7280;
+  line-height: 36px;
+  height: 36px;
+}
+.operator .el-tabs__item.is-active {
+  color: #00a5a7;
+  font-weight: bold;
+}
+.operator .operator-title {
+  padding: 0 15px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.operator .cl-profiler {
+  height: calc(100% - 21px);
+  overflow-y: auto;
+  width: 100%;
+  background: #fff;
+  padding: 0 16px;
+  overflow: hidden;
+}
+.operator .cl-profiler .custom-label {
+  max-width: calc(100% - 25px);
+  padding: 0;
+  vertical-align: middle;
+}
+.operator .cl-profiler .el-tabs {
+  height: 100%;
+}
+.operator .cl-profiler .el-tabs .el-tabs__header {
+  margin-bottom: 10px;
+}
+.operator .cl-profiler .el-tabs__content {
+  height: calc(100% - 46px);
+}
+.operator .cl-profiler .el-tab-pane {
+  height: 100%;
+}
+.operator .cl-profiler .cl-search-box {
+  float: right;
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
+.operator .cl-profiler .cl-search-box .el-input {
+  width: 300px;
+}
+.operator .cl-profiler .cl-profiler-top {
+  height: 47%;
+}
+.operator .cl-profiler .cl-profiler-top .chart-title {
+  float: left;
+  font-weight: bold;
+  height: 32px;
+}
+.operator .cl-profiler .cl-profiler-top.fullScreen {
+  display: none;
+}
+.operator .cl-profiler .cl-profiler-bottom {
+  height: 53%;
+  padding-top: 10px;
+}
+.operator .cl-profiler .cl-profiler-bottom .fullScreen {
+  float: right;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.operator .cl-profiler .cl-profiler-bottom.fullScreen {
+  height: 100%;
+}
+.operator .cl-profiler .core-search-type {
+  float: right;
+  width: 130px;
+  margin-right: 10px;
+}
+.operator .cl-profiler .cl-profiler-echarts {
+  width: 100%;
+  height: calc(100% - 32px);
+  display: inline-block;
+  position: relative;
+  overflow: auto;
+}
+.operator .cl-profiler .cl-profiler-echarts #core-echarts,
+.operator .cl-profiler .cl-profiler-echarts #operator-echarts {
+  width: 100%;
+  height: 100%;
+  min-width: 1300px;
+  min-height: 321px;
+  overflow: hidden;
+}
+.operator .cl-profiler .core-tab .cl-profiler-top {
+  height: 47%;
+}
+.operator .cl-profiler .core-tab .cl-profiler-bottom {
+  height: 53%;
+}
+.operator .cl-profiler .core-tab .cl-profiler-echarts {
+  height: calc(100% - 32px);
+}
+.operator .cl-profiler .core-tab .cl-profiler-bottom.fullScreen {
+  height: 100%;
+}
+.operator .cl-profiler .chart-radio-group {
+  float: right;
+}
+.operator .cl-profiler .el-radio-group .el-radio-button--small .el-radio-button__inner {
+  height: 30px;
+  width: 70px;
+  font-size: 14px;
+  line-height: 10px;
+}
+.operator .cl-profiler .cl-profiler-bar {
+  display: inline-block;
+  width: calc(100% - 400px);
+  vertical-align: top;
+  height: 100%;
+  padding: 20px;
+}
+.operator .cl-profiler .cl-profiler-table-type {
+  display: inline-block;
+  width: calc(100% - 400px);
+  vertical-align: top;
+  height: 100%;
+}
+.operator .cl-profiler .el-pagination {
+  margin: 7px 0;
+  float: right;
+}
+.operator .cl-profiler .details-data-list .el-table th {
+  padding: 10px 0;
+  border-top: 1px solid #ebeef5;
+}
+.operator .cl-profiler .details-data-list .el-table th .cell {
+  border-left: 1px solid #d9d8dd;
+  height: 14px;
+  line-height: 14px;
+}
+.operator .cl-profiler .details-data-list .el-table th:first-child .cell {
+  border-left: none;
+}
+.operator .cl-profiler .details-data-list .el-table th:nth-child(2),
+.operator .cl-profiler .details-data-list .el-table td:nth-child(2) {
+  max-width: 30%;
+}
+.operator .cl-profiler .details-data-list .el-table td {
+  padding: 8px 0;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-0 td:first-child:after {
+  width: 20px;
+  height: 1px;
+  background: #ebeef5;
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  content: "";
+  display: block;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-1 td {
+  padding: 4px 0;
+  position: relative;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-1 td:first-child::before {
+  width: 42px;
+  background: #f0fdfd;
+  border-right: 2px #00a5a7 solid;
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  bottom: 0px;
+  content: "";
+  display: block;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-1:first-child td:first-child::before {
+  bottom: 0;
+}
+.operator .cl-profiler .el-table__expanded-cell[class*=cell] {
+  padding: 0;
+}
+.operator .cl-profiler .expand-table {
+  position: relative;
+  padding-left: 44px;
+}
+.operator .cl-profiler .expand-table::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: #f0fdfd;
+  width: 42px;
+  border-right: 2px #00a5a7 solid;
+}
+.operator .cl-profiler .el-radio-button:last-child .el-radio-button__inner,
+.operator .cl-profiler .el-radio-button:first-child .el-radio-button__inner {
+  border-radius: 0;
+}
+.operator .cl-profiler .image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.operator .cl-profiler .image-noData p {
+  font-size: 16px;
+  padding-top: 10px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue b/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue
index fb722ed1..2904aacc 100644
--- a/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue
+++ b/mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue
@@ -1227,317 +1227,315 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .el-tooltip-popper {
   max-width: 500px;
 }
-.tooltip-container {
-  .pro-dash-tooltip {
-    line-height: 20px;
-    padding: 10px;
-    .font-style {
-      font-weight: bold;
-    }
-    .font-size-style {
-      font-weight: bold;
-      font-size: 16px;
-    }
-  }
+
+.tooltip-container .pro-dash-tooltip {
+  line-height: 20px;
+  padding: 10px;
+}
+.tooltip-container .pro-dash-tooltip .font-style {
+  font-weight: bold;
 }
+.tooltip-container .pro-dash-tooltip .font-size-style {
+  font-weight: bold;
+  font-size: 16px;
+}
+
 .pro-router-wrap {
   height: 100%;
-  & > div {
-    float: left;
-    height: 100%;
-    & > div {
-      border: 1px solid #eee;
-      border-radius: 4px;
-    }
-    .title-wrap {
-      padding: 15px;
-      .title {
-        float: left;
-        font-weight: bold;
-        font-size: 16px;
-      }
-      .tip-icon {
-        float: right;
-        margin-right: 10px;
-        font-size: 20px;
-        color: #6c7280;
-        .el-icon-warning {
-          cursor: pointer;
-          &:hover::before {
-            color: #00a5a7;
-          }
-        }
-      }
-      .view-detail {
-        float: right;
-        cursor: pointer;
-        font-size: 12px;
-        height: 24px;
-        line-height: 24px;
-        a {
-          color: #00a5a7 !important;
-          padding-right: 6px;
-        }
-        button {
-          color: #00a5a7;
-          border: none;
-          background-color: #fff;
-          cursor: pointer;
-        }
-        button.disabled {
-          cursor: not-allowed;
-          color: #c0c4cc;
-        }
-      }
-      &::after {
-        content: '';
-        clear: both;
-        display: block;
-      }
-    }
-    .loading-icon {
-      margin-left: 5px;
-    }
-    .coming-soon-content {
-      height: calc(100% - 50px);
-      position: relative;
-      .coming-soon-container {
-        text-align: center;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        border-radius: 5px;
-        -webkit-transform: translate(-50%, -50%);
-        -moz-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-      }
-      .coming-soon-text {
-        font-size: 16px;
-      }
-    }
-  }
-  .pro-router-left {
-    width: calc(100% - 400px);
-    padding-right: 15px;
-    .step-trace {
-      height: 45%;
-      margin-bottom: 15px;
-      .trace-container {
-        width: 100%;
-        height: calc(100% - 54px);
-        overflow: auto;
-        .training-trace {
-          position: relative;
-          height: 0;
-          .content {
-            overflow: hidden;
-            text-align: center;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            font-size: 12px;
-            line-height: 40px;
-          }
-          .content-mini {
-            overflow: visible;
-          }
-        }
-      }
-    }
-    .minddata {
-      height: calc(55% - 15px);
-      .pipeline-container {
-        width: 100%;
-        padding: 20px 20px;
-        height: calc(100% - 52px);
-        display: flex;
-        font-size: 0;
-        align-items: baseline;
-        .cell-container {
-          width: 20%;
-          min-width: 110px;
-          padding: 20px 0;
-          border: 2px solid transparent;
-          .title {
-            font-size: 14px;
-            line-height: 20px;
-            padding: 0 0 0 10px;
-            font-weight: bold;
-          }
-        }
-        .data-process {
-          background-color: #e3f8eb;
-          .title {
-            border-left: 2px solid #00a5a7;
-          }
-        }
-        .device_queue_op {
-          background-color: #e1f2ff;
-          .title {
-            border-left: 2px solid #6cbfff;
-          }
-        }
-        .get-next {
-          background-color: #fef4dd;
-          .title {
-            border-left: 2px solid #fdca5a;
-          }
-        }
-        .queue-container {
-          width: 20%;
-          position: relative;
-          .img {
-            width: 100%;
-            height: 24px;
-            margin-top: 30px;
-            .edge {
-              width: calc(50% - 40px);
-              display: inline-block;
-              vertical-align: middle;
-              img {
-                width: 100%;
-              }
-            }
-            .icon {
-              padding: 0 20px;
-              display: inline-block;
-              vertical-align: middle;
-              img {
-                padding: 3px;
-                border: 2px solid transparent;
-              }
-            }
-          }
-
-          .title {
-            text-align: center;
-            font-size: 14px;
-            margin-top: 10px;
-            font-weight: bold;
-          }
-          .description {
-            position: absolute;
-            font-size: 12px;
-            line-height: 12px;
-            white-space: nowrap;
-            overflow: visible;
-            width: 100%;
-            text-align: center;
-            .line {
-              width: 1px;
-              height: 40px;
-              margin: 20px 0;
-              border-left: 1px solid #979797;
-              display: inline-block;
-            }
-            .item {
-              font-size: 12px;
-              line-height: 16px;
-              white-space: normal;
-              overflow: visible;
-              .num {
-                white-space: nowrap;
-                color: #07a695;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .pro-router-right {
-    width: 400px;
-    .op-time-consume {
-      height: calc(60% - 15px);
-      margin-bottom: 15px;
-      .time-list {
-        height: calc(40% - 52px);
-        .item {
-          height: 25px;
-          line-height: 25px;
-          padding: 0 20px;
-          & > span {
-            display: inline-block;
-            height: 100%;
-            vertical-align: middle;
-          }
-          .index {
-            color: white;
-            background-color: rgb(108, 146, 250);
-            width: 20px;
-            height: 20px;
-            border-radius: 20px;
-            text-align: center;
-            vertical-align: middle;
-            line-height: 20px;
-          }
-          .name {
-            margin-left: 10px;
-            width: calc(50% - 30px);
-            text-overflow: ellipsis;
-            overflow: hidden;
-          }
-          .num {
-            width: 20%;
-          }
-          .time {
-            width: 30%;
-            position: relative;
-            span {
-              display: inline-block;
-              position: absolute;
-              left: 0;
-              height: 20px;
-            }
-            .bar {
-              background-color: #cceded;
-              top: 2px;
-            }
-            .value {
-              line-height: 25px;
-              height: 25px;
-            }
-          }
-        }
-      }
-    }
-    .time-line {
-      height: 40%;
-      // overflow: hidden;
-      .timeline-info {
-        width: 100%;
-        height: calc(100% - 54px);
-        padding-left: 36px;
-      }
-      .info-line {
-        line-height: 30px;
-      }
-    }
-  }
-  .op-time-content {
-    height: calc(100% - 54px);
-    overflow: auto;
-  }
-  .pie-chart {
-    width: 100%;
-    height: 260px;
-    overflow: hidden;
-  }
-  .image-noData {
-    width: 100%;
-    height: calc(100% - 52px);
-    min-height: 194px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    p {
-      font-size: 16px;
-      padding-top: 10px;
-    }
-  }
+}
+.pro-router-wrap > div {
+  float: left;
+  height: 100%;
+}
+.pro-router-wrap > div > div {
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.pro-router-wrap > div .title-wrap {
+  padding: 15px;
+}
+.pro-router-wrap > div .title-wrap .title {
+  float: left;
+  font-weight: bold;
+  font-size: 16px;
+}
+.pro-router-wrap > div .title-wrap .tip-icon {
+  float: right;
+  margin-right: 10px;
+  font-size: 20px;
+  color: #6c7280;
+}
+.pro-router-wrap > div .title-wrap .tip-icon .el-icon-warning {
+  cursor: pointer;
+}
+.pro-router-wrap > div .title-wrap .tip-icon .el-icon-warning:hover::before {
+  color: #00a5a7;
+}
+.pro-router-wrap > div .title-wrap .view-detail {
+  float: right;
+  cursor: pointer;
+  font-size: 12px;
+  height: 24px;
+  line-height: 24px;
+}
+.pro-router-wrap > div .title-wrap .view-detail a {
+  color: #00a5a7 !important;
+  padding-right: 6px;
+}
+.pro-router-wrap > div .title-wrap .view-detail button {
+  color: #00a5a7;
+  border: none;
+  background-color: #fff;
+  cursor: pointer;
+}
+.pro-router-wrap > div .title-wrap .view-detail button.disabled {
+  cursor: not-allowed;
+  color: #c0c4cc;
+}
+.pro-router-wrap > div .title-wrap::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+.pro-router-wrap > div .loading-icon {
+  margin-left: 5px;
+}
+.pro-router-wrap > div .coming-soon-content {
+  height: calc(100% - 50px);
+  position: relative;
+}
+.pro-router-wrap > div .coming-soon-content .coming-soon-container {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 5px;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.pro-router-wrap > div .coming-soon-content .coming-soon-text {
+  font-size: 16px;
+}
+.pro-router-wrap .pro-router-left {
+  width: calc(100% - 400px);
+  padding-right: 15px;
+}
+.pro-router-wrap .pro-router-left .step-trace {
+  height: 45%;
+  margin-bottom: 15px;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container {
+  width: 100%;
+  height: calc(100% - 54px);
+  overflow: auto;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container .training-trace {
+  position: relative;
+  height: 0;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container .training-trace .content {
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 40px;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container .training-trace .content-mini {
+  overflow: visible;
+}
+.pro-router-wrap .pro-router-left .minddata {
+  height: calc(55% - 15px);
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container {
+  width: 100%;
+  padding: 20px 20px;
+  height: calc(100% - 52px);
+  display: flex;
+  font-size: 0;
+  align-items: baseline;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .cell-container {
+  width: 20%;
+  min-width: 110px;
+  padding: 20px 0;
+  border: 2px solid transparent;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .cell-container .title {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 0 0 0 10px;
+  font-weight: bold;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .data-process {
+  background-color: #e3f8eb;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .data-process .title {
+  border-left: 2px solid #00a5a7;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .device_queue_op {
+  background-color: #e1f2ff;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .device_queue_op .title {
+  border-left: 2px solid #6cbfff;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .get-next {
+  background-color: #fef4dd;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .get-next .title {
+  border-left: 2px solid #fdca5a;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container {
+  width: 20%;
+  position: relative;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img {
+  width: 100%;
+  height: 24px;
+  margin-top: 30px;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .edge {
+  width: calc(50% - 40px);
+  display: inline-block;
+  vertical-align: middle;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .edge img {
+  width: 100%;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .icon {
+  padding: 0 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .icon img {
+  padding: 3px;
+  border: 2px solid transparent;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .title {
+  text-align: center;
+  font-size: 14px;
+  margin-top: 10px;
+  font-weight: bold;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description {
+  position: absolute;
+  font-size: 12px;
+  line-height: 12px;
+  white-space: nowrap;
+  overflow: visible;
+  width: 100%;
+  text-align: center;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .line {
+  width: 1px;
+  height: 40px;
+  margin: 20px 0;
+  border-left: 1px solid #979797;
+  display: inline-block;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item {
+  font-size: 12px;
+  line-height: 16px;
+  white-space: normal;
+  overflow: visible;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item .num {
+  white-space: nowrap;
+  color: #07a695;
+}
+.pro-router-wrap .pro-router-right {
+  width: 400px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume {
+  height: calc(60% - 15px);
+  margin-bottom: 15px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list {
+  height: calc(40% - 52px);
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item {
+  height: 25px;
+  line-height: 25px;
+  padding: 0 20px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item > span {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .index {
+  color: white;
+  background-color: #6c92fa;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 20px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .name {
+  margin-left: 10px;
+  width: calc(50% - 30px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .num {
+  width: 20%;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time {
+  width: 30%;
+  position: relative;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time span {
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  height: 20px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time .bar {
+  background-color: #cceded;
+  top: 2px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time .value {
+  line-height: 25px;
+  height: 25px;
+}
+.pro-router-wrap .pro-router-right .time-line {
+  height: 40%;
+}
+.pro-router-wrap .pro-router-right .time-line .timeline-info {
+  width: 100%;
+  height: calc(100% - 54px);
+  padding-left: 36px;
+}
+.pro-router-wrap .pro-router-right .time-line .info-line {
+  line-height: 30px;
+}
+.pro-router-wrap .op-time-content {
+  height: calc(100% - 54px);
+  overflow: auto;
+}
+.pro-router-wrap .pie-chart {
+  width: 100%;
+  height: 260px;
+  overflow: hidden;
+}
+.pro-router-wrap .image-noData {
+  width: 100%;
+  height: calc(100% - 52px);
+  min-height: 194px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.pro-router-wrap .image-noData p {
+  font-size: 16px;
+  padding-top: 10px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling-gpu/profiling.vue b/mindinsight/ui/src/views/profiling-gpu/profiling.vue
index b9d83e79..1a52a0c1 100644
--- a/mindinsight/ui/src/views/profiling-gpu/profiling.vue
+++ b/mindinsight/ui/src/views/profiling-gpu/profiling.vue
@@ -316,146 +316,146 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .prof-wrap {
   height: 100%;
   background: #fff;
-  .prof-content {
-    height: 100%;
-    padding: 24px 24px 24px 0;
-    & > div {
-      float: left;
-      height: 100%;
-    }
-    .prof-content-left {
-      width: 22%;
-      transition: width 0.2s;
-      position: relative;
-      .el-input__inner {
-        padding: 0 10px;
-      }
-      .helper {
-        padding: 32px;
-        padding-top: 20px;
-        height: 100%;
-        overflow-y: auto;
-        margin-left: 24px;
-        background: #edf0f5;
-        word-wrap: break-word;
-        .summary-path {
-          line-height: 24px;
-          font-size: 14px;
-          overflow: hidden;
-          font-weight: bold;
-          padding-bottom: 10px;
-          word-break: break-all;
-          text-overflow: -o-ellipsis-lastline;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
-        }
-        .nowrap-style {
-          white-space: nowrap;
-        }
-        .cur-card {
-          margin-bottom: 32px;
-          .card-select {
-            width: calc(100% - 120px);
-          }
-          & > label {
-            margin-right: 14px;
-          }
-        }
-        .helper-title {
-          font-size: 20px;
-          font-weight: bold;
-          margin-bottom: 32px;
-          .el-icon-rank {
-            float: right;
-            cursor: pointer;
-          }
-        }
-        .helper-container-title {
-          display: inline-block;
-          padding: 0 6px;
-        }
-        .helper-icon {
-          display: inline-block;
-          width: 6px;
-          height: 6px;
-          margin-top: 6px;
-          border-radius: 3px;
-          background-color: #00a5a7;
-        }
-        .suggested-title {
-          font-weight: bold;
-          margin-bottom: 20px;
-          font-size: 16px;
-        }
-        .container-bottom {
-          margin-bottom: 16px;
-        }
-        .suggested-items-style {
-          display: flex;
-          font-weight: bold;
-          margin-bottom: 6px;
-          margin-top: 10px;
-        }
-        .helper-content-style {
-          margin-left: 6px;
-          line-height: 20px;
-          word-break: break-all;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 8;
-        }
-      }
-      .content-icon {
-        color: #00a5a7;
-        padding-top: 3px;
-      }
-      .content-style {
-        display: flex;
-      }
-      .collapse-btn {
-        position: absolute;
-        right: -21px;
-        width: 31px;
-        height: 100px;
-        top: 50%;
-        margin-top: -50px;
-        cursor: pointer;
-        line-height: 86px;
-        z-index: 1;
-        text-align: center;
-        background-image: url('../../assets/images/collapse-left.svg');
-      }
-      .collapse-btn.collapse {
-        background-image: url('../../assets/images/collapse-right.svg');
-      }
-    }
-    .prof-content-left.collapse {
-      width: 0;
-    }
-    .prof-content-right {
-      width: 78%;
-      padding-left: 20px;
-      transition: width 0.2s;
-      position: relative;
-      .close {
-        position: absolute;
-        right: 0;
-        top: -10px;
-        cursor: pointer;
-      }
-    }
-    .prof-content-right.collapse {
-      width: 100%;
-    }
-  }
+}
+.prof-wrap .prof-content {
+  height: 100%;
+  padding: 24px 24px 24px 0;
+}
+.prof-wrap .prof-content > div {
+  float: left;
+  height: 100%;
+}
+.prof-wrap .prof-content .prof-content-left {
+  width: 22%;
+  transition: width 0.2s;
+  position: relative;
+}
+.prof-wrap .prof-content .prof-content-left .el-input__inner {
+  padding: 0 10px;
+}
+.prof-wrap .prof-content .prof-content-left .helper {
+  padding: 32px;
+  padding-top: 20px;
+  height: 100%;
+  overflow-y: auto;
+  margin-left: 24px;
+  background: #edf0f5;
+  word-wrap: break-word;
+}
+.prof-wrap .prof-content .prof-content-left .helper .summary-path {
+  line-height: 24px;
+  font-size: 14px;
+  overflow: hidden;
+  font-weight: bold;
+  padding-bottom: 10px;
+  word-break: break-all;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+.prof-wrap .prof-content .prof-content-left .helper .nowrap-style {
+  white-space: nowrap;
+}
+.prof-wrap .prof-content .prof-content-left .helper .cur-card {
+  margin-bottom: 32px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .cur-card .card-select {
+  width: calc(100% - 120px);
+}
+.prof-wrap .prof-content .prof-content-left .helper .cur-card > label {
+  margin-right: 14px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 32px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-title .el-icon-rank {
+  float: right;
+  cursor: pointer;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-container-title {
+  display: inline-block;
+  padding: 0 6px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-icon {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-top: 6px;
+  border-radius: 3px;
+  background-color: #00a5a7;
+}
+.prof-wrap .prof-content .prof-content-left .helper .suggested-title {
+  font-weight: bold;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .container-bottom {
+  margin-bottom: 16px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .suggested-items-style {
+  display: flex;
+  font-weight: bold;
+  margin-bottom: 6px;
+  margin-top: 10px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-content-style {
+  margin-left: 6px;
+  line-height: 20px;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 8;
+}
+.prof-wrap .prof-content .prof-content-left .content-icon {
+  color: #00a5a7;
+  padding-top: 3px;
+}
+.prof-wrap .prof-content .prof-content-left .content-style {
+  display: flex;
+}
+.prof-wrap .prof-content .prof-content-left .collapse-btn {
+  position: absolute;
+  right: -21px;
+  width: 31px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+  cursor: pointer;
+  line-height: 86px;
+  z-index: 1;
+  text-align: center;
+  background-image: url("../../assets/images/collapse-left.svg");
+}
+.prof-wrap .prof-content .prof-content-left .collapse-btn.collapse {
+  background-image: url("../../assets/images/collapse-right.svg");
+}
+.prof-wrap .prof-content .prof-content-left.collapse {
+  width: 0;
+}
+.prof-wrap .prof-content .prof-content-right {
+  width: 78%;
+  padding-left: 20px;
+  transition: width 0.2s;
+  position: relative;
+}
+.prof-wrap .prof-content .prof-content-right .close {
+  position: absolute;
+  right: 0;
+  top: -10px;
+  cursor: pointer;
+}
+.prof-wrap .prof-content .prof-content-right.collapse {
+  width: 100%;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling/data-process.vue b/mindinsight/ui/src/views/profiling/data-process.vue
index 49170b7c..8d196136 100644
--- a/mindinsight/ui/src/views/profiling/data-process.vue
+++ b/mindinsight/ui/src/views/profiling/data-process.vue
@@ -1323,299 +1323,288 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .data-process-wrap {
   height: 100%;
   background: #fff;
   padding: 0 16px;
-  .title {
-    font-size: 16px;
-    font-weight: bold;
-    text-align: left;
-  }
-  .el-tabs.el-tabs--top {
-    height: calc(100% - 22px);
-  }
-  .el-tabs__content {
-    height: calc(100% - 54px);
-    & > .el-tab-pane {
-      height: 100%;
-    }
-  }
-  .el-tabs__item.is-active {
-    color: #00a5a7;
-    font-weight: bold;
-  }
-  .data-process-top {
-    height: 156px;
-    font-size: 0;
-    display: flex;
-    align-items: flex-start;
-    padding-top: 20px;
-    .cell-container {
-      width: 20%;
-      cursor: pointer;
-      padding: 20px 0;
-      border: 2px solid transparent;
-      .title {
-        font-size: 14px;
-        line-height: 20px;
-        padding: 0 0 0 20px;
-        font-weight: bold;
-      }
-    }
-    .data-process {
-      background-color: #e3f8eb;
-      cursor: default;
-      .title {
-        border-left: 2px solid #00a5a7;
-      }
-    }
-    .device_queue_op {
-      background-color: #e1f2ff;
-      .title {
-        border-left: 2px solid #6cbfff;
-      }
-    }
-    .get-next {
-      background-color: #fef4dd;
-      .title {
-        border-left: 2px solid #fdca5a;
-      }
-    }
-    .queue-container {
-      width: 20%;
-      position: relative;
-      .img {
-        width: 100%;
-        height: 37px;
-        margin-top: 13px;
-        .edge {
-          width: calc(50% - 40px);
-          display: inline-block;
-          padding-top: 11px;
-          img {
-            width: 100%;
-          }
-        }
-        .icon {
-          width: 80px;
-          padding: 0 20px;
-          display: inline-block;
-          vertical-align: middle;
-          img {
-            padding: 3px;
-            border: 2px solid transparent;
-            cursor: pointer;
-          }
-        }
-      }
-
-      .title {
-        text-align: center;
-        font-size: 14px;
-        margin-top: 10px;
-        font-weight: bold;
-      }
-      .description {
-        position: absolute;
-        font-size: 12px;
-        line-height: 12px;
-        white-space: nowrap;
-        overflow: hidden;
-        width: 100%;
-        text-align: center;
-        .item {
-          font-size: 12px;
-          line-height: 16px;
-          white-space: normal;
-          .num {
-            color: #07a695;
-          }
-        }
-      }
-    }
-    .selected {
-      border: 2px solid #3399ff !important;
-    }
-  }
-  .data-process-bottom {
-    height: calc(100% - 156px);
-    .queue-step-wrap {
-      &:first-child {
-        height: 50%;
-      }
-      &:last-child {
-        height: 50%;
-      }
-      & > .title {
-        margin-bottom: 15px;
-        font-weight: bold;
-        font-size: 15px;
-      }
-      .chart-content {
-        height: calc(100% - 30px);
-        .chart-wrap {
-          float: left;
-          width: calc(50% - 12px);
-          height: calc(100% - 10px);
-          border-radius: 4px;
-          overflow-y: auto;
-          border: 1px solid #eee;
-          &:first-child {
-            margin-right: 20px;
-          }
-          .title {
-            font-size: 13px;
-            padding: 10px;
-            font-weight: bold;
-          }
-          .data-tips {
-            color: #999;
-            padding: 0 0 0 10px;
-            & > div {
-              display: inline-block;
-              margin-right: 10px;
-            }
-          }
-          .chart {
-            height: calc(100% - 70px);
-            min-height: 150px;
-            overflow: hidden;
-          }
-        }
-        .chart-wrap.highlight {
-          border-color: #3399ff;
-        }
-      }
-      .chart-content.second {
-        height: calc(100% - 25px);
-      }
-    }
-    .queue-step-wrap.single {
-      height: 100%;
-      .chart-content {
-        .chart-wrap {
-          width: 100%;
-        }
-      }
-    }
-  }
-  .pipeline-wrap {
-    height: 100%;
-    .pipeline-top {
-      height: 35%;
-      .pipeline-top-title {
-        font-size: 15px;
-        font-weight: bold;
-      }
-      .average-rate-wrap {
-        overflow-y: auto;
-        height: calc(100% - 20px);
-        #average-rate {
-          height: 100%;
-          min-height: 180px;
-          overflow: hidden;
-        }
-      }
-    }
-    .pipeline-middle {
-      height: 30%;
-      .pipeline-middle-title {
-        font-size: 15px;
-        font-weight: bold;
-      }
-      .operator-graph {
-        height: calc(100% - 20px);
-        #graph {
-          width: 100%;
-          height: 100%;
-          background-color: #f7faff;
-          #graph0 > polygon {
-            fill: transparent;
-          }
-          .node.queue {
-            cursor: pointer;
-          }
-          .operator {
-            path {
-              stroke: #e6ebf5;
-              fill: #e6ebf5;
-            }
-          }
-          .selected {
-            path,
-            polygon {
-              stroke: red;
-            }
-          }
-          .edge {
-            path,
-            polygon {
-              stroke: #e6ebf5;
-              fill: #e6ebf5;
-            }
-          }
-        }
-      }
-    }
-    .pipeline-bottom {
-      height: 35%;
-      .queue-deep-wrap {
-        height: 100%;
-        background: #fafbfc;
-        & > div {
-          float: left;
-          height: 100%;
-        }
-        .left {
-          width: calc(60% - 20px);
-          overflow-y: auto;
-          height: 100%;
-          border-right: 1px dashed #ccc;
-          padding-right: 20px;
-          margin-right: 20px;
-          #queue-deep {
-            height: 100%;
-            width: 100%;
-            min-height: 220px;
-            overflow: hidden;
-          }
-        }
-        .right {
-          width: 40%;
-          .title {
-            font-size: 13px;
-            margin-top: 7px;
-          }
-          .item-wrap {
-            padding-top: 10px;
-            height: calc(100% - 26px);
-            overflow-y: auto;
-            .item {
-              margin-top: 10px;
-              & > span {
-                color: #757b88;
-                display: inline-block;
-                width: 50%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .image-noData {
-    width: 100%;
-    height: calc(100% - 37px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    p {
-      font-size: 16px;
-      padding-top: 10px;
-    }
-  }
+}
+.data-process-wrap .title {
+  font-size: 16px;
+  font-weight: bold;
+  text-align: left;
+}
+.data-process-wrap .el-tabs.el-tabs--top {
+  height: calc(100% - 22px);
+}
+.data-process-wrap .el-tabs__content {
+  height: calc(100% - 54px);
+}
+.data-process-wrap .el-tabs__content > .el-tab-pane {
+  height: 100%;
+}
+.data-process-wrap .el-tabs__item.is-active {
+  color: #00a5a7;
+  font-weight: bold;
+}
+.data-process-wrap .data-process-top {
+  height: 156px;
+  font-size: 0;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 20px;
+}
+.data-process-wrap .data-process-top .cell-container {
+  width: 20%;
+  cursor: pointer;
+  padding: 20px 0;
+  border: 2px solid transparent;
+}
+.data-process-wrap .data-process-top .cell-container .title {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 0 0 0 20px;
+  font-weight: bold;
+}
+.data-process-wrap .data-process-top .data-process {
+  background-color: #e3f8eb;
+  cursor: default;
+}
+.data-process-wrap .data-process-top .data-process .title {
+  border-left: 2px solid #00a5a7;
+}
+.data-process-wrap .data-process-top .device_queue_op {
+  background-color: #e1f2ff;
+}
+.data-process-wrap .data-process-top .device_queue_op .title {
+  border-left: 2px solid #6cbfff;
+}
+.data-process-wrap .data-process-top .get-next {
+  background-color: #fef4dd;
+}
+.data-process-wrap .data-process-top .get-next .title {
+  border-left: 2px solid #fdca5a;
+}
+.data-process-wrap .data-process-top .queue-container {
+  width: 20%;
+  position: relative;
+}
+.data-process-wrap .data-process-top .queue-container .img {
+  width: 100%;
+  height: 37px;
+  margin-top: 13px;
+}
+.data-process-wrap .data-process-top .queue-container .img .edge {
+  width: calc(50% - 40px);
+  display: inline-block;
+  padding-top: 11px;
+}
+.data-process-wrap .data-process-top .queue-container .img .edge img {
+  width: 100%;
+}
+.data-process-wrap .data-process-top .queue-container .img .icon {
+  width: 80px;
+  padding: 0 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.data-process-wrap .data-process-top .queue-container .img .icon img {
+  padding: 3px;
+  border: 2px solid transparent;
+  cursor: pointer;
+}
+.data-process-wrap .data-process-top .queue-container .title {
+  text-align: center;
+  font-size: 14px;
+  margin-top: 10px;
+  font-weight: bold;
+}
+.data-process-wrap .data-process-top .queue-container .description {
+  position: absolute;
+  font-size: 12px;
+  line-height: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+  text-align: center;
+}
+.data-process-wrap .data-process-top .queue-container .description .item {
+  font-size: 12px;
+  line-height: 16px;
+  white-space: normal;
+}
+.data-process-wrap .data-process-top .queue-container .description .item .num {
+  color: #07a695;
+}
+.data-process-wrap .data-process-top .selected {
+  border: 2px solid #3399ff !important;
+}
+.data-process-wrap .data-process-bottom {
+  height: calc(100% - 156px);
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap:first-child {
+  height: 50%;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap:last-child {
+  height: 50%;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap > .title {
+  margin-bottom: 15px;
+  font-weight: bold;
+  font-size: 15px;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content {
+  height: calc(100% - 30px);
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap {
+  float: left;
+  width: calc(50% - 12px);
+  height: calc(100% - 10px);
+  border-radius: 4px;
+  overflow-y: auto;
+  border: 1px solid #eee;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap:first-child {
+  margin-right: 20px;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap .title {
+  font-size: 13px;
+  padding: 10px;
+  font-weight: bold;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap .data-tips {
+  color: #999;
+  padding: 0 0 0 10px;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap .data-tips > div {
+  display: inline-block;
+  margin-right: 10px;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap .chart {
+  height: calc(100% - 70px);
+  min-height: 150px;
+  overflow: hidden;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content .chart-wrap.highlight {
+  border-color: #3399ff;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap .chart-content.second {
+  height: calc(100% - 25px);
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap.single {
+  height: 100%;
+}
+.data-process-wrap .data-process-bottom .queue-step-wrap.single .chart-content .chart-wrap {
+  width: 100%;
+}
+.data-process-wrap .pipeline-wrap {
+  height: 100%;
+}
+.data-process-wrap .pipeline-wrap .pipeline-top {
+  height: 35%;
+}
+.data-process-wrap .pipeline-wrap .pipeline-top .pipeline-top-title {
+  font-size: 15px;
+  font-weight: bold;
+}
+.data-process-wrap .pipeline-wrap .pipeline-top .average-rate-wrap {
+  overflow-y: auto;
+  height: calc(100% - 20px);
+}
+.data-process-wrap .pipeline-wrap .pipeline-top .average-rate-wrap #average-rate {
+  height: 100%;
+  min-height: 180px;
+  overflow: hidden;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle {
+  height: 30%;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .pipeline-middle-title {
+  font-size: 15px;
+  font-weight: bold;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph {
+  height: calc(100% - 20px);
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph {
+  width: 100%;
+  height: 100%;
+  background-color: #f7faff;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph #graph0 > polygon {
+  fill: transparent;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph .node.queue {
+  cursor: pointer;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph .operator path {
+  stroke: #e6ebf5;
+  fill: #e6ebf5;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph .selected path,
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph .selected polygon {
+  stroke: red;
+}
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph .edge path,
+.data-process-wrap .pipeline-wrap .pipeline-middle .operator-graph #graph .edge polygon {
+  stroke: #e6ebf5;
+  fill: #e6ebf5;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom {
+  height: 35%;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap {
+  height: 100%;
+  background: #fafbfc;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap > div {
+  float: left;
+  height: 100%;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap .left {
+  width: calc(60% - 20px);
+  overflow-y: auto;
+  height: 100%;
+  border-right: 1px dashed #ccc;
+  padding-right: 20px;
+  margin-right: 20px;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap .left #queue-deep {
+  height: 100%;
+  width: 100%;
+  min-height: 220px;
+  overflow: hidden;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap .right {
+  width: 40%;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap .right .title {
+  font-size: 13px;
+  margin-top: 7px;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap .right .item-wrap {
+  padding-top: 10px;
+  height: calc(100% - 26px);
+  overflow-y: auto;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap .right .item-wrap .item {
+  margin-top: 10px;
+}
+.data-process-wrap .pipeline-wrap .pipeline-bottom .queue-deep-wrap .right .item-wrap .item > span {
+  color: #757b88;
+  display: inline-block;
+  width: 50%;
+}
+.data-process-wrap .image-noData {
+  width: 100%;
+  height: calc(100% - 37px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.data-process-wrap .image-noData p {
+  font-size: 16px;
+  padding-top: 10px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling/operator.vue b/mindinsight/ui/src/views/profiling/operator.vue
index 14639b23..a9b36936 100644
--- a/mindinsight/ui/src/views/profiling/operator.vue
+++ b/mindinsight/ui/src/views/profiling/operator.vue
@@ -1503,228 +1503,215 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .operator {
   height: 100%;
-  .clear {
-    clear: both;
-  }
-  .el-tabs__item {
-    color: #6c7280;
-    line-height: 36px;
-    height: 36px;
-  }
-  .el-tabs__item.is-active {
-    color: #00a5a7;
-    font-weight: bold;
-  }
-  .operator-title {
-    padding: 0 15px;
-    font-size: 16px;
-    font-weight: bold;
-  }
-  .cl-profiler {
-    height: calc(100% - 21px);
-    overflow-y: auto;
-    width: 100%;
-    background: #fff;
-    padding: 0 16px;
-    overflow: hidden;
-    .custom-label {
-      max-width: calc(100% - 25px);
-      padding: 0;
-      vertical-align: middle;
-    }
-    .el-tabs {
-      height: 100%;
-      .el-tabs__header {
-        margin-bottom: 10px;
-      }
-    }
-    .el-tabs__content {
-      height: calc(100% - 46px);
-    }
-    .el-tab-pane {
-      height: 100%;
-    }
-    .cl-search-box {
-      float: right;
-      margin-bottom: 10px;
-      margin-right: 20px;
-      .el-input {
-        width: 300px;
-      }
-    }
-    .cl-profiler-top {
-      height: 47%;
-      .chart-title {
-        float: left;
-        font-weight: bold;
-        height: 32px;
-      }
-    }
-    .cl-profiler-top.fullScreen {
-      display: none;
-    }
-    .cl-profiler-bottom {
-      height: 53%;
-      padding-top: 10px;
-      .fullScreen {
-        float: right;
-        margin-top: 5px;
-        cursor: pointer;
-      }
-    }
-    .cl-profiler-bottom.fullScreen {
-      height: 100%;
-    }
-    .cl-profiler-echarts {
-      width: 100%;
-      height: calc(100% - 32px);
-      display: inline-block;
-      position: relative;
-      overflow: auto;
-      #cpu-echarts,
-      #core-echarts {
-        width: 100%;
-        height: 100%;
-        min-width: 1300px;
-        min-height: 321px;
-        overflow: hidden;
-      }
-    }
-    .chart-radio-group {
-      float: right;
-    }
-    .el-radio-group {
-      .el-radio-button--small .el-radio-button__inner {
-        height: 30px;
-        width: 70px;
-        font-size: 14px;
-        line-height: 10px;
-      }
-    }
-    .cl-profiler-bar {
-      display: inline-block;
-      width: calc(100% - 400px);
-      vertical-align: top;
-      height: 100%;
-      padding: 20px;
-    }
-    .cl-profiler-table-type {
-      display: inline-block;
-      width: calc(100% - 400px);
-      vertical-align: top;
-      height: 100%;
-    }
-    .el-pagination {
-      margin: 7px 0;
-      float: right;
-    }
-    .details-data-list {
-      .el-table {
-        th {
-          padding: 10px 0;
-          border-top: 1px solid #ebeef5;
-          .cell {
-            border-left: 1px solid #d9d8dd;
-            height: 14px;
-            line-height: 14px;
-          }
-        }
-        th:first-child {
-          .cell {
-            border-left: none;
-          }
-        }
-        th:nth-child(2),
-        td:nth-child(2) {
-          max-width: 30%;
-        }
-        td {
-          padding: 8px 0;
-        }
-      }
-      .el-table__row--level-0 td:first-child:after {
-        width: 20px;
-        height: 1px;
-        background: #ebeef5;
-        z-index: 11;
-        position: absolute;
-        left: 0;
-        bottom: -1px;
-        content: '';
-        display: block;
-      }
-      .el-table__row--level-1 {
-        td {
-          padding: 4px 0;
-          position: relative;
-        }
-        td:first-child::before {
-          width: 42px;
-          background: #f0fdfd;
-          border-right: 2px #00a5a7 solid;
-          z-index: 10;
-          position: absolute;
-          left: 0;
-          top: -1px;
-          bottom: 0px;
-          content: '';
-          display: block;
-        }
-      }
-
-      .el-table__row--level-1:first-child {
-        td:first-child::before {
-          bottom: 0;
-        }
-      }
-      .el-dialog__title {
-        font-weight: bold;
-      }
-      .el-dialog__body {
-        max-height: 500px;
-        padding-top: 10px;
-        overflow: auto;
-        .details-data-title {
-          margin-bottom: 20px;
-        }
-      }
-    }
-    .el-table__expanded-cell[class*='cell'] {
-      padding: 0;
-    }
-    .expand-table {
-      position: relative;
-      padding-left: 44px;
-    }
-    .expand-table::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      background: #f0fdfd;
-      width: 42px;
-      border-right: 2px #00a5a7 solid;
-    }
-    .el-radio-button:last-child .el-radio-button__inner,
-    .el-radio-button:first-child .el-radio-button__inner {
-      border-radius: 0;
-    }
-    .image-noData {
-      width: 100%;
-      height: 450px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      p {
-        font-size: 16px;
-        padding-top: 10px;
-      }
-    }
-  }
+}
+.operator .clear {
+  clear: both;
+}
+.operator .el-tabs__item {
+  color: #6c7280;
+  line-height: 36px;
+  height: 36px;
+}
+.operator .el-tabs__item.is-active {
+  color: #00a5a7;
+  font-weight: bold;
+}
+.operator .operator-title {
+  padding: 0 15px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.operator .cl-profiler {
+  height: calc(100% - 21px);
+  overflow-y: auto;
+  width: 100%;
+  background: #fff;
+  padding: 0 16px;
+  overflow: hidden;
+}
+.operator .cl-profiler .custom-label {
+  max-width: calc(100% - 25px);
+  padding: 0;
+  vertical-align: middle;
+}
+.operator .cl-profiler .el-tabs {
+  height: 100%;
+}
+.operator .cl-profiler .el-tabs .el-tabs__header {
+  margin-bottom: 10px;
+}
+.operator .cl-profiler .el-tabs__content {
+  height: calc(100% - 46px);
+}
+.operator .cl-profiler .el-tab-pane {
+  height: 100%;
+}
+.operator .cl-profiler .cl-search-box {
+  float: right;
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
+.operator .cl-profiler .cl-search-box .el-input {
+  width: 300px;
+}
+.operator .cl-profiler .cl-profiler-top {
+  height: 47%;
+}
+.operator .cl-profiler .cl-profiler-top .chart-title {
+  float: left;
+  font-weight: bold;
+  height: 32px;
+}
+.operator .cl-profiler .cl-profiler-top.fullScreen {
+  display: none;
+}
+.operator .cl-profiler .cl-profiler-bottom {
+  height: 53%;
+  padding-top: 10px;
+}
+.operator .cl-profiler .cl-profiler-bottom .fullScreen {
+  float: right;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.operator .cl-profiler .cl-profiler-bottom.fullScreen {
+  height: 100%;
+}
+.operator .cl-profiler .cl-profiler-echarts {
+  width: 100%;
+  height: calc(100% - 32px);
+  display: inline-block;
+  position: relative;
+  overflow: auto;
+}
+.operator .cl-profiler .cl-profiler-echarts #cpu-echarts,
+.operator .cl-profiler .cl-profiler-echarts #core-echarts {
+  width: 100%;
+  height: 100%;
+  min-width: 1300px;
+  min-height: 321px;
+  overflow: hidden;
+}
+.operator .cl-profiler .chart-radio-group {
+  float: right;
+}
+.operator .cl-profiler .el-radio-group .el-radio-button--small .el-radio-button__inner {
+  height: 30px;
+  width: 70px;
+  font-size: 14px;
+  line-height: 10px;
+}
+.operator .cl-profiler .cl-profiler-bar {
+  display: inline-block;
+  width: calc(100% - 400px);
+  vertical-align: top;
+  height: 100%;
+  padding: 20px;
+}
+.operator .cl-profiler .cl-profiler-table-type {
+  display: inline-block;
+  width: calc(100% - 400px);
+  vertical-align: top;
+  height: 100%;
+}
+.operator .cl-profiler .el-pagination {
+  margin: 7px 0;
+  float: right;
+}
+.operator .cl-profiler .details-data-list .el-table th {
+  padding: 10px 0;
+  border-top: 1px solid #ebeef5;
+}
+.operator .cl-profiler .details-data-list .el-table th .cell {
+  border-left: 1px solid #d9d8dd;
+  height: 14px;
+  line-height: 14px;
+}
+.operator .cl-profiler .details-data-list .el-table th:first-child .cell {
+  border-left: none;
+}
+.operator .cl-profiler .details-data-list .el-table th:nth-child(2),
+.operator .cl-profiler .details-data-list .el-table td:nth-child(2) {
+  max-width: 30%;
+}
+.operator .cl-profiler .details-data-list .el-table td {
+  padding: 8px 0;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-0 td:first-child:after {
+  width: 20px;
+  height: 1px;
+  background: #ebeef5;
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  content: "";
+  display: block;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-1 td {
+  padding: 4px 0;
+  position: relative;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-1 td:first-child::before {
+  width: 42px;
+  background: #f0fdfd;
+  border-right: 2px #00a5a7 solid;
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  bottom: 0px;
+  content: "";
+  display: block;
+}
+.operator .cl-profiler .details-data-list .el-table__row--level-1:first-child td:first-child::before {
+  bottom: 0;
+}
+.operator .cl-profiler .details-data-list .el-dialog__title {
+  font-weight: bold;
+}
+.operator .cl-profiler .details-data-list .el-dialog__body {
+  max-height: 500px;
+  padding-top: 10px;
+  overflow: auto;
+}
+.operator .cl-profiler .details-data-list .el-dialog__body .details-data-title {
+  margin-bottom: 20px;
+}
+.operator .cl-profiler .el-table__expanded-cell[class*=cell] {
+  padding: 0;
+}
+.operator .cl-profiler .expand-table {
+  position: relative;
+  padding-left: 44px;
+}
+.operator .cl-profiler .expand-table::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: #f0fdfd;
+  width: 42px;
+  border-right: 2px #00a5a7 solid;
+}
+.operator .cl-profiler .el-radio-button:last-child .el-radio-button__inner,
+.operator .cl-profiler .el-radio-button:first-child .el-radio-button__inner {
+  border-radius: 0;
+}
+.operator .cl-profiler .image-noData {
+  width: 100%;
+  height: 450px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.operator .cl-profiler .image-noData p {
+  font-size: 16px;
+  padding-top: 10px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling/profiling-dashboard.vue b/mindinsight/ui/src/views/profiling/profiling-dashboard.vue
index 2681d841..8508b750 100644
--- a/mindinsight/ui/src/views/profiling/profiling-dashboard.vue
+++ b/mindinsight/ui/src/views/profiling/profiling-dashboard.vue
@@ -1232,316 +1232,315 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .el-tooltip-popper {
   max-width: 500px;
 }
-.tooltip-container {
-  .pro-dash-tooltip {
-    line-height: 20px;
-    padding: 10px;
-    .font-style {
-      font-weight: bold;
-    }
-    .font-size-style {
-      font-weight: bold;
-      font-size: 16px;
-    }
-  }
+
+.tooltip-container .pro-dash-tooltip {
+  line-height: 20px;
+  padding: 10px;
+}
+.tooltip-container .pro-dash-tooltip .font-style {
+  font-weight: bold;
 }
+.tooltip-container .pro-dash-tooltip .font-size-style {
+  font-weight: bold;
+  font-size: 16px;
+}
+
 .pro-router-wrap {
   height: 100%;
-  & > div {
-    float: left;
-    height: 100%;
-    & > div {
-      border: 1px solid #eee;
-      border-radius: 4px;
-    }
-    .title-wrap {
-      padding: 15px;
-      .title {
-        float: left;
-        font-weight: bold;
-        font-size: 16px;
-      }
-      .tip-icon {
-        float: right;
-        margin-right: 10px;
-        font-size: 20px;
-        color: #6c7280;
-        .el-icon-warning {
-          cursor: pointer;
-          &:hover::before {
-            color: #00a5a7;
-          }
-        }
-      }
-      .view-detail {
-        float: right;
-        cursor: pointer;
-        font-size: 12px;
-        height: 24px;
-        line-height: 24px;
-        a {
-          color: #00a5a7 !important;
-          padding-right: 6px;
-        }
-        button {
-          color: #00a5a7;
-          border: none;
-          background-color: #fff;
-          cursor: pointer;
-        }
-        button.disabled {
-          cursor: not-allowed;
-          color: #c0c4cc;
-        }
-      }
-      &::after {
-        content: '';
-        clear: both;
-        display: block;
-      }
-    }
-    .loading-icon {
-      margin-left: 5px;
-    }
-    .coming-soon-content {
-      height: calc(100% - 50px);
-      position: relative;
-      .coming-soon-container {
-        text-align: center;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        border-radius: 5px;
-        -webkit-transform: translate(-50%, -50%);
-        -moz-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-      }
-      .coming-soon-text {
-        font-size: 16px;
-      }
-    }
-  }
-  .pro-router-left {
-    width: calc(100% - 400px);
-    padding-right: 15px;
-    .step-trace {
-      height: 45%;
-      margin-bottom: 15px;
-      .trace-container {
-        width: 100%;
-        height: calc(100% - 54px);
-        overflow: auto;
-        .training-trace {
-          position: relative;
-          height: 0;
-          .content {
-            overflow: hidden;
-            text-align: center;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            font-size: 12px;
-            line-height: 40px;
-          }
-          .content-mini {
-            overflow: visible;
-          }
-        }
-      }
-    }
-    .minddata {
-      height: calc(55% - 15px);
-      .pipeline-container {
-        width: 100%;
-        padding: 20px 20px;
-        height: calc(100% - 52px);
-        display: flex;
-        font-size: 0;
-        align-items: baseline;
-        .cell-container {
-          width: 20%;
-          min-width: 110px;
-          padding: 20px 0;
-          border: 2px solid transparent;
-          .title {
-            font-size: 14px;
-            line-height: 20px;
-            padding: 0 0 0 10px;
-            font-weight: bold;
-          }
-        }
-        .data-process {
-          background-color: #e3f8eb;
-          .title {
-            border-left: 2px solid #00a5a7;
-          }
-        }
-        .device_queue_op {
-          background-color: #e1f2ff;
-          .title {
-            border-left: 2px solid #6cbfff;
-          }
-        }
-        .get-next {
-          background-color: #fef4dd;
-          .title {
-            border-left: 2px solid #fdca5a;
-          }
-        }
-        .queue-container {
-          width: 20%;
-          position: relative;
-          .img {
-            width: 100%;
-            height: 24px;
-            margin-top: 30px;
-            .edge {
-              width: calc(50% - 40px);
-              display: inline-block;
-              vertical-align: middle;
-              img {
-                width: 100%;
-              }
-            }
-            .icon {
-              padding: 0 20px;
-              display: inline-block;
-              vertical-align: middle;
-              img {
-                padding: 3px;
-                border: 2px solid transparent;
-              }
-            }
-          }
-
-          .title {
-            text-align: center;
-            font-size: 14px;
-            margin-top: 10px;
-            font-weight: bold;
-          }
-          .description {
-            position: absolute;
-            font-size: 12px;
-            line-height: 12px;
-            white-space: nowrap;
-            overflow: visible;
-            width: 100%;
-            text-align: center;
-            .line {
-              width: 1px;
-              height: 40px;
-              margin: 20px 0;
-              border-left: 1px solid #979797;
-              display: inline-block;
-            }
-            .item {
-              font-size: 12px;
-              line-height: 16px;
-              white-space: normal;
-              overflow: visible;
-              .num {
-                white-space: nowrap;
-                color: #07a695;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .pro-router-right {
-    width: 400px;
-    .op-time-consume {
-      height: calc(60% - 15px);
-      margin-bottom: 15px;
-      .time-list {
-        height: calc(40% - 52px);
-        .item {
-          height: 25px;
-          line-height: 25px;
-          padding: 0 20px;
-          & > span {
-            display: inline-block;
-            height: 100%;
-            vertical-align: middle;
-          }
-          .index {
-            color: white;
-            background-color: rgb(108, 146, 250);
-            width: 20px;
-            height: 20px;
-            border-radius: 20px;
-            text-align: center;
-            vertical-align: middle;
-            line-height: 20px;
-          }
-          .name {
-            margin-left: 10px;
-            width: calc(50% - 30px);
-            text-overflow: ellipsis;
-            overflow: hidden;
-          }
-          .num {
-            width: 20%;
-          }
-          .time {
-            width: 30%;
-            position: relative;
-            span {
-              display: inline-block;
-              position: absolute;
-              left: 0;
-              height: 20px;
-            }
-            .bar {
-              background-color: #cceded;
-              top: 2px;
-            }
-            .value {
-              line-height: 25px;
-              height: 25px;
-            }
-          }
-        }
-      }
-    }
-    .time-line {
-      height: 40%;
-      overflow: hidden;
-      .timeline-info {
-        width: 100%;
-        height: calc(100% - 54px);
-        padding-left: 36px;
-      }
-      .info-line {
-        line-height: 30px;
-      }
-    }
-  }
-  .op-time-content {
-    height: calc(100% - 54px);
-    overflow: auto;
-  }
-  .pie-chart {
-    width: 100%;
-    height: 260px;
-    overflow: hidden;
-  }
-  .image-noData {
-    width: 100%;
-    height: calc(100% - 52px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    p {
-      font-size: 16px;
-      padding-top: 10px;
-    }
-  }
+}
+.pro-router-wrap > div {
+  float: left;
+  height: 100%;
+}
+.pro-router-wrap > div > div {
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.pro-router-wrap > div .title-wrap {
+  padding: 15px;
+}
+.pro-router-wrap > div .title-wrap .title {
+  float: left;
+  font-weight: bold;
+  font-size: 16px;
+}
+.pro-router-wrap > div .title-wrap .tip-icon {
+  float: right;
+  margin-right: 10px;
+  font-size: 20px;
+  color: #6c7280;
+}
+.pro-router-wrap > div .title-wrap .tip-icon .el-icon-warning {
+  cursor: pointer;
+}
+.pro-router-wrap > div .title-wrap .tip-icon .el-icon-warning:hover::before {
+  color: #00a5a7;
+}
+.pro-router-wrap > div .title-wrap .view-detail {
+  float: right;
+  cursor: pointer;
+  font-size: 12px;
+  height: 24px;
+  line-height: 24px;
+}
+.pro-router-wrap > div .title-wrap .view-detail a {
+  color: #00a5a7 !important;
+  padding-right: 6px;
+}
+.pro-router-wrap > div .title-wrap .view-detail button {
+  color: #00a5a7;
+  border: none;
+  background-color: #fff;
+  cursor: pointer;
+}
+.pro-router-wrap > div .title-wrap .view-detail button.disabled {
+  cursor: not-allowed;
+  color: #c0c4cc;
+}
+.pro-router-wrap > div .title-wrap::after {
+  content: '';
+  clear: both;
+  display: block;
+}
+.pro-router-wrap > div .loading-icon {
+  margin-left: 5px;
+}
+.pro-router-wrap > div .coming-soon-content {
+  height: calc(100% - 50px);
+  position: relative;
+}
+.pro-router-wrap > div .coming-soon-content .coming-soon-container {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 5px;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.pro-router-wrap > div .coming-soon-content .coming-soon-text {
+  font-size: 16px;
+}
+.pro-router-wrap .pro-router-left {
+  width: calc(100% - 400px);
+  padding-right: 15px;
+}
+.pro-router-wrap .pro-router-left .step-trace {
+  height: 45%;
+  margin-bottom: 15px;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container {
+  width: 100%;
+  height: calc(100% - 54px);
+  overflow: auto;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container .training-trace {
+  position: relative;
+  height: 0;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container .training-trace .content {
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 40px;
+}
+.pro-router-wrap .pro-router-left .step-trace .trace-container .training-trace .content-mini {
+  overflow: visible;
+}
+.pro-router-wrap .pro-router-left .minddata {
+  height: calc(55% - 15px);
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container {
+  width: 100%;
+  padding: 20px 20px;
+  height: calc(100% - 52px);
+  display: flex;
+  font-size: 0;
+  align-items: baseline;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .cell-container {
+  width: 20%;
+  min-width: 110px;
+  padding: 20px 0;
+  border: 2px solid transparent;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .cell-container .title {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 0 0 0 10px;
+  font-weight: bold;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .data-process {
+  background-color: #e3f8eb;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .data-process .title {
+  border-left: 2px solid #00a5a7;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .device_queue_op {
+  background-color: #e1f2ff;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .device_queue_op .title {
+  border-left: 2px solid #6cbfff;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .get-next {
+  background-color: #fef4dd;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .get-next .title {
+  border-left: 2px solid #fdca5a;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container {
+  width: 20%;
+  position: relative;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img {
+  width: 100%;
+  height: 24px;
+  margin-top: 30px;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .edge {
+  width: calc(50% - 40px);
+  display: inline-block;
+  vertical-align: middle;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .edge img {
+  width: 100%;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .icon {
+  padding: 0 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .img .icon img {
+  padding: 3px;
+  border: 2px solid transparent;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .title {
+  text-align: center;
+  font-size: 14px;
+  margin-top: 10px;
+  font-weight: bold;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description {
+  position: absolute;
+  font-size: 12px;
+  line-height: 12px;
+  white-space: nowrap;
+  overflow: visible;
+  width: 100%;
+  text-align: center;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .line {
+  width: 1px;
+  height: 40px;
+  margin: 20px 0;
+  border-left: 1px solid #979797;
+  display: inline-block;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item {
+  font-size: 12px;
+  line-height: 16px;
+  white-space: normal;
+  overflow: visible;
+}
+.pro-router-wrap .pro-router-left .minddata .pipeline-container .queue-container .description .item .num {
+  white-space: nowrap;
+  color: #07a695;
+}
+.pro-router-wrap .pro-router-right {
+  width: 400px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume {
+  height: calc(60% - 15px);
+  margin-bottom: 15px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list {
+  height: calc(40% - 52px);
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item {
+  height: 25px;
+  line-height: 25px;
+  padding: 0 20px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item > span {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .index {
+  color: white;
+  background-color: #6c92fa;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 20px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .name {
+  margin-left: 10px;
+  width: calc(50% - 30px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .num {
+  width: 20%;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time {
+  width: 30%;
+  position: relative;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time span {
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  height: 20px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time .bar {
+  background-color: #cceded;
+  top: 2px;
+}
+.pro-router-wrap .pro-router-right .op-time-consume .time-list .item .time .value {
+  line-height: 25px;
+  height: 25px;
+}
+.pro-router-wrap .pro-router-right .time-line {
+  height: 40%;
+  overflow: hidden;
+}
+.pro-router-wrap .pro-router-right .time-line .timeline-info {
+  width: 100%;
+  height: calc(100% - 54px);
+  padding-left: 36px;
+}
+.pro-router-wrap .pro-router-right .time-line .info-line {
+  line-height: 30px;
+}
+.pro-router-wrap .op-time-content {
+  height: calc(100% - 54px);
+  overflow: auto;
+}
+.pro-router-wrap .pie-chart {
+  width: 100%;
+  height: 260px;
+  overflow: hidden;
+}
+.pro-router-wrap .image-noData {
+  width: 100%;
+  height: calc(100% - 52px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.pro-router-wrap .image-noData p {
+  font-size: 16px;
+  padding-top: 10px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling/profiling.vue b/mindinsight/ui/src/views/profiling/profiling.vue
index c6f7c535..8dd1389e 100644
--- a/mindinsight/ui/src/views/profiling/profiling.vue
+++ b/mindinsight/ui/src/views/profiling/profiling.vue
@@ -337,146 +337,146 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .prof-wrap {
   height: 100%;
   background: #fff;
-  .prof-content {
-    height: 100%;
-    padding: 24px 24px 24px 0;
-    & > div {
-      float: left;
-      height: 100%;
-    }
-    .prof-content-left {
-      width: 22%;
-      transition: width 0.2s;
-      position: relative;
-      .el-input__inner {
-        padding: 0 10px;
-      }
-      .helper {
-        padding: 32px;
-        padding-top: 20px;
-        height: 100%;
-        overflow-y: auto;
-        margin-left: 24px;
-        background: #edf0f5;
-        word-wrap: break-word;
-        .summary-path {
-          line-height: 24px;
-          font-size: 14px;
-          overflow: hidden;
-          font-weight: bold;
-          padding-bottom: 10px;
-          word-break: break-all;
-          text-overflow: -o-ellipsis-lastline;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
-        }
-        .nowrap-style {
-          white-space: nowrap;
-        }
-        .cur-card {
-          margin-bottom: 32px;
-          .card-select {
-            width: calc(100% - 120px);
-          }
-          & > label {
-            margin-right: 14px;
-          }
-        }
-        .helper-title {
-          font-size: 20px;
-          font-weight: bold;
-          margin-bottom: 32px;
-          .el-icon-rank {
-            float: right;
-            cursor: pointer;
-          }
-        }
-        .helper-container-title {
-          display: inline-block;
-          padding: 0 6px;
-        }
-        .helper-icon {
-          display: inline-block;
-          width: 6px;
-          height: 6px;
-          margin-top: 6px;
-          border-radius: 3px;
-          background-color: #00a5a7;
-        }
-        .suggested-title {
-          font-weight: bold;
-          margin-bottom: 20px;
-          font-size: 16px;
-        }
-        .container-bottom {
-          margin-bottom: 16px;
-        }
-        .suggested-items-style {
-          display: flex;
-          font-weight: bold;
-          margin-bottom: 6px;
-          margin-top: 10px;
-        }
-        .helper-content-style {
-          margin-left: 6px;
-          line-height: 20px;
-          word-break: break-all;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 8;
-        }
-      }
-      .content-icon {
-        color: #00a5a7;
-        padding-top: 3px;
-      }
-      .content-style {
-        display: flex;
-      }
-      .collapse-btn {
-        position: absolute;
-        right: -21px;
-        width: 31px;
-        height: 100px;
-        top: 50%;
-        margin-top: -50px;
-        cursor: pointer;
-        line-height: 86px;
-        z-index: 1;
-        text-align: center;
-        background-image: url('../../assets/images/collapse-left.svg');
-      }
-      .collapse-btn.collapse {
-        background-image: url('../../assets/images/collapse-right.svg');
-      }
-    }
-    .prof-content-left.collapse {
-      width: 0;
-    }
-    .prof-content-right {
-      width: 78%;
-      padding-left: 20px;
-      transition: width 0.2s;
-      position: relative;
-      .close {
-        position: absolute;
-        right: 0;
-        top: -10px;
-        cursor: pointer;
-      }
-    }
-    .prof-content-right.collapse {
-      width: 100%;
-    }
-  }
+}
+.prof-wrap .prof-content {
+  height: 100%;
+  padding: 24px 24px 24px 0;
+}
+.prof-wrap .prof-content > div {
+  float: left;
+  height: 100%;
+}
+.prof-wrap .prof-content .prof-content-left {
+  width: 22%;
+  transition: width 0.2s;
+  position: relative;
+}
+.prof-wrap .prof-content .prof-content-left .el-input__inner {
+  padding: 0 10px;
+}
+.prof-wrap .prof-content .prof-content-left .helper {
+  padding: 32px;
+  padding-top: 20px;
+  height: 100%;
+  overflow-y: auto;
+  margin-left: 24px;
+  background: #edf0f5;
+  word-wrap: break-word;
+}
+.prof-wrap .prof-content .prof-content-left .helper .summary-path {
+  line-height: 24px;
+  font-size: 14px;
+  overflow: hidden;
+  font-weight: bold;
+  padding-bottom: 10px;
+  word-break: break-all;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+.prof-wrap .prof-content .prof-content-left .helper .nowrap-style {
+  white-space: nowrap;
+}
+.prof-wrap .prof-content .prof-content-left .helper .cur-card {
+  margin-bottom: 32px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .cur-card .card-select {
+  width: calc(100% - 120px);
+}
+.prof-wrap .prof-content .prof-content-left .helper .cur-card > label {
+  margin-right: 14px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 32px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-title .el-icon-rank {
+  float: right;
+  cursor: pointer;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-container-title {
+  display: inline-block;
+  padding: 0 6px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-icon {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-top: 6px;
+  border-radius: 3px;
+  background-color: #00a5a7;
+}
+.prof-wrap .prof-content .prof-content-left .helper .suggested-title {
+  font-weight: bold;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .container-bottom {
+  margin-bottom: 16px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .suggested-items-style {
+  display: flex;
+  font-weight: bold;
+  margin-bottom: 6px;
+  margin-top: 10px;
+}
+.prof-wrap .prof-content .prof-content-left .helper .helper-content-style {
+  margin-left: 6px;
+  line-height: 20px;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 8;
+}
+.prof-wrap .prof-content .prof-content-left .content-icon {
+  color: #00a5a7;
+  padding-top: 3px;
+}
+.prof-wrap .prof-content .prof-content-left .content-style {
+  display: flex;
+}
+.prof-wrap .prof-content .prof-content-left .collapse-btn {
+  position: absolute;
+  right: -21px;
+  width: 31px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+  cursor: pointer;
+  line-height: 86px;
+  z-index: 1;
+  text-align: center;
+  background-image: url("../../assets/images/collapse-left.svg");
+}
+.prof-wrap .prof-content .prof-content-left .collapse-btn.collapse {
+  background-image: url("../../assets/images/collapse-right.svg");
+}
+.prof-wrap .prof-content .prof-content-left.collapse {
+  width: 0;
+}
+.prof-wrap .prof-content .prof-content-right {
+  width: 78%;
+  padding-left: 20px;
+  transition: width 0.2s;
+  position: relative;
+}
+.prof-wrap .prof-content .prof-content-right .close {
+  position: absolute;
+  right: 0;
+  top: -10px;
+  cursor: pointer;
+}
+.prof-wrap .prof-content .prof-content-right.collapse {
+  width: 100%;
 }
 </style>
diff --git a/mindinsight/ui/src/views/profiling/step-trace.vue b/mindinsight/ui/src/views/profiling/step-trace.vue
index b6fe3263..c5f09507 100644
--- a/mindinsight/ui/src/views/profiling/step-trace.vue
+++ b/mindinsight/ui/src/views/profiling/step-trace.vue
@@ -938,147 +938,147 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .step-trace {
   width: 100%;
   height: 100%;
-  .step-trace-title {
-    padding: 0 15px;
-    font-size: 16px;
-    font-weight: bold;
-    .el-icon-question {
-      cursor: pointer;
-    }
-    .pf-content-right {
-      display: inline-block;
-      margin-left: 35px;
-      .input-wrap {
-        font-weight: normal;
-        label {
-          margin-right: 20px;
-        }
-        .el-input {
-          width: 150px;
-          margin-right: 16px;
-        }
-      }
-    }
-    .el-button {
-      border: 1px solid #00a5a7;
-      border-radius: 2px;
-      background-color: white;
-      color: #00a5a7;
-      padding: 7px 15px;
-      &:hover {
-        background: rgb(230, 246, 246);
-      }
-    }
-    .show-average {
-      float: right;
-      margin-right: 20px;
-    }
-  }
-  .step-message {
-    height: 32px;
-    line-height: 16px;
-    margin-top: 6px;
-    margin-left: 14px;
-    overflow-y: auto;
-  }
-  .step-padding-right {
-    padding-right: 20px;
-    display: inline-block;
-  }
-  .step-left-padding-right {
-    padding-right: 30px;
-    display: inline-block;
-  }
-  .font-weight-style {
-    font-weight: bold;
-  }
-  .pf-content-middle {
-    padding: 10px 15px 0;
-    height: calc(100% - 62px);
-    #trace-container {
-      width: 100%;
-      height: 50%;
-      border: 1px solid #ccc;
-      overflow: auto;
-      .training-trace {
-        position: relative;
-        height: 0;
-        .content {
-          overflow: hidden;
-          text-align: center;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          font-size: 12px;
-          line-height: 40px;
-        }
-        .content-mini {
-          overflow: visible;
-        }
-      }
-    }
-    .chart-wrap {
-      float: left;
-      height: calc(50% - 20px);
-      margin-top: 20px;
-      margin-right: 15px;
-      width: calc(33.3% - 10px);
-      border: 1px solid #ccc;
-      padding: 30px 30px 0;
-      border-radius: 4px;
-      overflow: auto;
-      &:last-child {
-        margin-right: 0;
-      }
-      .chart {
-        height: calc(100% - 85px);
-        min-height: 180px;
-        min-width: 250px;
-        overflow: hidden;
-      }
-      .title {
-        margin: 0 0 15px 20px;
-        font-weight: bold;
-      }
-      .rate-wrap {
-        font-size: 12px;
-        padding-left: 20px;
-        & > div {
-          display: inline-block;
-          margin: 0 15px 5px 0;
-          color: #464950;
-          span {
-            margin-right: 10px;
-            color: #6c7280;
-          }
-        }
-      }
-    }
-    .chart-wrap.chart-show {
-      width: calc(50% - 7.5px);
-    }
-  }
-  .image-noData {
-    width: 100%;
-    height: calc(100% - 52px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    p {
-      font-size: 16px;
-      padding-top: 10px;
-    }
-  }
-  .image-noData.svg {
-    height: 100%;
-  }
-  .el-icon-info {
-    font-size: 18px;
-    color: #6c7280;
-  }
+}
+.step-trace .step-trace-title {
+  padding: 0 15px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.step-trace .step-trace-title .el-icon-question {
+  cursor: pointer;
+}
+.step-trace .step-trace-title .pf-content-right {
+  display: inline-block;
+  margin-left: 35px;
+}
+.step-trace .step-trace-title .pf-content-right .input-wrap {
+  font-weight: normal;
+}
+.step-trace .step-trace-title .pf-content-right .input-wrap label {
+  margin-right: 20px;
+}
+.step-trace .step-trace-title .pf-content-right .input-wrap .el-input {
+  width: 150px;
+  margin-right: 16px;
+}
+.step-trace .step-trace-title .el-button {
+  border: 1px solid #00a5a7;
+  border-radius: 2px;
+  background-color: white;
+  color: #00a5a7;
+  padding: 7px 15px;
+}
+.step-trace .step-trace-title .el-button:hover {
+  background: #e6f6f6;
+}
+.step-trace .step-trace-title .show-average {
+  float: right;
+  margin-right: 20px;
+}
+.step-trace .step-message {
+  height: 32px;
+  line-height: 16px;
+  margin-top: 6px;
+  margin-left: 14px;
+  overflow-y: auto;
+}
+.step-trace .step-padding-right {
+  padding-right: 20px;
+  display: inline-block;
+}
+.step-trace .step-left-padding-right {
+  padding-right: 30px;
+  display: inline-block;
+}
+.step-trace .font-weight-style {
+  font-weight: bold;
+}
+.step-trace .pf-content-middle {
+  padding: 10px 15px 0;
+  height: calc(100% - 62px);
+}
+.step-trace .pf-content-middle #trace-container {
+  width: 100%;
+  height: 50%;
+  border: 1px solid #ccc;
+  overflow: auto;
+}
+.step-trace .pf-content-middle #trace-container .training-trace {
+  position: relative;
+  height: 0;
+}
+.step-trace .pf-content-middle #trace-container .training-trace .content {
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 40px;
+}
+.step-trace .pf-content-middle #trace-container .training-trace .content-mini {
+  overflow: visible;
+}
+.step-trace .pf-content-middle .chart-wrap {
+  float: left;
+  height: calc(50% - 20px);
+  margin-top: 20px;
+  margin-right: 15px;
+  width: calc(33.3% - 10px);
+  border: 1px solid #ccc;
+  padding: 30px 30px 0;
+  border-radius: 4px;
+  overflow: auto;
+}
+.step-trace .pf-content-middle .chart-wrap:last-child {
+  margin-right: 0;
+}
+.step-trace .pf-content-middle .chart-wrap .chart {
+  height: calc(100% - 85px);
+  min-height: 180px;
+  min-width: 250px;
+  overflow: hidden;
+}
+.step-trace .pf-content-middle .chart-wrap .title {
+  margin: 0 0 15px 20px;
+  font-weight: bold;
+}
+.step-trace .pf-content-middle .chart-wrap .rate-wrap {
+  font-size: 12px;
+  padding-left: 20px;
+}
+.step-trace .pf-content-middle .chart-wrap .rate-wrap > div {
+  display: inline-block;
+  margin: 0 15px 5px 0;
+  color: #464950;
+}
+.step-trace .pf-content-middle .chart-wrap .rate-wrap > div span {
+  margin-right: 10px;
+  color: #6c7280;
+}
+.step-trace .pf-content-middle .chart-wrap.chart-show {
+  width: calc(50% - 7.5px);
+}
+.step-trace .image-noData {
+  width: 100%;
+  height: calc(100% - 52px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.step-trace .image-noData p {
+  font-size: 16px;
+  padding-top: 10px;
+}
+.step-trace .image-noData.svg {
+  height: 100%;
+}
+.step-trace .el-icon-info {
+  font-size: 18px;
+  color: #6c7280;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/compare-plate.vue b/mindinsight/ui/src/views/train-manage/compare-plate.vue
index 74e7b3c6..5df26ed9 100644
--- a/mindinsight/ui/src/views/train-manage/compare-plate.vue
+++ b/mindinsight/ui/src/views/train-manage/compare-plate.vue
@@ -1739,190 +1739,173 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-compare-manage {
   height: 100%;
-
-  .w60 {
-    width: 60px;
-    margin-left: 20px;
-  }
-
-  .borderspacing3 {
-    border-spacing: 3px;
-  }
-  .compare-bk {
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-
-    .cl-compare-title {
-      height: 56px;
-      line-height: 56px;
-    }
-  }
-
-  .select-all {
-    flex-shrink: 0;
-    cursor: pointer;
-  }
-  .cl-eval-operate-content {
-    width: 100%;
-    padding: 0px 32px 22px 32px;
-    background: #ffffff;
-
-    .cl-eval-operate-component {
-      margin-top: 8px;
-    }
-  }
-  .cl-eval-slider-operate-content {
-    background: #ffffff;
-    padding: 0 32px 21px 32px;
-    display: flex;
-    align-items: center;
-    border-bottom: 2px solid #e6ebf5;
-
-    .xaxis-title {
-      font-size: 14px;
-      line-height: 14px;
-      vertical-align: middle;
-      margin-right: 16px;
-      flex-shrink: 0;
-    }
-
-    .el-radio-group {
-      margin-right: 64px;
-      flex-shrink: 0;
-    }
-
-    .el-select {
-      width: 163px;
-      margin-right: 16px;
-      flex-shrink: 0;
-    }
-    .el-slider {
-      width: 400px;
-      flex-shrink: 0;
-
-      .el-input.el-input--small {
-        width: 60px;
-      }
-
-      .el-input-number .el-input__inner {
-        padding-left: 0px;
-        padding-right: 0px;
-      }
-
-      .el-input-number--small .el-input-number__increase {
-        display: none;
-      }
-      .el-input-number--small .el-input-number__decrease {
-        display: none;
-      }
-    }
-  }
-  .cl-eval-show-data-content {
-    background: #fff;
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-wrap: wrap;
-    padding-right: 10px;
-
-    .data-content {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-wrap: wrap;
-      min-height: 400px;
-
-      .sample-content {
-        width: 33.3%;
-        height: 400px;
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        background-color: #fff;
-      }
-
-      .char-full-screen {
-        width: 100%;
-        height: 400px;
-      }
-    }
-
-    .chars-container {
-      flex: 1;
-      padding: 0 15px 0 15px;
-      position: relative;
-    }
-    .tag-name {
-      color: #333;
-      font-size: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-weight: 600;
-      text-align: center;
-
-      i {
-        color: #e6a23c;
-      }
-    }
-    .char-item-content {
-      width: 100%;
-      height: 100%;
-    }
-
-    .char-tip-table {
-      td {
-        padding-left: 5px;
-        padding-right: 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 150px;
-        overflow: hidden;
-      }
-    }
-    .image-noData {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-    .noData-text {
-      margin-top: 33px;
-      font-size: 18px;
-    }
-  }
-
-  .pagination-content {
-    text-align: right;
-    padding: 24px 32px;
-  }
-
-  .mr24 {
-    margin-right: 24px;
-  }
-  .select-disable {
-    -moz-user-select: none; /*Firefox*/
-    -webkit-user-select: none; /*Webkit*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none;
-    user-select: none;
-  }
-  .cl-close-btn {
-    width: 20px;
-    height: 20px;
-    vertical-align: -3px;
-    cursor: pointer;
-    display: inline-block;
-    line-height: 20px;
-    margin-left: 32px;
-  }
 }
+.cl-compare-manage .w60 {
+  width: 60px;
+  margin-left: 20px;
+}
+.cl-compare-manage .borderspacing3 {
+  border-spacing: 3px;
+}
+.cl-compare-manage .compare-bk {
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.cl-compare-manage .compare-bk .cl-compare-title {
+  height: 56px;
+  line-height: 56px;
+}
+.cl-compare-manage .select-all {
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.cl-compare-manage .cl-eval-operate-content {
+  width: 100%;
+  padding: 0px 32px 22px 32px;
+  background: #ffffff;
+}
+.cl-compare-manage .cl-eval-operate-content .cl-eval-operate-component {
+  margin-top: 8px;
+}
+.cl-compare-manage .cl-eval-slider-operate-content {
+  background: #ffffff;
+  padding: 0 32px 21px 32px;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #e6ebf5;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .xaxis-title {
+  font-size: 14px;
+  line-height: 14px;
+  vertical-align: middle;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .el-radio-group {
+  margin-right: 64px;
+  flex-shrink: 0;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .el-select {
+  width: 163px;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .el-slider {
+  width: 400px;
+  flex-shrink: 0;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .el-slider .el-input.el-input--small {
+  width: 60px;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .el-slider .el-input-number .el-input__inner {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .el-slider .el-input-number--small .el-input-number__increase {
+  display: none;
+}
+.cl-compare-manage .cl-eval-slider-operate-content .el-slider .el-input-number--small .el-input-number__decrease {
+  display: none;
+}
+.cl-compare-manage .cl-eval-show-data-content {
+  background: #fff;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  padding-right: 10px;
+}
+.cl-compare-manage .cl-eval-show-data-content .data-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-wrap: wrap;
+  min-height: 400px;
+}
+.cl-compare-manage .cl-eval-show-data-content .data-content .sample-content {
+  width: 33.3%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background-color: #fff;
+}
+.cl-compare-manage .cl-eval-show-data-content .data-content .char-full-screen {
+  width: 100%;
+  height: 400px;
+}
+.cl-compare-manage .cl-eval-show-data-content .chars-container {
+  flex: 1;
+  padding: 0 15px 0 15px;
+  position: relative;
+}
+.cl-compare-manage .cl-eval-show-data-content .tag-name {
+  color: #333;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  text-align: center;
+}
+.cl-compare-manage .cl-eval-show-data-content .tag-name i {
+  color: #e6a23c;
+}
+.cl-compare-manage .cl-eval-show-data-content .char-item-content {
+  width: 100%;
+  height: 100%;
+}
+.cl-compare-manage .cl-eval-show-data-content .char-tip-table td {
+  padding-left: 5px;
+  padding-right: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 150px;
+  overflow: hidden;
+}
+.cl-compare-manage .cl-eval-show-data-content .image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-compare-manage .cl-eval-show-data-content .noData-text {
+  margin-top: 33px;
+  font-size: 18px;
+}
+.cl-compare-manage .pagination-content {
+  text-align: right;
+  padding: 24px 32px;
+}
+.cl-compare-manage .mr24 {
+  margin-right: 24px;
+}
+.cl-compare-manage .select-disable {
+  -moz-user-select: none;
+  /*Firefox*/
+  -webkit-user-select: none;
+  /*Webkit*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  user-select: none;
+}
+.cl-compare-manage .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 20px;
+  margin-left: 32px;
+}
+
 .tooltip-show-content {
   max-width: 50%;
 }
diff --git a/mindinsight/ui/src/views/train-manage/data-map.vue b/mindinsight/ui/src/views/train-manage/data-map.vue
index c661bf0f..f7bab804 100644
--- a/mindinsight/ui/src/views/train-manage/data-map.vue
+++ b/mindinsight/ui/src/views/train-manage/data-map.vue
@@ -632,300 +632,288 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-data-map-manage {
   height: 100%;
-  .cl-data-map-title {
-    height: 56px;
-    line-height: 56px;
-    .path-message {
-      display: inline-block;
-      line-height: 20px;
-      padding: 0px 4px 15px 4px;
-      font-weight: bold;
-      vertical-align: bottom;
-    }
-  }
-  .data-map-p32 {
-    height: 100%;
-  }
-  .cl-content {
-    height: calc(100% - 50px);
-    overflow: auto;
-  }
-  #data-maps {
-    width: 100%;
-    height: 100%;
-    font-size: 0;
-    background: #f0f2f5;
-    .cl-data-map {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      background-color: #fff;
-      padding: 0 32px 24px;
-      min-height: 700px;
-      overflow: hidden;
-      .data-map-container {
-        height: 100%;
-        width: calc(100% - 442px);
-        position: relative;
-        #graph {
-          height: 100%;
-          width: 100%;
-          padding: 16px;
-          background-color: #f7faff;
-          #graph0 > polygon {
-            fill: transparent;
-          }
-          .node,
-          .cluster {
-            cursor: pointer;
-          }
-          .selected {
-            polygon,
-            ellipse {
-              stroke: red !important;
-              stroke-width: 2px;
-            }
-          }
-          .CreatDataset > polygon,
-          .Operator > ellipse {
-            stroke: #4ea6e6;
-            fill: #b8e0ff;
-          }
-          .cluster > polygon {
-            fill: #8df1f2;
-            stroke: #00a5a7;
-          }
-          .RepeatDataset > polygon {
-            stroke: #fdca5a;
-            fill: #fff2d4;
-          }
-          .ShuffleDataset > polygon {
-            stroke: #e37d29;
-            fill: #ffd0a6;
-          }
-          .BatchDataset > polygon {
-            stroke: #de504e;
-            fill: #ffbcba;
-          }
-          .edge {
-            path {
-              stroke: rgb(167, 167, 167);
-            }
-            polygon {
-              fill: rgb(167, 167, 167);
-              stroke: rgb(167, 167, 167);
-            }
-          }
-        }
-        .full-screen-button {
-          position: absolute;
-          right: 10px;
-          top: 10px;
-          cursor: pointer;
-          width: 12px;
-          height: 12px;
-          z-index: 999;
-          display: inline-block;
-          background-image: url('../../assets/images/full-screen.png');
-        }
-        .fit-screen {
-          position: absolute;
-          width: 16px;
-          height: 14px;
-          right: 32px;
-          top: 10px;
-          z-index: 999;
-          cursor: pointer;
-          display: inline-block;
-          background-image: url('../../assets/images/fit.png');
-        }
-        .download-button {
-          position: absolute;
-          width: 16px;
-          height: 14px;
-          right: 54px;
-          top: 10px;
-          z-index: 999;
-          cursor: pointer;
-          display: inline-block;
-          background-image: url('../../assets/images/download.png');
-          background-size: 14px 14px;
-          background-repeat: no-repeat;
-        }
-      }
-    }
-    .cl-data-map.full-screen {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: auto;
-      height: auto;
-      padding: 0;
-      .data-map-container {
-        width: 100%;
-      }
-      #sidebar {
-        .node-info-con {
-          height: calc(100% - 280px);
-        }
-      }
-    }
-    #sidebar.right-hide {
-      right: -442px;
-    }
-    #sidebar {
-      position: absolute;
-      right: 0;
-      top: 0;
-      width: 442px;
-      height: 100%;
-      border-radius: 6px;
-      text-align: left;
-      background-color: #ffffff;
-      display: inline-block;
-      box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
-      color: #333333;
-      font-size: 14px;
-      line-height: 14px;
-      padding: 24px 32px;
-      div,
-      span,
-      pre {
-        font-size: 14px;
-      }
-      .title {
-        padding: 24px 0;
-        font-size: 14px;
-        color: #333333;
-        img {
-          float: right;
-          margin-right: 10px;
-          cursor: pointer;
-        }
-      }
-      .node-info-container {
-        height: calc(100% - 156px);
-      }
-      .node-info-container-long {
-        height: calc(100% - 62px);
-      }
-      .node-info {
-        .title {
-          padding: 0 0 24px;
-          font-size: 14px;
-          color: #333;
-        }
-        .node-info-list {
-          height: calc(100% - 62px);
-          overflow-y: auto;
-        }
-        .item {
-          line-height: 20px;
-          padding: 5px 0 5px 20px;
-          background-color: #f2f2f2;
-          .label {
-            vertical-align: top;
-            width: 30%;
-            word-break: break-all;
-            display: inline-block;
-          }
-          .value {
-            padding: 0 10px;
-            vertical-align: top;
-            display: inline-block;
-            width: 70%;
-            word-break: break-all;
-          }
-        }
-      }
-      .legend {
-        .legend-content {
-          background-color: #f7faff;
-          padding: 0 32px;
-          height: 94px;
-          overflow-y: auto;
-        }
-        .legend-item {
-          padding: 5px 0;
-          display: inline-block;
-          width: 50%;
-          font-size: 14px;
-          line-height: 20px;
-          .pic {
-            width: 45px;
-            text-align: center;
-            img {
-              width: 45px;
-              height: 15px;
-              margin-left: -20px;
-              vertical-align: middle;
-            }
-          }
-          div {
-            display: inline-block;
-            padding-left: 20px;
-            vertical-align: middle;
-          }
-        }
-      }
-      .toggle-right {
-        position: absolute;
-        top: calc(50% - 43px);
-        left: -16px;
-        width: 18px;
-        height: 86px;
-        cursor: pointer;
-        background-image: url('../../assets/images/toggle-right-bg.png');
-      }
-      .icon-toggle {
-        width: 6px;
-        height: 9px;
-        background-image: url('../../assets/images/toggle-right-icon.png');
-        position: absolute;
-        top: calc(50% - 4.5px);
-        left: calc(50% - 3px);
-      }
-      .icon-toggle.icon-left {
-        transform: rotateY(180deg);
-      }
-    }
-    .data-map-container.all {
-      width: 100%;
-    }
-    // No data available.
-    .image-noData {
-      // Set the width and white on the right.
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      z-index: 200;
-    }
-    .noData-text {
-      margin-top: 33px;
-      font-size: 18px;
-    }
-  }
-  .cl-close-btn {
-    width: 20px;
-    height: 20px;
-    vertical-align: -3px;
-    cursor: pointer;
-    display: inline-block;
-  }
-  .cl-title-right {
-    padding-right: 32px;
-  }
+}
+.cl-data-map-manage .cl-data-map-title {
+  height: 56px;
+  line-height: 56px;
+}
+.cl-data-map-manage .cl-data-map-title .path-message {
+  display: inline-block;
+  line-height: 20px;
+  padding: 0px 4px 15px 4px;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+.cl-data-map-manage .data-map-p32 {
+  height: 100%;
+}
+.cl-data-map-manage .cl-content {
+  height: calc(100% - 50px);
+  overflow: auto;
+}
+.cl-data-map-manage #data-maps {
+  width: 100%;
+  height: 100%;
+  font-size: 0;
+  background: #f0f2f5;
+}
+.cl-data-map-manage #data-maps .cl-data-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 0 32px 24px;
+  min-height: 700px;
+  overflow: hidden;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container {
+  height: 100%;
+  width: calc(100% - 442px);
+  position: relative;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph {
+  height: 100%;
+  width: 100%;
+  padding: 16px;
+  background-color: #f7faff;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph #graph0 > polygon {
+  fill: transparent;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .node,
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .cluster {
+  cursor: pointer;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .selected polygon,
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .selected ellipse {
+  stroke: red !important;
+  stroke-width: 2px;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .CreatDataset > polygon,
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .Operator > ellipse {
+  stroke: #4ea6e6;
+  fill: #b8e0ff;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .cluster > polygon {
+  fill: #8df1f2;
+  stroke: #00a5a7;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .RepeatDataset > polygon {
+  stroke: #fdca5a;
+  fill: #fff2d4;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .ShuffleDataset > polygon {
+  stroke: #e37d29;
+  fill: #ffd0a6;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .BatchDataset > polygon {
+  stroke: #de504e;
+  fill: #ffbcba;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .edge path {
+  stroke: #a7a7a7;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container #graph .edge polygon {
+  fill: #a7a7a7;
+  stroke: #a7a7a7;
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container .full-screen-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  z-index: 999;
+  display: inline-block;
+  background-image: url("../../assets/images/full-screen.png");
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container .fit-screen {
+  position: absolute;
+  width: 16px;
+  height: 14px;
+  right: 32px;
+  top: 10px;
+  z-index: 999;
+  cursor: pointer;
+  display: inline-block;
+  background-image: url("../../assets/images/fit.png");
+}
+.cl-data-map-manage #data-maps .cl-data-map .data-map-container .download-button {
+  position: absolute;
+  width: 16px;
+  height: 14px;
+  right: 54px;
+  top: 10px;
+  z-index: 999;
+  cursor: pointer;
+  display: inline-block;
+  background-image: url("../../assets/images/download.png");
+  background-size: 14px 14px;
+  background-repeat: no-repeat;
+}
+.cl-data-map-manage #data-maps .cl-data-map.full-screen {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+  height: auto;
+  padding: 0;
+}
+.cl-data-map-manage #data-maps .cl-data-map.full-screen .data-map-container {
+  width: 100%;
+}
+.cl-data-map-manage #data-maps .cl-data-map.full-screen #sidebar .node-info-con {
+  height: calc(100% - 280px);
+}
+.cl-data-map-manage #data-maps #sidebar.right-hide {
+  right: -442px;
+}
+.cl-data-map-manage #data-maps #sidebar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 442px;
+  height: 100%;
+  border-radius: 6px;
+  text-align: left;
+  background-color: #ffffff;
+  display: inline-block;
+  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
+  color: #333333;
+  font-size: 14px;
+  line-height: 14px;
+  padding: 24px 32px;
+}
+.cl-data-map-manage #data-maps #sidebar div,
+.cl-data-map-manage #data-maps #sidebar span,
+.cl-data-map-manage #data-maps #sidebar pre {
+  font-size: 14px;
+}
+.cl-data-map-manage #data-maps #sidebar .title {
+  padding: 24px 0;
+  font-size: 14px;
+  color: #333333;
+}
+.cl-data-map-manage #data-maps #sidebar .title img {
+  float: right;
+  margin-right: 10px;
+  cursor: pointer;
+}
+.cl-data-map-manage #data-maps #sidebar .node-info-container {
+  height: calc(100% - 156px);
+}
+.cl-data-map-manage #data-maps #sidebar .node-info-container-long {
+  height: calc(100% - 62px);
+}
+.cl-data-map-manage #data-maps #sidebar .node-info .title {
+  padding: 0 0 24px;
+  font-size: 14px;
+  color: #333;
+}
+.cl-data-map-manage #data-maps #sidebar .node-info .node-info-list {
+  height: calc(100% - 62px);
+  overflow-y: auto;
+}
+.cl-data-map-manage #data-maps #sidebar .node-info .item {
+  line-height: 20px;
+  padding: 5px 0 5px 20px;
+  background-color: #f2f2f2;
+}
+.cl-data-map-manage #data-maps #sidebar .node-info .item .label {
+  vertical-align: top;
+  width: 30%;
+  word-break: break-all;
+  display: inline-block;
+}
+.cl-data-map-manage #data-maps #sidebar .node-info .item .value {
+  padding: 0 10px;
+  vertical-align: top;
+  display: inline-block;
+  width: 70%;
+  word-break: break-all;
+}
+.cl-data-map-manage #data-maps #sidebar .legend .legend-content {
+  background-color: #f7faff;
+  padding: 0 32px;
+  height: 94px;
+  overflow-y: auto;
+}
+.cl-data-map-manage #data-maps #sidebar .legend .legend-item {
+  padding: 5px 0;
+  display: inline-block;
+  width: 50%;
+  font-size: 14px;
+  line-height: 20px;
+}
+.cl-data-map-manage #data-maps #sidebar .legend .legend-item .pic {
+  width: 45px;
+  text-align: center;
+}
+.cl-data-map-manage #data-maps #sidebar .legend .legend-item .pic img {
+  width: 45px;
+  height: 15px;
+  margin-left: -20px;
+  vertical-align: middle;
+}
+.cl-data-map-manage #data-maps #sidebar .legend .legend-item div {
+  display: inline-block;
+  padding-left: 20px;
+  vertical-align: middle;
+}
+.cl-data-map-manage #data-maps #sidebar .toggle-right {
+  position: absolute;
+  top: calc(50% - 43px);
+  left: -16px;
+  width: 18px;
+  height: 86px;
+  cursor: pointer;
+  background-image: url("../../assets/images/toggle-right-bg.png");
+}
+.cl-data-map-manage #data-maps #sidebar .icon-toggle {
+  width: 6px;
+  height: 9px;
+  background-image: url("../../assets/images/toggle-right-icon.png");
+  position: absolute;
+  top: calc(50% - 4.5px);
+  left: calc(50% - 3px);
+}
+.cl-data-map-manage #data-maps #sidebar .icon-toggle.icon-left {
+  transform: rotateY(180deg);
+}
+.cl-data-map-manage #data-maps .data-map-container.all {
+  width: 100%;
+}
+.cl-data-map-manage #data-maps .image-noData {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 200;
+}
+.cl-data-map-manage #data-maps .noData-text {
+  margin-top: 33px;
+  font-size: 18px;
+}
+.cl-data-map-manage .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+}
+.cl-data-map-manage .cl-title-right {
+  padding-right: 32px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/data-traceback.vue b/mindinsight/ui/src/views/train-manage/data-traceback.vue
index 47348cca..2625438b 100644
--- a/mindinsight/ui/src/views/train-manage/data-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/data-traceback.vue
@@ -2083,17 +2083,19 @@ export default {
   components: {},
 };
 </script>
-<style lang="scss">
+<style>
 .cl-data-traceback {
   height: 100%;
   background-color: #fff;
 }
+
 .traceback-tab {
   height: 51px;
   line-height: 56px;
   padding: 0 24px;
-  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+
 .traceback-tab-item {
   padding: 0 10px;
   height: 48px;
@@ -2106,20 +2108,24 @@ export default {
   color: #303133;
   position: relative;
 }
+
 .item-active {
   color: #00a5a7;
   font-weight: bold;
-  border-bottom: 3px solid rgba($color: #00a5a7, $alpha: 1);
+  border-bottom: 3px solid #00a5a7;
 }
+
 .traceback-tab-item:hover {
   color: #00a5a7;
   cursor: pointer;
 }
+
 .label-text {
   line-height: 20px !important;
   padding-top: 20px;
   display: block !important;
 }
+
 .remark-tip {
   line-height: 20px !important;
   font-size: 12px;
@@ -2127,32 +2133,40 @@ export default {
   color: gray;
   display: block !important;
 }
+
 .el-color-dropdown__main-wrapper,
 .el-color-dropdown__value,
 .el-color-alpha-slider {
   display: none;
 }
+
 .select-inner-input {
   width: calc(100% - 140px);
   margin: 2px 4px;
   display: inline-block;
 }
+
 .select-input-button {
   position: relative;
 }
+
 .el-select-group__title {
   font-size: 14px;
   font-weight: 700;
 }
+
 .el-select-dropdown__item.selected {
   font-weight: 400;
 }
+
 .checked-color {
   color: #00a5a7 !important;
 }
+
 .el-tag.el-tag--info .el-tag__close {
   display: none;
 }
+
 .select-all-button {
   padding: 4px 0;
   display: inline-block;
@@ -2163,6 +2177,7 @@ export default {
   border: none;
   background: none;
 }
+
 .deselect-all-button {
   padding: 4px 0;
   display: inline-block;
@@ -2173,9 +2188,11 @@ export default {
   border: none;
   background: none;
 }
+
 .empty-container {
   padding-top: 6px;
 }
+
 .search-no-data {
   padding: 10px 0;
   margin: 0;
@@ -2183,299 +2200,287 @@ export default {
   color: #999;
   font-size: 14px;
 }
+
 .btn-disabled {
   cursor: not-allowed !important;
 }
+
 #data-traceback-con {
   display: flex;
   height: calc(100% - 51px);
   overflow-y: auto;
   position: relative;
   background: #fff;
-  .select-container {
-    .el-select > .el-input {
-      width: 280px !important;
-      max-width: 500px !important;
-    }
-  }
-  .el-table th.is-leaf {
-    background: #f5f7fa;
-  }
-  .el-table td,
-  .el-table th.is-leaf {
-    border: 1px solid #ebeef5;
-  }
-  .inline-block-set {
-    display: inline-block;
-  }
-  .icon-border {
-    border: 1px solid #00a5a7 !important;
-  }
-  .btn-container-margin {
-    margin: 0 10%;
-  }
-  .tag-button-container {
-    display: inline-block;
-    width: 33.3%;
-    text-align: center;
-  }
-  .custom-btn {
-    border: 1px solid #00a5a7;
-    border-radius: 2px;
-    background-color: white;
-    color: #00a5a7;
-  }
-  .custom-btn:hover {
-    color: #00a5a7;
-    background: #e9f7f7;
-  }
-  .disabled-btn-color {
-    border-radius: 2px;
-    background-color: #f5f5f6;
-    border: 1px solid #dfe1e6;
-    color: #adb0b8;
-  }
-  .abled-btn-color {
-    border: 1px solid #00a5a7;
-    color: #00a5a7;
-    background: white;
-  }
-  .abled-btn-color:hover {
-    color: #00a5a7;
-    background: #e9f7f7;
-  }
-  #tag-dialog {
-    z-index: 999;
-    border: 1px solid #d6c9c9;
-    position: fixed;
-    width: 326px;
-    height: 120px;
-    background-color: #efebeb;
-    right: 106px;
-    border-radius: 4px;
-  }
-  .icon-image {
-    display: inline-block;
-    padding: 4px;
-    height: 30px;
-    width: 30px;
-    border: 1px solid transparent;
-  }
-  .icon-image-container {
-    margin: 16px 10px 18px;
-  }
-  .tag-icon-container {
-    width: 21px;
-    height: 21px;
-    border: 1px solid #e6e6e6;
-    cursor: pointer;
-    border-radius: 2px;
-  }
-  .no-data-page {
-    display: flex;
-    width: 100%;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    .set-height-class {
-      height: 282px !important;
-    }
-    .no-data-img {
-      background: #fff;
-      text-align: center;
-      height: 200px;
-      width: 310px;
-      margin: auto;
-      img {
-        max-width: 100%;
-      }
-    }
-    .no-data-text {
-      font-size: 16px;
-      padding-top: 15px;
-    }
-  }
-  .edit-text-container {
-    display: inline-block;
-    max-width: 190px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: bottom;
-  }
-  .btns-container {
-    padding: 6px 32px 4px;
-  }
-  .table-container .el-icon-edit {
-    margin-left: 5px;
-  }
-  .table-container i {
-    font-size: 18px;
-    margin: 0 2px;
-    color: #00a5a7;
-    cursor: pointer;
-  }
-  .table-container .el-icon-close {
-    color: #f56c6c;
-  }
-  .table-container .validation-error {
-    color: #ff0000;
-  }
-  .display-column {
-    display: inline-block;
-    padding-right: 6px;
-  }
-  .remark-input-style {
-    width: 190px;
-  }
-  .cl-data-right {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    background-color: #fff;
-    -webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
-    box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
-    overflow: hidden;
-
-    .data-checkbox-area {
-      margin: 0px 32px 6px;
-      height: 46px;
-      display: flex;
-      justify-content: flex-end;
-      .select-container {
-        padding-top: 10px;
-        height: 46px;
-        flex-grow: 1;
-      }
-    }
-    #data-echart {
-      height: 31%;
-      width: 100%;
-      padding: 0 12px;
-    }
-    .table-container {
-      background-color: white;
-      height: calc(67% - 77px);
-      padding: 6px 32px 0px;
-      position: relative;
-      .disabled-checked {
-        position: absolute;
-        top: 9px;
-        left: 0px;
-        z-index: 1000;
-        width: 87px;
-        height: 66px;
-        cursor: not-allowed;
-      }
-      .custom-label {
-        max-width: calc(100% - 25px);
-        padding: 0;
-        vertical-align: middle;
-      }
-      .el-icon-warning {
-        font-size: 16px;
-      }
-      .icon-container {
-        padding-right: 5px;
-        width: 20px;
-      }
-      .href-color {
-        cursor: pointer;
-        color: #3399ff;
-      }
-      .click-span {
-        cursor: pointer;
-      }
-      .el-pagination {
-        float: right;
-        margin-right: 32px;
-        bottom: 10px;
-      }
-      .pagination-container {
-        height: 40px;
-      }
-    }
-  }
-  .el-dialog {
-    min-width: 500px;
-    padding-bottom: 30px;
-  }
-  .details-data-list {
-    .el-table td,
-    .el-table th.is-leaf {
-      border: none;
-      border-top: 1px solid #ebeef5;
-    }
-    .el-table {
-      th {
-        padding: 10px 0;
-        border-top: 1px solid #ebeef5;
-        .cell {
-          border-left: 1px solid #d9d8dd;
-          height: 14px;
-          line-height: 14px;
-        }
-      }
-      th:first-child {
-        .cell {
-          border-left: none;
-        }
-      }
-      th:nth-child(2),
-      td:nth-child(2) {
-        max-width: 30%;
-      }
-      td {
-        padding: 8px 0;
-      }
-    }
-    .el-table__row--level-0 td:first-child:after {
-      width: 20px;
-      height: 1px;
-      background: #ebeef5;
-      z-index: 11;
-      position: absolute;
-      left: 0;
-      bottom: -1px;
-      content: '';
-      display: block;
-    }
-    .el-table__row--level-1 {
-      td {
-        padding: 4px 0;
-        position: relative;
-      }
-      td:first-child::before {
-        width: 42px;
-        background: #f0fdfd;
-        border-right: 2px #00a5a7 solid;
-        z-index: 10;
-        position: absolute;
-        left: 0;
-        top: -1px;
-        bottom: 0px;
-        content: '';
-        display: block;
-      }
-    }
-
-    .el-table__row--level-1:first-child {
-      td:first-child::before {
-        bottom: 0;
-      }
-    }
-    .el-dialog__title {
-      font-weight: bold;
-    }
-    .el-dialog__body {
-      max-height: 500px;
-      padding-top: 10px;
-      padding-bottom: 0px;
-      overflow: auto;
-      .details-data-title {
-        margin-bottom: 20px;
-      }
-    }
-  }
+}
+#data-traceback-con .select-container .el-select > .el-input {
+  width: 280px !important;
+  max-width: 500px !important;
+}
+#data-traceback-con .el-table th.is-leaf {
+  background: #f5f7fa;
+}
+#data-traceback-con .el-table td,
+#data-traceback-con .el-table th.is-leaf {
+  border: 1px solid #ebeef5;
+}
+#data-traceback-con .inline-block-set {
+  display: inline-block;
+}
+#data-traceback-con .icon-border {
+  border: 1px solid #00a5a7 !important;
+}
+#data-traceback-con .btn-container-margin {
+  margin: 0 10%;
+}
+#data-traceback-con .tag-button-container {
+  display: inline-block;
+  width: 33.3%;
+  text-align: center;
+}
+#data-traceback-con .custom-btn {
+  border: 1px solid #00a5a7;
+  border-radius: 2px;
+  background-color: white;
+  color: #00a5a7;
+}
+#data-traceback-con .custom-btn:hover {
+  color: #00a5a7;
+  background: #e9f7f7;
+}
+#data-traceback-con .disabled-btn-color {
+  border-radius: 2px;
+  background-color: #f5f5f6;
+  border: 1px solid #dfe1e6;
+  color: #adb0b8;
+}
+#data-traceback-con .abled-btn-color {
+  border: 1px solid #00a5a7;
+  color: #00a5a7;
+  background: white;
+}
+#data-traceback-con .abled-btn-color:hover {
+  color: #00a5a7;
+  background: #e9f7f7;
+}
+#data-traceback-con #tag-dialog {
+  z-index: 999;
+  border: 1px solid #d6c9c9;
+  position: fixed;
+  width: 326px;
+  height: 120px;
+  background-color: #efebeb;
+  right: 106px;
+  border-radius: 4px;
+}
+#data-traceback-con .icon-image {
+  display: inline-block;
+  padding: 4px;
+  height: 30px;
+  width: 30px;
+  border: 1px solid transparent;
+}
+#data-traceback-con .icon-image-container {
+  margin: 16px 10px 18px;
+}
+#data-traceback-con .tag-icon-container {
+  width: 21px;
+  height: 21px;
+  border: 1px solid #e6e6e6;
+  cursor: pointer;
+  border-radius: 2px;
+}
+#data-traceback-con .no-data-page {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+#data-traceback-con .no-data-page .set-height-class {
+  height: 282px !important;
+}
+#data-traceback-con .no-data-page .no-data-img {
+  background: #fff;
+  text-align: center;
+  height: 200px;
+  width: 310px;
+  margin: auto;
+}
+#data-traceback-con .no-data-page .no-data-img img {
+  max-width: 100%;
+}
+#data-traceback-con .no-data-page .no-data-text {
+  font-size: 16px;
+  padding-top: 15px;
+}
+#data-traceback-con .edit-text-container {
+  display: inline-block;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+#data-traceback-con .btns-container {
+  padding: 6px 32px 4px;
+}
+#data-traceback-con .table-container .el-icon-edit {
+  margin-left: 5px;
+}
+#data-traceback-con .table-container i {
+  font-size: 18px;
+  margin: 0 2px;
+  color: #00a5a7;
+  cursor: pointer;
+}
+#data-traceback-con .table-container .el-icon-close {
+  color: #f56c6c;
+}
+#data-traceback-con .table-container .validation-error {
+  color: #ff0000;
+}
+#data-traceback-con .display-column {
+  display: inline-block;
+  padding-right: 6px;
+}
+#data-traceback-con .remark-input-style {
+  width: 190px;
+}
+#data-traceback-con .cl-data-right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: #fff;
+  -webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
+  box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
+  overflow: hidden;
+}
+#data-traceback-con .cl-data-right .data-checkbox-area {
+  margin: 0px 32px 6px;
+  height: 46px;
+  display: flex;
+  justify-content: flex-end;
+}
+#data-traceback-con .cl-data-right .data-checkbox-area .select-container {
+  padding-top: 10px;
+  height: 46px;
+  flex-grow: 1;
+}
+#data-traceback-con .cl-data-right #data-echart {
+  height: 31%;
+  width: 100%;
+  padding: 0 12px;
+}
+#data-traceback-con .cl-data-right .table-container {
+  background-color: white;
+  height: calc(67% - 77px);
+  padding: 6px 32px 0px;
+  position: relative;
+}
+#data-traceback-con .cl-data-right .table-container .disabled-checked {
+  position: absolute;
+  top: 9px;
+  left: 0px;
+  z-index: 1000;
+  width: 87px;
+  height: 66px;
+  cursor: not-allowed;
+}
+#data-traceback-con .cl-data-right .table-container .custom-label {
+  max-width: calc(100% - 25px);
+  padding: 0;
+  vertical-align: middle;
+}
+#data-traceback-con .cl-data-right .table-container .el-icon-warning {
+  font-size: 16px;
+}
+#data-traceback-con .cl-data-right .table-container .icon-container {
+  padding-right: 5px;
+  width: 20px;
+}
+#data-traceback-con .cl-data-right .table-container .href-color {
+  cursor: pointer;
+  color: #3399ff;
+}
+#data-traceback-con .cl-data-right .table-container .click-span {
+  cursor: pointer;
+}
+#data-traceback-con .cl-data-right .table-container .el-pagination {
+  float: right;
+  margin-right: 32px;
+  bottom: 10px;
+}
+#data-traceback-con .cl-data-right .table-container .pagination-container {
+  height: 40px;
+}
+#data-traceback-con .el-dialog {
+  min-width: 500px;
+  padding-bottom: 30px;
+}
+#data-traceback-con .details-data-list .el-table td,
+#data-traceback-con .details-data-list .el-table th.is-leaf {
+  border: none;
+  border-top: 1px solid #ebeef5;
+}
+#data-traceback-con .details-data-list .el-table th {
+  padding: 10px 0;
+  border-top: 1px solid #ebeef5;
+}
+#data-traceback-con .details-data-list .el-table th .cell {
+  border-left: 1px solid #d9d8dd;
+  height: 14px;
+  line-height: 14px;
+}
+#data-traceback-con .details-data-list .el-table th:first-child .cell {
+  border-left: none;
+}
+#data-traceback-con .details-data-list .el-table th:nth-child(2),
+#data-traceback-con .details-data-list .el-table td:nth-child(2) {
+  max-width: 30%;
+}
+#data-traceback-con .details-data-list .el-table td {
+  padding: 8px 0;
+}
+#data-traceback-con .details-data-list .el-table__row--level-0 td:first-child:after {
+  width: 20px;
+  height: 1px;
+  background: #ebeef5;
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  content: "";
+  display: block;
+}
+#data-traceback-con .details-data-list .el-table__row--level-1 td {
+  padding: 4px 0;
+  position: relative;
+}
+#data-traceback-con .details-data-list .el-table__row--level-1 td:first-child::before {
+  width: 42px;
+  background: #f0fdfd;
+  border-right: 2px #00a5a7 solid;
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  bottom: 0px;
+  content: "";
+  display: block;
+}
+#data-traceback-con .details-data-list .el-table__row--level-1:first-child td:first-child::before {
+  bottom: 0;
+}
+#data-traceback-con .details-data-list .el-dialog__title {
+  font-weight: bold;
+}
+#data-traceback-con .details-data-list .el-dialog__body {
+  max-height: 500px;
+  padding-top: 10px;
+  padding-bottom: 0px;
+  overflow: auto;
+}
+#data-traceback-con .details-data-list .el-dialog__body .details-data-title {
+  margin-bottom: 20px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue
index edde30ef..f6c24322 100644
--- a/mindinsight/ui/src/views/train-manage/graph.vue
+++ b/mindinsight/ui/src/views/train-manage/graph.vue
@@ -1723,624 +1723,612 @@ export default {
   components: {},
 };
 </script>
-<style lang="scss">
-.tooltip-container {
-  .cl-graph-sidebar-tip {
-    word-break: normal;
-  }
+<style>
+.tooltip-container .cl-graph-sidebar-tip {
+  word-break: normal;
 }
+
 .cl-graph-manage {
   height: 100%;
-  .cl-graph-title {
-    height: 50px;
-    line-height: 50px;
-    .path-message {
-      display: inline-block;
-      line-height: 20px;
-      padding: 0px 4px 15px 4px;
-      font-weight: bold;
-      vertical-align: bottom;
-    }
-    .guide {
-      cursor: pointer;
-      margin-left: 10px;
-      display: inline-block;
-      line-height: 18px;
-      font-size: 12px;
-      .guide-icon {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        vertical-align: -2.5px;
-        margin-right: 4px;
-        background: url('../../assets/images/guideIcon.svg');
-      }
-    }
-    .guide:hover {
-      color: #00a5a7;
-      .guide-icon {
-        background: url('../../assets/images/guideIconHover.svg');
-      }
-    }
-  }
-  .graph-p32 {
-    height: 100%;
-    position: relative;
-    .guide-content {
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      background-color: #c6c8cc;
-      z-index: 9999;
-      .step-pic {
-        text-align: center;
-        margin-top: 8px;
-      }
-      .step {
-        height: 100%;
-        background-repeat: round;
-        user-select: none;
-        img {
-          width: 100%;
-        }
-      }
-      .guide-span {
-        font-size: 12px;
-        color: #575d6c;
-        line-height: 18px;
-        text-align: left;
-        display: inline-block;
-      }
-      .el-popover {
-        .el-icon-close {
-          cursor: pointer;
-          position: absolute;
-          right: 10px;
-          top: 13px;
-          font-size: 20px;
-        }
-        .el-icon-close:hover {
-          color: #00a5a7;
-        }
-      }
-      .el-popover__title {
-        font-size: 16px;
-        color: #252b3a;
-        line-height: 24px;
-        font-weight: bold;
-      }
-      .el-button {
-        display: block;
-        float: right;
-        height: 28px;
-        line-height: 27px;
-        border-radius: 0;
-        padding: 0 20px;
-      }
-    }
-  }
-  .cl-content {
-    height: calc(100% - 50px);
-    overflow: auto;
-  }
-  #graphs {
-    width: 100%;
-    height: 100%;
-    font-size: 0;
-    background: #f0f2f5;
-    .search {
-      margin-bottom: 15px;
-      width: 100%;
-    }
-    .search-wrap {
-      position: relative;
-      .tree-wrap {
-        position: absolute;
-        left: 0;
-        top: 32px;
-        z-index: 101;
-        width: 100%;
-        max-height: 224px;
-        overflow: auto;
-        border: 1px solid #dcdfe6;
-        border-top: none;
-        background: #fff;
-        .image-type {
-          width: 20px;
-          height: 10px;
-          margin-right: 10px;
-        }
-        .el-tree {
-          & > .el-tree-node {
-            min-width: 100%;
-            display: inline-block;
-          }
-          .custom-tree-node {
-            padding-right: 8px;
-          }
-        }
-      }
-      .collapse_i {
-        cursor: pointer;
-      }
-    }
-    .cl-graph {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      background-color: #fff;
-      padding: 0 32px 10px;
-      min-height: 700px;
-      overflow: hidden;
-    }
-    .cl-graph.full-screen {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: -280px;
-      right: 0;
-      width: auto;
-      height: auto;
-      padding: 0;
-      #sidebar {
-        .node-info-con {
-          height: calc(100% - 300px);
-        }
-      }
-      .graph-container {
-        width: 100%;
-      }
-    }
-    #sidebar.right-hide {
-      right: -442px;
-    }
-    #sidebar {
-      position: absolute;
-      right: 0;
-      top: 0;
-      width: 442px;
-      height: 100%;
-      border-radius: 6px;
-      text-align: left;
-      background-color: #ffffff;
-      display: inline-block;
-      box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
-      color: #333333;
-      font-size: 14px;
-      line-height: 14px;
-      padding: 18px 32px 10px;
-      .sidebar-tooltip {
-        position: absolute;
-        height: 32px;
-        top: 18px;
-        left: 10px;
-        display: flex;
-        align-items: center;
-        font-size: 16px;
-        color: #6c7280;
-      }
-      div,
-      span,
-      pre {
-        font-size: 14px;
-      }
-      #small-container {
-        height: 209px;
-        width: 100%;
-        z-index: 100;
-        border: 1px solid #e6ebf5;
-        overflow: hidden;
-        background-color: white;
-        position: relative;
-        #small-resize {
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-        #small-map {
-          height: 100%;
-          width: 100%;
-          position: relative;
-          padding: 0;
-        }
-        #inside-box {
-          background-color: #5b88f1;
-          position: absolute;
-          /* Transparency */
-          opacity: 0.3;
-          width: 100%;
-          height: 100%;
-          left: 0px;
-          top: 0px;
-          z-index: 200;
-          cursor: move;
-        }
-      }
-      .title {
-        padding: 20px 0;
-        font-size: 14px;
-        color: #333333;
-        img {
-          float: right;
-          margin-right: 10px;
-          cursor: pointer;
-        }
-      }
-      .graph-controls {
-        padding: 10px 20px 0 20px;
-        div {
-          cursor: pointer;
-          display: inline-block;
-          margin-left: 20px;
-        }
-        img {
-          cursor: pointer;
-          vertical-align: middle;
-        }
-      }
-      .node-info-con {
-        ::-webkit-scrollbar-button {
-          z-index: 200;
-          width: 10px;
-          height: 10px;
-          background: #fff;
-          cursor: pointer;
-        }
-        ::-webkit-scrollbar-button:horizontal:single-button:start {
-          background-image: url('../../assets/images/scroll-btn-left.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-button:horizontal:single-button:end {
-          background-image: url('../../assets/images/scroll-btn-right.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-button:vertical:single-button:start {
-          background-image: url('../../assets/images/scroll-btn-up.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-button:vertical:single-button:end {
-          background-image: url('../../assets/images/scroll-btn-down.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: #bac5cc;
-        }
-        ::-webkit-scrollbar {
-          width: 6px;
-          height: 6px;
-        }
-      }
-      .node-info-container {
-        height: calc(100% - 451px);
-      }
-      .node-info-container-long {
-        height: calc(100% - 357px);
-      }
-      .node-info {
-        font-size: 14px;
-        padding: 0 20px;
-        height: calc(100% - 54px);
-        overflow: auto;
-        color: #333;
-        background-color: #f7faff;
-        .clear {
-          clear: both;
-        }
-        .hover {
-          li:hover {
-            background: #fce8b2;
-          }
-          .control-list {
-            .dependence-title {
-              line-height: 30px;
-              cursor: pointer;
-              font-weight: bold;
-              img {
-                vertical-align: middle;
-                margin-right: 3px;
-              }
-            }
-            .dependence-title.hide {
-              img {
-                margin-top: -3px;
-                transform: rotate(-90deg);
-              }
-            }
-            li:hover {
-              background: #fce8b2;
-            }
-          }
-          .control-list:hover {
-            background: none;
-          }
-        }
-        .pointer {
-          cursor: pointer;
-        }
-        .item-content {
-          max-height: calc(50% - 95px);
-          overflow: auto;
-          li {
-            min-width: 100%;
-            width: max-content;
-          }
-        }
-        .item-min {
-          min-height: 50px;
-        }
-        .item-min2 {
-          min-height: 87px;
-        }
-        .items {
-          line-height: 20px;
-          padding: 9px 0;
-          .items-over {
-            max-height: 60px;
-            overflow: auto;
-          }
-          .item {
-            color: #999;
-          }
-        }
-        .shape {
-          vertical-align: top;
-          width: 50px;
-          word-break: break-all;
-          display: inline-table;
-          position: absolute;
-          left: 0;
-        }
-        .key {
-          vertical-align: top;
-          width: 60px;
-          word-break: break-all;
-          display: inline-table;
-        }
-        .label {
-          vertical-align: top;
-          width: 70px;
-          word-break: break-all;
-          display: inline-block;
-        }
-        .value {
-          vertical-align: top;
-          display: inline-block;
-          width: calc(100% - 70px);
-          white-space: nowrap;
-          overflow: auto;
-        }
-        .size {
-          width: 310px;
-          font-size: 12px;
-          text-align: right;
-        }
-        .input {
-          width: 100%;
-          position: relative;
-          display: inline-block;
-          white-space: nowrap;
-        }
-        ul {
-          li {
-            line-height: 20px;
-          }
-        }
-      }
-      .legend {
-        .legend-content {
-          background-color: #f7faff;
-          padding: 0 32px;
-          height: 94px;
-          overflow-y: auto;
-        }
-        .legend-item {
-          padding: 5px 0;
-          display: inline-block;
-          width: 50%;
-          font-size: 14px;
-          line-height: 20px;
-          .pic {
-            width: 45px;
-            text-align: center;
-            display: inline-block;
-            padding-left: 20px;
-            vertical-align: middle;
-            img {
-              max-width: 45px;
-              max-height: 15px;
-              margin-left: -20px;
-              vertical-align: middle;
-            }
-          }
-          .legend-text {
-            display: inline-block;
-            padding-left: 20px;
-            width: calc(100% - 45px);
-            vertical-align: middle;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          .legend-text:hover {
-            cursor: default;
-          }
-        }
-      }
-      .toggle-right {
-        position: absolute;
-        top: calc(50% - 43px);
-        left: -16px;
-        width: 18px;
-        height: 86px;
-        cursor: pointer;
-        background-image: url('../../assets/images/toggle-right-bg.png');
-      }
-      .icon-toggle {
-        width: 6px;
-        height: 9px;
-        background-image: url('../../assets/images/toggle-right-icon.png');
-        position: absolute;
-        top: calc(50% - 4.5px);
-        left: calc(50% - 3px);
-      }
-      .icon-toggle.icon-left {
-        transform: rotateY(180deg);
-      }
-    }
-    .operate-button-list {
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 100;
-      div {
-        cursor: pointer;
-        width: 12px;
-        height: 12px;
-        display: inline-block;
-        margin: 5px;
-      }
-      .download-button {
-        background-image: url('../../assets/images/download.png');
-      }
-      .full-screen-button {
-        background-image: url('../../assets/images/full-screen.png');
-      }
-    }
-    .graph-container.all {
-      width: 100%;
-    }
-    .graph-container {
-      .node:hover > path,
-      .node:hover > ellipse,
-      .node:hover > polygon,
-      .node:hover > rect {
-        stroke-width: 2px;
-      }
-      .node.cluster > rect:hover {
-        stroke: #8df1f2;
-      }
-      .selected {
-        stroke: red !important;
-        stroke-width: 2px;
-      }
-    }
-    .graph-container,
-    #small-map {
-      font-size: 16px;
-      position: relative;
-      display: inline-block;
-      width: calc(100% - 442px);
-      height: calc(100% - 5px);
-      text-align: left;
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      .graph {
-        height: 100%;
-        background-color: #f7faff;
-      }
-      #graph0 > polygon {
-        fill: transparent;
-      }
-      .node {
-        cursor: pointer;
-      }
-      .edge {
-        path {
-          stroke: rgb(120, 120, 120);
-        }
-        polygon {
-          fill: rgb(120, 120, 120);
-        }
-      }
-      .edge.highlighted {
-        path {
-          stroke: red;
-        }
-        polygon {
-          stroke: red;
-          fill: red;
-        }
-        marker {
-          path {
-            fill: red;
-          }
-        }
-      }
-      .node.aggregation > polygon {
-        stroke: #e3aa00;
-        fill: #ffe794;
-      }
-      .node.cluster.aggregation > rect {
-        stroke: #e3aa00;
-        fill: #ffe794;
-        stroke-dasharray: 3, 3;
-      }
-      .node > polygon {
-        stroke: #00a5a7;
-        fill: rgb(141, 241, 242);
-      }
-      .node > ellipse {
-        stroke: #4ea6e6;
-        fill: #b8e0ff;
-      }
-      .plain > path,
-      .plain ellipse {
-        stroke: #e37d29;
-        fill: #ffd0a6;
-        stroke-dasharray: 1.5, 1.5;
-      }
-      .edge-point ellipse {
-        stroke: #a7a7a7;
-        fill: #a7a7a7;
-      }
-      text {
-        fill: black;
-      }
-    }
-    // No data available.
-    .image-noData {
-      // Set the width and white on the right.
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      z-index: 200;
-    }
-    .noData-text {
-      margin-top: 33px;
-      font-size: 18px;
-    }
-  }
-  .cl-display-block {
-    display: block;
-  }
-  .cl-input-value {
-    width: calc(100% - 70px) !important;
-    margin-left: 10px !important;
-  }
-  .cl-close-btn {
-    width: 20px;
-    height: 20px;
-    vertical-align: -3px;
-    cursor: pointer;
-    display: inline-block;
-  }
-  .cl-title-right {
-    padding-right: 32px;
-  }
 }
+.cl-graph-manage .cl-graph-title {
+  height: 50px;
+  line-height: 50px;
+}
+.cl-graph-manage .cl-graph-title .path-message {
+  display: inline-block;
+  line-height: 20px;
+  padding: 0px 4px 15px 4px;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+.cl-graph-manage .cl-graph-title .guide {
+  cursor: pointer;
+  margin-left: 10px;
+  display: inline-block;
+  line-height: 18px;
+  font-size: 12px;
+}
+.cl-graph-manage .cl-graph-title .guide .guide-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: -2.5px;
+  margin-right: 4px;
+  background: url("../../assets/images/guideIcon.svg");
+}
+.cl-graph-manage .cl-graph-title .guide:hover {
+  color: #00a5a7;
+}
+.cl-graph-manage .cl-graph-title .guide:hover .guide-icon {
+  background: url("../../assets/images/guideIconHover.svg");
+}
+.cl-graph-manage .graph-p32 {
+  height: 100%;
+  position: relative;
+}
+.cl-graph-manage .graph-p32 .guide-content {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background-color: #c6c8cc;
+  z-index: 9999;
+}
+.cl-graph-manage .graph-p32 .guide-content .step-pic {
+  text-align: center;
+  margin-top: 8px;
+}
+.cl-graph-manage .graph-p32 .guide-content .step {
+  height: 100%;
+  background-repeat: round;
+  user-select: none;
+}
+.cl-graph-manage .graph-p32 .guide-content .step img {
+  width: 100%;
+}
+.cl-graph-manage .graph-p32 .guide-content .guide-span {
+  font-size: 12px;
+  color: #575d6c;
+  line-height: 18px;
+  text-align: left;
+  display: inline-block;
+}
+.cl-graph-manage .graph-p32 .guide-content .el-popover .el-icon-close {
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 13px;
+  font-size: 20px;
+}
+.cl-graph-manage .graph-p32 .guide-content .el-popover .el-icon-close:hover {
+  color: #00a5a7;
+}
+.cl-graph-manage .graph-p32 .guide-content .el-popover__title {
+  font-size: 16px;
+  color: #252b3a;
+  line-height: 24px;
+  font-weight: bold;
+}
+.cl-graph-manage .graph-p32 .guide-content .el-button {
+  display: block;
+  float: right;
+  height: 28px;
+  line-height: 27px;
+  border-radius: 0;
+  padding: 0 20px;
+}
+.cl-graph-manage .cl-content {
+  height: calc(100% - 50px);
+  overflow: auto;
+}
+.cl-graph-manage #graphs {
+  width: 100%;
+  height: 100%;
+  font-size: 0;
+  background: #f0f2f5;
+}
+.cl-graph-manage #graphs .search {
+  margin-bottom: 15px;
+  width: 100%;
+}
+.cl-graph-manage #graphs .search-wrap {
+  position: relative;
+}
+.cl-graph-manage #graphs .search-wrap .tree-wrap {
+  position: absolute;
+  left: 0;
+  top: 32px;
+  z-index: 101;
+  width: 100%;
+  max-height: 224px;
+  overflow: auto;
+  border: 1px solid #dcdfe6;
+  border-top: none;
+  background: #fff;
+}
+.cl-graph-manage #graphs .search-wrap .tree-wrap .image-type {
+  width: 20px;
+  height: 10px;
+  margin-right: 10px;
+}
+.cl-graph-manage #graphs .search-wrap .tree-wrap .el-tree > .el-tree-node {
+  min-width: 100%;
+  display: inline-block;
+}
+.cl-graph-manage #graphs .search-wrap .tree-wrap .el-tree .custom-tree-node {
+  padding-right: 8px;
+}
+.cl-graph-manage #graphs .search-wrap .collapse_i {
+  cursor: pointer;
+}
+.cl-graph-manage #graphs .cl-graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 0 32px 10px;
+  min-height: 700px;
+  overflow: hidden;
+}
+.cl-graph-manage #graphs .cl-graph.full-screen {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -280px;
+  right: 0;
+  width: auto;
+  height: auto;
+  padding: 0;
+}
+.cl-graph-manage #graphs .cl-graph.full-screen #sidebar .node-info-con {
+  height: calc(100% - 300px);
+}
+.cl-graph-manage #graphs .cl-graph.full-screen .graph-container {
+  width: 100%;
+}
+.cl-graph-manage #graphs #sidebar.right-hide {
+  right: -442px;
+}
+.cl-graph-manage #graphs #sidebar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 442px;
+  height: 100%;
+  border-radius: 6px;
+  text-align: left;
+  background-color: #ffffff;
+  display: inline-block;
+  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
+  color: #333333;
+  font-size: 14px;
+  line-height: 14px;
+  padding: 18px 32px 10px;
+}
+.cl-graph-manage #graphs #sidebar .sidebar-tooltip {
+  position: absolute;
+  height: 32px;
+  top: 18px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: #6c7280;
+}
+.cl-graph-manage #graphs #sidebar div,
+.cl-graph-manage #graphs #sidebar span,
+.cl-graph-manage #graphs #sidebar pre {
+  font-size: 14px;
+}
+.cl-graph-manage #graphs #sidebar #small-container {
+  height: 209px;
+  width: 100%;
+  z-index: 100;
+  border: 1px solid #e6ebf5;
+  overflow: hidden;
+  background-color: white;
+  position: relative;
+}
+.cl-graph-manage #graphs #sidebar #small-container #small-resize {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.cl-graph-manage #graphs #sidebar #small-container #small-map {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  padding: 0;
+}
+.cl-graph-manage #graphs #sidebar #small-container #inside-box {
+  background-color: #5b88f1;
+  position: absolute;
+  /* Transparency */
+  opacity: 0.3;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  z-index: 200;
+  cursor: move;
+}
+.cl-graph-manage #graphs #sidebar .title {
+  padding: 20px 0;
+  font-size: 14px;
+  color: #333333;
+}
+.cl-graph-manage #graphs #sidebar .title img {
+  float: right;
+  margin-right: 10px;
+  cursor: pointer;
+}
+.cl-graph-manage #graphs #sidebar .graph-controls {
+  padding: 10px 20px 0 20px;
+}
+.cl-graph-manage #graphs #sidebar .graph-controls div {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 20px;
+}
+.cl-graph-manage #graphs #sidebar .graph-controls img {
+  cursor: pointer;
+  vertical-align: middle;
+}
+.cl-graph-manage #graphs #sidebar .node-info-con ::-webkit-scrollbar-button {
+  z-index: 200;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  cursor: pointer;
+}
+.cl-graph-manage #graphs #sidebar .node-info-con ::-webkit-scrollbar-button:horizontal:single-button:start {
+  background-image: url("../../assets/images/scroll-btn-left.png");
+  background-position: center;
+}
+.cl-graph-manage #graphs #sidebar .node-info-con ::-webkit-scrollbar-button:horizontal:single-button:end {
+  background-image: url("../../assets/images/scroll-btn-right.png");
+  background-position: center;
+}
+.cl-graph-manage #graphs #sidebar .node-info-con ::-webkit-scrollbar-button:vertical:single-button:start {
+  background-image: url("../../assets/images/scroll-btn-up.png");
+  background-position: center;
+}
+.cl-graph-manage #graphs #sidebar .node-info-con ::-webkit-scrollbar-button:vertical:single-button:end {
+  background-image: url("../../assets/images/scroll-btn-down.png");
+  background-position: center;
+}
+.cl-graph-manage #graphs #sidebar .node-info-con ::-webkit-scrollbar-thumb {
+  background-color: #bac5cc;
+}
+.cl-graph-manage #graphs #sidebar .node-info-con ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.cl-graph-manage #graphs #sidebar .node-info-container {
+  height: calc(100% - 451px);
+}
+.cl-graph-manage #graphs #sidebar .node-info-container-long {
+  height: calc(100% - 357px);
+}
+.cl-graph-manage #graphs #sidebar .node-info {
+  font-size: 14px;
+  padding: 0 20px;
+  height: calc(100% - 54px);
+  overflow: auto;
+  color: #333;
+  background-color: #f7faff;
+}
+.cl-graph-manage #graphs #sidebar .node-info .clear {
+  clear: both;
+}
+.cl-graph-manage #graphs #sidebar .node-info .hover li:hover {
+  background: #fce8b2;
+}
+.cl-graph-manage #graphs #sidebar .node-info .hover .control-list .dependence-title {
+  line-height: 30px;
+  cursor: pointer;
+  font-weight: bold;
+}
+.cl-graph-manage #graphs #sidebar .node-info .hover .control-list .dependence-title img {
+  vertical-align: middle;
+  margin-right: 3px;
+}
+.cl-graph-manage #graphs #sidebar .node-info .hover .control-list .dependence-title.hide img {
+  margin-top: -3px;
+  transform: rotate(-90deg);
+}
+.cl-graph-manage #graphs #sidebar .node-info .hover .control-list li:hover {
+  background: #fce8b2;
+}
+.cl-graph-manage #graphs #sidebar .node-info .hover .control-list:hover {
+  background: none;
+}
+.cl-graph-manage #graphs #sidebar .node-info .pointer {
+  cursor: pointer;
+}
+.cl-graph-manage #graphs #sidebar .node-info .item-content {
+  max-height: calc(50% - 95px);
+  overflow: auto;
+}
+.cl-graph-manage #graphs #sidebar .node-info .item-content li {
+  min-width: 100%;
+  width: max-content;
+}
+.cl-graph-manage #graphs #sidebar .node-info .item-min {
+  min-height: 50px;
+}
+.cl-graph-manage #graphs #sidebar .node-info .item-min2 {
+  min-height: 87px;
+}
+.cl-graph-manage #graphs #sidebar .node-info .items {
+  line-height: 20px;
+  padding: 9px 0;
+}
+.cl-graph-manage #graphs #sidebar .node-info .items .items-over {
+  max-height: 60px;
+  overflow: auto;
+}
+.cl-graph-manage #graphs #sidebar .node-info .items .item {
+  color: #999;
+}
+.cl-graph-manage #graphs #sidebar .node-info .shape {
+  vertical-align: top;
+  width: 50px;
+  word-break: break-all;
+  display: inline-table;
+  position: absolute;
+  left: 0;
+}
+.cl-graph-manage #graphs #sidebar .node-info .key {
+  vertical-align: top;
+  width: 60px;
+  word-break: break-all;
+  display: inline-table;
+}
+.cl-graph-manage #graphs #sidebar .node-info .label {
+  vertical-align: top;
+  width: 70px;
+  word-break: break-all;
+  display: inline-block;
+}
+.cl-graph-manage #graphs #sidebar .node-info .value {
+  vertical-align: top;
+  display: inline-block;
+  width: calc(100% - 70px);
+  white-space: nowrap;
+  overflow: auto;
+}
+.cl-graph-manage #graphs #sidebar .node-info .size {
+  width: 310px;
+  font-size: 12px;
+  text-align: right;
+}
+.cl-graph-manage #graphs #sidebar .node-info .input {
+  width: 100%;
+  position: relative;
+  display: inline-block;
+  white-space: nowrap;
+}
+.cl-graph-manage #graphs #sidebar .node-info ul li {
+  line-height: 20px;
+}
+.cl-graph-manage #graphs #sidebar .legend .legend-content {
+  background-color: #f7faff;
+  padding: 0 32px;
+  height: 94px;
+  overflow-y: auto;
+}
+.cl-graph-manage #graphs #sidebar .legend .legend-item {
+  padding: 5px 0;
+  display: inline-block;
+  width: 50%;
+  font-size: 14px;
+  line-height: 20px;
+}
+.cl-graph-manage #graphs #sidebar .legend .legend-item .pic {
+  width: 45px;
+  text-align: center;
+  display: inline-block;
+  padding-left: 20px;
+  vertical-align: middle;
+}
+.cl-graph-manage #graphs #sidebar .legend .legend-item .pic img {
+  max-width: 45px;
+  max-height: 15px;
+  margin-left: -20px;
+  vertical-align: middle;
+}
+.cl-graph-manage #graphs #sidebar .legend .legend-item .legend-text {
+  display: inline-block;
+  padding-left: 20px;
+  width: calc(100% - 45px);
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cl-graph-manage #graphs #sidebar .legend .legend-item .legend-text:hover {
+  cursor: default;
+}
+.cl-graph-manage #graphs #sidebar .toggle-right {
+  position: absolute;
+  top: calc(50% - 43px);
+  left: -16px;
+  width: 18px;
+  height: 86px;
+  cursor: pointer;
+  background-image: url("../../assets/images/toggle-right-bg.png");
+}
+.cl-graph-manage #graphs #sidebar .icon-toggle {
+  width: 6px;
+  height: 9px;
+  background-image: url("../../assets/images/toggle-right-icon.png");
+  position: absolute;
+  top: calc(50% - 4.5px);
+  left: calc(50% - 3px);
+}
+.cl-graph-manage #graphs #sidebar .icon-toggle.icon-left {
+  transform: rotateY(180deg);
+}
+.cl-graph-manage #graphs .operate-button-list {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 100;
+}
+.cl-graph-manage #graphs .operate-button-list div {
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  margin: 5px;
+}
+.cl-graph-manage #graphs .operate-button-list .download-button {
+  background-image: url("../../assets/images/download.png");
+}
+.cl-graph-manage #graphs .operate-button-list .full-screen-button {
+  background-image: url("../../assets/images/full-screen.png");
+}
+.cl-graph-manage #graphs .graph-container.all {
+  width: 100%;
+}
+.cl-graph-manage #graphs .graph-container .node:hover > path,
+.cl-graph-manage #graphs .graph-container .node:hover > ellipse,
+.cl-graph-manage #graphs .graph-container .node:hover > polygon,
+.cl-graph-manage #graphs .graph-container .node:hover > rect {
+  stroke-width: 2px;
+}
+.cl-graph-manage #graphs .graph-container .node.cluster > rect:hover {
+  stroke: #8df1f2;
+}
+.cl-graph-manage #graphs .graph-container .selected {
+  stroke: red !important;
+  stroke-width: 2px;
+}
+.cl-graph-manage #graphs .graph-container,
+.cl-graph-manage #graphs #small-map {
+  font-size: 16px;
+  position: relative;
+  display: inline-block;
+  width: calc(100% - 442px);
+  height: calc(100% - 5px);
+  text-align: left;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.cl-graph-manage #graphs .graph-container .graph,
+.cl-graph-manage #graphs #small-map .graph {
+  height: 100%;
+  background-color: #f7faff;
+}
+.cl-graph-manage #graphs .graph-container #graph0 > polygon,
+.cl-graph-manage #graphs #small-map #graph0 > polygon {
+  fill: transparent;
+}
+.cl-graph-manage #graphs .graph-container .node,
+.cl-graph-manage #graphs #small-map .node {
+  cursor: pointer;
+}
+.cl-graph-manage #graphs .graph-container .edge path,
+.cl-graph-manage #graphs #small-map .edge path {
+  stroke: #787878;
+}
+.cl-graph-manage #graphs .graph-container .edge polygon,
+.cl-graph-manage #graphs #small-map .edge polygon {
+  fill: #787878;
+}
+.cl-graph-manage #graphs .graph-container .edge.highlighted path,
+.cl-graph-manage #graphs #small-map .edge.highlighted path {
+  stroke: red;
+}
+.cl-graph-manage #graphs .graph-container .edge.highlighted polygon,
+.cl-graph-manage #graphs #small-map .edge.highlighted polygon {
+  stroke: red;
+  fill: red;
+}
+.cl-graph-manage #graphs .graph-container .edge.highlighted marker path,
+.cl-graph-manage #graphs #small-map .edge.highlighted marker path {
+  fill: red;
+}
+.cl-graph-manage #graphs .graph-container .node.aggregation > polygon,
+.cl-graph-manage #graphs #small-map .node.aggregation > polygon {
+  stroke: #e3aa00;
+  fill: #ffe794;
+}
+.cl-graph-manage #graphs .graph-container .node.cluster.aggregation > rect,
+.cl-graph-manage #graphs #small-map .node.cluster.aggregation > rect {
+  stroke: #e3aa00;
+  fill: #ffe794;
+  stroke-dasharray: 3, 3;
+}
+.cl-graph-manage #graphs .graph-container .node > polygon,
+.cl-graph-manage #graphs #small-map .node > polygon {
+  stroke: #00a5a7;
+  fill: #8df1f2;
+}
+.cl-graph-manage #graphs .graph-container .node > ellipse,
+.cl-graph-manage #graphs #small-map .node > ellipse {
+  stroke: #4ea6e6;
+  fill: #b8e0ff;
+}
+.cl-graph-manage #graphs .graph-container .plain > path,
+.cl-graph-manage #graphs .graph-container .plain ellipse,
+.cl-graph-manage #graphs #small-map .plain > path,
+.cl-graph-manage #graphs #small-map .plain ellipse {
+  stroke: #e37d29;
+  fill: #ffd0a6;
+  stroke-dasharray: 1.5, 1.5;
+}
+.cl-graph-manage #graphs .graph-container .edge-point ellipse,
+.cl-graph-manage #graphs #small-map .edge-point ellipse {
+  stroke: #a7a7a7;
+  fill: #a7a7a7;
+}
+.cl-graph-manage #graphs .graph-container text,
+.cl-graph-manage #graphs #small-map text {
+  fill: black;
+}
+.cl-graph-manage #graphs .image-noData {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 200;
+}
+.cl-graph-manage #graphs .noData-text {
+  margin-top: 33px;
+  font-size: 18px;
+}
+.cl-graph-manage .cl-display-block {
+  display: block;
+}
+.cl-graph-manage .cl-input-value {
+  width: calc(100% - 70px) !important;
+  margin-left: 10px !important;
+}
+.cl-graph-manage .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+}
+.cl-graph-manage .cl-title-right {
+  padding-right: 32px;
+}
+
 #graphTemp,
 #subgraphTemp {
   position: absolute;
diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue
index 0dbe1de8..ed8fb737 100644
--- a/mindinsight/ui/src/views/train-manage/histogram.vue
+++ b/mindinsight/ui/src/views/train-manage/histogram.vue
@@ -1285,150 +1285,144 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-histogram-manage {
   height: 100%;
-  .histogram-bk {
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    .cl-histogram-title {
-      height: 56px;
-      line-height: 56px;
-      .path-message {
-        display: inline-block;
-        line-height: 20px;
-        padding: 0px 4px 15px 4px;
-        font-weight: bold;
-        vertical-align: bottom;
-      }
-      .cl-close-btn {
-        width: 20px;
-        height: 20px;
-        vertical-align: -3px;
-        cursor: pointer;
-        display: inline-block;
-      }
-    }
-    .cl-histogram-operate-content {
-      width: 100%;
-      padding: 8px 32px 22px 32px;
-      background: #ffffff;
-    }
-    .cl-histogram-view-type-select-content {
-      background: #ffffff;
-      padding: 0 32px 21px 32px;
-      height: 58px;
-      display: flex;
-      align-items: center;
-      border-bottom: 2px solid #e6ebf5;
-      .view-title {
-        font-size: 14px;
-        line-height: 14px;
-        vertical-align: middle;
-        margin-right: 16px;
-        flex-shrink: 0;
-      }
-      .el-radio-group {
-        margin-right: 64px;
-        flex-shrink: 0;
-      }
-    }
-    .cl-histogram-show-data-content {
-      background: #ffffff;
-      padding: 0 23px;
-      flex: 1;
-      overflow: auto;
-      .data-content {
-        display: flex;
-        height: 100%;
-        width: 100%;
-        flex-wrap: wrap;
-        min-height: 400px;
-        position: relative;
-        .sample-content {
-          width: 33.3%;
-          height: 400px;
-          display: flex;
-          flex-direction: column;
-          flex-shrink: 0;
-          background-color: #fff;
-          position: relative;
-        }
-        .char-full-screen {
-          width: 100%;
-          height: 400px;
-        }
-        .chars-container {
-          flex: 1;
-          padding: 0 15px 0 15px;
-          position: relative;
-          .char-item-content {
-            width: 100%;
-            height: calc(100% - 26px);
-          }
-          .tag-title {
-            width: 100%;
-            font-size: 16px;
-            font-weight: 600;
-            text-align: center;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-        }
-      }
-    }
-    .pagination-content {
-      padding: 24px 32px;
-      text-align: right;
-    }
-    // No data available.
-    .image-noData {
-      // Set the width and white on the right.
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-  }
-  .content {
-    position: relative;
-  }
-
-  #echart {
-    width: 500px;
-    height: 500px;
-    border: 1px solid black;
-    position: relative;
-  }
-
-  #echartTip {
-    position: absolute;
-    padding: 5px;
-    z-index: 9999;
-    font-size: 14px;
-    font-family: 'Microsoft YaHei';
-    background-color: rgba(50, 50, 50, 0.7);
-    border: 0;
-    border-radius: 4px;
-    color: #fff;
-  }
-
-  .char-tip-table td {
-    padding-left: 5px;
-    padding-right: 5px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 150px;
-    overflow: hidden;
-  }
-
-  .borderspacing3 {
-    border-spacing: 3px;
-  }
+}
+.cl-histogram-manage .histogram-bk {
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-title {
+  height: 56px;
+  line-height: 56px;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-title .path-message {
+  display: inline-block;
+  line-height: 20px;
+  padding: 0px 4px 15px 4px;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-title .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-operate-content {
+  width: 100%;
+  padding: 8px 32px 22px 32px;
+  background: #ffffff;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-view-type-select-content {
+  background: #ffffff;
+  padding: 0 32px 21px 32px;
+  height: 58px;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #e6ebf5;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-view-type-select-content .view-title {
+  font-size: 14px;
+  line-height: 14px;
+  vertical-align: middle;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-view-type-select-content .el-radio-group {
+  margin-right: 64px;
+  flex-shrink: 0;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-show-data-content {
+  background: #ffffff;
+  padding: 0 23px;
+  flex: 1;
+  overflow: auto;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-show-data-content .data-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-wrap: wrap;
+  min-height: 400px;
+  position: relative;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-show-data-content .data-content .sample-content {
+  width: 33.3%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background-color: #fff;
+  position: relative;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-show-data-content .data-content .char-full-screen {
+  width: 100%;
+  height: 400px;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-show-data-content .data-content .chars-container {
+  flex: 1;
+  padding: 0 15px 0 15px;
+  position: relative;
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-show-data-content .data-content .chars-container .char-item-content {
+  width: 100%;
+  height: calc(100% - 26px);
+}
+.cl-histogram-manage .histogram-bk .cl-histogram-show-data-content .data-content .chars-container .tag-title {
+  width: 100%;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-histogram-manage .histogram-bk .pagination-content {
+  padding: 24px 32px;
+  text-align: right;
+}
+.cl-histogram-manage .histogram-bk .image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-histogram-manage .content {
+  position: relative;
+}
+.cl-histogram-manage #echart {
+  width: 500px;
+  height: 500px;
+  border: 1px solid black;
+  position: relative;
+}
+.cl-histogram-manage #echartTip {
+  position: absolute;
+  padding: 5px;
+  z-index: 9999;
+  font-size: 14px;
+  font-family: "Microsoft YaHei";
+  background-color: rgba(50, 50, 50, 0.7);
+  border: 0;
+  border-radius: 4px;
+  color: #fff;
+}
+.cl-histogram-manage .char-tip-table td {
+  padding-left: 5px;
+  padding-right: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 150px;
+  overflow: hidden;
+}
+.cl-histogram-manage .borderspacing3 {
+  border-spacing: 3px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/image.vue b/mindinsight/ui/src/views/train-manage/image.vue
index 918d30f0..f6e64fea 100644
--- a/mindinsight/ui/src/views/train-manage/image.vue
+++ b/mindinsight/ui/src/views/train-manage/image.vue
@@ -642,271 +642,303 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .cl-image-manage {
   height: 100%;
-  .image-bk {
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-
-    .cl-image-title {
-      height: 56px;
-      line-height: 56px;
-      .path-message {
-        display: inline-block;
-        line-height: 20px;
-        padding: 0px 4px 15px 4px;
-        font-weight: bold;
-        vertical-align: bottom;
-      }
-      .cl-title-tip {
-        padding: 10px;
-        .tip-part {
-          line-height: 20px;
-          word-break: normal;
-        }
-      }
-      .el-icon-info {
-        color: #6c7280;
-      }
-    }
-  }
-  .title {
-    font-size: 14px;
-    vertical-align: middle;
-    flex-shrink: 0;
-  }
-  .select-all {
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-  .cl-img-operate-content {
-    width: 100%;
-    padding: 8px 32px 22px 32px;
-    background: #ffffff;
-  }
-  .cl-img-slider-operate-content {
-    background: #ffffff;
-    padding: 0 32px 22px 32px;
-    display: flex;
-    align-items: center;
-    border-bottom: 2px solid #e6ebf5;
-    .button-disable {
-      color: rgb(128, 210, 211) !important;
-      border: 1px solid rgb(128, 210, 211) !important;
-    }
-    .setBright-text,
-    .setContrast-text {
-      font-size: 14px;
-      line-height: 14px;
-      color: #282b33;
-      margin-right: 14px;
-    }
-    .setContrast-text {
-      margin-left: 48px;
-    }
-    .slider-content {
-      width: 403px;
-      margin-right: 19px;
-    }
-    .reset-btn {
-      width: 96px;
-      border-radius: 2px;
-      color: #00a5a7;
-      border: 1px solid #00a5a7;
-      font-size: 14px;
-      line-height: 20px;
-      padding-top: 4px;
-      padding-bottom: 5px;
-    }
-  }
-  .cl-img-show-data-content {
-    background: #ffffff;
-    padding: 0 23px;
-    flex: 1;
-    overflow: auto;
-    .data-content {
-      display: flex;
-      width: 100%;
-      flex-wrap: wrap;
-      min-height: 470px;
-      .content-common {
-        width: calc(25% - 18px);
-        max-width: 500px;
-      }
-      .content-full-screen {
-        max-width: 100%;
-      }
-      .sample-content {
-        min-width: 250px;
-        min-height: 359px;
-        margin-right: 9px;
-        margin-left: 9px;
-        margin-top: 32px;
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        .image-container {
-          position: relative;
-          cursor: pointer;
-          width: 100%;
-          min-height: 359px;
-          overflow-x: auto;
-          .sample-img {
-            object-fit: contain;
-            background: #f0f3fa;
-          }
-          .error-message-container {
-            height: 100%;
-            display: flex;
-            background-color: #f0f3fa;
-            div {
-              margin: auto;
-            }
-          }
-        }
-        .sample-data-show {
-          padding: 32px 16px;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-          background-color: #f0f3fa;
-          margin-top: 3px;
-          .tag-title,
-          .summary-title {
-            font-size: 14px;
-            line-height: 20px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .sample-operate-info {
-            width: 100%;
-            min-height: 24px;
-            vertical-align: middle;
-            line-height: 20px;
-            margin-top: 24px;
-            color: #000000;
-            position: relative;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            span {
-              max-width: 100%;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              overflow: hidden;
-            }
-            .step-info {
-              left: 0;
-              font-size: 14px;
-            }
-            .time-info {
-              right: 0;
-              float: right;
-              font-size: 14px;
-            }
-          }
-          .step-slider {
-            margin-top: 10px;
-          }
-        }
-        ::-webkit-scrollbar-button {
-          z-index: 200;
-          width: 10px;
-          height: 10px;
-          background: #fff;
-          cursor: pointer;
-        }
-        ::-webkit-scrollbar-button:horizontal:single-button:start {
-          background-image: url('../../assets/images/scroll-btn-left.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-button:horizontal:single-button:end {
-          background-image: url('../../assets/images/scroll-btn-right.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-button:vertical:single-button:start {
-          background-image: url('../../assets/images/scroll-btn-up.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-button:vertical:single-button:end {
-          background-image: url('../../assets/images/scroll-btn-down.png');
-          background-position: center;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: #bac5cc;
-        }
-        ::-webkit-scrollbar {
-          width: 10px;
-          height: 10px;
-        }
-      }
-    }
-
-    // No data available.
-    .image-noData {
-      // Set the width and white on the right.
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-  }
-  .pagination-content {
-    padding: 24px 32px;
-    text-align: right;
-  }
-  .mr24 {
-    margin-right: 24px;
-  }
-  .select-disable {
-    -moz-user-select: none; /*Firefox*/
-    -webkit-user-select: none; /*webkitbrowser*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*Early browser*/
-    user-select: none;
-  }
-  .el-slider__bar {
-    background-color: #6c92fa;
-  }
-  .el-slider__button {
-    border-color: #6c92fa;
-  }
-  .noData-text {
-    margin-top: 33px;
-    font-size: 18px;
-  }
-
-  .tooltip-show-content {
-    max-width: 50%;
-  }
-  // Pagination selected
-  .el-pager li.active {
-    background: #00a5a7;
-    color: #ffffff;
-  }
-  // Arrow on the previous or next page
-  .el-pagination .btn-prev,
-  .el-pagination .btn-next {
-    background: #e6ebf5;
-    .el-icon {
-      color: #b8becc;
-    }
-  }
-  .search-input-item {
-    width: 290px;
-  }
-  .cl-close-btn {
-    width: 20px;
-    height: 20px;
-    vertical-align: -3px;
-    cursor: pointer;
-    display: inline-block;
-  }
+}
+.cl-image-manage .image-bk {
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.cl-image-manage .image-bk .cl-image-title {
+  height: 56px;
+  line-height: 56px;
+}
+.cl-image-manage .image-bk .cl-image-title .path-message {
+  display: inline-block;
+  line-height: 20px;
+  padding: 0px 4px 15px 4px;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+.cl-image-manage .image-bk .cl-image-title .cl-title-tip {
+  padding: 10px;
+}
+.cl-image-manage .image-bk .cl-image-title .cl-title-tip .tip-part {
+  line-height: 20px;
+  word-break: normal;
+}
+.cl-image-manage .image-bk .cl-image-title .el-icon-info {
+  color: #6c7280;
+}
+.cl-image-manage .title {
+  font-size: 14px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+.cl-image-manage .select-all {
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.cl-image-manage .cl-img-operate-content {
+  width: 100%;
+  padding: 8px 32px 22px 32px;
+  background: #ffffff;
+}
+.cl-image-manage .cl-img-slider-operate-content {
+  background: #ffffff;
+  padding: 0 32px 22px 32px;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #e6ebf5;
+}
+.cl-image-manage .cl-img-slider-operate-content .button-disable {
+  color: #80d2d3 !important;
+  border: 1px solid #80d2d3 !important;
+}
+.cl-image-manage .cl-img-slider-operate-content .setBright-text,
+.cl-image-manage .cl-img-slider-operate-content .setContrast-text {
+  font-size: 14px;
+  line-height: 14px;
+  color: #282b33;
+  margin-right: 14px;
+}
+.cl-image-manage .cl-img-slider-operate-content .setContrast-text {
+  margin-left: 48px;
+}
+.cl-image-manage .cl-img-slider-operate-content .slider-content {
+  width: 403px;
+  margin-right: 19px;
+}
+.cl-image-manage .cl-img-slider-operate-content .reset-btn {
+  width: 96px;
+  border-radius: 2px;
+  color: #00a5a7;
+  border: 1px solid #00a5a7;
+  font-size: 14px;
+  line-height: 20px;
+  padding-top: 4px;
+  padding-bottom: 5px;
+}
+.cl-image-manage .cl-img-show-data-content {
+  background: #ffffff;
+  padding: 0 23px;
+  flex: 1;
+  overflow: auto;
+}
+.cl-image-manage .cl-img-show-data-content .data-content {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  min-height: 470px;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .content-common {
+  width: calc(25% - 18px);
+  max-width: 500px;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .content-full-screen {
+  max-width: 100%;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content {
+  min-width: 250px;
+  min-height: 359px;
+  margin-right: 9px;
+  margin-left: 9px;
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .image-container {
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  min-height: 359px;
+  overflow-x: auto;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .image-container .sample-img {
+  object-fit: contain;
+  background: #f0f3fa;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .image-container .error-message-container {
+  height: 100%;
+  display: flex;
+  background-color: #f0f3fa;
+}
+.cl-image-manage
+  .cl-img-show-data-content
+  .data-content
+  .sample-content
+  .image-container
+  .error-message-container
+  div {
+  margin: auto;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .sample-data-show {
+  padding: 32px 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: #f0f3fa;
+  margin-top: 3px;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .sample-data-show .tag-title,
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .sample-data-show .summary-title {
+  font-size: 14px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .sample-data-show .sample-operate-info {
+  width: 100%;
+  min-height: 24px;
+  vertical-align: middle;
+  line-height: 20px;
+  margin-top: 24px;
+  color: #000000;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .sample-data-show .sample-operate-info span {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-image-manage
+  .cl-img-show-data-content
+  .data-content
+  .sample-content
+  .sample-data-show
+  .sample-operate-info
+  .step-info {
+  left: 0;
+  font-size: 14px;
+}
+.cl-image-manage
+  .cl-img-show-data-content
+  .data-content
+  .sample-content
+  .sample-data-show
+  .sample-operate-info
+  .time-info {
+  right: 0;
+  float: right;
+  font-size: 14px;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content .sample-data-show .step-slider {
+  margin-top: 10px;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content ::-webkit-scrollbar-button {
+  z-index: 200;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  cursor: pointer;
+}
+.cl-image-manage
+  .cl-img-show-data-content
+  .data-content
+  .sample-content
+  ::-webkit-scrollbar-button:horizontal:single-button:start {
+  background-image: url('../../assets/images/scroll-btn-left.png');
+  background-position: center;
+}
+.cl-image-manage
+  .cl-img-show-data-content
+  .data-content
+  .sample-content
+  ::-webkit-scrollbar-button:horizontal:single-button:end {
+  background-image: url('../../assets/images/scroll-btn-right.png');
+  background-position: center;
+}
+.cl-image-manage
+  .cl-img-show-data-content
+  .data-content
+  .sample-content
+  ::-webkit-scrollbar-button:vertical:single-button:start {
+  background-image: url('../../assets/images/scroll-btn-up.png');
+  background-position: center;
+}
+.cl-image-manage
+  .cl-img-show-data-content
+  .data-content
+  .sample-content
+  ::-webkit-scrollbar-button:vertical:single-button:end {
+  background-image: url('../../assets/images/scroll-btn-down.png');
+  background-position: center;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content ::-webkit-scrollbar-thumb {
+  background-color: #bac5cc;
+}
+.cl-image-manage .cl-img-show-data-content .data-content .sample-content ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.cl-image-manage .cl-img-show-data-content .image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-image-manage .pagination-content {
+  padding: 24px 32px;
+  text-align: right;
+}
+.cl-image-manage .mr24 {
+  margin-right: 24px;
+}
+.cl-image-manage .select-disable {
+  -moz-user-select: none;
+  /*Firefox*/
+  -webkit-user-select: none;
+  /*webkitbrowser*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*Early browser*/
+  user-select: none;
+}
+.cl-image-manage .el-slider__bar {
+  background-color: #6c92fa;
+}
+.cl-image-manage .el-slider__button {
+  border-color: #6c92fa;
+}
+.cl-image-manage .noData-text {
+  margin-top: 33px;
+  font-size: 18px;
+}
+.cl-image-manage .tooltip-show-content {
+  max-width: 50%;
+}
+.cl-image-manage .el-pager li.active {
+  background: #00a5a7;
+  color: #ffffff;
+}
+.cl-image-manage .el-pagination .btn-prev,
+.cl-image-manage .el-pagination .btn-next {
+  background: #e6ebf5;
+}
+.cl-image-manage .el-pagination .btn-prev .el-icon,
+.cl-image-manage .el-pagination .btn-next .el-icon {
+  color: #b8becc;
+}
+.cl-image-manage .search-input-item {
+  width: 290px;
+}
+.cl-image-manage .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue
index f1d707c3..babc215b 100644
--- a/mindinsight/ui/src/views/train-manage/model-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue
@@ -1763,27 +1763,30 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-model-traceback {
   height: 100%;
   background-color: #fff;
 }
-// Set the maximum width of the drop-down box
+
 .el-select-dropdown {
   max-width: 300px;
-  li.is-disabled {
-    color: #c0c4cc !important;
-  }
 }
+.el-select-dropdown li.is-disabled {
+  color: #c0c4cc !important;
+}
+
 .el-select__tags {
   overflow: hidden;
 }
+
 .traceback-tab {
   height: 51px;
   line-height: 56px;
   padding: 0 24px;
-  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+
 .traceback-tab-item {
   padding: 0 10px;
   height: 48px;
@@ -1796,20 +1799,24 @@ export default {
   color: #303133;
   position: relative;
 }
+
 .item-active {
   color: #00a5a7;
   font-weight: bold;
-  border-bottom: 3px solid rgba($color: #00a5a7, $alpha: 1);
+  border-bottom: 3px solid #00a5a7;
 }
+
 .traceback-tab-item:hover {
   color: #00a5a7;
   cursor: pointer;
 }
+
 .label-text {
   line-height: 20px !important;
   padding-top: 20px;
   display: block !important;
 }
+
 .remark-tip {
   line-height: 20px !important;
   font-size: 12px;
@@ -1817,39 +1824,49 @@ export default {
   color: gray;
   display: block !important;
 }
+
 .el-color-dropdown__main-wrapper,
 .el-color-dropdown__value,
 .el-color-alpha-slider {
   display: none;
 }
+
 .el-tag.el-tag--info .el-tag__close {
   color: #fff;
 }
+
 .select-inner-input {
   width: calc(100% - 130px);
   min-width: 78px;
   margin: 2px 4px;
   display: inline-block;
 }
+
 .select-input-button {
   position: relative;
 }
+
 .el-select-group__title {
   font-size: 14px;
   font-weight: 700;
 }
+
 .el-select-dropdown__item.selected {
   font-weight: 400;
 }
+
 .checked-color {
   color: #00a5a7 !important;
 }
+
 .el-tag.el-tag--info .el-tag__close {
   display: none;
 }
+
 .btn-disabled {
   cursor: not-allowed !important;
 }
+
 .select-all-button {
   padding: 4px 0;
   display: inline-block;
@@ -1860,6 +1877,7 @@ export default {
   border: none;
   background: none;
 }
+
 .deselect-all-button {
   padding: 4px 0;
   display: inline-block;
@@ -1870,9 +1888,11 @@ export default {
   border: none;
   background: none;
 }
+
 .empty-container {
   padding-top: 6px;
 }
+
 .search-no-data {
   padding: 10px 0;
   margin: 0;
@@ -1887,387 +1907,381 @@ export default {
   overflow-y: auto;
   position: relative;
   background: #fff;
-  .no-data-page {
-    display: flex;
-    width: 100%;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    .set-height-class {
-      height: 282px !important;
-    }
-    .no-data-img {
-      background: #fff;
-      text-align: center;
-      height: 200px;
-      width: 310px;
-      margin: auto;
-      img {
-        max-width: 100%;
-      }
-    }
-    .no-data-text {
-      font-size: 16px;
-      padding-top: 15px;
-      text-align: center;
-    }
-  }
-  .echart-data-list {
-    .dialog-scatter {
-      width: 100%;
-      height: 100%;
-    }
-    .el-dialog__title {
-      font-weight: bold;
-    }
-    .el-dialog__body {
-      height: 500px;
-      padding-top: 0px;
-      margin-bottom: 20px;
-      overflow: auto;
-      .details-data-title {
-        margin-bottom: 20px;
-      }
-    }
-  }
-  .el-table th.gutter {
-    display: table-cell !important;
-  }
-  .icon-border {
-    border: 1px solid #00a5a7 !important;
-  }
-  #tag-dialog {
-    z-index: 999;
-    border: 1px solid #d6c9c9;
-    position: fixed;
-    width: 326px;
-    height: 120px;
-    background-color: #efebeb;
-    right: 106px;
-    border-radius: 4px;
-  }
-  .custom-btn {
-    border: 1px solid #00a5a7;
-    border-radius: 2px;
-    background-color: white;
-    color: #00a5a7;
-  }
-  .custom-btn:hover {
-    color: #00a5a7;
-    background: #e9f7f7;
-  }
-  .disabled-btn-color {
-    border-radius: 2px;
-    background-color: #f5f5f6;
-    border: 1px solid #dfe1e6;
-    color: #adb0b8;
-  }
-  .abled-btn-color {
-    border: 1px solid #00a5a7;
-    color: #00a5a7;
-    background: white;
-  }
-  .abled-btn-color:hover {
-    color: #00a5a7;
-    background: #e9f7f7;
-  }
-  .icon-image {
-    display: inline-block;
-    padding: 4px;
-    height: 30px;
-    width: 30px;
-    border: 1px solid transparent;
-  }
-  .icon-image-container {
-    margin: 16px 10px 18px;
-  }
-  .edit-text-container {
-    display: inline-block;
-    max-width: 190px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: bottom;
-  }
-  .btn-container-margin {
-    margin: 0 10%;
-  }
-  .tag-button-container {
-    display: inline-block;
-    width: 33.3%;
-    text-align: center;
-  }
-  .btns-container {
-    padding: 6px 32px 4px;
-  }
-  .table-container .el-icon-edit {
-    margin-left: 5px;
-  }
-  .table-container i {
-    font-size: 18px;
-    margin: 0 2px;
-    color: #00a5a7;
-    cursor: pointer;
-  }
-  .table-container .el-icon-close {
-    color: #f56c6c;
-  }
-  .table-container .validation-error {
-    color: #ff0000;
-  }
-  .select-container {
-    padding: 10px 0;
-    position: relative;
-    display: flex;
-  }
-  .display-column {
-    display: inline-block;
-    padding-right: 6px;
-    height: 32px;
-    line-height: 32px;
-  }
-  .inline-block-set {
-    display: inline-block;
-  }
-  .remark-input-style {
-    width: 190px;
-  }
-  .tag-icon-container {
-    width: 21px;
-    height: 21px;
-    border: 1px solid #e6e6e6;
-    cursor: pointer;
-    border-radius: 2px;
-  }
-  .button-text {
-    color: #606266 !important;
-  }
-  // left module
-  .cl-model-left {
-    width: 400px;
-    background: #edf0f5;
-    overflow-y: auto;
-    margin: 6px 0px 10px 32px;
-    padding: 10px 16px;
-    .left-chart-container {
-      height: 100%;
-      min-height: 774px;
-    }
-    .left-title {
-      height: 30px;
-      display: flex;
-      .pie-select-style {
-        flex: 1;
-      }
-      .left-select {
-        width: 180px;
-        .el-select > .el-input {
-          width: 180px !important;
-        }
-      }
-    }
-    .title-style {
-      font-size: 16px;
-      flex: 1;
-      font-weight: bold;
-      line-height: 30px;
-      .el-icon-refresh-right {
-        font-size: 20px;
-        vertical-align: middle;
-        cursor: pointer;
-      }
-    }
-
-    .pie-title {
-      margin-right: 110px;
-      height: 20px;
-      line-height: 20px;
-      font-weight: bold;
-    }
-    .title-container {
-      margin-bottom: 10px;
-      display: flex;
-      .tooltip-container {
-        line-height: 20px;
-        padding: 10px;
-      }
-    }
-    .pie-module-container {
-      padding: 10px 0 0px;
-      height: 250px;
-      #pie-chart {
-        width: 368px;
-        height: 200px;
-      }
-    }
-    .bar-module-container {
-      height: 270px;
-      border-bottom: 1px solid #b9bcc1;
-      border-top: 1px solid #b9bcc1;
-      padding: 10px 0;
-      overflow: hidden;
-      .bar-select {
-        display: flex;
-        flex: 1.35;
-        .el-select {
-          max-width: 240px;
-        }
-      }
-      .bar-title-container {
-        display: flex;
-      }
-      .bar-title {
-        font-weight: bold;
-        flex: 1;
-        height: 32px;
-        line-height: 32px;
-      }
-      #bar-chart {
-        width: 368px;
-        height: 220px;
-      }
-    }
-    .scatter-container {
-      height: calc(100% - 20px - 250px - 270px);
-      padding-top: 10px;
-      .scatter-title-container {
-        display: flex;
-        font-weight: bold;
-        flex-direction: row;
-        width: 100%;
-        .right-view {
-          position: relative;
-          flex: 1;
-        }
-        .el-icon-info {
-          font-size: 16px;
-          margin-left: 5px;
-          color: #6c7280;
-        }
-        .view-big {
-          position: absolute;
-          right: 10px;
-          width: 12px;
-          height: 12px;
-          cursor: pointer;
-          background-image: url('../../assets/images/full-screen.png');
-        }
-      }
-    }
-    .left-scatters-container {
-      overflow: hidden;
-      width: 100%;
-      height: calc(100% - 32px);
-    }
-    .collapse-btn {
-      position: absolute;
-      width: 31px;
-      height: 100px;
-      top: 50%;
-      left: 423px;
-      margin-top: -50px;
-      cursor: pointer;
-      line-height: 86px;
-      z-index: 1999;
-      text-align: center;
-      background-image: url('../../assets/images/collapse-left.svg');
-    }
-    .collapse-btn.collapse {
-      left: -10px;
-      background-image: url('../../assets/images/collapse-right.svg');
-    }
-  }
-  .cl-model-right.collapse {
-    width: 100% !important;
-  }
-  .cl-model-left.collapse {
-    width: 0;
-    padding: 0px;
-  }
-  .cl-model-right {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    flex: 1;
-    width: calc(100% - 400px);
-    background-color: #fff;
-    -webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
-    box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
-    overflow: hidden;
-    // select
-    .select-container {
-      .el-select > .el-input {
-        min-width: 280px !important;
-        max-width: 500px !important;
-      }
-    }
-    .top-area {
-      margin: 0px 32px 6px;
-      display: flex;
-      justify-content: flex-end;
-      .select-box {
-        height: 46px;
-        flex-grow: 1;
-        .label-legend {
-          height: 19px;
-          margin-bottom: 4px;
-          display: inline-block;
-          position: absolute;
-          right: 30px;
-          height: 32px;
-          line-height: 32px;
-          div {
-            display: inline-block;
-            font-size: 12px;
-          }
-          div + div {
-            margin-left: 30px;
-          }
-        }
-      }
-    }
-    #echart {
-      height: 31%;
-      padding: 0 12px;
-    }
-    .echart-no-data {
-      height: 31%;
-      padding: 0 12px;
-      width: 100%;
-    }
-    .table-container {
-      background-color: white;
-      height: calc(67% - 78px);
-      padding: 6px 32px 0px;
-      position: relative;
-      .disabled-checked {
-        position: absolute;
-        top: 9px;
-        left: 0px;
-        z-index: 1000;
-        width: 87px;
-        height: 66px;
-        cursor: not-allowed;
-      }
-      .custom-label {
-        max-width: calc(100% - 25px);
-        padding: 0;
-        vertical-align: middle;
-      }
-      a {
-        cursor: pointer;
-      }
-      .el-pagination {
-        float: right;
-        margin-right: 32px;
-        bottom: 10px;
-      }
-      .pagination-container {
-        height: 40px;
-      }
-    }
-  }
 }
+#model-traceback-con .no-data-page {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+#model-traceback-con .no-data-page .set-height-class {
+  height: 282px !important;
+}
+#model-traceback-con .no-data-page .no-data-img {
+  background: #fff;
+  text-align: center;
+  height: 200px;
+  width: 310px;
+  margin: auto;
+}
+#model-traceback-con .no-data-page .no-data-img img {
+  max-width: 100%;
+}
+#model-traceback-con .no-data-page .no-data-text {
+  font-size: 16px;
+  padding-top: 15px;
+  text-align: center;
+}
+#model-traceback-con .echart-data-list .dialog-scatter {
+  width: 100%;
+  height: 100%;
+}
+#model-traceback-con .echart-data-list .el-dialog__title {
+  font-weight: bold;
+}
+#model-traceback-con .echart-data-list .el-dialog__body {
+  height: 500px;
+  padding-top: 0px;
+  margin-bottom: 20px;
+  overflow: auto;
+}
+#model-traceback-con .echart-data-list .el-dialog__body .details-data-title {
+  margin-bottom: 20px;
+}
+#model-traceback-con .el-table th.gutter {
+  display: table-cell !important;
+}
+#model-traceback-con .icon-border {
+  border: 1px solid #00a5a7 !important;
+}
+#model-traceback-con #tag-dialog {
+  z-index: 999;
+  border: 1px solid #d6c9c9;
+  position: fixed;
+  width: 326px;
+  height: 120px;
+  background-color: #efebeb;
+  right: 106px;
+  border-radius: 4px;
+}
+#model-traceback-con .custom-btn {
+  border: 1px solid #00a5a7;
+  border-radius: 2px;
+  background-color: white;
+  color: #00a5a7;
+}
+#model-traceback-con .custom-btn:hover {
+  color: #00a5a7;
+  background: #e9f7f7;
+}
+#model-traceback-con .disabled-btn-color {
+  border-radius: 2px;
+  background-color: #f5f5f6;
+  border: 1px solid #dfe1e6;
+  color: #adb0b8;
+}
+#model-traceback-con .abled-btn-color {
+  border: 1px solid #00a5a7;
+  color: #00a5a7;
+  background: white;
+}
+#model-traceback-con .abled-btn-color:hover {
+  color: #00a5a7;
+  background: #e9f7f7;
+}
+#model-traceback-con .icon-image {
+  display: inline-block;
+  padding: 4px;
+  height: 30px;
+  width: 30px;
+  border: 1px solid transparent;
+}
+#model-traceback-con .icon-image-container {
+  margin: 16px 10px 18px;
+}
+#model-traceback-con .edit-text-container {
+  display: inline-block;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+#model-traceback-con .btn-container-margin {
+  margin: 0 10%;
+}
+#model-traceback-con .tag-button-container {
+  display: inline-block;
+  width: 33.3%;
+  text-align: center;
+}
+#model-traceback-con .btns-container {
+  padding: 6px 32px 4px;
+}
+#model-traceback-con .table-container .el-icon-edit {
+  margin-left: 5px;
+}
+#model-traceback-con .table-container i {
+  font-size: 18px;
+  margin: 0 2px;
+  color: #00a5a7;
+  cursor: pointer;
+}
+#model-traceback-con .table-container .el-icon-close {
+  color: #f56c6c;
+}
+#model-traceback-con .table-container .validation-error {
+  color: #ff0000;
+}
+#model-traceback-con .select-container {
+  padding: 10px 0;
+  position: relative;
+  display: flex;
+}
+#model-traceback-con .display-column {
+  display: inline-block;
+  padding-right: 6px;
+  height: 32px;
+  line-height: 32px;
+}
+#model-traceback-con .inline-block-set {
+  display: inline-block;
+}
+#model-traceback-con .remark-input-style {
+  width: 190px;
+}
+#model-traceback-con .tag-icon-container {
+  width: 21px;
+  height: 21px;
+  border: 1px solid #e6e6e6;
+  cursor: pointer;
+  border-radius: 2px;
+}
+#model-traceback-con .button-text {
+  color: #606266 !important;
+}
+#model-traceback-con .cl-model-left {
+  width: 400px;
+  background: #edf0f5;
+  overflow-y: auto;
+  margin: 6px 0px 10px 32px;
+  padding: 10px 16px;
+}
+#model-traceback-con .cl-model-left .left-chart-container {
+  height: 100%;
+  min-height: 774px;
+}
+#model-traceback-con .cl-model-left .left-title {
+  height: 30px;
+  display: flex;
+}
+#model-traceback-con .cl-model-left .left-title .pie-select-style {
+  flex: 1;
+}
+#model-traceback-con .cl-model-left .left-title .left-select {
+  width: 180px;
+}
+#model-traceback-con .cl-model-left .left-title .left-select .el-select > .el-input {
+  width: 180px !important;
+}
+#model-traceback-con .cl-model-left .title-style {
+  font-size: 16px;
+  flex: 1;
+  font-weight: bold;
+  line-height: 30px;
+}
+#model-traceback-con .cl-model-left .title-style .el-icon-refresh-right {
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+#model-traceback-con .cl-model-left .pie-title {
+  margin-right: 110px;
+  height: 20px;
+  line-height: 20px;
+  font-weight: bold;
+}
+#model-traceback-con .cl-model-left .title-container {
+  margin-bottom: 10px;
+  display: flex;
+}
+#model-traceback-con .cl-model-left .title-container .tooltip-container {
+  line-height: 20px;
+  padding: 10px;
+}
+#model-traceback-con .cl-model-left .pie-module-container {
+  padding: 10px 0 0px;
+  height: 250px;
+}
+#model-traceback-con .cl-model-left .pie-module-container #pie-chart {
+  width: 368px;
+  height: 200px;
+}
+#model-traceback-con .cl-model-left .bar-module-container {
+  height: 270px;
+  border-bottom: 1px solid #b9bcc1;
+  border-top: 1px solid #b9bcc1;
+  padding: 10px 0;
+  overflow: hidden;
+}
+#model-traceback-con .cl-model-left .bar-module-container .bar-select {
+  display: flex;
+  flex: 1.35;
+}
+#model-traceback-con .cl-model-left .bar-module-container .bar-select .el-select {
+  max-width: 240px;
+}
+#model-traceback-con .cl-model-left .bar-module-container .bar-title-container {
+  display: flex;
+}
+#model-traceback-con .cl-model-left .bar-module-container .bar-title {
+  font-weight: bold;
+  flex: 1;
+  height: 32px;
+  line-height: 32px;
+}
+#model-traceback-con .cl-model-left .bar-module-container #bar-chart {
+  width: 368px;
+  height: 220px;
+}
+#model-traceback-con .cl-model-left .scatter-container {
+  height: calc(100% - 20px - 250px - 270px);
+  padding-top: 10px;
+}
+#model-traceback-con .cl-model-left .scatter-container .scatter-title-container {
+  display: flex;
+  font-weight: bold;
+  flex-direction: row;
+  width: 100%;
+}
+#model-traceback-con .cl-model-left .scatter-container .scatter-title-container .right-view {
+  position: relative;
+  flex: 1;
+}
+#model-traceback-con .cl-model-left .scatter-container .scatter-title-container .el-icon-info {
+  font-size: 16px;
+  margin-left: 5px;
+  color: #6c7280;
+}
+#model-traceback-con .cl-model-left .scatter-container .scatter-title-container .view-big {
+  position: absolute;
+  right: 10px;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  background-image: url("../../assets/images/full-screen.png");
+}
+#model-traceback-con .cl-model-left .left-scatters-container {
+  overflow: hidden;
+  width: 100%;
+  height: calc(100% - 32px);
+}
+#model-traceback-con .cl-model-left .collapse-btn {
+  position: absolute;
+  width: 31px;
+  height: 100px;
+  top: 50%;
+  left: 423px;
+  margin-top: -50px;
+  cursor: pointer;
+  line-height: 86px;
+  z-index: 1999;
+  text-align: center;
+  background-image: url("../../assets/images/collapse-left.svg");
+}
+#model-traceback-con .cl-model-left .collapse-btn.collapse {
+  left: -10px;
+  background-image: url("../../assets/images/collapse-right.svg");
+}
+#model-traceback-con .cl-model-right.collapse {
+  width: 100% !important;
+}
+#model-traceback-con .cl-model-left.collapse {
+  width: 0;
+  padding: 0px;
+}
+#model-traceback-con .cl-model-right {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  width: calc(100% - 400px);
+  background-color: #fff;
+  -webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
+  box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
+  overflow: hidden;
+}
+#model-traceback-con .cl-model-right .select-container .el-select > .el-input {
+  min-width: 280px !important;
+  max-width: 500px !important;
+}
+#model-traceback-con .cl-model-right .top-area {
+  margin: 0px 32px 6px;
+  display: flex;
+  justify-content: flex-end;
+}
+#model-traceback-con .cl-model-right .top-area .select-box {
+  height: 46px;
+  flex-grow: 1;
+}
+#model-traceback-con .cl-model-right .top-area .select-box .label-legend {
+  height: 19px;
+  margin-bottom: 4px;
+  display: inline-block;
+  position: absolute;
+  right: 30px;
+  height: 32px;
+  line-height: 32px;
+}
+#model-traceback-con .cl-model-right .top-area .select-box .label-legend div {
+  display: inline-block;
+  font-size: 12px;
+}
+#model-traceback-con .cl-model-right .top-area .select-box .label-legend div + div {
+  margin-left: 30px;
+}
+#model-traceback-con .cl-model-right #echart {
+  height: 31%;
+  padding: 0 12px;
+}
+#model-traceback-con .cl-model-right .echart-no-data {
+  height: 31%;
+  padding: 0 12px;
+  width: 100%;
+}
+#model-traceback-con .cl-model-right .table-container {
+  background-color: white;
+  height: calc(67% - 78px);
+  padding: 6px 32px 0px;
+  position: relative;
+}
+#model-traceback-con .cl-model-right .table-container .disabled-checked {
+  position: absolute;
+  top: 9px;
+  left: 0px;
+  z-index: 1000;
+  width: 87px;
+  height: 66px;
+  cursor: not-allowed;
+}
+#model-traceback-con .cl-model-right .table-container .custom-label {
+  max-width: calc(100% - 25px);
+  padding: 0;
+  vertical-align: middle;
+}
+#model-traceback-con .cl-model-right .table-container a {
+  cursor: pointer;
+}
+#model-traceback-con .cl-model-right .table-container .el-pagination {
+  float: right;
+  margin-right: 32px;
+  bottom: 10px;
+}
+#model-traceback-con .cl-model-right .table-container .pagination-container {
+  height: 40px;
+}
+
 .tooltip-msg {
   white-space: normal;
   word-break: break-all;
diff --git a/mindinsight/ui/src/views/train-manage/scalar-button.vue b/mindinsight/ui/src/views/train-manage/scalar-button.vue
index a41318ff..3c0e62c2 100644
--- a/mindinsight/ui/src/views/train-manage/scalar-button.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar-button.vue
@@ -56,5 +56,5 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/scalar-compare.vue b/mindinsight/ui/src/views/train-manage/scalar-compare.vue
index 4718bfd1..f4278c61 100644
--- a/mindinsight/ui/src/views/train-manage/scalar-compare.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar-compare.vue
@@ -1050,17 +1050,19 @@ export default {
   components: {},
 };
 </script>
-<style lang="scss">
+<style>
 .compareFlex {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
+
 .data-contentCompare {
   width: 100%;
   background: #fff;
 }
+
 .data-contentCompare-title {
   padding-top: 32px;
   padding-left: 32px;
@@ -1071,29 +1073,28 @@ export default {
 
 .data-contentCompare-content {
   padding: 0 32px;
-
-  .data-contentCompare-tagName {
-    height: 22px;
-    font-size: 14px;
-    color: #333;
-    z-index: 999;
-    line-height: 22px;
-    display: flex;
-    margin-top: 36px;
-    font-weight: 600;
-    .tagNameLeft {
-      text-align: left;
-      width: 49%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .tagNameRight {
-      text-align: right;
-    }
-  }
-  .data-contentCompare-chart {
-    height: 570px;
-    margin-top: -36px;
-  }
+}
+.data-contentCompare-content .data-contentCompare-tagName {
+  height: 22px;
+  font-size: 14px;
+  color: #333;
+  z-index: 999;
+  line-height: 22px;
+  display: flex;
+  margin-top: 36px;
+  font-weight: 600;
+}
+.data-contentCompare-content .data-contentCompare-tagName .tagNameLeft {
+  text-align: left;
+  width: 49%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.data-contentCompare-content .data-contentCompare-tagName .tagNameRight {
+  text-align: right;
+}
+.data-contentCompare-content .data-contentCompare-chart {
+  height: 570px;
+  margin-top: -36px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/scalar.vue b/mindinsight/ui/src/views/train-manage/scalar.vue
index d184f7c7..edd3dcf8 100644
--- a/mindinsight/ui/src/views/train-manage/scalar.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar.vue
@@ -1665,397 +1665,357 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-scalar-manage {
   height: 100%;
-
-  .el-dialog {
-    border-radius: 4px;
-  }
-
-  .el-dialog__header {
-    padding: 15px 15px 10px;
-    font-size: 14px;
-
-    .el-dialog__title {
-      font-size: 14px;
-    }
-  }
-
-  .el-dialog__body {
-    padding: 10px 15px;
-  }
-
-  .el-dialog__footer {
-    padding: 5px 15px 10px;
-  }
-
-  .w60 {
-    width: 60px;
-    margin-left: 20px;
-  }
-
-  .w261 {
-    width: 261px;
-  }
-
-  .smallSelect {
-    width: 80px;
-  }
-
-  .smallSelectTwo {
-    width: 100px;
-  }
-
-  .smallInput {
-    width: 120px;
-  }
-
-  .scalar-btn {
-    height: 32px;
-    line-height: 32px;
-    padding: 0 20px;
-    color: #00a5a7;
-    border: 1px solid #00a5a7;
-    border-radius: 2px;
-  }
-
-  .borderspacing3 {
-    border-spacing: 3px;
-  }
-  .scalar-bk {
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    .path-message {
-      display: inline-block;
-      line-height: 20px;
-      padding: 0px 4px 15px 4px;
-      font-weight: bold;
-      vertical-align: bottom;
-    }
-    .cl-scalar-title {
-      height: 56px;
-      line-height: 56px;
-    }
-  }
-
-  .select-all {
-    flex-shrink: 0;
-    cursor: pointer;
-  }
-  .cl-eval-operate-content {
-    width: 100%;
-    padding: 8px 32px 22px 32px;
-    background: #ffffff;
-    .tag-select-content {
-      display: flex;
-      align-items: center;
-
-      .title {
-        flex-shrink: 0;
-      }
-
-      .select-item-content {
-        display: flex;
-        height: 16px;
-        flex-wrap: wrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .run-select-content-open {
-        flex: 1;
-        text-align: right;
-        font-size: 14px;
-        color: #00a5a7;
-        cursor: pointer;
-        min-width: 60px;
-      }
-    }
-    .run-select-content-all {
-      max-height: 150px;
-      padding-left: 72px;
-      overflow-x: hidden;
-      display: flex;
-      flex-wrap: wrap;
-
-      .label-item {
-        line-height: 14px;
-      }
-
-      .select-item {
-        height: 25px;
-        margin-top: 25px;
-      }
-    }
-
-    .select-item {
-      margin-right: 20px;
-      flex-shrink: 0;
-      margin-bottom: 1px;
-      cursor: pointer;
-      .label-item {
-        width: 100px;
-        display: block;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        text-align: left;
-      }
-    }
-    .multiCheckBox-border {
-      width: 16px;
-      height: 16px;
-      display: block;
-      margin-right: 20px;
-      cursor: pointer;
-      float: left;
-    }
-    .checkbox-checked {
-      background-image: url('../../assets/images/mult-select.png');
-    }
-    .checkbox-unchecked {
-      background-image: url('../../assets/images/mult-unselect.png');
-    }
-
-    .checkbox-disabled {
-      opacity: 0.2;
-    }
-    .label-item {
-      font-size: 14px;
-      line-height: 14px;
-      vertical-align: middle;
-      .el-tooltip {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        text-align: left;
-        height: 16px;
-      }
-      span {
-        font-size: 14px;
-        line-height: 14px;
-        display: block;
-      }
-    }
-  }
-  .cl-eval-slider-operate-content {
-    background: #ffffff;
-    padding: 0 32px 21px 32px;
-    display: flex;
-    align-items: center;
-    border-bottom: 2px solid #e6ebf5;
-
-    .xaxis-title {
-      font-size: 14px;
-      line-height: 14px;
-      vertical-align: middle;
-      margin-right: 16px;
-      flex-shrink: 0;
-    }
-
-    .el-radio-group {
-      margin-right: 64px;
-      flex-shrink: 0;
-    }
-
-    .el-select {
-      width: 163px;
-      margin-right: 16px;
-      flex-shrink: 0;
-    }
-    .el-slider {
-      width: 400px;
-      flex-shrink: 0;
-
-      .el-input.el-input--small {
-        width: 60px;
-      }
-
-      .el-input-number .el-input__inner {
-        padding-left: 0px;
-        padding-right: 0px;
-      }
-
-      .el-input-number--small .el-input-number__increase {
-        display: none;
-      }
-      .el-input-number--small .el-input-number__decrease {
-        display: none;
-      }
-    }
-  }
-  .cl-eval-show-data-content {
-    background: #fff;
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-wrap: wrap;
-    padding-right: 10px;
-
-    .data-content {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-wrap: wrap;
-      min-height: 400px;
-      padding-left: 20px;
-
-      .sample-content {
-        width: 33.3%;
-        height: 400px;
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        padding-right: 20px;
-        margin-top: 20px;
-      }
-
-      .char-full-screen {
-        width: 100%;
-        height: 400px;
-      }
-    }
-
-    .chars-container {
-      flex: 1;
-      position: relative;
-      background-color: #edf0f5;
-      padding: 5px;
-    }
-
-    .chartThreshold {
-      height: 40px;
-      background-color: #edf0f5;
-      border-top: 1px solid #fff;
-      display: flex;
-      line-height: 40px;
-
-      .chartThresholdLeft {
-        flex: 1;
-        text-align: left;
-        padding-left: 5px;
-        font-size: 14px;
-        color: #6c7280;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .chartThresholdRight {
-        width: 120px;
-        text-align: right;
-        padding-right: 10px;
-        font-size: 12px;
-        color: #00a5a7;
-        flex-shrink: 0;
-
-        span {
-          cursor: pointer;
-          width: auto;
-          height: 39px;
-          display: inline-block;
-        }
-      }
-    }
-    .tag-name {
-      color: #333;
-      font-size: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-weight: 600;
-      text-align: center;
-      margin-top: 10px;
-
-      i {
-        color: #e6a23c;
-      }
-    }
-    .char-item-content {
-      width: 100%;
-      height: 100%;
-      background-color: #fff;
-    }
-
-    .char-tip-table {
-      td {
-        padding-left: 5px;
-        padding-right: 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 150px;
-        overflow: hidden;
-      }
-    }
-    .image-noData {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-    .noData-text {
-      margin-top: 33px;
-      font-size: 18px;
-    }
-  }
-
-  .pagination-content {
-    text-align: right;
-    padding: 24px 32px;
-  }
-
-  .mr24 {
-    margin-right: 24px;
-  }
-  .select-disable {
-    -moz-user-select: none; /*Firefox*/
-    -webkit-user-select: none; /*Webkit*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none;
-    user-select: none;
-  }
-  .cl-close-btn {
-    width: 20px;
-    height: 20px;
-    vertical-align: -3px;
-    cursor: pointer;
-    display: inline-block;
-    line-height: 20px;
-    margin-left: 32px;
-  }
-
-  .thresholdAll {
-    display: flex;
-    line-height: 32px;
-    margin-bottom: 10px;
-
-    .thresholdItem {
-      margin-right: 10px;
-    }
-
-    .thresholdItemWidth {
-      width: 500px;
-      height: 32px;
-      margin-right: 10px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .thresholdError {
-    color: #f56c6c;
-    text-align: center;
-  }
-
-  .fs16 {
-    font-size: 14px;
-    color: #6c7280;
-    width: 180px;
-  }
 }
+.cl-scalar-manage .el-dialog {
+  border-radius: 4px;
+}
+.cl-scalar-manage .el-dialog__header {
+  padding: 15px 15px 10px;
+  font-size: 14px;
+}
+.cl-scalar-manage .el-dialog__header .el-dialog__title {
+  font-size: 14px;
+}
+.cl-scalar-manage .el-dialog__body {
+  padding: 10px 15px;
+}
+.cl-scalar-manage .el-dialog__footer {
+  padding: 5px 15px 10px;
+}
+.cl-scalar-manage .w60 {
+  width: 60px;
+  margin-left: 20px;
+}
+.cl-scalar-manage .w261 {
+  width: 261px;
+}
+.cl-scalar-manage .smallSelect {
+  width: 80px;
+}
+.cl-scalar-manage .smallSelectTwo {
+  width: 100px;
+}
+.cl-scalar-manage .smallInput {
+  width: 120px;
+}
+.cl-scalar-manage .scalar-btn {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 20px;
+  color: #00a5a7;
+  border: 1px solid #00a5a7;
+  border-radius: 2px;
+}
+.cl-scalar-manage .borderspacing3 {
+  border-spacing: 3px;
+}
+.cl-scalar-manage .scalar-bk {
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.cl-scalar-manage .scalar-bk .path-message {
+  display: inline-block;
+  line-height: 20px;
+  padding: 0px 4px 15px 4px;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+.cl-scalar-manage .scalar-bk .cl-scalar-title {
+  height: 56px;
+  line-height: 56px;
+}
+.cl-scalar-manage .select-all {
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.cl-scalar-manage .cl-eval-operate-content {
+  width: 100%;
+  padding: 8px 32px 22px 32px;
+  background: #ffffff;
+}
+.cl-scalar-manage .cl-eval-operate-content .tag-select-content {
+  display: flex;
+  align-items: center;
+}
+.cl-scalar-manage .cl-eval-operate-content .tag-select-content .title {
+  flex-shrink: 0;
+}
+.cl-scalar-manage .cl-eval-operate-content .tag-select-content .select-item-content {
+  display: flex;
+  height: 16px;
+  flex-wrap: wrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cl-scalar-manage .cl-eval-operate-content .tag-select-content .run-select-content-open {
+  flex: 1;
+  text-align: right;
+  font-size: 14px;
+  color: #00a5a7;
+  cursor: pointer;
+  min-width: 60px;
+}
+.cl-scalar-manage .cl-eval-operate-content .run-select-content-all {
+  max-height: 150px;
+  padding-left: 72px;
+  overflow-x: hidden;
+  display: flex;
+  flex-wrap: wrap;
+}
+.cl-scalar-manage .cl-eval-operate-content .run-select-content-all .label-item {
+  line-height: 14px;
+}
+.cl-scalar-manage .cl-eval-operate-content .run-select-content-all .select-item {
+  height: 25px;
+  margin-top: 25px;
+}
+.cl-scalar-manage .cl-eval-operate-content .select-item {
+  margin-right: 20px;
+  flex-shrink: 0;
+  margin-bottom: 1px;
+  cursor: pointer;
+}
+.cl-scalar-manage .cl-eval-operate-content .select-item .label-item {
+  width: 100px;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+}
+.cl-scalar-manage .cl-eval-operate-content .multiCheckBox-border {
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin-right: 20px;
+  cursor: pointer;
+  float: left;
+}
+.cl-scalar-manage .cl-eval-operate-content .checkbox-checked {
+  background-image: url("../../assets/images/mult-select.png");
+}
+.cl-scalar-manage .cl-eval-operate-content .checkbox-unchecked {
+  background-image: url("../../assets/images/mult-unselect.png");
+}
+.cl-scalar-manage .cl-eval-operate-content .checkbox-disabled {
+  opacity: 0.2;
+}
+.cl-scalar-manage .cl-eval-operate-content .label-item {
+  font-size: 14px;
+  line-height: 14px;
+  vertical-align: middle;
+}
+.cl-scalar-manage .cl-eval-operate-content .label-item .el-tooltip {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+  height: 16px;
+}
+.cl-scalar-manage .cl-eval-operate-content .label-item span {
+  font-size: 14px;
+  line-height: 14px;
+  display: block;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content {
+  background: #ffffff;
+  padding: 0 32px 21px 32px;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #e6ebf5;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .xaxis-title {
+  font-size: 14px;
+  line-height: 14px;
+  vertical-align: middle;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .el-radio-group {
+  margin-right: 64px;
+  flex-shrink: 0;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .el-select {
+  width: 163px;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .el-slider {
+  width: 400px;
+  flex-shrink: 0;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .el-slider .el-input.el-input--small {
+  width: 60px;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .el-slider .el-input-number .el-input__inner {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .el-slider .el-input-number--small .el-input-number__increase {
+  display: none;
+}
+.cl-scalar-manage .cl-eval-slider-operate-content .el-slider .el-input-number--small .el-input-number__decrease {
+  display: none;
+}
+.cl-scalar-manage .cl-eval-show-data-content {
+  background: #fff;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  padding-right: 10px;
+}
+.cl-scalar-manage .cl-eval-show-data-content .data-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-wrap: wrap;
+  min-height: 400px;
+  padding-left: 20px;
+}
+.cl-scalar-manage .cl-eval-show-data-content .data-content .sample-content {
+  width: 33.3%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  padding-right: 20px;
+  margin-top: 20px;
+}
+.cl-scalar-manage .cl-eval-show-data-content .data-content .char-full-screen {
+  width: 100%;
+  height: 400px;
+}
+.cl-scalar-manage .cl-eval-show-data-content .chars-container {
+  flex: 1;
+  position: relative;
+  background-color: #edf0f5;
+  padding: 5px;
+}
+.cl-scalar-manage .cl-eval-show-data-content .chartThreshold {
+  height: 40px;
+  background-color: #edf0f5;
+  border-top: 1px solid #fff;
+  display: flex;
+  line-height: 40px;
+}
+.cl-scalar-manage .cl-eval-show-data-content .chartThreshold .chartThresholdLeft {
+  flex: 1;
+  text-align: left;
+  padding-left: 5px;
+  font-size: 14px;
+  color: #6c7280;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cl-scalar-manage .cl-eval-show-data-content .chartThreshold .chartThresholdRight {
+  width: 120px;
+  text-align: right;
+  padding-right: 10px;
+  font-size: 12px;
+  color: #00a5a7;
+  flex-shrink: 0;
+}
+.cl-scalar-manage .cl-eval-show-data-content .chartThreshold .chartThresholdRight span {
+  cursor: pointer;
+  width: auto;
+  height: 39px;
+  display: inline-block;
+}
+.cl-scalar-manage .cl-eval-show-data-content .tag-name {
+  color: #333;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  text-align: center;
+  margin-top: 10px;
+}
+.cl-scalar-manage .cl-eval-show-data-content .tag-name i {
+  color: #e6a23c;
+}
+.cl-scalar-manage .cl-eval-show-data-content .char-item-content {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.cl-scalar-manage .cl-eval-show-data-content .char-tip-table td {
+  padding-left: 5px;
+  padding-right: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 150px;
+  overflow: hidden;
+}
+.cl-scalar-manage .cl-eval-show-data-content .image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-scalar-manage .cl-eval-show-data-content .noData-text {
+  margin-top: 33px;
+  font-size: 18px;
+}
+.cl-scalar-manage .pagination-content {
+  text-align: right;
+  padding: 24px 32px;
+}
+.cl-scalar-manage .mr24 {
+  margin-right: 24px;
+}
+.cl-scalar-manage .select-disable {
+  -moz-user-select: none;
+  /*Firefox*/
+  -webkit-user-select: none;
+  /*Webkit*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  user-select: none;
+}
+.cl-scalar-manage .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 20px;
+  margin-left: 32px;
+}
+.cl-scalar-manage .thresholdAll {
+  display: flex;
+  line-height: 32px;
+  margin-bottom: 10px;
+}
+.cl-scalar-manage .thresholdAll .thresholdItem {
+  margin-right: 10px;
+}
+.cl-scalar-manage .thresholdAll .thresholdItemWidth {
+  width: 500px;
+  height: 32px;
+  margin-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cl-scalar-manage .thresholdError {
+  color: #f56c6c;
+  text-align: center;
+}
+.cl-scalar-manage .fs16 {
+  font-size: 14px;
+  color: #6c7280;
+  width: 180px;
+}
+
 .tooltip-show-content {
   max-width: 50%;
 }
diff --git a/mindinsight/ui/src/views/train-manage/summary-manage.vue b/mindinsight/ui/src/views/train-manage/summary-manage.vue
index f3f86afd..c21f90d7 100644
--- a/mindinsight/ui/src/views/train-manage/summary-manage.vue
+++ b/mindinsight/ui/src/views/train-manage/summary-manage.vue
@@ -502,207 +502,203 @@ export default {
   components: {},
 };
 </script>
-<style lang="scss">
+<style>
 #cl-summary-manage {
   height: 100%;
   width: 100%;
   background-color: #fff;
-  .no-data-page {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .no-data-img {
-      background: #fff;
-      text-align: center;
-      height: 200px;
-      width: 310px;
-      margin: auto;
-      img {
-        max-width: 100%;
-      }
-      p {
-        font-size: 16px;
-        padding-top: 10px;
-      }
-    }
-  }
-  .cl-summary-manage-container {
-    height: 100%;
-    padding: 14px 32px 32px;
-  }
-  .cl-title {
-    border: none;
-    height: 55px;
-    line-height: 75px;
-  }
-  .cl-title-left {
-    padding-left: 0;
-    height: 55px;
-    line-height: 55px;
-    .btn-wrap {
-      float: right;
-    }
-  }
-  .summary-title {
-    font-size: 20px;
-    font-weight: bold;
-    margin-right: 15px;
-  }
-  .summary-subtitle {
-    margin-left: 20px;
-  }
-  .container {
-    height: calc(100% - 97px);
-    overflow-y: auto;
-    .list-table {
-      height: 100%;
-      .operate-container {
-        padding-right: 32px;
-      }
-    }
-  }
-  .pagination-content {
-    margin-top: 16px;
-    text-align: right;
-  }
-  .operate-btn {
-    margin-left: 20px;
-    padding: 12px 0;
-  }
-  .el-dialog {
-    min-width: 500px;
-    padding-bottom: 30px;
-  }
-  .operate-btn.button-disable {
-    -moz-user-select: none; /*Firefox*/
-    -webkit-user-select: none; /*webkitbrowser*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*Early browser*/
-    user-select: none;
-    color: rgb(192, 196, 204);
-    cursor: not-allowed;
-  }
-  .menu-item {
-    color: #00a5a7;
-    cursor: pointer;
-  }
-  .menu-item.operate-btn.first-btn {
-    margin-left: 0;
-  }
-  #contextMenu {
-    position: absolute;
-    min-width: 150px;
-    border: 1px solid #d4d4d4;
-    ul {
-      background-color: #f7faff;
-      border-radius: 2px;
-      li {
-        padding: 5px 18px;
-        cursor: pointer;
-        &:hover {
-          background-color: rgb(167, 167, 167);
-          color: white;
-        }
-      }
-    }
-  }
-  .details-data-list {
-    .el-table td,
-    .el-table th.is-leaf {
-      border: none;
-      border-top: 1px solid #ebeef5;
-    }
-    .el-table {
-      th {
-        padding: 10px 0;
-        border-top: 1px solid #ebeef5;
-        .cell {
-          border-left: 1px solid #d9d8dd;
-          height: 14px;
-          line-height: 14px;
-        }
-      }
-      th:first-child {
-        .cell {
-          border-left: none;
-        }
-      }
-      th:nth-child(2),
-      td:nth-child(2) {
-        max-width: 30%;
-      }
-      td {
-        padding: 8px 0;
-      }
-    }
-    .el-table__row--level-0 td:first-child:after {
-      width: 20px;
-      height: 1px;
-      background: #ebeef5;
-      z-index: 11;
-      position: absolute;
-      left: 0;
-      bottom: -1px;
-      content: '';
-      display: block;
-    }
-    .el-table__row--level-1 {
-      td {
-        padding: 4px 0;
-        position: relative;
-      }
-      td:first-child::before {
-        width: 42px;
-        background: #f0fdfd;
-        border-right: 2px #00a5a7 solid;
-        z-index: 10;
-        position: absolute;
-        left: 0;
-        top: -1px;
-        bottom: 0px;
-        content: '';
-        display: block;
-      }
-    }
-
-    .el-table__row--level-1:first-child {
-      td:first-child::before {
-        bottom: 0;
-      }
-    }
-    .el-dialog__title {
-      font-weight: bold;
-    }
-    .el-dialog__body {
-      max-height: 500px;
-      padding-top: 10px;
-      padding-bottom: 0px;
-      overflow: auto;
-      .details-data-title {
-        margin-bottom: 20px;
-      }
-    }
-  }
-  .is-disabled.custom-btn {
-    background-color: #f5f5f6;
-    border: 1px solid #dfe1e6 !important;
-    color: #adb0b8;
-    &:hover {
-      background-color: #f5f5f6;
-    }
-  }
-  .custom-btn {
-    border: 1px solid #00a5a7;
-    border-radius: 2px;
-  }
-  .white {
-    background-color: white;
-    color: #00a5a7;
-  }
-  .white:hover {
-    background-color: #e9f7f7;
-  }
+}
+#cl-summary-manage .no-data-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#cl-summary-manage .no-data-page .no-data-img {
+  background: #fff;
+  text-align: center;
+  height: 200px;
+  width: 310px;
+  margin: auto;
+}
+#cl-summary-manage .no-data-page .no-data-img img {
+  max-width: 100%;
+}
+#cl-summary-manage .no-data-page .no-data-img p {
+  font-size: 16px;
+  padding-top: 10px;
+}
+#cl-summary-manage .cl-summary-manage-container {
+  height: 100%;
+  padding: 14px 32px 32px;
+}
+#cl-summary-manage .cl-title {
+  border: none;
+  height: 55px;
+  line-height: 75px;
+}
+#cl-summary-manage .cl-title-left {
+  padding-left: 0;
+  height: 55px;
+  line-height: 55px;
+}
+#cl-summary-manage .cl-title-left .btn-wrap {
+  float: right;
+}
+#cl-summary-manage .summary-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-right: 15px;
+}
+#cl-summary-manage .summary-subtitle {
+  margin-left: 20px;
+}
+#cl-summary-manage .container {
+  height: calc(100% - 97px);
+  overflow-y: auto;
+}
+#cl-summary-manage .container .list-table {
+  height: 100%;
+}
+#cl-summary-manage .container .list-table .operate-container {
+  padding-right: 32px;
+}
+#cl-summary-manage .pagination-content {
+  margin-top: 16px;
+  text-align: right;
+}
+#cl-summary-manage .operate-btn {
+  margin-left: 20px;
+  padding: 12px 0;
+}
+#cl-summary-manage .el-dialog {
+  min-width: 500px;
+  padding-bottom: 30px;
+}
+#cl-summary-manage .operate-btn.button-disable {
+  -moz-user-select: none;
+  /*Firefox*/
+  -webkit-user-select: none;
+  /*webkitbrowser*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*Early browser*/
+  user-select: none;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+#cl-summary-manage .menu-item {
+  color: #00a5a7;
+  cursor: pointer;
+}
+#cl-summary-manage .menu-item.operate-btn.first-btn {
+  margin-left: 0;
+}
+#cl-summary-manage #contextMenu {
+  position: absolute;
+  min-width: 150px;
+  border: 1px solid #d4d4d4;
+}
+#cl-summary-manage #contextMenu ul {
+  background-color: #f7faff;
+  border-radius: 2px;
+}
+#cl-summary-manage #contextMenu ul li {
+  padding: 5px 18px;
+  cursor: pointer;
+}
+#cl-summary-manage #contextMenu ul li:hover {
+  background-color: #a7a7a7;
+  color: white;
+}
+#cl-summary-manage .details-data-list .el-table td,
+#cl-summary-manage .details-data-list .el-table th.is-leaf {
+  border: none;
+  border-top: 1px solid #ebeef5;
+}
+#cl-summary-manage .details-data-list .el-table th {
+  padding: 10px 0;
+  border-top: 1px solid #ebeef5;
+}
+#cl-summary-manage .details-data-list .el-table th .cell {
+  border-left: 1px solid #d9d8dd;
+  height: 14px;
+  line-height: 14px;
+}
+#cl-summary-manage .details-data-list .el-table th:first-child .cell {
+  border-left: none;
+}
+#cl-summary-manage .details-data-list .el-table th:nth-child(2),
+#cl-summary-manage .details-data-list .el-table td:nth-child(2) {
+  max-width: 30%;
+}
+#cl-summary-manage .details-data-list .el-table td {
+  padding: 8px 0;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-0 td:first-child:after {
+  width: 20px;
+  height: 1px;
+  background: #ebeef5;
+  z-index: 11;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  content: "";
+  display: block;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-1 td {
+  padding: 4px 0;
+  position: relative;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-1 td:first-child::before {
+  width: 42px;
+  background: #f0fdfd;
+  border-right: 2px #00a5a7 solid;
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  bottom: 0px;
+  content: "";
+  display: block;
+}
+#cl-summary-manage .details-data-list .el-table__row--level-1:first-child td:first-child::before {
+  bottom: 0;
+}
+#cl-summary-manage .details-data-list .el-dialog__title {
+  font-weight: bold;
+  display: inline-block;
+  width: calc(100% - 20px);
+  word-break: break-all;
+}
+#cl-summary-manage .details-data-list .el-dialog__body {
+  max-height: 500px;
+  padding-top: 10px;
+  padding-bottom: 0px;
+  overflow: auto;
+}
+#cl-summary-manage .details-data-list .el-dialog__body .details-data-title {
+  margin-bottom: 20px;
+}
+#cl-summary-manage .is-disabled.custom-btn {
+  background-color: #f5f5f6;
+  border: 1px solid #dfe1e6 !important;
+  color: #adb0b8;
+}
+#cl-summary-manage .is-disabled.custom-btn:hover {
+  background-color: #f5f5f6;
+}
+#cl-summary-manage .custom-btn {
+  border: 1px solid #00a5a7;
+  border-radius: 2px;
+}
+#cl-summary-manage .white {
+  background-color: white;
+  color: #00a5a7;
+}
+#cl-summary-manage .white:hover {
+  background-color: #e9f7f7;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/tensor.vue b/mindinsight/ui/src/views/train-manage/tensor.vue
index a35ca452..6b34d9da 100644
--- a/mindinsight/ui/src/views/train-manage/tensor.vue
+++ b/mindinsight/ui/src/views/train-manage/tensor.vue
@@ -1030,209 +1030,204 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style>
 .cl-tensor-manage {
   height: 100%;
-  .tensor-bk {
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    .cl-tensor-title {
-      height: 56px;
-      line-height: 56px;
-      .path-message {
-        display: inline-block;
-        line-height: 20px;
-        padding: 0px 4px 15px 4px;
-        font-weight: bold;
-        vertical-align: bottom;
-      }
-      .cl-close-btn {
-        width: 20px;
-        height: 20px;
-        vertical-align: -3px;
-        cursor: pointer;
-        display: inline-block;
-      }
-    }
-    .cl-tensor-operate-content {
-      width: 100%;
-      padding: 8px 32px 22px 32px;
-      background: #ffffff;
-    }
-    .cl-tensor-view-type-select-content {
-      background: #ffffff;
-      padding: 0 32px 21px 32px;
-      height: 58px;
-      display: flex;
-      align-items: center;
-      border-bottom: 2px solid #e6ebf5;
-      .view-title {
-        font-size: 14px;
-        line-height: 14px;
-        vertical-align: middle;
-        margin-right: 16px;
-        flex-shrink: 0;
-      }
-      .el-radio-group {
-        margin-right: 64px;
-        flex-shrink: 0;
-      }
-    }
-    .cl-show-data-content {
-      background: #ffffff;
-      padding: 0 23px;
-      flex: 1;
-      overflow: auto;
-      .data-content {
-        display: flex;
-        height: 100%;
-        width: 100%;
-        flex-wrap: wrap;
-        min-height: 400px;
-        position: relative;
-        .sample-content {
-          width: 33.3%;
-          height: 600px;
-          display: flex;
-          flex-direction: column;
-          flex-shrink: 0;
-          background-color: #fff;
-          position: relative;
-          padding: 32px 9px 0 9px;
-        }
-        .char-full-screen {
-          width: 100%;
-          height: 600px;
-        }
-        .chars-container {
-          flex: 1;
-          padding: 10px 15px 0 15px;
-          position: relative;
-          background: #f0f3fa;
-          overflow-x: hidden;
-          .loading-cover {
-            width: 100%;
-            height: 100%;
-            z-index: 9;
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            background: white;
-            opacity: 0.5;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-        .sample-data-show {
-          padding: 32px 16px;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-          background-color: #f0f3fa;
-          margin-top: 1px;
-          .tensor-demension,
-          .tensor-type {
-            font-size: 14px;
-            line-height: 20px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            span {
-              color: #00a5a7;
-            }
-          }
-          .sample-operate-info {
-            width: 100%;
-            min-height: 24px;
-            vertical-align: middle;
-            line-height: 20px;
-            margin-top: 24px;
-            color: #000000;
-            position: relative;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            span {
-              max-width: 100%;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              overflow: hidden;
-            }
-            .step-info {
-              left: 0;
-              font-size: 14px;
-            }
-            .time-info {
-              right: 0;
-              float: right;
-              font-size: 14px;
-            }
-          }
-          .step-slider {
-            margin-top: 10px;
-          }
-        }
-        .tag-title {
-          margin-top: 10px;
-          width: 100%;
-          font-size: 16px;
-          font-weight: 600;
-          text-align: center;
-        }
-      }
-    }
-    .pagination-content {
-      padding: 24px 32px;
-      text-align: right;
-    }
-    // No data available.
-    .image-noData {
-      // Set the width and white on the right.
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-  }
-  .content {
-    position: relative;
-  }
-
-  #echart {
-    width: 500px;
-    height: 500px;
-    border: 1px solid black;
-    position: relative;
-  }
-
-  #echartTip {
-    position: absolute;
-    padding: 5px;
-    z-index: 9999;
-    font-size: 14px;
-    font-family: 'Microsoft YaHei';
-    background-color: rgba(50, 50, 50, 0.7);
-    border: 0;
-    border-radius: 4px;
-    color: #fff;
-  }
-
-  .char-tip-table td {
-    padding-left: 5px;
-    padding-right: 5px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 150px;
-    overflow: hidden;
-  }
-
-  .borderspacing3 {
-    border-spacing: 3px;
-  }
+}
+.cl-tensor-manage .tensor-bk {
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.cl-tensor-manage .tensor-bk .cl-tensor-title {
+  height: 56px;
+  line-height: 56px;
+}
+.cl-tensor-manage .tensor-bk .cl-tensor-title .path-message {
+  display: inline-block;
+  line-height: 20px;
+  padding: 0px 4px 15px 4px;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+.cl-tensor-manage .tensor-bk .cl-tensor-title .cl-close-btn {
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  cursor: pointer;
+  display: inline-block;
+}
+.cl-tensor-manage .tensor-bk .cl-tensor-operate-content {
+  width: 100%;
+  padding: 8px 32px 22px 32px;
+  background: #ffffff;
+}
+.cl-tensor-manage .tensor-bk .cl-tensor-view-type-select-content {
+  background: #ffffff;
+  padding: 0 32px 21px 32px;
+  height: 58px;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #e6ebf5;
+}
+.cl-tensor-manage .tensor-bk .cl-tensor-view-type-select-content .view-title {
+  font-size: 14px;
+  line-height: 14px;
+  vertical-align: middle;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+.cl-tensor-manage .tensor-bk .cl-tensor-view-type-select-content .el-radio-group {
+  margin-right: 64px;
+  flex-shrink: 0;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content {
+  background: #ffffff;
+  padding: 0 23px;
+  flex: 1;
+  overflow: auto;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-wrap: wrap;
+  min-height: 400px;
+  position: relative;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-content {
+  width: 33.3%;
+  height: 600px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background-color: #fff;
+  position: relative;
+  padding: 32px 9px 0 9px;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .char-full-screen {
+  width: 100%;
+  height: 600px;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .chars-container {
+  flex: 1;
+  padding: 10px 15px 0 15px;
+  position: relative;
+  background: #f0f3fa;
+  overflow-x: hidden;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .chars-container .loading-cover {
+  width: 100%;
+  height: 100%;
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  background: white;
+  opacity: 0.5;
+  align-items: center;
+  justify-content: center;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show {
+  padding: 32px 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: #f0f3fa;
+  margin-top: 1px;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .tensor-demension,
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .tensor-type {
+  font-size: 14px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .tensor-demension span,
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .tensor-type span {
+  color: #00a5a7;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .sample-operate-info {
+  width: 100%;
+  min-height: 24px;
+  vertical-align: middle;
+  line-height: 20px;
+  margin-top: 24px;
+  color: #000000;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .sample-operate-info span {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .sample-operate-info .step-info {
+  left: 0;
+  font-size: 14px;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .sample-operate-info .time-info {
+  right: 0;
+  float: right;
+  font-size: 14px;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .sample-data-show .step-slider {
+  margin-top: 10px;
+}
+.cl-tensor-manage .tensor-bk .cl-show-data-content .data-content .tag-title {
+  margin-top: 10px;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+}
+.cl-tensor-manage .tensor-bk .pagination-content {
+  padding: 24px 32px;
+  text-align: right;
+}
+.cl-tensor-manage .tensor-bk .image-noData {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.cl-tensor-manage .content {
+  position: relative;
+}
+.cl-tensor-manage #echart {
+  width: 500px;
+  height: 500px;
+  border: 1px solid black;
+  position: relative;
+}
+.cl-tensor-manage #echartTip {
+  position: absolute;
+  padding: 5px;
+  z-index: 9999;
+  font-size: 14px;
+  font-family: "Microsoft YaHei";
+  background-color: rgba(50, 50, 50, 0.7);
+  border: 0;
+  border-radius: 4px;
+  color: #fff;
+}
+.cl-tensor-manage .char-tip-table td {
+  padding-left: 5px;
+  padding-right: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 150px;
+  overflow: hidden;
+}
+.cl-tensor-manage .borderspacing3 {
+  border-spacing: 3px;
 }
 </style>
diff --git a/mindinsight/ui/src/views/train-manage/training-dashboard.vue b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
index 310a8bf9..ab19085e 100644
--- a/mindinsight/ui/src/views/train-manage/training-dashboard.vue
+++ b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
@@ -2139,254 +2139,239 @@ export default {
   },
 };
 </script>
-<style lang="scss" >
+<style>
 .cl-dashboard {
   height: 100%;
   overflow-y: auto;
   width: 100%;
   overflow: hidden;
-  .cl-dashboard-top {
-    width: 100%;
-    padding-left: 32px;
-    padding-right: 20px;
-    height: 56px;
-    vertical-align: middle;
-    .path-message {
-      display: inline-block;
-      line-height: 20px;
-      padding: 21px 4px 0 4px;
-      font-weight: bold;
-      vertical-align: bottom;
-    }
-    .loading-icon {
-      margin-left: 5px;
-    }
-    .cl-dashboard-top-title {
-      float: left;
-      color: #000000;
-      font-weight: bold;
-      font-size: 20px;
-      line-height: 56px;
-      padding: 0;
-    }
-  }
-  .cl-dashboard-center {
-    width: 100%;
-    margin: 0;
-    height: calc(100% - 58px);
-    padding: 0px 10px 10px 10px;
-  }
-  .title-height {
-    height: 30px;
-    line-height: 30px;
-  }
-  .cl-dashboard-title {
-    font-size: 20px;
-    color: #000000;
-    line-height: 20px;
-    font-weight: bold;
-    margin-bottom: 1vw;
-    height: 20px;
-    display: flex;
-
-    .cl-dashboard-title-left {
-      font-size: 20px;
-      color: #000000;
-      line-height: 20px;
-      font-weight: bold;
-      flex: 1;
-    }
-
-    .cl-dashboard-title-right {
-      height: 30px;
-      flex: 1;
-      overflow: hidden;
-      text-align: right;
-      .el-button {
-        padding: 0px;
-      }
-    }
-  }
-
-  .cl-dashboard-con-up {
-    background-color: #fff;
-    padding: 1.6vw;
-    cursor: pointer;
-    overflow: hidden;
-    height: calc(50% - 10px);
-    width: calc(33.3% - 10px);
-    margin: 5px;
-    float: left;
-    border-radius: 3px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-    .link-text {
-      cursor: pointer;
-      font-size: 16px;
-      color: #00a5a7;
-    }
-  }
-
-  .cl-module {
-    height: calc(100% - 35px);
-    overflow: hidden;
-
-    .select-disable {
-      -moz-user-select: none; /*Firefox*/
-      -webkit-user-select: none; /*webkitbrowser*/
-      -ms-user-select: none; /*IE10*/
-      -khtml-user-select: none; /*Early browser*/
-      user-select: none;
-    }
-
-    .cl-scalar-tagName {
-      height: 22px;
-      font-size: 14px;
-      color: #333;
-      z-index: 999;
-      line-height: 22px;
-      display: flex;
-      font-weight: 600;
-      .tagNameLeft {
-        text-align: left;
-        width: 49%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .tagNameRight {
-        text-align: right;
-      }
-    }
-
-    .graph {
-      height: 100%;
-      background-color: #fff;
-      #graph0 > polygon {
-        fill: transparent;
-      }
-      .edge {
-        path {
-          stroke: rgb(120, 120, 120);
-        }
-        polygon {
-          fill: rgb(120, 120, 120);
-        }
-      }
-
-      .node.polymeric > polygon {
-        stroke: #fdca5a;
-        fill: #ffe8b5;
-      }
-      .node.cluster.polymeric > rect {
-        stroke: #fdca5a;
-        fill: #fff2d4;
-        stroke-dasharray: 3, 3;
-      }
-
-      .node > polygon {
-        stroke: #00a5a7;
-        fill: #8df1f2;
-      }
-      .node > ellipse {
-        stroke: #58a4e0;
-        fill: #d1ebff;
-      }
-      .plain > path,
-      .plain ellipse {
-        stroke: #56b077;
-        fill: #c1f5d5;
-        stroke-dasharray: 1.5, 1.5;
-      }
-    }
-
-    .image-container {
-      width: 100%;
-      height: 100%;
-      .sample-img {
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .no-data-hover {
-    cursor: not-allowed;
-  }
-
-  .no-data-img {
-    background: #fff;
-    text-align: center;
-    height: 100%;
-    padding-top: 26px;
-    img {
-      max-width: 100%;
-    }
-    p {
-      font-size: 16px;
-      padding-top: 31px;
-    }
-  }
-  // Public Style End
-
-  #module-chart {
-    height: calc(100% - 22px);
-    canvas {
-      cursor: pointer;
-    }
-  }
-  #distribution-chart,
-  #tensor-chart-container {
-    height: calc(100% - 19px);
-    canvas {
-      cursor: pointer;
-    }
-  }
-  .histogram-char-container,
-  .tensor-char-container {
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    .tag-text {
-      font-size: 12px;
-      font-weight: 400;
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-  }
-
-  #dataMapGraph {
-    .CreatDataset > polygon,
-    .Operator > ellipse {
-      stroke: #4ea6e6;
-      fill: #b8e0ff;
-    }
-    .cluster > polygon {
-      fill: #8df1f2;
-      stroke: #00a5a7;
-    }
-    .RepeatDataset > polygon {
-      stroke: #fdca5a;
-      fill: #fff2d4;
-    }
-    .ShuffleDataset > polygon {
-      stroke: #e37d29;
-      fill: #ffd0a6;
-    }
-    .BatchDataset > polygon {
-      stroke: #de504e;
-      fill: #ffbcba;
-    }
-    .edge {
-      path {
-        stroke: rgb(167, 167, 167);
-      }
-      polygon {
-        fill: rgb(167, 167, 167);
-        stroke: rgb(167, 167, 167);
-      }
-    }
-  }
+}
+.cl-dashboard .cl-dashboard-top {
+  width: 100%;
+  padding-left: 32px;
+  padding-right: 20px;
+  height: 56px;
+  vertical-align: middle;
+}
+.cl-dashboard .cl-dashboard-top .path-message {
+  display: inline-block;
+  line-height: 20px;
+  padding: 21px 4px 0 4px;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+.cl-dashboard .cl-dashboard-top .loading-icon {
+  margin-left: 5px;
+}
+.cl-dashboard .cl-dashboard-top .cl-dashboard-top-title {
+  float: left;
+  color: #000000;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 56px;
+  padding: 0;
+}
+.cl-dashboard .cl-dashboard-center {
+  width: 100%;
+  margin: 0;
+  height: calc(100% - 58px);
+  padding: 0px 10px 10px 10px;
+}
+.cl-dashboard .title-height {
+  height: 30px;
+  line-height: 30px;
+}
+.cl-dashboard .cl-dashboard-title {
+  font-size: 20px;
+  color: #000000;
+  line-height: 20px;
+  font-weight: bold;
+  margin-bottom: 1vw;
+  height: 20px;
+  display: flex;
+}
+.cl-dashboard .cl-dashboard-title .cl-dashboard-title-left {
+  font-size: 20px;
+  color: #000000;
+  line-height: 20px;
+  font-weight: bold;
+  flex: 1;
+}
+.cl-dashboard .cl-dashboard-title .cl-dashboard-title-right {
+  height: 30px;
+  flex: 1;
+  overflow: hidden;
+  text-align: right;
+}
+.cl-dashboard .cl-dashboard-title .cl-dashboard-title-right .el-button {
+  padding: 0px;
+}
+.cl-dashboard .cl-dashboard-con-up {
+  background-color: #fff;
+  padding: 1.6vw;
+  cursor: pointer;
+  overflow: hidden;
+  height: calc(50% - 10px);
+  width: calc(33.3% - 10px);
+  margin: 5px;
+  float: left;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+.cl-dashboard .cl-dashboard-con-up .link-text {
+  cursor: pointer;
+  font-size: 16px;
+  color: #00a5a7;
+}
+.cl-dashboard .cl-module {
+  height: calc(100% - 35px);
+  overflow: hidden;
+}
+.cl-dashboard .cl-module .select-disable {
+  -moz-user-select: none;
+  /*Firefox*/
+  -webkit-user-select: none;
+  /*webkitbrowser*/
+  -ms-user-select: none;
+  /*IE10*/
+  -khtml-user-select: none;
+  /*Early browser*/
+  user-select: none;
+}
+.cl-dashboard .cl-module .cl-scalar-tagName {
+  height: 22px;
+  font-size: 14px;
+  color: #333;
+  z-index: 999;
+  line-height: 22px;
+  display: flex;
+  font-weight: 600;
+}
+.cl-dashboard .cl-module .cl-scalar-tagName .tagNameLeft {
+  text-align: left;
+  width: 49%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cl-dashboard .cl-module .cl-scalar-tagName .tagNameRight {
+  text-align: right;
+}
+.cl-dashboard .cl-module .graph {
+  height: 100%;
+  background-color: #fff;
+}
+.cl-dashboard .cl-module .graph #graph0 > polygon {
+  fill: transparent;
+}
+.cl-dashboard .cl-module .graph .edge path {
+  stroke: #787878;
+}
+.cl-dashboard .cl-module .graph .edge polygon {
+  fill: #787878;
+}
+.cl-dashboard .cl-module .graph .node.polymeric > polygon {
+  stroke: #fdca5a;
+  fill: #ffe8b5;
+}
+.cl-dashboard .cl-module .graph .node.cluster.polymeric > rect {
+  stroke: #fdca5a;
+  fill: #fff2d4;
+  stroke-dasharray: 3, 3;
+}
+.cl-dashboard .cl-module .graph .node > polygon {
+  stroke: #00a5a7;
+  fill: #8df1f2;
+}
+.cl-dashboard .cl-module .graph .node > ellipse {
+  stroke: #58a4e0;
+  fill: #d1ebff;
+}
+.cl-dashboard .cl-module .graph .plain > path,
+.cl-dashboard .cl-module .graph .plain ellipse {
+  stroke: #56b077;
+  fill: #c1f5d5;
+  stroke-dasharray: 1.5, 1.5;
+}
+.cl-dashboard .cl-module .image-container {
+  width: 100%;
+  height: 100%;
+}
+.cl-dashboard .cl-module .image-container .sample-img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+.cl-dashboard .no-data-hover {
+  cursor: not-allowed;
+}
+.cl-dashboard .no-data-img {
+  background: #fff;
+  text-align: center;
+  height: 100%;
+  padding-top: 26px;
+}
+.cl-dashboard .no-data-img img {
+  max-width: 100%;
+}
+.cl-dashboard .no-data-img p {
+  font-size: 16px;
+  padding-top: 31px;
+}
+.cl-dashboard #module-chart {
+  height: calc(100% - 22px);
+}
+.cl-dashboard #module-chart canvas {
+  cursor: pointer;
+}
+.cl-dashboard #distribution-chart,
+.cl-dashboard #tensor-chart-container {
+  height: calc(100% - 19px);
+}
+.cl-dashboard #distribution-chart canvas,
+.cl-dashboard #tensor-chart-container canvas {
+  cursor: pointer;
+}
+.cl-dashboard .histogram-char-container,
+.cl-dashboard .tensor-char-container {
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+.cl-dashboard .histogram-char-container .tag-text,
+.cl-dashboard .tensor-char-container .tag-text {
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cl-dashboard #dataMapGraph .CreatDataset > polygon,
+.cl-dashboard #dataMapGraph .Operator > ellipse {
+  stroke: #4ea6e6;
+  fill: #b8e0ff;
+}
+.cl-dashboard #dataMapGraph .cluster > polygon {
+  fill: #8df1f2;
+  stroke: #00a5a7;
+}
+.cl-dashboard #dataMapGraph .RepeatDataset > polygon {
+  stroke: #fdca5a;
+  fill: #fff2d4;
+}
+.cl-dashboard #dataMapGraph .ShuffleDataset > polygon {
+  stroke: #e37d29;
+  fill: #ffd0a6;
+}
+.cl-dashboard #dataMapGraph .BatchDataset > polygon {
+  stroke: #de504e;
+  fill: #ffbcba;
+}
+.cl-dashboard #dataMapGraph .edge path {
+  stroke: #a7a7a7;
+}
+.cl-dashboard #dataMapGraph .edge polygon {
+  fill: #a7a7a7;
+  stroke: #a7a7a7;
 }
 </style>
diff --git a/mindinsight/ui/vue.config.js b/mindinsight/ui/vue.config.js
index 6e51793c..f18a729c 100644
--- a/mindinsight/ui/vue.config.js
+++ b/mindinsight/ui/vue.config.js
@@ -61,13 +61,4 @@ module.exports = {
       enableInSFC: true,
     },
   },
-  css: {
-    loaderOptions: {
-      sass: {
-        prependData: `
-          @import "@/assets/css/variable.scss";
-        `,
-      },
-    },
-  },
 };