CN-818：Administration开发之tab组件封装

src/assets/css/components/components/common/chart-tab.scss

@@ -0,0 +1,61 @@
+.chart-tabs {
+  position: relative;
+
+  .chart-tabs__active-bar {
+    position: absolute;
+    height: 3px;
+    top: 0;
+    background-color: #046EC9;
+    border-radius: 5px 5px 0 0;
+    transition: all linear .2s;
+  }
+  .el-tabs.el-tabs--border-card {
+    position: absolute;
+    top: 3px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+
+    &>.el-tabs__header {
+      background-color: white;
+      border-color: #E2E5EC;
+
+      .el-tabs__nav-wrap {
+        padding-left: 27px;
+      }
+      .el-tabs__item:first-child {
+        margin-left: 0;
+      }
+    }
+    .el-tabs__content {
+      display: none;
+    }
+  }
+
+  .el-tabs__item.is-top {
+    height: 35px;
+    line-height: 35px;
+
+    .chart-tabs__label {
+      color: #353636;
+      font-size: 14px;
+      font-weight: bold;
+      box-sizing: border-box;
+
+      i {
+        padding-right: 7px;
+        font-size: 16px;
+        font-weight: normal;
+      }
+    }
+    &.is-active {
+      .chart-tabs__label {
+        color: #353636;
+
+        i {
+          color: #046EC9;
+        }
+      }
+    }
+  }
+}

src/assets/css/components/index.scss

@@ -73,6 +73,7 @@
 @import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
 @import './components/common/chart-error';
+@import './components/common/chart-tab';
 
 @import 'views/administration/AdministrationTabs';