Update .gitlab-ci.yml

2021-10-25 07:19:30 +00:00 · 2021-10-25 07:11:56 +00:00 · 2021-10-25 07:04:20 +00:00 · 2021-10-25 06:07:00 +00:00 · 2021-10-25 05:58:16 +00:00 · 2021-10-25 03:45:46 +00:00
342 changed files with 6436 additions and 60173 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,8 +15,8 @@ module.exports = {
    eqeqeq: 0, // 关闭必须使用全等
    'no-extend-native': 0,
    'vue/no-parsing-error': 0, // 关闭此项避免在{{}}中使用>、<号导致报错的问题
+    'vue/no-use-v-if-with-v-for': 0, // vue2暂时关闭v-if和v-for写在一起的错误提示，到vue3后要遵守
    'no-useless-escape': 0,
-    'no-eval': 0,
-    'no-trailing-spaces': 0
+    'no-eval': 0
  }
 }
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -16,38 +16,40 @@ before_script:
  - export CNUI_TAG=$(date +%Y%m%d%H%M%S)

 generate_git-log:
+  variables:
+    CI_DEBUG_TRACE: "true"
  stage: gen_git-log
  script:
-    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i 's+</body>+<a style="position:fixed;bottom:20px;left:40px;z-index:999;color:white;" target="_blank" href="./git-log.html">更新记录</a>\n</body>+g' ./public/index.html;         echo "添加更新记录链接"; fi;
+    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i '/<body>/ a <a style="position:fixed;bottom:20px;left:40px;z-index:999;color:white;" target="_blank" href="./git-log.html">更新记录</a>' ./public/index.html;         echo "添加更新记录链接"; fi;
    - echo "最近的100个提交记录"
    - echo "<!DOCTYPE html><html><head><meta charset='utf-8'></head><body><pre>" > ./public/git-log.html
    - "git log -100 --pretty=format:'%ad : %s' >> ./public/git-log.html"
    - echo "</pre></body></html>" >> ./public/git-log.html
    - echo "处理 git-log.html 结束"
-  artifacts:
-    paths:
-      - public/index.html
-      - public/git-log.html
  only:
-    - dev
+    - dev-ci-debug
  tags:
    - GN-XXG-Server

 build_project:
  stage: build_project
+  variables:
+    CI_DEBUG_TRACE: "true"
  script:
    - echo "npm install ..."
    - npm install --save-dev --unsafe-perm
    - echo "npm run build"
    - npm run build
  only:
-    - dev
+    - dev-ci-debug
    - tags
  tags:
    - GN-XXG-Server

 build_image:
  stage: build_image
+  variables:
+    CI_DEBUG_TRACE: "true"
  script:
    - echo "docker build"
    - sudo docker build -t dev_cn-ui:$CNUI_TAG .
@@ -57,13 +59,15 @@ build_image:
    - sudo docker push 192.168.40.153:9080/cyber-narrator/dev_cn-ui:$CNUI_TAG
  when: on_success
  only:
-    - dev
+    - dev-ci-debug
  tags:
    - GN-XXG-Server


 build_release_image:
  stage: build_image
+  variables:
+    CI_DEBUG_TRACE: "true"
  script:
    - echo 'tag名称是'
    - echo $CI_COMMIT_TAG
--- a/3
+++ b/3
@@ -2,8 +2,9 @@ FROM nginx:latest

 MAINTAINER shizhendong shizhendong@zdjizhi.com

+
 # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
-COPY dist/  /usr/share/nginx/html/
+ADD dist/  /usr/share/nginx/html/

 # nginx 配置 ， 制作镜像时不做处理 ， 容器可自己挂载配置文件
 #COPY nginx.conf /etc/nginx/nginx.conf
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ npm run lint

 ### 3.图表组件库
 图表：echarts5.0  
-地图：amCharts4  
+地图：amCharts  
 拖拽 & Resize：Vue-grid-layout &nbsp;https://jbaysolutions.github.io/vue-grid-layout/guide/

 ### 4.响应式方案
@@ -51,8 +51,8 @@ https://www.lodashjs.com/
 多个单词时，应该以高阶的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾  
 eg：`SearchButtonClear.vue` 反例：`ClearSearchButton.vue`
 - **文件夹**  
-使用小写，单词间使用连字符`-`连接，或使用驼峰格式  
-eg：`right-box`、`rightBox`
+使用小写，单词间使用连字符`-`连接  
+eg：`right-box`


 - **VUE组件文件**  
@@ -99,4 +99,4 @@ eg：
 `el.style.border = 'xxx'`

 - **布局**  
-避免使用float，视情况使用position，建议使用flex和grid
+避免使用float，视情况使用position，建议使用flex和grid
--- a/babel.config.js
+++ b/babel.config.js
@@ -12,8 +12,7 @@ module.exports = {
  ],
  plugins: [
    '@vue/babel-plugin-jsx',
-    ['@babel/proposal-class-properties', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    '@babel/proposal-class-properties',
    '@babel/transform-runtime',
    'lodash'
  ],
--- a/build/build-helper.js
+++ b/build/build-helper.js
@@ -9,7 +9,7 @@ const _version = tagVer ? tagVer.startsWith('v') ? tagVer.slice(1) : tagVer : ve
 helper({
  name,
  version: _version,
-  entry: 'website/docs/en-US/!(custom-themes|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
+  entry: 'website/docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
  outDir: 'lib',
  reComponentName,
  reDocUrl,
--- a/0
+++ b/0
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,16 +9,14 @@
    "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  },
  "dependencies": {
-    "@amcharts/amcharts4": "^4.10.24",
+    "@amcharts/amcharts4": "^4.10.20",
    "@amcharts/amcharts4-geodata": "^4.1.20",
    "axios": "^0.21.1",
    "babel-plugin-lodash": "^3.3.4",
-    "codemirror": "^5.65.1",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.5",
-    "dt-sql-parser": "^4.0.0-beta.2.2",
    "echarts": "^5.1.1",
-    "element-plus": "^1.0.2-beta.44",
+    "element-plus": "1.0.2-beta.44",
    "leaflet": "^1.7.1",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.21",
@@ -27,7 +25,6 @@
    "postcss-px2rem-exclude": "0.0.6",
    "sass-loader": "^8.0.2",
    "sass-resources-loader": "^2.2.1",
-    "tiny-emitter": "^2.1.0",
    "vue": "^3.0.0",
    "vue-grid-layout": "^3.0.0-beta1",
    "vue-i18n": "^9.1.6",
--- a/public/assets/echarts.min.js
+++ b/public/assets/echarts.min.js
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
    <link rel="icon" href="<%= BASE_URL %>images/cn-logo-medium.svg">
    <title>Cyber Narrator</title>
  </head>
-  <body class="theme-light">
+  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,12 +4,12 @@
  </div>
 </template>
 <script>
-import { storageKey } from '@/utils/constants'
+
 export default {
  name: 'App',
  setup () {
    // 处理刷新后  $dayJs的时区变为默认的问题
-    const timezone = localStorage.getItem(storageKey.sysTimezone) || ''
+    const timezone = localStorage.getItem('cn-sys-timezone') || ''
    if (timezone) {
      window.$dayJs.tz.setDefault(timezone)
    } else {
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -25,7 +25,7 @@
          <el-button
              v-loading="loading"
              type="primary"
-              class="login--input login--button"
+              class="login--input login--butotn"
              @click="login"
              @keyup.enter="login"
              style="font-size: 16px;"
@@ -39,11 +39,7 @@

 <script>
 import { mapActions } from 'vuex'
-import { post, get } from '@/utils/http'
-import { useRouter } from 'vue-router'
-import { storageKey } from '@/utils/constants'
-import { api } from '@/utils/api'
-
+import { post } from '@/utils/http'
 export default {

  name: 'Login',
@@ -66,18 +62,11 @@ export default {
        return
      }
      this.loading = true
-      post(api.login, { username: this.username, pin: this.pin }).then(
+      post('sys/login', { username: this.username, pin: this.pin }).then(
        res => {
          if (res.code === 200) {
-            if (!this.$_.isEmpty(res.data.lang)) {
-              localStorage.setItem(storageKey.language, res.data.lang)
-            }
-            if (!this.$_.isEmpty(res.data.theme)) {
-              localStorage.setItem(storageKey.theme, res.data.theme)
-            }
-            res.loginSuccessPath = this.loginSuccessPath
            this.loginSuccess(res)
-            localStorage.setItem(storageKey.username, this.username)
+            localStorage.setItem('cn-username', this.username)
          } else if (res.code === 518005) {
            this.$message.error(this.$t('Incorrect username or password'))
            this.loading = false
@@ -93,42 +82,12 @@ export default {
        this.blockOperation.query = false
        this.$message.error(this.$t('tip.unknownError'))
      })
-    },
-    appearance () {
-      get(api.appearance).then(res => {
-        if (res.code === 200) {
-          this.appearanceOut(res.data)
-        }
-      })
-    },
-    appearanceOut (data) {
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.language))) {
-        localStorage.setItem(storageKey.language, data.lang)
-      }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.sysTimezone))) {
-        localStorage.setItem(storageKey.sysTimezone, data.timezone)
-      }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.theme))) {
-        localStorage.setItem(storageKey.theme, data.theme)
-      }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.dateFormat))) {
-        localStorage.setItem(storageKey.dateFormat, data.dateFormat)
-      }
-    }
-  },
-  mounted () {
-    this.appearance()
-  },
-  setup (props) {
-    const { currentRoute } = useRouter()
-    return {
-      loginSuccessPath: currentRoute.value.query.redirect
    }
  }
 }
 </script>

-<style>
+<style lang="scss">
 .logins{
  background-color: #000C18;
  background-size: auto;
@@ -170,7 +129,7 @@ export default {
   height: 250px;
   margin: auto;
 }
-.login--button {
+.login--butotn {
  background: #0091ff;
  color: #fff;
  border-radius: 4px;
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -0,0 +1,44 @@
+.nz-chart-tooltip .cn-chart-tooltip-box{
+  display: flex;
+  .cn-chart-tooltip-content{
+    flex: 1;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    font-size:14px;
+    color:#666;
+    font-weight:400;
+    margin-left:2px ;
+  }
+  .cn-chart-tooltip-value{
+    float:right;
+    margin-left:20px;
+    font-size:14px;
+    color:#666;
+    font-weight:900;
+  }
+}
+.cn-chart__single-value {
+  .chart__loading {
+    top: 0;
+    height: 100%;
+  }
+}
+.chart__loading {
+  position: absolute;
+  height: calc(100% - 47px);
+  top: 47px;
+  width: 100%;
+  background-color: #fefefe;
+  z-index: 1;
+  opacity: .9;
+
+  i {
+    position: absolute;
+    left: calc(50% - 15px);
+    top: calc(50% - 15px);
+    font-size: 30px;
+    color: #aaa;
+  }
+}
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -1,5 +1,3 @@
-/* 不含主题变量的通用css */
-
 [v-cloak] {
  display: none !important;
 }
@@ -16,15 +14,59 @@ body {
  cursor: default !important;
  overflow: hidden;
 }
-.temp-dom {
-  visibility: hidden;
-  font-size: 14px;
-  position: fixed;
+
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 6px;
+  border: 2px solid #fff;
 }
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover {
+  background-color: #c8c8c8;
+  border-radius: 6px;
+}
+/*---滚动条大小--*/
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+/* input的placeholder字色 */
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: lighten(#0091ff, 20%);
+}
+.myDatePicker .el-picker-panel__footer{
+  .el-button{
+    display: none;
+  }
+  .is-plain{
+    display: inline-block;
+  }
+}
+
+th *:first-letter,
+.left-menu *:first-letter,
+.option-popper *,
+.header__operations *:first-letter {
+  text-transform: capitalize;
+}
+
+.outer-box {
+  padding: 10px;
+  height: 100%;
+  width: 100%;
+}
+
+.el-table__empty-block {
+  width: 100% !important;
+}
+
+/* 淡化amcharts的logo */
+g [aria-labelledby$=-title] {
+  opacity: 0.1;
+  transform: translateX(calc(100% - 52px)) scale(.7);
 }
--- a/src/assets/css/common/index.scss
+++ b/src/assets/css/common/index.scss
@@ -1,12 +0,0 @@
-@import 'right-box-common';
-@import 'table-common';
-
-/* 通用css */
-.panel-chart__no-data {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  color: #999;
-}
--- a/src/assets/css/components/components/advancedSearch/advanced-search.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search.scss
@@ -1,74 +0,0 @@
-.advanced-search {
-  width: 100%;
-  height: 100%;
-  max-height: 66px;
-
-  .el-input__suffix {
-    right: 0;
-  }
-  &.advanced-search--show-list {
-    max-height: 40px;
-
-    .el-input__inner {
-      padding-right: 0;
-      border: none;
-    }
-  }
-  .el-input__inner {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    border: 1px solid #CECECE;
-    border-radius: 2px;
-    padding-right: 10px;
-  }
-  .search__suffixes, .search__suffixes--show-list {
-    display: flex;
-    height: 100%;
-
-    .search__suffix {
-      cursor: pointer;
-    }
-  }
-  .search__suffixes {
-    justify-content: space-evenly;
-    width: 100px;
-
-    .search__suffix {
-      display: flex;
-      align-items: center;
-
-      .cn-icon-search-advance {
-        color: #A6AAAE;
-        font-size: 20px;
-      }
-      .el-icon-search {
-        color: #3976CB;
-        font-size: 32px;
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-  .search__suffixes--show-list {
-    .search__suffix {
-      padding: 0 12px;
-
-      &:last-of-type {
-        background-color: $--color-primary;
-        border-radius: 0 2px 2px 0;
-      }
-      .cn-icon-search-advance {
-        color: #A6AAAE;
-        font-size: 14px;
-      }
-      .el-icon-search {
-        color: white;
-        font-size: 16px;
-      }
-    }
-  }
-
-}
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -1,133 +0,0 @@
-.advanced-search {
-  position: relative;
-  height: 100%;
-
-  .search__suffixes {
-    &.search__suffixes--text-mode, &.search__suffixes--tag-mode {
-      position: absolute;
-      display: flex;
-      top: 10px;
-      right: 10px;
-
-      .search__suffix {
-        margin-left: 8px;
-
-        .cn-icon-search-advance, .cn-icon-search-normal {
-          color: #A6AAAE;
-          font-size: 18px;
-        }
-        .el-icon-search {
-          color: #3976CB;
-          font-size: 22px;
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-  /*.search-tip--error {
-    font-size: 14px;
-    color: #F56C6C;
-  }*/
-}
-.advanced-search--show-list .CodeMirror, .advanced-search--show-list .tag-search {
-  border: none;
-}
-.tag-search {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  overflow: auto hidden;
-  border: 1px solid #CECECE;
-  border-radius: 2px;
-  padding-left: 10px;
-  padding-right: 80px;
-  background-color: white;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .tag-search__meta, .tag-search__add {
-    margin-right: 10px;
-    flex-shrink: 0;
-  }
-
-  .tag-search__add {
-    display: flex;
-    align-items: center;
-    height: 22px;
-    padding: 0 4px;
-    font-size: 12px;
-    color: #333;
-    background-color: #F5F6F7;
-    border: 1px solid #D7D7D7;
-    border-radius: 1px;
-    cursor: pointer;
-    transition: all linear .1s;
-
-    &:hover {
-      background-color: white;
-      color: #111;
-    }
-  }
-
-  .tag-search__meta {
-    display: flex;
-    height: 22px;
-    padding: 0 6px;
-    font-size: 12px;
-    background-color: #F5F6F7;
-
-    &>div:not(:last-of-type) {
-      margin-right: 6px;
-    }
-
-    &.tag-search__meta--condition {
-      .condition__delete {
-        display: flex;
-        align-items: center;
-        color: #bcbdbd;
-        font-size: 16px;
-        margin-right: 6px;
-        cursor: pointer;
-        transition: all linear .1s;
-
-        &:hover {
-          color: #999;
-        }
-      }
-      .condition__column, .condition__operator, .condition__value {
-        display: flex;
-        align-items: center;
-        color: #333;
-        font-weight: bold;
-        cursor: text;
-      }
-      .condition__operator {
-        color: #3976CB;
-      }
-      .condition__operation-select {
-        display: flex;
-        align-items: center;
-
-        .condition__operation {
-          margin: 0 5px;
-          color: #3976CB;
-        }
-      }
-    }
-    &.tag-search__meta--connection {
-      .connection__value {
-        display: flex;
-        align-items: center;
-        color: #3976CB;
-        font-weight: bold;
-        cursor: text;
-      }
-    }
-  }
-}
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -1,354 +0,0 @@
-/* BASICS */
-
-.CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-  height: 40px;
-  color: black;
-  direction: ltr;
-  border: 1px solid #CECECE;
-  border-radius: 2px;
-  padding-right: 80px;
-
-  pre.CodeMirror-placeholder.CodeMirror-line-like {
-    color: #ccc;
-  }
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  padding: 11px 5px; /* Vertical padding around content */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  padding: 0 4px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
-  white-space: nowrap;
-}
-.CodeMirror-linenumbers {}
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  text-align: right;
-  color: #999;
-  white-space: nowrap;
-}
-
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
-
-/* CURSOR */
-
-.CodeMirror-cursor {
-  border-left: 1px solid black;
-  border-right: none;
-  width: 0;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  border: 0 !important;
-  background: #7e7;
-}
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-.cm-fat-cursor .CodeMirror-line::selection,
-.cm-fat-cursor .CodeMirror-line > span::selection,
-.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
-.cm-fat-cursor .CodeMirror-line::-moz-selection,
-.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
-.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
-.cm-fat-cursor { caret-color: transparent; }
-@-moz-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@-webkit-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-
-/* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror-overwrite .CodeMirror-cursor {}
-
-.cm-tab { display: inline-block; text-decoration: inherit; }
-
-.CodeMirror-rulers {
-  position: absolute;
-  left: 0; right: 0; top: -50px; bottom: 0;
-  overflow: hidden;
-}
-.CodeMirror-ruler {
-  border-left: 1px solid #ccc;
-  top: 0; bottom: 0;
-  position: absolute;
-}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-.CodeMirror-composing { border-bottom: 2px solid; }
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
-  position: relative;
-  overflow: hidden;
-  background: white;
-  width: 100%;
-  padding-right: 120px;
-}
-
-.CodeMirror-scroll {
-  // overflow: scroll !important; /* Things will break if this is overridden */
-  /* 50px is the magic margin used to hide the element's real scrollbars */
-  /* See overflow: hidden in .CodeMirror */
-  overflow: hidden;
-  margin-bottom: -50px; margin-right: -50px;
-  padding-bottom: 50px;
-  height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
-  position: relative;
-  z-index: 0;
-}
-.CodeMirror-sizer {
-  position: relative;
-  border-right: 50px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none !important;
-  outline: none;
-}
-.CodeMirror-vscrollbar {
-  right: 0; top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-.CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-.CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
-}
-.CodeMirror-gutter-filler {
-  left: 0; bottom: 0;
-}
-
-.CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
-  min-height: 100%;
-  z-index: 3;
-}
-.CodeMirror-gutter {
-  white-space: normal;
-  height: 100%;
-  display: inline-block;
-  vertical-align: top;
-  margin-bottom: -50px;
-}
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: none !important;
-  border: none !important;
-}
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0; bottom: 0;
-  z-index: 4;
-}
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
-.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
-
-.CodeMirror-lines {
-  cursor: text;
-  min-height: 1px; /* prevents collapsing before first draw */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-  border-width: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: contextual;
-}
-.CodeMirror-wrap pre.CodeMirror-line,
-.CodeMirror-wrap pre.CodeMirror-line-like {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
-}
-
-.CodeMirror-widget {}
-
-.CodeMirror-rtl pre { direction: rtl; }
-
-.CodeMirror-code {
-  outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-cursor {
-  position: absolute;
-  pointer-events: none;
-}
-.CodeMirror-measure pre { position: static; }
-
-div.CodeMirror-cursors {
-  visibility: hidden;
-  position: relative;
-  z-index: 3;
-}
-div.CodeMirror-dragcursors {
-  visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
-
-.cm-searching {
-  background-color: #ffa;
-  background-color: rgba(255, 255, 0, .4);
-}
-
-/* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -1,189 +0,0 @@
-.date-range-box {
-  font-size: 14px;
-  border-radius: 2px;
-  display: flex;
-
-  .date-range-refresh {
-    margin-left: 10px;
-  }
-
-  .date-time-range {
-    margin-right: 10px;
-  }
-
-  .date-range-item {
-    list-style-type: none;
-  }
-
-  .panel-time-picker-hidden {
-    visibility: hidden !important;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .date-range-text {
-    font-size: 14px;
-    min-width: 150px;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    padding: 0 10px;
-    display: flex;
-    justify-content: space-around;
-    height: 26px;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
-    border-radius: 2px;
-    line-height: 26px;
-    transition: width .3s;
-
-    .cn-icon {
-      font-size: 14px;
-    }
-
-    .cn-icon-arrow-down {
-      transition: all .3s;
-      display: inline-block;
-    }
-
-    .cn-icon-arrow-down-active {
-      transform: rotate(180deg);
-    }
-  }
-
-  .date-range-title {
-    font-size: 14px;
-    color: #666666;
-    font-weight: 600;
-    padding: 14px 0 7px 8px;
-  }
-
-  .calendar-popover-text {
-    white-space: nowrap;
-    display: inline-block;
-    margin: 0 5px;
-  }
-
-  .calendar-popover-text:first-of-type {
-    margin-left: 0;
-  }
-
-  .calendar-popover-text:last-of-type {
-    margin-right: 0;
-  }
-
-  .date-range-panel {
-    height: 410px;
-    width: 500px;
-    background: #FFFFFF;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    position: absolute;
-    right: 0;
-    top: 34px;
-    z-index: 1;
-
-    .date-range-panel-content-left {
-      padding-left: 10px;
-      display: flex;
-      flex-direction: column;
-
-      .content-title {
-        font-size: 14px;
-        color: #666666;
-        font-weight: 400;
-        margin-bottom: 12px;
-      }
-
-      .content-input {
-        border: 1px solid #E7EAED;
-        border-radius: 2px;
-        width: 230px;
-        padding: 0 8px;
-        height: 30px;
-        line-height: 30px;
-        margin-bottom: 12px;
-        outline: #169AFF;
-      }
-
-      .content-input:focus {
-        border: 1px solid #169AFF;
-      }
-
-      .date-range-history {
-        flex: 1;
-        overflow-y: auto;
-
-        .date-range-history-item {
-          padding: 5px 0;
-          cursor: pointer;
-        }
-
-        .date-range-history-item:hover {
-          /*font-weight: 600;*/
-          background: #f9f9f9;
-        }
-      }
-    }
-
-    .date-range-panel-content-right {
-      display: flex;
-      flex-direction: column;
-
-      ul {
-        flex: 1;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-
-        li {
-          width: 100%;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          color: #333333;
-          font-weight: 400;
-          padding: 0 10px;
-          cursor: pointer;
-        }
-
-        li.active {
-          background: #F2F9FF;
-          color: #0091FF;
-          font-weight: 400;
-
-          .cn-icon-check {
-            color: #0091FF;
-            position: absolute;
-            right: 7px;
-          }
-        }
-
-        li:hover {
-          background: #F2F9FF;
-          color: #0091FF;
-        }
-      }
-    }
-  }
-
-  .date-range-panel-top {
-    height: 364px;
-  }
-
-  .date-range-panel-bottom {
-    height: 44px;
-    line-height: 44px;
-    border-top: 1px solid rgba(0, 0, 0, 0.09);
-    padding: 0 10px;
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-
-    .utc-str {
-      text-align: right;
-    }
-  }
-}
--- a/src/assets/css/components/components/common/TimeRange/time-refresh.scss
+++ b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
@@ -1,54 +0,0 @@
-.cn-refresh-box{
-  position: relative;
-  font-size: 14px;
-
-  .cn-icon-refresh{
-    font-size: 14px;
-  }
-  .cn-icon-dropdown{
-    font-size: 14px;
-    transition: all .3s;
-    display: inline-block;
-  }
-  .cn-icon-dropdown.active{
-    transform: rotate(180deg);
-  }
-  .refresh-list{
-    position: absolute;
-    z-index: 1;
-    background: #FFFFFF;
-    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.77);
-    border-radius: 2px;
-    top: 30px;
-    right: 0;
-    .refresh-list-item{
-      width: 82px;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      color: #333333;
-      cursor: pointer;
-      position: relative;
-      padding: 8px 0 8px 12px;
-    }
-    .refresh-list-item.active{
-      background: #F2F9FF;
-      color: #0091FF;
-      font-weight: 400;
-      .cn-icon-check{
-        color: #0091FF;
-        position: absolute;
-        right: 7px;
-      }
-    }
-    .refresh-list-item:hover{
-      background: #F2F9FF;
-      color: #0091FF;
-    }
-  }
-  .el-button--mini{
-    padding: 4px 6px !important;
-    min-height: 26px !important;
-  }
-}
--- a/src/assets/css/components/components/common/pagination.scss
+++ b/src/assets/css/components/components/common/pagination.scss
@@ -1,76 +0,0 @@
-.pagination {
-  padding-top: 8px;
-  text-align: center;
-  max-height: 42px;
-
-  .el-pagination {
-    max-height: 42px;
-    padding-right: 0;
-  }
-  .pagination-size-select .el-input--mini .el-input__inner{
-    height: 20px;
-    line-height: 20px;
-    margin: 5px 0 5px 5px;
-  }
-  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
-    margin:5px 5px 0 5px;
-    padding: 0 4px;
-    font-size: 13px;
-    min-width: 20px;
-    height: 20px;
-    line-height: 20px;
-    text-align: center;
-    border: 1px solid rgba(154,154,154,0.20);
-    border-radius: 2px;
-  }
-  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
-    line-height: 20px;
-  }
-  .el-pagination .el-pager .more::before {
-    line-height: 20px;
-  }
-  .el-pagination .el-pager .more {
-    background-color: $--content-right-background-color;
-  }
-  .btn-next, .btn-prev {
-    background-color: $--content-right-background-color !important;
-  }
-  input {
-    background-color: $--content-right-background-color !important;
-  }
-  .el-pager li.number {
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-    background-color: $--content-right-background-color;
-  }
-  .el-pager li.number.active {
-    color: #FFFFFF;
-    letter-spacing: 0;
-  }
-
-  .el-pagination .el-pager li.active {
-    background-color: $--color-primary;
-    border-radius: 2px;
-  }
-  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
-    height: 20px;
-    border-color: rgba(154,154,154,0.20);
-  }
-  .el-pagination__sizes .el-input .el-input__inner:hover {
-    border-color: rgba(154,154,154,0.20);
-  }
-}
-.entity__pagination .pagination {
-  .el-pager li.more + li {
-    display: none;
-  }
-  .el-pager li.number:not(:last-of-type) {
-    display: inline-block !important;
-  }
-}
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -1,243 +0,0 @@
-.cn-container {
-  height: calc(100% - 50px);
-  background-color: $--content-right-background-color;
-  width: 100%;
-  &>div {
-    height: 100%;
-  }
-}
-
-.cn-header {
-  display: flex;
-  height: 50px;
-
-  .header__left {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-
-    .shrink-button {
-      margin-left: 20px;
-      color: #A4ADB5;
-      cursor: pointer;
-      transition: all linear .4s;
-
-      &.shrink-button--collapse {
-        transform: rotateY(180deg);
-      }
-    }
-  }
-  .header-menu {
-    display: flex;
-    justify-content: flex-end;
-    flex-grow: 1;
-
-    .el-dropdown {
-      width: 60px;
-      text-align: center;
-      height: 36px;
-      line-height: 50px;
-      .el-dialog{
-        width: 1000px;
-        height: 70px;
-        .el-dialog__header{
-          .el-dialog__title{
-            color: #fff;
-          }
-          .el-dialog__close{
-            color: #fff;
-            line-height: 50px;
-            font-size: 30px;
-          }
-        }
-      }
-    }
-  }
-  .header-menu--item {
-    color: #778391;
-    cursor: pointer;
-    transition: color linear .2s;
-    i {
-      font-size: 18px;
-    }
-  }
-  .header-menu--item:hover {
-    color: #313336;
-  }
-  .personal {
-    display: flex;
-    .el-dropdown {
-      margin: 0 10px 0 30px;
-      height: 36px;
-      line-height: 50px;
-      text-align: center;
-    }
-    .login-user {
-      color: #333;
-      i {
-        color: #999;
-        font-size: 12px;
-      }
-    }
-  }
-  .left-menu--pin {
-    width: 20px;
-    font-size: 20px;
-    font-weight: 100;
-    color: #999999;
-    transition: all .4s;
-    height: 100%;
-    line-height: 50px;
-    margin-left: 10px;
-    i {
-      transform: rotateY(0);
-      transition: transform .4s;
-    }
-    i.icon-reverse {
-      transform: rotateY(180deg);
-    }
-  }
-  .left-menu--pin-normal{
-  }
-  .left-menu--pin-reverse{
-  }
-}
-.link-title a {
-  color: inherit;
-  text-decoration: none;
-}
-.cn-breakcrumb {
-  padding-left: 15px;
-  line-height: 50px;
-
-  .el-breadcrumb__item .el-breadcrumb__inner {
-    color: #999;
-  }
-}
-.entity-selector {
-  .el-input__prefix {
-    left: 7px !important;
-  }
-}
-
-.cn-home {
-  display: flex;
-  height: 100%;
-  transition: all .2s;
-  .cn-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    width: calc(100% - 240px);
-    transition: all .2s;
-  }
-}
-
-// el-submenu  active字色
-.el-submenu.is-active .el-submenu__title,
-.el-submenu.is-active .el-submenu__title>i,
-.el-menu-item.is-active {
-  color: white !important;
-}
-// el-submenu  active且open背景色
-.el-submenu__title:not(.is-active):hover, .el-menu-item:not(.is-active):hover, .el-menu-item:not(.is-active):focus {
-  background-color: mix($--color-white, $--menu-background-color, 7%) !important;
-}
-.is-active.is-opened {
-  .el-submenu__title, .el-menu-item:not(.is-active) {
-    background-color: $--menu-hover-background-color !important;
-  }
-}
-.el-menu-item {
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &.is-active {
-    background-color: $--color-primary;
-  }
-}
-
-.left-menu {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: $--menu-background-color;
-
-  .el-menu-item .cn-icon, .el-submenu .cn-icon {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 5px;
-    width: 24px;
-    text-align: center;
-    font-size: 18px;
-  }
-  >.el-menu:not(.el-menu--collapse) {
-    width: 240px;
-  }
-  >.el-menu.menu-list {
-    height: calc(100% - 110px);
-    border-right: none;
-    overflow: auto;
-
-    .el-menu-item, .el-submenu__title {
-      height: 46px;
-      line-height: 46px;
-    }
-  }
-
-  /*---滚动条默认显示样式--*/
-  >.el-menu::-webkit-scrollbar-thumb {
-    background-color: rgba(255,255,255,.4);
-    border-radius: 2px;
-    border: none;
-  }
-  /*---鼠标点击滚动条显示样式--*/
-  >.el-menu::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255,255,255,.3);
-    border-radius: 2px;
-  }
-  /*---滚动条大小--*/
-  >.el-menu::-webkit-scrollbar {
-    width: 6px;
-    height: 14px;
-  }
-  /*---顶部logo---*/
-  >.el-menu.header-logo {
-    border-right: none;
-    >.el-menu-item {
-      padding: 13px 0 0 18px !important;
-      height: 50px;
-      border-right: 1px solid #202F3F;
-      background-color: #182534 !important;
-
-      .logo {
-        display: flex;
-
-        img {
-          box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
-        }
-
-        .system-name {
-          padding-left: 8px;
-          color: white;
-          font-size: 14px;
-          letter-spacing: 0;
-          line-height: 34px;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-.el-menu--popup {
-  .el-menu-item {
-    height: 49px;
-    line-height: 49px;
-  }
-}
-.vue-grid-layout{
-  transition: none;
-}
-.vue-grid-item{
-  transition: none;
-}
--- a/src/assets/css/components/components/rightBox/settings/chart-box.scss
+++ b/src/assets/css/components/components/rightBox/settings/chart-box.scss
@@ -1,8 +0,0 @@
-.my-editor {
-  margin-top: 4px;
-  border: 1px solid $--right-box-border-color;
-
-  .prism-editor__textarea {
-    outline: none;
-  }
-}
--- a/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
+++ b/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
@@ -1,233 +0,0 @@
-.proxy-debug__dialog {
-  height: 90vh;
-  overflow: hidden;
-  .el-dialog__header {
-    display: none;
-  }
-  .el-dialog__body {
-    height: 100%;
-    padding: 0;
-  }
-}
-.debug-wrapper{
-  width: 100%;
-  height:100%;
-  background: #fff;
-  text-align: center;
-  display: grid;
-  grid-template-columns: 25% auto;
-  grid-template-rows: 60px auto;
-  grid-row-gap: 20px;
-  grid-column-gap: 20px;
-  padding:25px;
-
-  .item{
-    border:1px solid #bbbbbb;
-    color: #000C18;
-    line-height: 60px;
-    font-size: 16px;
-    text-align: left;
-  }
-
-  .item-1 {
-    border: 0;
-  }
-
-  .item-2 {
-    background-color: #ffffff;
-    border: 0;
-    .el-input__inner {
-      border-radius: 0px;
-      border-left: 0px;
-      border-right: 0;
-      border-top: 1px solid #bbbbbb;
-      border-bottom: 1px solid #bbbbbb;
-      color: #606266;
-      height: 60px;
-      line-height: 60px;
-      padding: 0 15px;
-    }
-  }
-
-  .sub-grid-send{
-    width: 100%;
-    height:100%;
-    background: #fff;
-    text-align: center;
-    display: grid;
-    grid-template-columns: 100px auto 80px;
-    grid-template-rows: 60px;
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-    padding: 0;
-  }
-
-  .item-3 {
-    background-color: #ffffff;
-    .el-input__inner{
-      border: 0px;
-    }
-    .el-input__inner:hover {
-      border: 0px;
-    }
-    .el-input__inner:focus {
-      border: 1px solid #bbbbbb;
-    }
-
-    .el-table__header, .el-table__body{
-      witdh:100% !important;
-    }
-
-    .el-table__header-wrapper{
-      height: 60px;
-    }
-
-    .el-table__empty-block{
-      height: 0;
-      min-height: 0;
-    }
-
-    .el-table th.is-leaf, .el-table td {
-      border-top: 1px solid #bbbbbb;
-      border-left: 1px solid #bbbbbb;
-      border-right: 0px;
-      padding-top: 3px;
-      padding-bottom: 3px;
-    }
-
-    .el-table{
-      border-bottom: 1px solid #bbbbbb;
-      border-right: 0px solid #bbbbbb;
-      border-left: 0px solid #bbbbbb;
-    }
-
-    .el-table .cell {
-      line-height: 23px;
-      padding-left: 3px;
-      padding-right: 3px;
-      text-align: center;
-    }
-
-    .el-table__body tr:hover >td {
-      background-color: #ffffff;
-    }
-
-    .el-table__body tr:focus >td {
-      background-color: cadetblue;
-    }
-    .debug__params-delete:hover{
-      color:#0091FF;
-      cursor: pointer;
-    }
-  }
-
-  .item-4 {
-    height:100%;
-    overflow:hidden;
-    background-color: #ffffff;
-    display: grid;
-    grid-template-columns: 40% 60%;
-    grid-template-rows: 60px  minmax(100px, 1fr) 60px minmax(100px, 2fr);
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-
-    pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
-    .color-pre__style{
-      height: 95%;
-      width: 95%;
-    }
-    .request-header {
-      grid-column-start: 1;
-      grid-column-end: 3;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .request-header-content{
-      grid-column-start: 1;
-      grid-column-end: 3;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 0px;
-      overflow:scroll;
-      height: 100%;
-      width:100%;
-      line-height: 30px;
-    }
-
-    .response-header {
-      border-right:1px solid #bbbbbb;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .response-header-content {
-      border-right:1px solid #bbbbbb;
-      padding-left: 0px;
-      height: 100%;
-      width:100%;
-      overflow:scroll;
-      line-height: 30px;
-    }
-
-    .response-body {
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .response-body-content {
-      padding-left: 5px;
-      height:100%;
-      width:100%;
-      overflow:scroll;
-    }
-  }
-
-  .sub-grid-params{
-    width: 100%;
-    height:100%;
-    background: #fff;
-    text-align: center;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 60px auto;
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-    padding: 0;
-    justify-items: center;
-
-  }
-
-  .sub-grid-params-add{
-    width: 96%;
-    height:100%;
-    background: #fff;
-    text-align: left;
-    display: grid;
-    grid-template-columns: 70% 30%;
-    grid-template-rows:100%;
-    grid-row-gap: 0;
-    grid-column-gap: 0;
-    padding: 0;
-  }
-
-  .el-select .el-input .el-input__inner{
-    height: 60px;
-    border-radius: 0;
-    border:1px solid #bbbbbb;
-  }
-  .el-select .el-input .el-select__caret {
-    line-height:60px;
-    font-weight: bolder;
-    color:black;
-  }
-
-  .el-button {
-    border-color: #bbbbbb;
-  }
-
-  .sub-grid-params-add  .el-button {
-    height: 38px;
-    margin-top: 11px;
-    margin-right: 10px;
-  }
-}
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -1,84 +0,0 @@
-.pop-title{
-  margin-top: 7px;
-}
-.pop-custom {
-  padding: 0 12px 12px 12px;
-  border: 1px solid #EBEEF5;
-  position: absolute;
-  top: 55px;
-  right: 20px;
-  width: 200px;
-  color: #606266;
-  background: #fff;
-  border-radius: 4px;
-  z-index: 999999;
-  box-shadow: 0 0 10px #CCC;
-  box-sizing: border-box;
-
-  .el-button--mini{
-    padding: 5px 7px;
-  }
-}
-.pop-custom-explore {
-  top: 33px;
-}
-.relative-position .pop-custom {
-  top: 33px;
-}
-.custom-labels {
-  margin-top: 12px;
-  width: 100%;
-  height: 300px;
-}
-.custom-labels i {
-  color: #04b330;
-  font-size: 14px;
-  position: absolute;
-  left: 5px;
-  top: 6px;
-}
-.custom-label {
-  padding: 2px 0 2px 25px;
-  position: relative;
-  cursor: default;
-  font-size: 14px;
-}
-.custom-label:hover{
-  color: #cccccc;
-  background-color: #DCDFE6;
-}
-.custom-title{
-  padding: 2px 0 2px 2px;
-}
-.custom-label-disabled {
-  cursor: not-allowed;
-  background: #f1f3f4;
-  opacity: 0.7;
-}
-.custom-bottom-btns {
-  margin-top: 7px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.unshow {
-  display: none;
-}
-
-.list-page .top-tools .top-tool-btn {
-  height: 33px;
-  width: 36px;
-  border: 1px solid #DEDEDE;
-  outline: none;
-  border-radius: 2px;
-  background-color: #F9F9F9;
-  transition: background-color linear .1s;
-}
-
-.list-page {
-  .el-input--small .el-input__inner {
-    height: 32.4px;
-    line-height: 32px;
-    border-radius: 0px;
-  }
-}
--- a/src/assets/css/components/components/table/settings/galaxy-proxy-table.scss
+++ b/src/assets/css/components/components/table/settings/galaxy-proxy-table.scss
@@ -1,22 +0,0 @@
-.galaxy-proxy-table {
-  .js-code-highlight {
-    height: 250px;
-
-    .highlight-box {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-
-      .highlight-box__copy-btn {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        cursor: pointer;
-      }
-    }
-  }
-  pre code.hljs {
-    overflow-x: visible;
-  }
-}
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -1,47 +0,0 @@
-@import './components/advancedSearch/advanced-search2';
-@import './components/advancedSearch/codemirror';
-// @import './components/charts/panel';
-@import './components/common/TimeRange/date-time-range';
-@import './components/common/TimeRange/time-refresh';
-@import './components/common/pagination';
-// @import './components/entities/entities';
-@import './components/layout/layout';
-@import 'components/rightBox/settings/chart-box';
-@import 'components/setting/galaxy-proxy-debug';
-@import 'components/table/settings/galaxy-proxy-table';
-@import './components/table/common';
-@import './views/charts/chart';
-@import 'views/entityExplorer/entity-explorer';
-@import 'views/entityExplorer/search/explorer-search';
-@import 'views/entityExplorer/entity-filter';
-@import 'views/entityExplorer/entity-detail';
-@import 'views/entityExplorer/entityList/entity-list';
-@import './views/entityExplorer/entityList/card';
-@import './views/entityExplorer/entityList/row';
-@import 'views/entityExplorer/entityList/detail-overview';
-@import './views/detections/detections';
-@import './views/detections/detection-filter';
-@import './views/detections/detection-list/detection-list';
-@import './views/detections/detection-list/row';
-@import './views/detections/detection-overview';
-@import './views/charts/panel';
-@import 'views/charts/chartIpOpenPortBar';
-@import './views/charts/chartTable';
-@import './views/charts/chartSingleValue';
-@import './views/charts/chartCryptocurrencyEventList';
-@import './views/charts/chartAppBasicInfo';
-@import './views/charts/chartDomainDnsRecord';
-@import './views/charts/chartDomainWhois';
-@import './views/charts/chartEchartWithTable';
-@import './views/charts/ipBasicInfo';
-@import './views/charts/chartEchartIpHostedDomain';
-@import './views/charts/chartEchartAppRelateDomain';
-@import './views/charts/ChartOneSituationStatistics';
-@import './views/charts/ChartTwoSituationStatistics';
-@import './views/charts/chartAlarmInfo';
-@import './views/chartHeader';
-@import './views/charts/chartMap';
-@import './views/report/builtinReport';
-
-
-//@import '../chart';
--- a/src/assets/css/components/views/chartHeader.scss
+++ b/src/assets/css/components/views/chartHeader.scss
@@ -1,82 +0,0 @@
-.cn-chart-header-button {
-    display: flex;
-    .cn-chart-header-button-group {
-        display: flex;
-        .el-button {
-            border-radius: 0%;
-        }
-
-        .el-button:hover {
-            background: #FFFFFF;
-            border-color: #0091FF;
-        }
-
-        .el-button:last-of-type {
-            border-radius: 0 2px 2px 0;
-
-        }
-        .el-button:first-of-type{
-            border-radius: 2px 0 0 2px;
-
-        }
-        .cn-chart-header-button-all  {
-            border-color: #0091FF;
-            color: #0091FF;
-            background-color: #FFFFFF;
-           z-index: 1;
-        }
-
-        .cn-chart-header-button-critical {
-            border-color: #0091FF;
-            color: #0091FF;
-            background-color: #FFFFFF;
-           z-index: 1;
-
-        }
-
-        .cn-chart-header-button-high {
-            border-color: #0091FF;
-            background-color: #FFFFFF;
-           z-index: 1;
-           color: #0091FF;
-        }
-
-        .cn-chart-header-button-low {
-            border-color: #0091FF;
-            background-color: #FFFFFF;
-           z-index: 1;
-           color: #0091FF;
-        }
-
-        .cn-chart-header-button-info {
-            border-color: #0091FF;
-            background-color: #FFFFFF;
-           z-index: 1;
-           color: #0091FF;
-        }
-
-        .cn-chart-header-button-medium {
-            border-color: #0091FF;
-            background-color: #FFFFFF;
-           z-index: 1;
-           color: #0091FF;
-        }
-
-        .el-button--default {
-            height: 24px;
-            min-height: 24px;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            font-family: Roboto-Regular;
-            font-size: 12px;
-            font-weight: 400;
-        }
-    }
-
-    .header__operation-btn {
-        margin-left: 12px;
-        cursor: pointer;
-        color: #999;
-      }
-}
--- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
@@ -1,29 +0,0 @@
-.cn-chart__one-situation-statistics{
-    height: 100%;
-    .one-situation-statistics__box {
-        display: flex;
-        align-items: center;
-        margin-left: 33px;
-        height: 100%;
-        .box__progress{
-            display: block;
-            width: 76px;
-            height: 76px;
-            .el-progress__text span{
-                font-size: 16px;
-            }
-        }
-        .box__count{
-            margin-left: 22px;
-            :first-child{
-                font-size: 18px;
-                color: #333;
-            }
-            :last-child{
-                margin-top: 5px;
-                font-size: 14px;
-                color: #666666;
-            }
-        }
-      }
-}
--- a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
@@ -1,28 +0,0 @@
-
-.cn-chart__two-situation-statistics{
-    padding-top: 22px;
-    .box__body {
-        display: flex;
-        align-items: center;
-        margin-left: 33px;
-        padding-top: 22px;
-        .body__progress{
-            display: block;
-            .el-progress__text span{
-                font-size: 16px;
-            }
-        }
-        .body__count{
-            margin-left: 22px;
-            :first-child{
-                font-size: 18px;
-                color: #333;
-            }
-            :last-child{
-                margin-top: 5px;
-                font-size: 14px;
-                color: #666666;
-            }
-        }
-      }
-}
--- a/src/assets/css/components/views/charts/chart.scss
+++ b/src/assets/css/components/views/charts/chart.scss
@@ -1,409 +0,0 @@
-.ip-detail__open-port {
-  display: flex;
-  height: 100%;
-  width: 100%;
-
-  .open-port__table {
-    flex: 1;
-    display: table;
-    height: 100%;
-    border-right: 1px solid $--right-box-border-color;
-
-    .open-port__table-row {
-      display: table-row;
-      font-size: 14px;
-      color: #333333;
-    }
-    .open-port__table-row.open-port__table-row--header {
-      padding: 13px 30px 0;
-      height: 40px;
-      color: #6B717B;
-    }
-    .open-port__table-cell {
-      display: table-cell;
-      vertical-align: middle;
-      padding: 13px 30px;
-    }
-  }
-
-  .open-port__chart {
-    display: flex;
-    flex-direction: column;
-    flex: 0 0 30%;
-    height: 100%;
-
-    .open-port__chart-title {
-      padding-left: 20px;
-      line-height: 50px;
-      flex: 0 0 50px;
-    }
-    .open-port__chart-body {
-      flex: 1;
-    }
-  }
-}
-.ip-detail__hosted-domain, .app-detail__related-domain {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-
-  .hosted-domain__list, .related-domain__list {
-    display: flex;
-    flex-direction: column;
-    flex: 0 0 25%;
-    overflow: auto;
-    padding-bottom: 20px;
-    border-bottom: 1px solid $--right-box-border-color;
-
-    .hosted-domain__list-title, .related-domain__list-title {
-      padding: 13px 30px 0;
-      height: 40px;
-      color: #6B717B;
-    }
-    .hosted-domain__list-body, .related-domain__list-body {
-      display: flex;
-      flex-direction: column;
-      height: calc(100% - 40px);
-      overflow: hidden auto;
-    }
-    .hosted-domain__list-row, .related-domain__list-row {
-      padding: 5px 30px;
-      color: #3976CB;
-      i {
-        color: #B8C1D1;
-      }
-    }
-  }
-  .hosted-domain__chart, .related-domain__chart {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    &>div {
-      flex: 0 0 50%;
-      display: flex;
-      flex-direction: column;
-      .hosted-domain__chart-title {
-        padding-left: 20px;
-        line-height: 50px;
-        flex: 0 0 50px;
-      }
-      .chart-drawing {
-        flex: 1;
-      }
-    }
-  }
-}
-.domain-detail-list {
-  display: table;
-  width: 100%;
-
-  .domain-detail-list__row {
-    display: table-row;
-
-    &:last-of-type {
-      .domain-detail-list__label, .domain-detail-list__content {
-        border-bottom: none;
-      }
-    }
-    .domain-detail-list__label {
-      display: table-cell;
-      padding: 13px 30px;
-      border-bottom: 1px solid $--content-right-background-color;
-      min-width: 170px;
-      color: #6B717B;
-    }
-    .domain-detail-list__content {
-      display: table-cell;
-      padding: 13px 0 ;
-      border-bottom: 1px solid $--content-right-background-color;
-      color: #3976CB;
-    }
-  }
-}
-.crypto-eventList__record {
-  display: flex;
-  height: 100%;
-  width: 100%;
-
-  .record__table {
-    display: table;
-    height: 100%;
-    width: 100%;
-
-    .record__table-row {
-      display: table-row;
-      font-size: 14px;
-      color: #333333;
-    }
-    .record__table-row.record__table-row--header {
-      padding: 13px 30px 0;
-      height: 40px;
-      color: #6B717B;
-    }
-    .record__table-cell {
-      display: table-cell;
-      vertical-align: middle;
-      padding-left: 10px;
-      padding-top: 15px;
-      padding-bottom: 0;
-
-      .record_second{
-        color:#7e8088;
-        font-size:12px;
-      }
-
-      .circle-red {
-        color: #EC7F66;
-        font-size: 28px;
-      }
-
-    }
-    .record__table-cell:first-of-type {
-      padding-left:30px;
-    }
-  }
-}
-
-.entity-detail__dns-record {
-  display: flex;
-  height: 100%;
-  width: 100%;
-
-  .dns-record__table {
-    display: table;
-    height: 100%;
-    width: 100%;
-
-    .dns-record__table-row {
-      display: table-row;
-      font-size: 14px;
-      color: #333333;
-    }
-    .dns-record__table-row.dns-record__table-row--header {
-      padding: 13px 30px 0;
-      height: 40px;
-      color: #6B717B;
-    }
-    .dns-record__table-cell {
-      display: table-cell;
-      border-bottom: 1px solid $--content-right-background-color;
-      vertical-align: middle;
-      padding: 13px 30px;
-    }
-    .dns-record__table-row:not(.dns-record__table-row--header) .dns-record__table-cell:last-of-type {
-      color: #3976CB;
-    }
-  }
-}
-.app-detail__related-domain {
-  flex-direction: row;
-  .related-domain__list {
-    border-bottom: none;
-  }
-  .related-domain__chart {
-    flex-direction: row;
-    border-left: 1px solid $--right-box-border-color;
-    padding: 3vh 5vw;
-    &>div {
-      flex: 0 0 50%;
-      display: flex;
-      flex-direction: column;
-      .related-domain__chart-title {
-        padding-left: 20px;
-        line-height: 50px;
-        flex: 0 0 50px;
-        color: #3976CB;
-      }
-      .chart-drawing {
-        flex: 1;
-      }
-    }
-  }
-}
-.sankey-box {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  .sankey__label {
-    position: absolute;
-    color: #333;
-    bottom: 50px;
-    font-weight: bold;
-    transform: translateX(-50%);
-  }
-}
-.sankey__tooltip {
-  width: 270px;
-  height: 170px;
-  padding: 5px;
-  display: flex;
-  flex-direction: column;
-
-  .sankey__tooltip-row {
-    display: flex;
-    padding: 2px 0;
-
-    .sankey__row-label {
-      flex: 0 0 98px;
-      color: #666;
-    }
-    .sankey__row-value {
-      flex: 1;
-      color: #333;
-    }
-  }
-
-  .sankey__tooltip-table {
-    padding: 2px 0 2px 22px;
-    display: table;
-
-    .sankey__table-row {
-      display: table-row;
-      padding: 1px 0 4px 0;
-
-      .sankey__table-cell {
-        display: table-cell;
-        font-size: 12px;
-        color: #333;
-      }
-      .sankey__table-cell:first-of-type {
-        color: #999;
-      }
-    }
-  }
-}
-.map-tooltip {
-  display: flex;
-  flex-direction: column;
-  padding: 3px 3px 0;
-
-  .map-tooltip__title {
-    padding-bottom: 10px;
-    color: #fff;
-    font-size: 16px;
-  }
-  .map-tooltip__content {
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-
-    .content-row {
-      .row__label {
-        color: #ddd;
-        padding-right: 5px;
-      }
-      .row__value {
-        color: #fff;
-      }
-    }
-  }
-}
-
-.position-icon {
-  font-size: 24px;
-  color: #EC7F66;
-}
-
-.circle1{
-  position: relative;
-  width:28px;
-  height:28px;
-  line-height: 28px;
-  border:1px solid #dd674d;
-  background:#FFFFFF;
-  border-radius:50%;
-  -moz-border-radius:50%;
-  margin:auto;
-  z-index: 1;
-}
-.circle1::after {
-  position: absolute;
-  content: '';
-  background: #dd674d;
-  bottom: 3px;
-  right: 3px;
-  left: 3px;
-  top: 3px;
-  z-index: 5;
-  border-radius: 50%;
-}
-
-.arrow {
-  position: relative;
-  display: inline-block;
-  line-height: 0;
-  background-color: #aeaeae;
-  &.arrow-hor {
-    width: 24px;
-    height: 2px;
-    margin-bottom: 3px;
-  }
-  &.arrow-hor.right::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-    right: -8px;
-    border: 5px solid transparent;
-    border-left: 5px solid #aeaeae;
-  }
-}
-.nz-chart-tooltip{
-  border-color: transparent !important;
-}
-.nz-chart-tooltip .cn-chart-tooltip-box{
-  display: flex;
-  >span:first-child{
-    margin-top: 8px;
-  }
-  .cn-chart-tooltip-content{
-    flex: 1;
-    display: inline-block;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-    font-size:14px;
-    color:#666;
-    font-weight:400;
-    margin-left:2px ;
-  }
-  .cn-chart-tooltip-value{
-    float:right;
-    margin-left:20px;
-    font-size:14px;
-    color:#666;
-    font-weight:900;
-  }
-}
-.cn-chart__single-value {
-  .chart__loading {
-    top: 0;
-    height: 100%;
-  }
-}
-.chart__loading {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  background-color: #fefefe;
-  z-index: 1;
-  opacity: .8;
-
-  i {
-    position: absolute;
-    left: calc(50% - 15px);
-    top: calc(50% - 15px);
-    font-size: 30px;
-    color: #aaa;
-  }
-}
-
-.map-back {
-  position: absolute;
-  right: 12px;
-  top: 15px;
-  color: $--color-primary;
-  cursor: pointer;
-  z-index: 2;
-}
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ b/src/assets/css/components/views/charts/chartAlarmInfo.scss
@@ -1,155 +0,0 @@
-.cn-chart__alarm-info {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .alarm-info__box {
-        height: calc(100% - 40px);
-        width: 100%;
-
-        .box__body {
-            display: flex;
-            margin-left: 30px;
-            margin-right: 30px;
-            justify-content: flex-start;
-            align-items: center;
-            height: calc(100% / 9);
-            border-bottom: 1px solid #E7EAED;
-
-            .body__content {
-                display: flex;
-
-                .content__icon-box {
-                    position: relative;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    .icon-box__icon {
-                        width: 30px;
-                        height: 30px;
-                        border-radius: 50%;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                    }
-
-                    .cn-icon-alert {
-                        width: 12px;
-                        position: absolute;
-                        top: calc(50% - 8px);
-                        left: calc(50% - 8px);
-                    }
-                }
-
-                .content__text-box {
-                    margin-left: 17px;
-
-                    .text-box__title {
-                        font-size: 16px;
-                        line-height: 19px;
-                        font-family: Roboto-Regular;
-                        color: #333333;
-                        max-width: 30%;
-                        font-weight: 400;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                    }
-
-                    .text-box__text {
-                        font-size: 12px;
-                        line-height: 14px;
-                        text-align: center;
-                        margin-top: 10px;
-                        display: flex;
-                        align-items: center;
-                        flex-wrap: wrap;
-
-                        &>div {
-                            margin-bottom: 4px;
-                        }
-
-                        .text__time-box {
-                            display: flex;
-                            margin-left: 20px;
-                            height: 14px;
-
-                            .cn-icon-time2 {
-                                color: #8FA1BE;
-                                width: 10px;
-                                height: 10px;
-                                font-size: 12px;
-                            }
-
-                            .time-box__start-time {
-                                font-family: PingFangSC-Regular;
-                                font-size: 12px;
-                                color: #999999;
-                                line-height: 14px;
-                                font-weight: 400;
-                            }
-                        }
-
-                        .text__duration-box {
-                            height: 14px;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-
-                            .cn-icon-time2 {
-                                color: #8FA1BE;
-                                width: 10px;
-                                height: 10px;
-                                font-size: 12px;
-                            }
-
-                            .time-box__start-time {
-                                font-family: PingFangSC-Regular;
-                                font-size: 12px;
-                                color: #999999;
-                                line-height: 17px;
-                                font-weight: 400;
-                            }
-                        }
-
-                        .text__type {
-                            width: auto;
-                            font-family: Roboto-Regular;
-                            line-height: 16px;
-                            font-size: 12px;
-                            border: 1px solid;
-                            font-weight: 400;
-                            max-width: 150px;
-                            padding-left: 2px;
-                            padding-right: 2px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                            word-break: break-all;
-                        }
-
-                        .duration-box__circle {
-                            display: inline-block;
-                            width: 5px;
-                            height: 5px;
-                            border-radius: 50%;
-                            font-family: Roboto-Black;
-                            font-size: 12px;
-                            color: #666666;
-                            line-height: 17px;
-                            font-weight: 400;
-                        }
-                    }
-
-                }
-
-            }
-        }
-    }
-
-    .alarm-info__pagination {
-        height: 40px !important;
-        width: 100%;
-    }
-}
--- a/src/assets/css/components/views/charts/chartAppBasicInfo.scss
+++ b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
@@ -1,103 +0,0 @@
-.cn-chart__app-basic {
-  display: flex;
-  flex-direction: column;
-  .cn-chart__body {
-    flex: auto;
-    display: flex;
-    .el-descriptions {
-      padding-top: 30px;
-    }
-    &>.el-descriptions {
-      flex: 0 0 350px;
-      padding: 30px 36px;
-    }
-    .chart-location {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      padding: 0 20px 20px 0;
-    }
-    .el-descriptions__content {
-      color: #3976CB;
-    }
-    .cn-chart__body-single {
-      display: flex;
-      .cn-chart__body-single-table {
-        display: flex;
-        width: 250px;
-        align-items: center;
-      }
-      .cn-chart__body-single-table:nth-of-type(3) {
-        margin-right: 126px;
-      }
-      .single-value-icon__box {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 40%;
-      }
-      .single-value__icon {
-        display: flex;
-        justify-content: center;
-        width: 72px;
-        height: 72px;
-        background-color: $--chart-single-value-icon-background-color;
-        border-radius: 50%;
-
-        i {
-          display: flex;
-          align-items: center;
-          font-size: 28px;
-          color: $--color-primary;
-        }
-      }
-      .single-value-color-g.single-value__icon {
-        background-color: #E2FCEF;
-        i {
-          color: #41D389;
-        }
-      }
-      .single-value-color-y.single-value__icon {
-        background-color: #FFF0DA;
-        i {
-          color: #FA901C;
-        }
-      }
-      .single-value__content {
-        display: flex;
-        flex-direction: column;
-        max-width: 60%;
-        padding-left: 10px;
-
-        div:nth-of-type(1) {
-          margin-bottom: 10px;
-        }
-
-        .content__data {
-          padding-bottom: 7%;
-          font-size: 24px;
-          color: #333333;
-          font-weight: bold;
-        }
-        .content__title {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          font-size: 16px;
-          color: #666666;
-        }
-        &.single-value__content--with-chart {
-          .content__title {
-            border-bottom: 1px solid $--content-right-background-color;
-          }
-        }
-        .single-value__unit {
-          font-weight: normal;
-          padding-left: 10px;
-          color: #666;
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
+++ b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
@@ -1,65 +0,0 @@
-.cn-chart__table.eventList {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  .cn-chart__body {
-    flex: auto;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    .el-descriptions {
-      padding-top: 30px;
-    }
-    &>.el-descriptions {
-      flex: 0 0 350px;
-      padding: 30px 36px;
-    }
-    .chart-location {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      padding: 0 20px 20px 0;
-    }
-    .el-descriptions__content {
-      color: #3976CB;
-    }
-    .crypto-eventList__record {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      .record__table {
-        display: table;
-        height: 100%;
-        width: 100%;
-
-        .record__table-row {
-          display: table-row;
-          font-size: 14px;
-          color: #333333;
-        }
-        .record__table-row.record__table-row--header {
-          padding: 13px 30px 0;
-          height: 40px;
-          color: #6B717B;
-        }
-        .record__table-cell {
-          display: table-cell;
-          vertical-align: middle;
-          padding: 15px 10px;
-          .record_second{
-            color:#7e8088;
-            font-size:12px;
-          }
-          .circle-red {
-            color: #EC7F66;
-            font-size: 28px;
-          }
-        }
-        .record__table-cell:first-of-type {
-          padding-left:30px;
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
+++ b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
@@ -1,29 +0,0 @@
-.cn-chart__dns-record {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  .cn-chart__body {
-    flex: auto;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    .el-descriptions {
-      padding-top: 30px;
-    }
-    &>.el-descriptions {
-      flex: 0 0 350px;
-      padding: 30px 36px;
-    }
-    .chart-location {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      padding: 0 20px 20px 0;
-    }
-    .el-descriptions__content {
-      color: #3976CB;
-    }
-  }
-}
-
--- a/src/assets/css/components/views/charts/chartDomainWhois.scss
+++ b/src/assets/css/components/views/charts/chartDomainWhois.scss
@@ -1,4 +0,0 @@
-.cn-chart__whois {
-  overflow: auto;
-}
-
--- a/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
+++ b/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
@@ -1,73 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout > .vue-grid-item {
-      .cn-chart {
-        .app-detail__related-domain {
-          display: flex;
-          flex-direction: row;
-          height: 100%;
-          width: 100%;
-          .related-domain__list {
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 25%;
-            overflow: auto;
-            padding-bottom: 20px;
-            //border-bottom: 1px solid $--right-box-border-color;
-
-            .related-domain__list-title {
-              padding: 13px 30px 0;
-              height: 40px;
-              color: #6B717B;
-            }
-
-            .related-domain__list-body {
-              display: flex;
-              flex-direction: column;
-              height: calc(100% - 40px);
-              overflow: hidden auto;
-            }
-
-            .related-domain__list-row {
-              padding: 5px 30px;
-              color: #3976CB;
-
-              i {
-                color: #B8C1D1;
-              }
-            }
-          }
-
-          .related-domain__chart {
-            display: flex;
-            flex-direction: row;
-            flex: 1;
-
-            & > div {
-              flex: 0 0 50%;
-              display: flex;
-              flex-direction: column;
-
-              .related-domain__chart-title {
-                padding-left: 20px;
-                line-height: 50px;
-                flex: 0 0 50px;
-              }
-
-              .chart-drawing {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header,.cn-panel2 .chart-list > .dns-screen> .panel-chart .chart-header {
-  border-bottom: 1px solid $--right-box-border-color;
-}
-.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header.is-group-collapse {
-  border-bottom: none;
-}
--- a/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
+++ b/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
@@ -1,67 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout > .vue-grid-item {
-      .cn-chart {
-        .ip-detail__hosted-domain {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          .hosted-domain__list {
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 25%;
-            overflow: auto;
-            padding-bottom: 20px;
-            border-bottom: 1px solid $--right-box-border-color;
-
-            .hosted-domain__list-title {
-              padding: 13px 30px 0;
-              height: 40px;
-              color: #6B717B;
-            }
-
-            .hosted-domain__list-body {
-              display: flex;
-              flex-direction: column;
-              height: calc(100% - 40px);
-              overflow: hidden auto;
-            }
-
-            .hosted-domain__list-row {
-              padding: 5px 30px;
-              color: #3976CB;
-
-              i {
-                color: #B8C1D1;
-              }
-            }
-          }
-
-          .hosted-domain__chart {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-
-            & > div {
-              flex: 0 0 50%;
-              display: flex;
-              flex-direction: column;
-
-              .hosted-domain__chart-title {
-                padding-left: 20px;
-                line-height: 50px;
-                flex: 0 0 50px;
-              }
-
-              .chart-drawing {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/charts/chartEchartWithTable.scss
+++ b/src/assets/css/components/views/charts/chartEchartWithTable.scss
@@ -1,77 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        .cn-chart__echarts {
-          display: flex;
-          flex-direction: column;
-          height:100%;
-          .cn-chart__body {
-            flex: auto;
-            display: flex;
-            overflow: hidden auto;
-
-            .el-table {
-              padding: 0 10px;
-
-              &:before {
-                height: 0;
-              }
-              thead {
-                color: #333;
-              }
-              th.is-leaf, td {
-                border-bottom: none;
-              }
-              th {
-                padding-bottom: 5px;
-              }
-              td {
-                padding: 4px 0;
-                color: #333;
-              }
-            }
-
-            /*.chart-drawing{
-              height: calc(100% - 36px) !important;
-            }*/
-          }
-          .cn-chart__body.pie-with-table {
-            flex-basis: 40%;
-          }
-          .cn-chart__footer.pie-with-table {
-            flex-basis: 60%;
-            padding: 10px 30px 30px;
-          }
-        }
-        .pie-table {
-          font-size: 14px;
-          color: #333333;
-          font-weight: 500;
-
-          .el-table__header-wrapper {
-            .cell {
-              color: #333;
-            }
-          }
-          .el-table__expanded-cell[class*=cell] {
-            padding: 0;
-          }
-
-          .expand-table .el-table__body .el-table__row:last-of-type td {
-            border: none;
-          }
-          .expand-table {
-            font-weight: 400;
-            color: #606266;
-
-            .el-table__body-wrapper {
-              height: auto !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
+++ b/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
@@ -1,46 +0,0 @@
-.chart-ip-open-port-bar {
-    display: flex;
-    height: 100%;
-    .el-table--border {
-        border: none;
-        .el-table__body-wrapper {
-            overflow-y: auto;
-            height: 261px !important;
-            .el-table__body {
-                tr td:nth-of-type(1) {
-                    padding-left: 28px;
-                }
-            }
-        }
-        .el-table__header-wrapper {
-            .has-gutter {
-                tr th:nth-of-type(1) {
-                    padding-left: 28px;
-                }
-            }
-        }
-    }
-    .el-table--border td{
-        border: none !important;
-    }
-    .el-table--border th{
-        border-right: none !important;
-    }
-    .chart-box{
-        width: 30%;
-        height: 100%;
-        >.title{
-            height: 36px;
-            line-height: 36px;
-            box-sizing: border-box;
-            padding: 0 10px;
-            color: #909399;
-            font-size: 12px;
-            font-weight: bold;
-        }
-        .chart-drawing{
-            height: calc(100% - 36px) !important;
-        }
-    }
-
-}
--- a/src/assets/css/components/views/charts/chartMap.scss
+++ b/src/assets/css/components/views/charts/chartMap.scss
@@ -1,60 +0,0 @@
-.cn-chart__map {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  .map-drawing {
-    flex: 1;
-  }
-  .map-chart__legends {
-    flex-basis: 116px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0 30px;
-
-    .map-chart__legend {
-      padding-bottom: 5px;
-      flex-grow: 0;
-      flex-shrink: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      border: 1px solid #E0E6EF;
-      border-left-color: transparent;
-      border-right-color: transparent;;
-      cursor: pointer;
-
-      &:first-of-type {
-        border-left-color: #E0E6EF;
-      }
-      &:last-of-type {
-        border-right-color: #E0E6EF;
-      }
-      &.map-chart__legend--active {
-        border-color: #59ABFF;
-
-        .legend__value {
-          color: #1890FF;
-        }
-      }
-      .legend__circle-marker {
-        flex: 0 0 12px;
-        margin: 12px 0 8px 0;
-        width: 12px;
-        border-radius: 50%;
-      }
-      .legend__value {
-        font-size: 18px;
-        font-weight: bold;
-        color: #333333;
-      }
-      .legend__name {
-        padding: 0 10px;
-        color: #666666;
-        font-size: 12px;
-        text-align: center;
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -1,675 +0,0 @@
-.cn-chart__single-value {
-  .single-value__unit {
-    padding-left: 6px;
-  }
-
-  &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
-    width: unset;
-    flex: 0 0 240px;
-    flex-wrap: wrap;
-
-    .single-value__icon {
-      width: 38px;
-      height: 38px;
-
-      i {
-        font-size: 15px;
-      }
-    }
-
-    .single-value__content {
-      .content__data {
-        font-size: 14px;
-        color: #333;
-
-        .single-value__unit {
-          font-size: 14px;
-          color: #333;
-        }
-      }
-
-      .content__title {
-        font-size: 12px;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-left {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 0 0 40%;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 72px;
-      height: 72px;
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-
-      i {
-        display: flex;
-        align-items: center;
-        font-size: 28px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      flex-direction: column;
-      max-width: 60%;
-      padding-right: 10px;
-
-      .content__data {
-        padding-bottom: 7%;
-        font-size: 20px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 16px;
-        color: #666666;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        font-weight: normal;
-        padding-left: 10px;
-        color: #666;
-        font-size: 20px;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-right {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-
-    .single-value-icon__box {
-      flex: 0 0 80px;
-    }
-
-    .single-value__icon {
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-      position: relative;
-      width: 56px;
-      height: 56px;
-
-      i {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 24px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      padding: 0 10px;
-
-      .content__title {
-        display: flex;
-        align-items: center;
-        height: 50%;
-        font-size: 16px;
-        color: #666666;
-      }
-
-      .content__data {
-        display: flex;
-        padding-top: 5%;
-        height: 50%;
-        flex: auto;
-        font-size: 24px;
-        color: #333333;
-        font-weight: bold;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-right--color {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      align-items: center;
-
-      .single-value-icon__box {
-        padding-right: 30px;
-
-        .single-value__icon {
-          border-radius: 50%;
-          position: relative;
-          margin-right: 7.5%;
-          margin-top: 30%;
-
-          .cn-icon-svg {
-            width: 50px;
-            height: 50px;
-            vertical-align: middle;
-            fill: currentColor;
-            overflow: hidden;
-          }
-
-          i {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 24px;
-          }
-        }
-      }
-
-      .single-value__data {
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-        padding-left: 20px;
-
-        .content__title {
-          display: flex;
-          align-items: flex-end;
-          height: 50%;
-          font-size: 16px;
-          color: #666666;
-          padding-bottom: 5px;
-        }
-
-        .content__data {
-          display: flex;
-          padding-top: 5%;
-          height: 50%;
-          flex: auto;
-          font-size: 24px;
-          color: #333333;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--chart {
-    display: flex;
-    padding: 13px 20px;
-    height: 100%;
-    width: 100%;
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-direction: column;
-
-      .content__title {
-        display: flex;
-        align-items: center;
-        height: 30%;
-        font-size: 16px;
-        color: #666666;
-      }
-
-      .content__data {
-        display: flex;
-        align-items: center;
-        height: 25%;
-        font-size: 24px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__chart {
-        flex: auto
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-doh {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
-    border-radius: 2px;
-
-    .single-value-icon__box {
-      flex: 0 0 80px;
-    }
-
-    .single-value__icon {
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-      position: relative;
-      width: 56px;
-      height: 56px;
-
-      i {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 24px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 0 10px;
-      margin-left: 20px;
-
-      .content__title {
-        display: flex;
-        align-items: center;
-        margin: 16px 0 27px 0;
-        font-family: PingFangSC-Medium;
-        font-size: 16px;
-        color: #333333;
-        line-height: 22px;
-        font-weight: 500;
-      }
-
-      .content__data {
-        display: flex;
-        padding-top: 5%;
-        height: 50%;
-        flex: auto;
-        font-size: 24px;
-        color: #333333;
-        font-weight: bold;
-
-        .content__data__doh {
-          .content__data__doh__count {
-            font-family: Roboto-Medium;
-            font-size: 30px;
-            color: #333333;
-            font-weight: 500;
-          }
-
-          .content__data__doh__percent {
-            margin-top: 10px;
-            font-family: Roboto-Black;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 400;
-
-            span {
-              font-family: Roboto-Medium;
-              font-size: 14px;
-              color: #FC8157;
-              font-weight: 500;
-              margin-left: 10px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--protocol {
-    height: 100%;
-    width: 100%;
-    .single-value__content {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      flex-direction: column;
-      .single-value__data {
-        display: flex;
-        flex-direction: column;
-        padding: 10px 20px 10px 18px;
-        .content__title {
-          font-size: 16px;
-          color: #333333;
-        }
-      }
-      .content__data {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .content__data-protocol:nth-of-type(1) {
-        margin-bottom: 50px;
-        span:nth-of-type(2) {
-          font-size: 12px;
-          color: #FC8157;
-          font-weight: 500;
-        }
-      }
-      .content__data-protocol:nth-of-type(2) {
-        span:nth-of-type(2) {
-          font-size: 12px;
-          color: #FBA342;
-          font-weight: 500;
-        }
-      }
-      .content__data-protocol {
-        display: flex;
-        height: 68px;
-        text-align: left;
-        .content__data-protocol-all {
-          flex: 1.5;
-        }
-        .content__data-protocol-icon {
-          display: flex;
-          width: 68px;
-          height: 100%;
-          margin: auto;
-          line-height: 68px;
-          border-radius: 100%;
-          justify-content: center;
-          i {
-            font-size: 26px;
-          }
-        }
-        .content__data-protocol-value {
-          flex: 2;
-          display: flex;
-          justify-content: space-between;
-          flex-direction: column;
-          .content__data-protocol-value-title {
-            margin-bottom: 7px;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 400;
-          }
-          .content__data-protocol-value-num {
-            font-size: 26px;
-            color: #333333;
-            font-weight: 500;
-          }
-        }
-        .content__data-protocol-percent {
-          flex: 2;
-          display: flex;
-          justify-content: center;
-          height: 68px;
-          text-align: left;
-          font-size: 14px;
-          color: #666666;
-          font-weight: 400;
-          line-height: 95px;
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--percentile-right {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    height: 100%;
-    flex: 0 0 auto;
-    flex-wrap: nowrap;
-    margin-bottom: 10px;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      margin-right: 5px;
-      flex: 0 0 80;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-
-      i {
-        display: flex;
-        align-items: center;
-        font-size: 20px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      flex-direction: column;
-      max-width: 60%;
-      padding-right: 10px;
-
-      .data__title-in-one {
-        display:flex;
-        flex-direction: row;
-        align-items: center;
-      }
-
-      .content__data {
-        margin-bottom: 5px;
-        font-size: 12px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        white-space: nowrap;
-        font-size: 12px !important;
-        color: #7e8081;
-        margin-bottom: 5px;
-        padding: 3px 4px 3px 3px;
-      }
-
-      .title-background-color {
-        background-color: #EFF6FE;
-        border-radius: 4px;
-      }
-
-      .content__percentile {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 12px;
-        color: #666666;
-        display:flex;
-        flex-direction: row;
-
-        .circle__content {
-          display:flex;
-          flex-display:row;
-          margin-right:4px;
-
-          .percentile__title-color {
-            color:#9b9b9b
-          }
-        }
-      }
-
-      .circle {
-        position: relative;
-        width: 6px;
-        height: 6px;
-        line-height: 6px;
-        border-radius: 50%;
-        -moz-border-radius: 50%;
-        margin: auto;
-        margin-right: 4px;
-        z-index: 1;
-      }
-
-      .circle.circle-p50 {
-        background: #ffa200;
-
-      }
-      .circle.circle-p90 {
-        background: #23bf9a;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        padding-left:0px;
-        padding-right: 5px;
-        color: #333333;
-        font-size: 14px;
-        font-weight: bold;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--percentile-left {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: unset;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: flex-start;
-      justify-content: right;
-      margin-right:25px;
-      flex: 0 0 80;
-      margin-bottom: 25px;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 70px;
-      height: 70px;
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-
-      i {
-        display: flex;
-        align-items: center;
-        font-size: 28px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      flex-direction: column;
-      max-width: 60%;
-      padding-right: 10px;
-      margin-left:25px;
-
-      .content__data {
-        margin-bottom: 7%;
-        font-size: 22px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px !important;
-        color: #7e8081;
-        margin-bottom: 7%;
-        font-weight:400;
-      }
-
-      .content__percentile {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 12px;
-        color: #666666;
-        display:flex;
-        flex-direction: row;
-        font-weight: bold;
-
-        .circle__content {
-          display:flex;
-          flex-display:row;
-          margin-right:15px;
-
-          .percentile__title-color {
-            color:#9b9b9b;
-            font-weight: 500;
-          }
-        }
-      }
-
-      .circle {
-        position: relative;
-        width: 7px;
-        height: 7px;
-        line-height: 7px;
-        border-radius: 50%;
-        -moz-border-radius: 50%;
-        margin: auto;
-        margin-right: 4px;
-        z-index: 1;
-      }
-
-      .circle.circle-p50 {
-        background: #ffa200;
-
-      }
-      .circle.circle-p90 {
-        background: #23bf9a;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        color: #333333;
-        font-size: 22px;
-        font-weight: bold;
-      }
-    }
-  }
-
-}
--- a/src/assets/css/components/views/charts/chartTable.scss
+++ b/src/assets/css/components/views/charts/chartTable.scss
@@ -1,71 +0,0 @@
-.active-ip.cn-chart__table {
-  height: calc(100% - 47px) !important;
-}
-.cn-chart__table{
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  .cn-chart__body {
-    flex: auto;
-    overflow-y: auto;
-    height: 100%;
-    width: 100%;
-
-    .el-table {
-      padding: 0 10px;
-      .el-table__body-wrapper.is-scrolling-none {
-        height: 100%;
-        overflow-y: auto;
-      }
-
-      &:before {
-        height: 0;
-      }
-      thead {
-        color: #333;
-      }
-      th.is-leaf, td {
-        border-bottom: none;
-      }
-      th {
-        padding-bottom: 5px;
-      }
-      td {
-        padding: 4px 0;
-        color: #333;
-      }
-    }
-    .active-ip__icon {
-      overflow: hidden;
-      position: absolute;
-      top: 8px;
-      left: 6px;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 23px;
-      height: 23px;
-      border-radius: 50%;
-      background: #e8fbf9;
-      border: 2px solid #e8fbf9;
-    }
-    .ip-green {
-      color: #23BF9A;
-    }
-    .active-ip__content {
-      position: absolute;
-      top: 7px;
-      left: 35px;
-      overflow: hidden;
-    }
-  }
-  .chart-table-pagination.el-pagination {
-    padding: 12px 0 9px 0;
-    text-align: center;
-
-    .el-pagination__jump {
-      margin-left: 10px;
-    }
-  }
-}
--- a/src/assets/css/components/views/charts/ipBasicInfo.scss
+++ b/src/assets/css/components/views/charts/ipBasicInfo.scss
@@ -1,22 +0,0 @@
-.cn-chart__ip-basic {
-  display: flex;
-  padding: 30px  60px 0 30px;
-  .cn-chart__ip-basic-info {
-    padding-right: 80px;
-  }
-  &>.el-descriptions {
-    flex: 0 0 350px;
-  }
-  .chart-location {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-  .el-descriptions :not(.is-bordered) td {
-    padding-bottom: 5px !important;
-  }
-  .el-descriptions__content {
-    color: #3976CB;
-  }
-}
-
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -1,594 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .panel__time {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 2;
-    display: flex;
-    &>div {
-      margin-left: 10px;
-    }
-  }
-  .chart-list {
-    &>.vue-grid-layout>.vue-grid-item, &>.dns-screen {
-      &>.panel-chart {
-        border: 1px solid $--chart-box-border-color;
-        background-color: #FFFFFF;
-        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-        height: 100%;
-        display: flex;
-        position: relative;
-        flex-direction: column;
-        &.panel-chart--title-chart {
-          border: none;
-          background-color: transparent;
-          box-shadow: none;
-        }
-        .chart-header {
-          display: flex;
-          justify-content:space-between;
-          align-items:center;
-          padding: 10px 20px 10px 18px;
-          flex: 0 0 40px;
-
-          font-size: 16px;
-          color: $--color-text-primary;
-          transition: all 0.2s;
-
-          &.chart-header--float {
-            position: absolute;
-            width: 100%;
-            z-index: 100;
-            box-sizing: border-box;
-            height: 10px;
-            opacity: 0;
-            transition: all linear .2s;
-
-            &:hover {
-              height: 47px;
-              opacity: 1;
-            }
-          }
-          &.chart-header--title-chart {
-            font-size: 20px;
-            color: #333;
-            padding: 0;
-            border-bottom: none;
-          }
-          .chart-header__title {
-            max-width: calc(100% - 100px);
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-
-            &.chart-header__title--block {
-              color: #1890FF;
-              font-weight: bold;
-              font-size: 16px;
-            }
-
-            .arrow-icon {
-              display: inline-block;
-              transform: rotate(0);
-              transition: all linear .2s;
-
-              &.reg-down {
-                transform: rotate(90deg);
-              }
-
-              i {
-                font-size: 12px;
-                color: #999;
-              }
-            }
-          }
-          .chart-header__tools {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .header__operation-btn {
-              margin-left: 12px;
-              cursor: pointer;
-              color: #999;
-            }
-            .chart-header__tool {
-              margin-left: 20px;
-              cursor: pointer;
-
-              .tool__icon {
-                font-size: 14px;
-                color: $--color-text-primary;
-              }
-              .cn-chart-dropdown {
-                position: absolute;
-                top: 44px;
-                right: 0;
-                left: unset;
-                transform-origin: center top;
-                z-index: 1000;
-                width: 180px;
-                li {
-                  padding-left: 15px !important;
-                  padding-right: 0 !important;
-                  width: calc(100% - 15px);
-                  text-align: left;
-                  i {
-                    margin-right: 10px;
-                  }
-                  &:hover i {
-                    color: $--color-primary;
-                  }
-                }
-              }
-            }
-          }
-          .chart-header-error{
-            position: absolute;
-            left: 0;
-            top: -1px;
-          }
-          .header__operations {
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-
-            .header__operation-btn {
-              margin-left: 12px;
-              cursor: pointer;
-              color: #999;
-            }
-
-            .header__operation.header__operation--table {
-              display: flex;
-              align-items: center;
-              height: 22px;
-              margin-left: 10px;
-              color: $--color-primary;
-              border: 1px solid $--color-primary;
-              border-radius: $--border-radius-primary;
-
-              .option__button {
-                display: flex;
-                align-items: center;
-                height: 100%;
-                padding: 0 5px;
-                cursor: pointer;
-                background-color: white;
-                transition: all linear .2s;
-              }
-              .option__button:hover {
-                background-color: #EFF2F5;
-              }
-              .option__button.icon-group-item:first-of-type:not(:last-of-type) {
-                padding: 0 5px 0 0;
-              }
-              .option__button.icon-group-item:last-of-type:not(:first-of-type) {
-                padding: 0 0 0 5px;
-              }
-              .option__select {
-                .el-input__inner {
-                  width: 80px;
-                  padding-right: 20px;
-                  border: none;
-                  height: 100%;
-                  line-height: 20px;
-                  color: $--color-primary;
-                }
-                .el-input__prefix > div {
-                  font-weight: normal;
-                  line-height: 19px;
-                  color: $--color-primary;
-                }
-                .el-input__suffix {
-                  display: flex;
-                  .el-input__suffix-inner {
-                    line-height: 14px;
-                    .el-select__caret {
-                      line-height: 14px;
-                      width: 16px;
-                      color: $--color-primary;
-                    }
-                  }
-                }
-              }
-              .option__select.select-column {
-                .el-input__inner {
-                  width: 86px;
-                  padding-left: 8px;
-                }
-              }
-              .icon-group-divide {
-                height: 14px;
-                width: 1px;
-                background-color: $--color-primary;
-              }
-              i {
-                font-size: 12px;
-              }
-            }
-          }
-        }
-        &>.cn-chart {
-          position: relative;
-          border-radius: 2px;
-          flex-grow: 1;
-          overflow: hidden;
-          width: 100%;
-          .chart-drawing {
-            height: 100%;
-            width: 100%;
-          }
-          &>.cn-chart__echarts,&>.cn-chart__table {
-            .cn-chart__header {
-              border-bottom: 1px solid $--content-right-background-color;
-              .header__operations {
-                display: flex;
-                justify-content: flex-end;
-                align-items: center;
-
-                .header__operation.header__operation--echarts {
-                  display: flex;
-                  align-items: center;
-                  height: 22px;
-                  margin-left: 10px;
-                  color: $--color-primary;
-                  border: 1px solid $--color-primary;
-                  border-radius: $--border-radius-primary;
-
-                  .option__button {
-                    display: flex;
-                    align-items: center;
-                    height: 100%;
-                    padding: 0 5px;
-                    cursor: pointer;
-                    background-color: white;
-                    transition: all linear .2s;
-                  }
-                  .option__button:hover {
-                    background-color: #EFF2F5;
-                  }
-                  .option__button.icon-group-item:first-of-type:not(:last-of-type) {
-                    padding: 0 5px 0 0;
-                  }
-                  .option__button.icon-group-item:last-of-type:not(:first-of-type) {
-                    padding: 0 0 0 5px;
-                  }
-                  .option__select {
-                    .el-input__inner {
-                      width: 120px;
-                      padding-right: 20px;
-                      border: none;
-                      height: 100%;
-                      line-height: 20px;
-                      color: $--color-primary;
-                    }
-                    .el-input__prefix > div {
-                      font-weight: normal;
-                      line-height: 19px;
-                      color: $--color-primary;
-                    }
-                    .el-input__suffix {
-                      display: flex;
-                      .el-input__suffix-inner {
-                        line-height: 14px;
-                        .el-select__caret {
-                          line-height: 14px;
-                          width: 16px;
-                          color: $--color-primary;
-                        }
-                      }
-                    }
-                  }
-                  .option__select.select-column {
-                    .el-input__inner {
-                      width: 86px;
-                      padding-left: 8px;
-                    }
-                  }
-                  .icon-group-divide {
-                    height: 14px;
-                    width: 1px;
-                    background-color: $--color-primary;
-                  }
-                  i {
-                    font-size: 12px;
-                  }
-                }
-              }
-            }
-          }
-          &>.cn-chart__block {
-            .cn-chart {
-              border: 1px solid #E7EAED;
-            }
-            /* detail页面block下的五连图的标题样式改变 */
-            .cn-chart__group .cn-chart__echarts {
-              .cn-chart__header {
-                border-bottom: none !important;
-
-                .header__title {
-                  font-size: 14px !important;
-                  color: #3976CB !important;
-                }
-              }
-            }
-          }
-          &>.cn-chart__title {
-            display: flex;
-            align-items: center;
-            font-size: 20px;
-            padding-left: 10px;
-            color: #333;
-            background-color: transparent;
-            box-shadow: none;
-            border: none;
-          }
-          &>.cn-chart__tabs {
-            padding: 10px 25px 10px 15px;
-
-            .el-tabs__nav-wrap::after {
-              height: 1px;
-            }
-            &>.el-tabs__header {
-              margin-bottom: 10px;
-            }
-            &>.el-tabs__content {
-              height: calc(100% - 40px);
-              .el-tab-pane {
-                .panel-chart {
-                  border: none;
-                  .chart-header,.cn-chart {
-                    border: none;
-                  }
-                }
-
-              }
-            }
-          }
-          &>.cn-chart__echarts {
-            .cn-chart__body {
-              overflow: hidden auto;
-
-              .el-table {
-                padding: 0 10px;
-
-                &:before {
-                  height: 0;
-                }
-                thead {
-                  color: #333;
-                }
-                th.is-leaf, td {
-                  border-bottom: none;
-                }
-                th {
-                  padding-bottom: 5px;
-                }
-                td {
-                  padding: 4px 0;
-                  color: #333;
-                }
-              }
-            }
-            .cn-chart__body.pie-with-table {
-              flex-basis: 40%;
-            }
-            .cn-chart__footer.pie-with-table {
-              flex-basis: 60%;
-              padding: 10px 30px 30px;
-            }
-          }
-          &>.pie-table {
-            font-size: 14px;
-            color: #333333;
-            font-weight: 500;
-
-            .el-table__header-wrapper {
-              .cell {
-                color: #333;
-              }
-            }
-            .el-table__expanded-cell[class*=cell] {
-              padding: 0;
-            }
-
-            .expand-table .el-table__body .el-table__row:last-of-type td {
-              border: none;
-            }
-            .expand-table {
-              font-weight: 400;
-              color: #606266;
-
-              .el-table__body-wrapper {
-                height: auto !important;
-              }
-            }
-          }
-          .chart-table-pagination.el-pagination {
-            padding: 12px 0 9px 0;
-            text-align: center;
-            height: 100%;
-            width: 100%;
-
-            .el-pagination__jump {
-              margin-left: 10px;
-            }
-          }
-        }
-        .chart__legend {
-          width: calc(100% - 40px);
-          border: 1px solid #E7EAED;
-          color: #5f6368;
-          margin: auto;
-          margin-bottom: 15px;
-
-          .chart__table-top {
-            width: 100%;
-            height: 30px;
-            border-bottom: #E7EAED 1px solid;
-            display: flex;
-
-            div {
-              font-size: 13px;
-              line-height: 28px;
-              color: $--color-primary;
-            }
-          }
-          .chart__table-below {
-            height: 240px;
-            width: 100%;
-            font-size: 13px;
-          }
-          .table-below-box {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            line-height: 24px;
-          }
-          .table-below-box:hover {
-            background-color: #f9f9f9;
-            border: 0;
-            color: #383838;
-          }
-          .table__below-color {
-            width: 27px;
-            height: 7px;
-            flex-shrink: 0;
-            padding-left: 10px;
-
-            div {
-              height: 100%;
-              width: 100%;
-              border-radius: 24%;
-            }
-          }
-          .table__below-title {
-            padding: 0 6px;
-            flex-shrink: 1;
-            flex-grow: 1;
-            overflow: hidden;
-            min-width: calc(50% - 37px);
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          .table__below-statistics {
-            width: calc((50% + 10px)/4);
-            flex-shrink: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          .table-below-box:not(.chart__table-top) {
-            cursor: pointer;
-          }
-          .table-below-box.table-below-box--inactivated {
-            color: #ccc;
-            .table__below-color div {
-              background-color: #ccc !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.entity-detail-tool {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 10px 20px 10px 0;
-  padding: 0 20px;
-  height: 60px;
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
-  border-radius: 2px;
-
-  .cn-icon-arrow-left-circle {
-    color: $--color-primary;
-    font-size: 20px;
-  }
-}
-
-.chart-error-popper{
-  word-wrap:break-word;
-  word-break:break-word;
-  border: 1px solid #e02f44;
-  min-width: 180px !important;
-  max-width: 280px !important;
-}
-
-.chart-error-popper.el-popper.is-light {
-  background: #e02f44;
-  border: 1px solid #e02f44;
-}
-.chart-error-popper.el-popover.el-popper {
-  color:white;
-}
-
-.chart-error-popper.el-popper.is-light[data-popper-placement^='top'] .el-popper__arrow::before {
-  border-color: #e02f44;
-  background: #e02f44;
-  bottom:0px;
-}
-
-.chart-error-popper.el-popper.is-light[data-popper-placement^='bottom'] .el-popper__arrow::before {
-  border-color: #e02f44;
-  background: #e02f44;
-}
-
-.chart-info-corner {
-  color: #767980;
-  cursor: pointer;
-  position: absolute;
-  display: none;
-  left: 0;
-  width: 28px;
-  height: 28px;
-  z-index: 2;
-  top: 0;
-}
-.chart-info-corner--error {
-  display: block;
-  color: #fff;
-}
-.chart-info-corner--error .chart-info-corner-inner {
-  border-left: 28px solid #e02f44;
-  border-right: none;
-  border-bottom: 28px solid rgba(0,0,0,0);
-}
-.chart-info-corner-inner {
-  width: 0;
-  height: 0;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}
-.chart-info-corner .fa {
-  position: absolute;
-  top: 2px;
-  left: 6px;
-  font-size: 65%;
-  z-index: 3;
-  font-style: normal;
-}
-.cn-chart-icon-warning:before {
-  content: "!";
-  font-weight:normal;
-}
-.ip-detail-as {
-  color: #999;
-  font-size: 12px;
-  padding-left: 10px;
-}
-
-.option-popper {
-  .el-select-dropdown__item {
-    height: 24px;
-    line-height: 24px;
-    font-size: 12px;
-  }
-}
-
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -1,71 +0,0 @@
-.detection-filter-case {
-  display: flex;
-  flex-direction: column;
-  width: 280px;
-  padding: 10px;
-  margin-right: 10px;
-  background-color: white;
-
-  .detection-filter {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 10px;
-
-    .filter__header {
-      display: flex;
-      flex: 0 0 32px;
-      align-items: center;
-      padding-left: 10px;
-      color: #666;
-      background-color: #F3F7FA;
-      cursor: pointer;
-
-      span {
-        font-size: 14px;
-        padding-left: 6px;
-      }
-      i {
-        font-size: 12px;
-        transition: all linear .1s;
-        transform: rotate(0) translate(0, 2px);
-      }
-      i.arrow-rotate {
-        transform: rotate(90deg) translate(2px, 3px);
-      }
-    }
-    .filter__body {
-      padding: 5px 0 0 15px;
-
-      .el-checkbox-group {
-        display: flex;
-        flex-direction: column;
-
-        .el-checkbox {
-          display: flex;
-          align-items: center;
-          padding: 5px 0;
-          margin-right: 5px;
-          .el-checkbox__label {
-            width: 100%;
-          }
-
-          .filter__checkbox-label {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .severity-color-block {
-              width: 4px;
-              height: 15px;
-              border-radius: 2px;
-            }
-          }
-
-          &:last-of-type {
-            padding-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/src/assets/css/components/views/detections/detection-list/detection-list.scss
@@ -1,62 +0,0 @@
-.detection-list {
-  width: 100%;
-  height: calc(100% - 42px);
-  flex: 1;
-  position: relative;
-
-  .detection__loading {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-
-    i {
-      position: absolute;
-      left: calc(50% - 15px);
-      top: calc(50% - 15px);
-      font-size: 30px;
-      color: #aaa;
-    }
-  }
-
-  .detection-list__content {
-    height: 100%;
-    width: 100%;
-    overflow: inherit;
-
-    .detection-list--block {
-      display: flex;
-      flex-wrap: wrap;
-      display: -webkit-flex;
-      justify-content: flex-start;
-      border-radius: 2px;
-      width: calc(100% - 10px);
-      height: 100%;
-      overflow: auto;
-    }
-    .detection-list--list {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: auto;
-
-      .cn-detection__shadow {
-        position: fixed;
-        height: 100vh;
-        width: 100vw;
-        left: 0;
-        top: 0;
-        z-index: 1;
-        background-color: rgba(0, 0, 0, .2);
-      }
-    }
-  }
-
-
-  .detection__pagination{
-    position: absolute;
-    bottom: 9px;
-    height: 40px;
-    width: calc(100% - 538px);
-  }
-}
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -1,234 +0,0 @@
-.cn-detection--list {
-  display: flex;
-
-  .cn-detection__collapse {
-    margin-bottom: 1px;
-    padding-top: 18px;
-    width: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    background-color: #F3F7FA;
-
-    span {
-      transform: rotate(0);
-      transition: all linear .2s;
-      padding-top: 0;
-
-      &.reg-down {
-        padding-top: 2px;
-        transform: rotate(90deg);
-      }
-    }
-
-    span:hover {
-      cursor: pointer;
-    }
-
-    .cn-icon-arrow-right {
-      color: #ADBCCA;
-      font-size: 12px;
-    }
-  }
-
-  .cn-detection__case {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 9px 0;
-    margin-bottom: 1px;
-    background-color: white;
-
-    .cn-detection__icon {
-      margin-left: 13px;
-      margin-right: 13px;
-      overflow: hidden;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 5px;
-      height: 20px;
-      border-radius: 12px;
-    }
-
-    .cn-detection__row {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      justify-content: center;
-      flex-wrap: wrap;
-
-      .cn-detection__header {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        font-size: 16px;
-        padding-bottom: 3px;
-        color: #333333;
-        align-items: center;
-
-        i {
-          color: #7b8fa2;
-          margin-right: 5px;
-          font-size: 18px;
-        }
-
-        .line {
-          color: #da5656;
-          margin-left: 12px;
-          font-size: xx-small;
-          font-weight: bold;
-        }
-
-        .circle {
-          width: 10px;
-          height: 10px;
-          border: 2px solid #da5656;
-          border-radius: 10px;
-          margin-top: 4px;
-          margin-right: 12px;
-        }
-
-        .domain {
-          background: #EFF2F5;
-          border-radius: 2px;
-          font-size: 14px;
-          color: #333333;
-          letter-spacing: 0;
-          line-height: 14px;
-          margin-left: 5px;
-        }
-      }
-
-      .cn-detection__body {
-        display: flex;
-        flex-direction: column;
-
-        .body__basic-info {
-          display: flex;
-          flex-direction: row;
-
-          .basic-info {
-            flex: 1;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-
-            .basic-info__item {
-              padding-right: 40px;
-              display: flex;
-              align-items: center;
-
-              i {
-                padding-right: 6px;
-                color: #8FA1BE;
-                font-size: 14px;
-              }
-
-              span {
-                font-size: 14px;
-              }
-
-              span:first-of-type {
-                color: #999;
-              }
-
-              span:last-of-type {
-                color: #666;
-              }
-            }
-          }
-
-          .show-detail {
-            flex-shrink: 0;
-            padding: 0 30px;
-            font-size: 12px;
-            color: #3976CB;
-
-            &:hover {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-
-    .cn-detection__detail-overview {
-      flex-basis: 100%;
-      padding: 0 10px;
-
-      .el-divider {
-        background-color: #EFF2F5;
-      }
-    }
-  }
-}
-
-.security.cn-detection--list,.service.cn-detection--list {
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-  .cn-detection__case {
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    border-radius: 2px;
-    margin-bottom: 10px;
-  }
-  .cn-detection__case {
-    padding: 18px 0;
-    flex: unset;
-  }
-  .cn-detection__header {
-    margin-bottom: 8px;
-  }
-  .cn-detection-table {
-    overflow: auto;
-  }
-  .cn-detection__case-severity {
-    display: flex;
-    width: 38px;
-    height: 34px;
-    text-align: center;
-    margin: auto;
-    margin-right: 20px;
-    margin-left: 29px;
-    line-height: 34px;
-    i {
-      font-size: 40px;
-    }
-  }
-  .el-pagination__jump {
-    margin-left: 0 !important;
-  }
-  .cn-detection__footer {
-    background: #FFFFFF;
-    position: relative;
-    box-shadow: 0 0 4px 0 rgba(0,0,0,0.06);
-    .el-pagination__total {
-      position: absolute;
-      left: 0;
-    }
-  }
-  .domain.cn-detection-domain {
-    height: 20px;
-    line-height: 20px !important;
-    padding: 0 4px;
-    font-style: italic;
-  }
-  .critical {
-    color: #D84C4C !important;
-  }
-  .high {
-    color: #FF9A79 !important;
-  }
-  .info {
-    color: #D1BD50 !important;
-  }
-  .medium {
-    color: #FFB65A !important;
-  }
-  .low {
-    color: #FFD82D !important;
-  }
-}
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -1,214 +0,0 @@
-.detection-detail-overview {
-  display: flex;
-  position: relative;
-  padding: 0 30px;
-
-  &>div {
-    flex: 0 0 50%;
-    display: flex;
-    flex-direction: column;
-
-     .overview__metric {
-       display:flex;
-       flex-direction: row;
-       padding-top: 10px;
-
-       .metric__column {
-         display:flex;
-         flex-direction: column;
-         margin-right: 15px;
-       }
-     }
-
-    .overview__title {
-      padding: 10px 0;
-      color: #333;
-      font-weight: bold;
-      font-size: 14px;
-
-      &:first-of-type {
-        padding-top: 0;
-      }
-    }
-
-    .overview__row {
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-      flex-wrap: nowrap;
-      padding: 2px 10px 2px 0;
-      font-size: 14px;
-
-      .row__label {
-        padding-right: 20px;
-        min-width: 100px;
-        color: #6B717B;
-      }
-
-      .row__charts {
-        height: 20px;
-        width: 80px;
-      }
-
-      .row__content--metric {
-        display: flex;
-        flex-wrap: nowrap;
-        color: #666666;
-        font-size:14px;
-        font-weight: 400;
-      }
-
-      .row__content {
-        display: flex;
-        color: #3976CB;
-        
-        &.row__content--link {
-          font-style: italic;
-          text-decoration: underline;
-          color: #1890FF;
-          cursor: pointer;
-        }
-        .row__content--link{
-          font-style: italic;
-          text-decoration: underline;
-          color: #1890FF;
-          cursor: pointer;
-        }
-        span{
-          font-style: italic;
-          color: #1890FF;
-        }
-      }
-    }
-  }
-}
-.overview__row-timeline {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 17px;
-  background-color: #F9F9F9;
-
-  .row-timeline {
-    flex: 0 0 110px;
-    display: flex;
-    flex-direction: column;
-
-    .row-timeline__time-info {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-basis: 16px;
-      font-size: 12px;
-      color: #666666;
-    }
-    .row-timeline__line {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 1px;
-      margin: 5px 0;
-      background-color: #CBD0D5;
-      overflow: visible;
-
-      .line-point-larger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 12px;
-        width: 12px;
-        border-radius: 50%;
-        background-color: #F9F9F9;
-        border: 1px solid #666;
-
-        .line-point {
-          background-color: #666;
-        }
-      }
-      .line-point {
-        height: 6px;
-        width: 6px;
-        border-radius: 50%;
-        background-color: #A0B5CA;
-      }
-    }
-    .row-timeline__card {
-      padding: 8px 4px 0;
-
-      &>div {
-        display: flex;
-        flex-direction: column;
-        height: 122px;
-        width: 102px;
-        padding: 10px;
-        background-color: #EFF2F5;
-        border-radius: 2px;
-
-        .timeline__severity {
-          display: flex;
-          align-items: center;
-          margin-bottom: 10px;
-
-          &.timeline__severity--critical i {
-            color: #D84C4C;
-          }
-          &.timeline__severity--high i {
-            color: #FE845D;
-          }
-          &.timeline__severity--medium i {
-            color: #FEB65A;
-          }
-          &.timeline__severity--low i {
-            color: #F6C738;
-          }
-          &.timeline__severity--info i {
-            color: #D1BD50;
-          }
-          i {
-            font-size: 16px;
-          }
-          span {
-            padding-left: 5px;
-            font-size: 14px;
-            color: #3976CB;
-          }
-        }
-        .timeline__security-type {
-          font-size: 12px;
-          color: #3976CB;
-          margin-bottom: 10px;
-        }
-        .timeline__start-time {
-          font-size: 12px;
-          color: #666666;
-        }
-      }
-    }
-    .row-timeline__foot {
-      display: flex;
-      flex-direction: column;
-      padding: 2px 0 10px;
-
-      .detection-ip {
-        display: flex;
-        align-items: center;
-        padding-left: 5px;
-        color: #666;
-        font-size: 12px;
-
-        &.detection-ip__current {
-          color: #D84C4C;
-        }
-        i {
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}
-.row__tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 4px;
-  color: white;
-}
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -1,64 +0,0 @@
-.detection__event-severity-bar {
-  flex: 0 0 175px;
-  background-color: white;
-  width: 100%;
-  margin-bottom: 10px;
-}
-.detection__list {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  .detection__list-statistics {
-    display: flex;
-    flex: 0 0 192px;
-    margin-bottom: 10px;
-    width: 100%;
-    background-color: white;
-
-    .chart-header {
-      display: flex;
-      justify-content:space-between;
-      align-items:center;
-      padding: 10px 20px 10px 0px;
-      flex: 0 0 40px;
-
-      font-size: 14px;
-      color: $--color-text-primary;
-      transition: all 0.2s;
-      border-bottom: 1px solid #E7EAED;
-
-      .chart-header__title {
-        max-width: calc(100% - 100px);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
-
-    .chart-content {
-      height:calc(100% - 40px);
-    }
-    .statistics__severity {
-      width: 33%;
-      margin-left:15px;
-      margin-right:15px;
-    }
-    .statistics__category {
-      width: 34%;
-      margin-left:15px;
-      margin-right:15px;
-    }
-    .statistics__active-attack {
-      width: 33%;
-      margin-left:15px;
-      margin-right:15px;
-    }
-  }
-}
-.filter__more {
-  padding-top: 5px;
-  font-size: 14px;
-  color: $--color-primary;
-  cursor: pointer;
-}
--- a/src/assets/css/components/views/entityExplorer/entity-detail.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-detail.scss
@@ -1,104 +0,0 @@
-.entity-detail.cn-home {
-  flex-direction: column;
-
-  .entity-detail__header {
-    flex: 0 0 80px;
-    display: flex;
-    align-items: center;
-
-    .cn-entity__name {
-      font-size: 20px;
-      color: #333333;
-      font-weight: bold;
-    }
-    .cn-entity__icon {
-      margin-left: 26px;
-      margin-right: 10px;
-      overflow: hidden;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 52px;
-      height: 52px;
-      border-radius: 50%;
-      background-color: #F3F7FA;
-
-      i {
-        font-size: 26px;
-        color: #4E84B4;
-      }
-    }
-  }
-  &>.entity-detail__body {
-    width: 100%;
-    height: calc(100% - 52px);
-    display: flex;
-    flex-direction: row;
-
-    .entity-detail__menu {
-      flex: 0 0 240px;
-      display: flex;
-      flex-direction: column;
-      padding-top: 23px;
-      border-top: 1px solid $--content-right-background-color;
-
-      .menu-item {
-        display: flex;
-        align-items: center;
-        padding: 7px 0 7px 30px;
-        font-size: 14px;
-        color: #666666;
-
-        span {
-          padding-left: 10px;
-          cursor: pointer;
-        }
-
-        &.menu-item--active {
-          color: #1890FF;
-
-          span {
-            border-left: 2px solid #1890FF;
-          }
-        }
-      }
-    }
-    .entity-detail__content {
-      height: calc(100% - 28px);
-      flex: 1;
-      padding: 10px;
-      overflow: auto;
-      background-color: $--content-right-background-color;
-
-      &>.cn-entity-detail .entity-detail__body>.cn-panel {
-        background-color: white;
-      }
-      &>.cn-entity-detail .entity-detail__body>.cn-panel2 {
-        .panel-chart {
-          .chart-header.panel-chart-block {
-            border: none;
-          }
-        }
-        .panel-chart-table.panel-chart {
-          .cn-chart {
-            height: calc(100% - 47px) !important;
-          }
-        }
-        .chart-list {
-          .vue-grid-layout .vue-grid-item {
-            .panel-chart-group.panel-chart {
-              .panel-chart {
-                border: none;
-                box-shadow: none;
-                .chart-header {
-                  border: none;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -1,126 +0,0 @@
-.entity-explorer {
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  margin: 20px;
-  height: calc(100% - 40px) !important;
-  justify-content: center;
-  transition: all linear .2s;
-
-  .entity__loading {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-
-    i {
-      position: absolute;
-      left: calc(50% - 15px);
-      top: calc(50% - 15px);
-      font-size: 30px;
-      color: #aaa;
-    }
-  }
-  &.entity-explorer--show-list {
-    background-color: unset;
-    justify-content: flex-start;
-  }
-
-  .explorer-top-tools {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding-bottom: 18px;
-
-    &>div {
-      padding: 0 0 0 10px;
-    }
-    .el-button--mini{
-      padding: 4px 6px !important;
-      min-height: 26px !important;
-      &.active i {
-        color: $--color-primary;
-      }
-      i {
-        font-size: 14px;
-      }
-    }
-  }
-  .explorer-container {
-    display: flex;
-    overflow: hidden auto;
-    height: calc(100% - 120px);
-    position: relative;
-  }
-  .explorer-foot {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    height: 17vh;
-
-    &>div {
-      width: 100%;
-      max-width: 1200px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .el-divider {
-      width: 2px;
-      height: 40px;
-      background-color: #cecece;
-    }
-    .entity-overview {
-      display: flex;
-
-      .overview-left {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 0 30px;
-
-        span:first-of-type {
-          font-size: 30px;
-          color: #333333;
-          font-weight: bold;
-        }
-        span:last-of-type {
-          font-size: 16px;
-          color: #666666;
-        }
-      }
-      .overview-right {
-        display: flex;
-        flex-direction: column;
-        padding: 0 30px;
-
-        .right-row {
-          display: flex;
-          height: 30px;
-          align-items: center;
-
-          .right-label {
-            width: 55px;
-            font-size: 14px;
-            color: #666666;
-          }
-          .right-value {
-            font-size: 14px;
-            color: #333333;
-            font-weight: bold;
-          }
-          i {
-            padding-right: 10px;
-            font-size: 18px;
-          }
-          .cn-icon-increase {
-            color: #23BF9A;
-          }
-          .cn-icon-active {
-            color: #0091FF;
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -1,125 +0,0 @@
-.entity-filter-case {
-  display: flex;
-  flex-direction: column;
-  width: 280px;
-  margin-right: 10px;
-
-  .filter-case__header {
-    background-color: #E1E6ED;
-    margin-bottom: 10px;
-    padding-left: 8px;
-    height: 36px;
-    line-height: 36px;
-    color: #666;
-    font-size: 14px;
-  }
-  .entity-filter {
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #E7EAED;
-    margin-bottom: 10px;
-    background-color: white;
-
-    .filter__header {
-      height: 46px;
-      margin: 0 15px;
-      line-height: 46px;
-      border-bottom: 1px solid #EFF2F5;
-      font-size: 14px;
-      color: #333;
-    }
-    .filter__body {
-      padding: 11px 0 21px 0;
-
-      .filter__row {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 15px;
-        height: 26px;
-        align-items: center;
-        cursor: pointer;
-        transition: all linear .2s;
-
-        &:hover, &.filter__row--active {
-          background-color: #F3F7FA;
-        }
-        .row__label {
-          font-size: 14px;
-          i {
-            color: #8FA1BE;
-          }
-          span {
-            padding-left: 6px;
-            color: #333;
-          }
-        }
-        .row__value {
-          color: #666;
-        }
-      }
-    }
-  }
-
-  .entity-pop-custom {
-    padding: 0 10px 10px 10px;
-    border: 1px solid #EBEEF5;
-    position: absolute;
-    top: 210px;
-    left: 580px;
-    width: 440px;
-    color: #606266;
-    background: #fff;
-    border-radius: 4px;
-    z-index: 999999;
-    box-shadow: 0 0 10px #CCC;
-    box-sizing: border-box;
-
-    .el-button--mini{
-      padding: 5px 7px;
-    }
-    .pop-title{
-      margin-left: 10px;
-      margin-top:17px;
-      font-family: Roboto-Black;
-      font-size: 16px;
-      color: #333333;
-      letter-spacing: 0;
-      line-height: 16px;
-      font-weight: 400;
-      span {
-        padding-left: 6px;
-        color: #333;
-      }
-    }
-    .filter-top-box {
-      margin-top: 12px;
-      width: 100%;
-      height: fit-content;
-      .filter-top-body{
-        height: fit-content;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        .filter-top-type {
-          padding-left: 10px;
-          font-size: 14px;
-          color: #666666;
-          letter-spacing: 0;
-          font-weight: 400;
-        }
-
-        .top-table-percent{
-          display:grid;
-          grid-template-columns: 50% auto;
-          grid-template-rows: 100%;
-          grid-row-gap: 0px;
-          grid-column-gap: 0px;
-          .top-table-progress{
-            align-content: center;
-            padding-top: 8px;
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/entityExplorer/entityList/card.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/card.scss
@@ -1,169 +0,0 @@
-.cn-entity--block {
-  box-sizing: border-box;
-  margin: 0 10px 10px 0;
-  width: 321px;
-  height: 329px;
-  background: #FFFFFF;
-  border-radius: 2px;
-  transition: all .2s;
-
-  &:hover .cn-entity__header .header__content {
-
-  }
-  .cn-entity__header {
-    position: relative;
-    background-color: #FFFFFF;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    width: 100%;
-    height: 89px;
-    box-sizing: border-box;
-    transition: all .2s;
-
-    .header__bottom__line {
-      width:288px;
-      height:1px;
-      border-top:solid 1px #eff2f5;
-      position: absolute;
-      top: 88px;
-    }
-
-    .header__icon {
-      overflow: hidden;
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 52px;
-      height: 52px;
-      border-radius: 50%;
-      background-color: #F3F7FA;
-
-      i {
-        font-size: 22px;
-        color: #4E84B4;
-      }
-    }
-    .header__content {
-      font-size: 22px;
-      color: #333333;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      .content__desc{
-        color: #999999;
-        width: 200px;
-        font-size: 12px;
-        margin-top: 3px;
-        position: absolute;
-        top: 50px;
-        left: 82px;
-      }
-
-      .content__name {
-        position: absolute;
-        top: 21px;
-        left: 82px;
-        overflow: hidden;
-        max-width: 200px;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  .cn-entity__body {
-    overflow: hidden;
-    padding-top: 10px;
-    font-size: 14px;
-    position: relative;
-    height:240px;
-
-    .body__row {
-      display: flex;
-      align-items: center;
-      margin: 0 30px;
-      color: #666666;
-      padding: 4px 0;
-      justify-content: left;
-    }
-    .body__drawing-box {
-      position: relative;
-      height: 60px;
-      .chart__loading {
-        top: 0;
-        height: 100%;
-      }
-    }
-    .body__drawing {
-      position: absolute;
-      padding: 10px 30px;
-      height: 60px;
-      width: 100%;
-    }
-
-    .body__row-label {
-      padding-right: 0px;
-      color: #999999;
-      font-size: 14px;
-      font-weight: 400;
-      white-space: nowrap;
-      line-height: 16px;
-      i {
-        font-size: 13px;
-        color:#8FA1BE;
-        margin-right: 9px;
-      }
-    }
-    .body__row-value {
-      width: calc(100% - 69px);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      font-size: 14px;
-      color: #666666;
-      font-weight: 400;
-    }
-    .body__statics {
-      position: absolute;
-      bottom: 20px;
-      display: flex;
-      width: 100%;
-      padding: 0 30px;
-      font-size: 14px;
-      color: #666666;
-      .entity-statics-down{
-        padding-right: 20px;
-        min-width: 80px;
-
-        i {
-          color:#5881B7;
-          font-size:14px;
-          padding-right:6px;
-        }
-      }
-
-      .entity-statics-up{
-        padding-right: 20px;
-        min-width: 80px;;
-        i {
-          color: #62B16C;
-          font-size: 14px;
-          padding-right: 6px;
-        }
-
-      }
-      .body__detail {
-        cursor: pointer;
-        font-size: 14px;
-        color: #3976CB;
-        position: absolute;
-        right: 30px;
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -1,242 +0,0 @@
-.entity-detail-overview {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  padding: 0 30px;
-
-  .overview-map {
-    position: absolute;
-    right: 50px;
-    top: 0;
-    width: 550px;
-    height: 320px;
-
-    &.overview-map--ip {
-      height: 210px;
-    }
-    &.overview-map--app {
-      height: 260px;
-    }
-    .cn-chart {
-      height: 100%;
-      width: 100%;
-      .chart-drawing {
-        height: 100%;
-        width: 100%;
-      }
-    }
-  }
-  .overview-item {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 10px;
-
-    .overview__title {
-      color: #333;
-      font-size: 14px;
-    }
-    .overview__content {
-      display: flex;
-      flex-direction: column;
-      padding: 8px 0 0 20px;
-
-      .overview__row {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        padding: 2px 0;
-        font-size: 14px;
-
-        &.overview__row--small-font {
-          font-size: 12px;
-        }
-        .show-more {
-          color: #8FA1BE;
-          cursor: pointer;
-        }
-        &.overview__row--single-value {
-          flex-wrap: nowrap;
-          .cn-chart__single-value--detail-overview {
-            margin-right: 60px;
-          }
-        }
-        .row__label {
-          color: #6B717B;
-          padding-right: 20px;
-
-          &.row__label--width130 {
-            flex-basis: 130px;
-            padding-right: unset;
-          }
-          &.row__label--width160 {
-            flex-basis: 160px;
-            padding-right: unset;
-          }
-        }
-        .row__content {
-          display: flex;
-          color: #3976CB;
-          word-wrap: break-word;
-          max-width: 30%;
-
-          .alert-level-tag {
-            display: flex;
-            padding: 1px 4px;
-            margin-right: 6px;
-            border-radius: 2px;
-            color: white;
-
-            &.alert-level-tag--high {
-              background-color: #ED907B;
-            }
-            &.alert-level-tag--middle {
-              background-color: #FFAB66;
-            }
-            &.alert-level-tag--low {
-              background-color: #F6C738;
-            }
-          }
-          &.row__content--width200 {
-            width: 200px;
-          }
-        }
-        .row__contents {
-          display: flex;
-          flex-direction: column;
-
-          .row__content {
-            padding: 2px 0;
-            max-width: unset;
-
-            &:first-of-type {
-              padding-top: 0;
-            }
-            &:last-of-type {
-              padding-bottom: 0;
-            }
-          }
-          .row__charts-msg {
-            width: auto;
-            padding-right: 20px;
-          }
-          .row__charts {
-            height: 20px;
-            width: 60px;
-            padding-left: 5px;
-          }
-        }
-        .row__desc {
-          color: #666666;
-        }
-      }
-    }
-
-    .overview__content.domain__content {
-      .overview__tags.domain__tags {
-        flex-direction: column;
-        width: 70%;
-        .overview__domain-tabs {
-          display: flex;
-          margin: 0 0 8px 0;
-          .overview__domain-tab {
-            display: flex;
-          }
-          .overview__tag.domain__tag {
-            display: unset;
-             padding: 6px 15px;
-             margin: 0 12px 0 0;
-             text-align: center;
-             white-space: nowrap;
-             height: 32px;
-             line-height: 1.5;
-             background-color: #EFF6FE;
-             font-size: 14px;
-             border-radius: 4px;
-           }
-          .overview__tag.domain__tag-list {
-            padding: 6px 15px;
-            margin: 4px 12px 0 0;
-            text-align: center;
-            height: 24px;
-            line-height: 0.9;
-            background-color: #EFF6FE;
-            font-family: Roboto-Regular;
-            color: #3976CB;
-            font-size: 14px;
-            font-weight: 400;
-            border-radius: 15px;
-          }
-          .overview__domain-btn {
-            .overview__domain-more {
-              background-color: #EFF6FE;
-              width: 44px;
-              height: 24px;
-              border-radius: 15px;
-              color: #3976CB;
-              text-align: center;
-              margin: 4px 12px 0 0;
-              padding: 6px 15px;
-              line-height: .3;
-              cursor: pointer;
-            }
-            position: relative;
-          }
-          .overview__domain-more-tabs::-webkit-scrollbar {
-            width: 10px;
-          }
-          .overview__domain-more-tabs {
-            min-width: 150px;
-            max-height: 180px;
-            overflow: auto;
-            background: #FFFFFF;
-            box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
-            border-radius: 2px;
-            padding: 5px;
-            z-index: 1;
-            position: absolute;
-            right: -120px;
-            top: -180px;
-            .domain-more-tab {
-              height: 24px;
-              padding: 6px 12px;
-              text-align: center;
-              font-family: Roboto-Regular;
-              font-size: 12px;
-              color: #666666;
-              letter-spacing: 0;
-              line-height: 12px;
-              font-weight: 400;
-              width: 126px;
-              text-overflow: ellipsis;
-              overflow: hidden;
-              white-space: nowrap;
-            }
-          }
-        }
-      }
-    }
-
-    .overview__tags {
-      display: flex;
-
-      .overview__tag {
-        display: flex;
-        padding: 6px 15px;
-        margin-right: 20px;
-        background-color: #EFF6FE;
-        font-size: 14px;
-        border-radius: 4px;
-
-        .tag__value {
-          color: #3976CB;
-          font-weight: bold;
-        }
-        .tag__desc {
-          padding-right: 5px;
-          color: #3976CB;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
@@ -1,47 +0,0 @@
-.entity-list {
-  width: calc(100% - 290px);
-  height: calc(100% - 42px);
-  flex: 1;
-  position: relative;
-
-  .entity-list__content {
-    height: 100%;
-    width: 100%;
-    overflow: inherit;
-
-    .entity-list--block {
-      display: flex;
-      flex-wrap: wrap;
-      display: -webkit-flex;
-      justify-content: flex-start;
-      border-radius: 2px;
-      width: calc(100% - 10px);
-      height: 100%;
-      overflow: auto;
-    }
-    .entity-list--list {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: auto;
-
-      .cn-entity__shadow {
-        position: fixed;
-        height: 100vh;
-        width: 100vw;
-        left: 0;
-        top: 0;
-        z-index: 1;
-        background-color: rgba(0, 0, 0, .2);
-      }
-    }
-  }
-
-
-  .entity__pagination{
-    position: absolute;
-    bottom: 9px;
-    height: 40px;
-    width: calc(100% - 538px);
-  }
-}
--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -1,169 +0,0 @@
-.cn-entity--list {
-  display: flex;
-
-  .cn-entity__collapse {
-    margin-bottom: 1px;
-    padding-top: 30px;
-    width: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    background-color: #F3F7FA;
-
-    span {
-      transform: rotate(0);
-      transition: all linear .2s;
-      padding-top: 0;
-
-      &.reg-down {
-        padding-top: 2px;
-        transform: rotate(90deg);
-      }
-    }
-
-    span:hover {
-      cursor: pointer;
-    }
-
-    .cn-icon-arrow-right {
-      color: #ADBCCA;
-      font-size: 12px;
-    }
-  }
-
-  .cn-entity__case {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 16px 0;
-    margin-bottom: 1px;
-    background-color: white;
-
-    .cn-entity__icon {
-      margin-left: 26px;
-      margin-right: 10px;
-      overflow: hidden;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 52px;
-      height: 52px;
-      border-radius: 50%;
-      background-color: #F3F7FA;
-
-      i {
-        font-size: 26px;
-        color: #4E84B4;
-      }
-    }
-
-    .cn-entity__row {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      justify-content: center;
-      flex-wrap: wrap;
-
-      .cn-entity__header {
-        font-size: 16px;
-        padding-bottom: 3px;
-        color: #333333;
-      }
-
-      .cn-entity__body {
-        display: flex;
-        flex-direction: column;
-
-        .body__basic-info {
-          display: flex;
-          flex-direction: row;
-
-          .basic-info {
-            flex: 1;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-
-            .basic-info__item {
-              padding-right: 40px;
-
-              .item__box {
-                display: flex;
-                align-items: center;
-                flex-direction: row;
-
-                i {
-                  padding-right: 6px;
-                  color: #8FA1BE;
-                  font-size: 12px;
-                  height: 13px;
-                }
-
-                span {
-                  font-size: 14px;
-                }
-
-                span:first-of-type {
-                  color: #999;
-                }
-
-                span:last-of-type {
-                  color: #666;
-                }
-
-                .row__charts {
-                  height: 19px;
-                  width: 60px;
-                  padding-left: 5px;
-                }
-              }
-
-              i {
-                padding-right: 6px;
-                color: #8FA1BE;
-                font-size: 12px;
-              }
-
-              span {
-                font-size: 14px;
-              }
-
-              span:first-of-type {
-                color: #999;
-              }
-
-              span:last-of-type {
-                color: #666;
-              }
-
-
-            }
-          }
-
-          .show-detail {
-            flex-shrink: 0;
-            padding: 0 30px;
-            font-size: 12px;
-            color: #3976CB;
-
-            &:hover {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-
-    .cn-entity__detail-overview {
-      flex-basis: 100%;
-      padding: 0 10px;
-      overflow: hidden;
-
-      .el-divider {
-        background-color: #EFF2F5;
-      }
-    }
-  }
-}
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -1,152 +0,0 @@
-.explorer-search {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  background-image: url('~@/assets/img/cn-explore-bg.svg');
-  background-repeat: no-repeat;
-  background-position: 0 100%;
-  background-size: 100%;
-  margin-bottom: 10px;
-
-  &.explorer-search--show-list {
-    flex: 0 0 40px;
-    background-image: none;
-  }
-  .explorer-search__title {
-    height: 112px;
-    text-align: center;
-    font-size: 42px;
-    color: #3976CB;
-  }
-  .explorer-search__input-case {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0 20px;
-
-    &.explorer-search__input-case--question-mark-in-line {
-      flex-direction: row;
-      padding: 0;
-
-      .explorer-search__input {
-        height: 40px;
-        max-width: unset;
-      }
-    }
-    .search-symbol-inline {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #666;
-      font-size: 16px;
-      padding: 0 10px;
-      cursor: pointer;
-    }
-    .explorer-search__input {
-      width: 100%;
-      max-width: 1000px;
-      height: 40px;
-    }
-    .explorer-search__foot {
-      display: flex;
-      padding-top: 18px;
-      width: 100%;
-      max-width: 1000px;
-      position: relative;
-      justify-content: space-between;
-      font-weight: bold;
-
-      .foot__item {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        color: #3976CB;
-
-        .el-divider {
-          background-color: #3976CB;
-        }
-
-        i, span {
-          cursor: pointer;
-        }
-
-        i {
-          transition: all linear .1s;
-          transform: rotate(0) translate(0, 0);
-        }
-        i.arrow-rotate {
-          transform: rotate(90deg) translate(2px, 3px);
-        }
-      }
-
-      .search__history {
-        position: absolute;
-        display: flex;
-        padding: 10px 0 0 0;
-        flex-direction: column;
-        width: 100%;
-        max-width: 1000px;
-        z-index: 2;
-        top: 47px;
-        border: 1px solid rgba(206,206,206,0.20);
-        border-radius: 2px;
-        background-color: white;
-
-        .history__items {
-          max-height: 300px;
-          overflow: auto;
-          .history__item {
-            height: 35px;
-            display: flex;
-            align-items: center;
-            padding-left: 30px;
-            font-weight: normal;
-            font-size: 14px;
-            flex-shrink: 0;
-
-            &.clear-all span {
-              cursor: pointer;
-            }
-            div {
-              color: #999;
-            }
-            .item-date {
-              color: #bbb;
-              padding: 0 20px 0 0;
-            }
-            .item-value {
-              flex-basis: calc(100% - 200px);
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              word-break: break-all;
-              color: #444;
-            }
-          }
-          .history__item {
-            cursor: pointer;
-          }
-          .history__item:hover {
-            background-color: #ecf5ff;
-            color: #66b1ff;
-          }
-        }
-        .clear-all {
-          padding-left: 30px;
-          font-weight: normal;
-          font-size: 14px;
-          height: 35px;
-          display: flex;
-          align-items: center;
-          color: #3976CB;
-
-          span {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-
-}
--- a/src/assets/css/components/views/report/builtinReport.scss
+++ b/src/assets/css/components/views/report/builtinReport.scss
@@ -1,137 +0,0 @@
-.cn-builtin {
-  background: #fff;
-  margin: 10px;
-  height: calc(100% - 20px) !important;
-  display: flex;
-  flex-direction: row;
-  .cn-builtin-left {
-    width: 288px;
-    height: 100%;
-    border-right: 1px solid  #E7EAED;
-    .cn-builtin-left-title {
-      padding: 28px 0 26px 13px;
-      font-size: 16px;
-      color: #333333;
-      letter-spacing: 0;
-    }
-    .cn-builtin-left-menu {
-      width: 250px;
-      height: 46px;
-      margin: auto;
-      font-size: 14px;
-      color: #333333;
-      letter-spacing: 0;
-      line-height: 46px;
-      padding-left: 15px;
-      cursor: pointer;
-    }
-    .cn-builtin-left-menu.cn-active {
-      background: #F4FAFF;
-      border-radius: 2px;
-      color: #0091FF;
-    }
-  }
-  .cn-builtin-right {
-    flex: 1;
-    .list-page .main-container {
-      padding: 0;
-      .cn-table {
-        height: calc(100% - 62px) !important;
-        .el-table--fit.el-table--border {
-          height: calc(100% - 55px) !important;
-        }
-      }
-    }
-    .el-table__header th:first-of-type .el-checkbox:last-of-type {
-      border-left: none;
-      display: none;
-    }
-    .table-operation-all {
-      width: 300px;
-      position: absolute;
-      bottom: 17px;
-      z-index: 2;
-      left: 20px;
-      line-height: 24px;
-      height: 24px;
-      display: flex;
-      .el-checkbox {
-        width: 14px;
-        height: 14px;
-        padding: 0;
-        .el-checkbox__input,.el-checkbox__inner {
-          width: 100%;
-          height: 100%;
-          min-width: unset;
-        }
-      }
-      .table-operation-all-span {
-        height: 24px;
-        display: flex;
-        span {
-          margin: 0 10px;
-          font-size: 14px;
-          color: #666666;
-          letter-spacing: 0;
-          font-weight: 400;
-        }
-        .table-operation-back-down {
-          font-weight: 500;
-          height: 24px;
-          background: #D7D7D7;
-          border-radius: 2px;
-          line-height: 21px;
-          cursor: pointer;
-          position: relative;
-          span {
-            margin: 3px 8px;
-            font-size: 12px;
-            color: #FFFFFF;
-          }
-        }
-        .table-operation-back-down div {
-          color: #FFFFFF;
-          height: 24px;
-          background: #D7D7D7;
-          border-radius: 2px;
-          i {
-            font-size: 25px;
-            top: calc(50% - 12px);
-          }
-        }
-        .table-operation-back-down.table-operation-all-checkbox {
-           background: #0091ff;
-         }
-        .table-operation-back-down.table-operation-all-loading {
-           background: #D7D7D7;
-         }
-      }
-    }
-    .table-operation-items {
-      .table-operation-item--down {
-        margin-right: 16px;
-        cursor: pointer;
-      }
-      .table-operation-item--down,.table-operation-item--preview {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        position: relative;
-        .chart__loading {
-          .el-icon-loading {
-            font-size: 12px;
-            left: calc(50% - 6px);
-            top: calc(50% - 6px);
-          }
-        }
-        .icon {
-          height: 25px;
-          width: 25px;
-        }
-      }
-      .table-operation-item--preview {
-        cursor: pointer;
-      }
-    }
-  }
-}
--- a/src/assets/css/font/iconfont.css
+++ b/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1649728125883') format('woff2'),
-       url('iconfont.woff?t=1649728125883') format('woff'),
-       url('iconfont.ttf?t=1649728125883') format('truetype');
+  src: url('iconfont.woff2?t=1634635259684') format('woff2'),
+       url('iconfont.woff?t=1634635259684') format('woff'),
+       url('iconfont.ttf?t=1634635259684') format('truetype');
 }

 .cn-icon {
@@ -13,178 +13,6 @@
  -moz-osx-font-smoothing: grayscale;
 }

-.cn-icon-report:before {
-  content: "\e76f";
-}
-
-.cn-icon-shezhi:before {
-  content: "\e76c";
-}
-
-.cn-icon-preview:before {
-  content: "\e76d";
-}
-
-.cn-icon-download2:before {
-  content: "\e76e";
-}
-
-.cn-icon-requests:before {
-  content: "\e76a";
-}
-
-.cn-icon-traffic:before {
-  content: "\e76b";
-}
-
-.cn-icon-domain2:before {
-  content: "\e767";
-}
-
-.cn-icon-ip2:before {
-  content: "\e768";
-}
-
-.cn-icon-app2:before {
-  content: "\e769";
-}
-
-.cn-icon-intercept:before {
-  content: "\e600";
-}
-
-.cn-icon-fraudulent-app:before {
-  content: "\e601";
-}
-
-.cn-icon-fraudulent-ip:before {
-  content: "\e602";
-}
-
-.cn-icon-fraudulent-domain:before {
-  content: "\e603";
-}
-
-.cn-icon-partly-cloudy:before {
-  content: "\e604";
-}
-
-.cn-icon-detection:before {
-  content: "\e766";
-}
-
-.cn-icon-filter:before {
-  content: "\e764";
-}
-
-.cn-icon-clear:before {
-  content: "\e765";
-}
-
-.cn-icon-time2:before {
-  content: "\e760";
-}
-
-.cn-icon-alert-level:before {
-  content: "\e763";
-}
-
-.cn-icon-windows:before {
-  content: "\e762";
-}
-
-.cn-icon-attacked:before {
-  content: "\e75e";
-}
-
-.cn-icon-attacker:before {
-  content: "\e75f";
-}
-
-.cn-icon-severity-level:before {
-  content: "\e75c";
-}
-
-.cn-icon-event-type:before {
-  content: "\e75d";
-}
-
-.cn-icon-trojan:before {
-  content: "\e761";
-}
-
-.cn-icon-mining-machine:before {
-  content: "\e758";
-}
-
-.cn-icon-percentage:before {
-  content: "\e759";
-}
-
-.cn-icon-mining-pool:before {
-  content: "\e75a";
-}
-
-.cn-icon-mining-traffic:before {
-  content: "\e75b";
-}
-
-.cn-icon-entity-alert:before {
-  content: "\e755";
-}
-
-.cn-icon-safe:before {
-  content: "\e756";
-}
-
-.cn-icon-city:before {
-  content: "\e757";
-}
-
-.cn-icon-search-advance:before {
-  content: "\e750";
-}
-
-.cn-icon-search-normal:before {
-  content: "\e751";
-}
-
-.cn-icon-blocks:before {
-  content: "\e752";
-}
-
-.cn-icon-list:before {
-  content: "\e753";
-}
-
-.cn-icon-help:before {
-  content: "\e754";
-}
-
-.cn-icon-active:before {
-  content: "\e74e";
-}
-
-.cn-icon-increase:before {
-  content: "\e74f";
-}
-
-.cn-icon-debug:before {
-  content: "\e606";
-}
-
-.cn-icon-override:before {
-  content: "\e68a";
-}
-
-.cn-icon-download1:before {
-  content: "\e6ab";
-}
-
-.cn-icon-upload1:before {
-  content: "\e6ac";
-}
-
 .cn-icon-position2:before {
  content: "\e745";
 }
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
--- a/src/assets/css/font/iconfont.ttf
+++ b/src/assets/css/font/iconfont.ttf
--- a/src/assets/css/font/iconfont.woff
+++ b/src/assets/css/font/iconfont.woff
--- a/src/assets/css/font/iconfont.woff2
+++ b/src/assets/css/font/iconfont.woff2
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,29 +1,7 @@
-@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
-  font-family: 'element-icons';
-  src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), /* chrome, firefox */
-  url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  font-weight: normal;
-  font-display: auto;
-  font-style: normal;
-}
-$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错
-
+@import './font/iconfont';
@import './common';
-
-/* 主题 */
-
-.theme-light {
-  $--theme: light;
-  @import './themes/theme-light.scss'; // 加载主题变量
-  @import './themes/src/index.scss'; // 加载ele样式
-  @import './components/index'; // 加载cn组件样式
-  @import './common/index.scss'; // 加载通用样式
-}
-
-.theme-dark {
-  $--theme: dark;
-  @import './themes/theme-dark.scss'; // 加载主题变量
-  @import './themes/src/index.scss'; // 加载ele样式
-  @import './components/index'; // 加载cn组件样式
-  @import './common/index.scss'; // 加载通用样式
-}
+@import './rightBoxCommon';
+@import './tableCommon';
+@import './chart';
+@import '../stylus/index.scss';
+@import './font/iconfont.css';
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -46,11 +46,6 @@
      border: 1px solid #E6EAED;

    }
-    .top-tool-search {
-     .top-tool-btn {
-       border-left: none;
-     }
-    }

    .top-tool-right {
      display: flex;
@@ -73,7 +68,7 @@
      }
    }
    .top-tool-btn {
-      height: 33px;
+      height: 32px;
      width: 36px;
      border: 1px solid $--border-color-primary;
      outline: none;
@@ -86,7 +81,6 @@
        color: $--button-gray-color;
      }
    }
-
    .top-tool-btn.top-tool-btn--text {
      padding: 0 8px;
      width: unset;
@@ -247,7 +241,7 @@
      box-shadow: 1px 0 $--right-box-border-color;
    }
    .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
-      //border-right: none !important;
+      border-right: none !important;
      box-shadow: 1px 0 $--right-box-border-color;
    }
    .el-table__fixed-body-wrapper {
--- a/src/assets/css/themes/theme-light.scss
+++ b/src/assets/css/themes/theme-light.scss
@@ -18,6 +18,32 @@ $--tree-node-hover-background-color: #F5F7FA;
 $--collapse-header-height: 42px;
 $--collapse-border-color: #EFF2F5;

+/** 自定义变量 **/
+:root {
+  /* 自适应变量 */
+  @media only screen  and (min-width : 10px) {
+    --chart-height-unit: 25px;  // chart的单元高度
+/*    --entity-width: calc(50% - 5px);  // entity列表每个entity框的宽度
+    --entity-height: 190px;  // entity列表每个entity框的高度*/
+  }
+  @media only screen  and (min-width : 1224px) {
+    --chart-height-unit: 30px;
+  }
+/*  @media only screen  and (min-width : 1560px) {
+    --entity-width: calc(33.3% - 7px);
+  }*/
+  @media only screen  and (min-width : 1824px) {
+    --chart-height-unit: 40px;
+   /* --entity-width: calc(33.3% - 7px);
+    --entity-height: 210px;*/
+  }
+  @media only screen  and (min-width : 2424px) {
+    --chart-height-unit: 55px;
+  /*  --entity-width: calc(25% - 8px);
+    --entity-height: 240px;*/
+  }
+}
+
 $--border-color-primary: #DEDEDE;
 $--border-radius-primary: 2px;

@@ -51,13 +77,9 @@ $--chart-single-value-icon-background-color: #E8F6FF;

 $--content-right-background-color: #EFF2F5; //右侧背景色

-// 空白背景色
-$--background-color-empty: #fffffe;
-$--background-color-1: #EFEFEF;
-// 普通字色(覆盖element-ui内置变量)
-$--color-text: #333;
-$--color-text-regular: #666665;
-$--border-color-light: #E7EAED;
-$--chart-box-border-color: $--border-color-light;
-$--chart-title-hover-background-color: $--background-color-1;
-@import './common';
+/** 改变 icon 字体路径变量，并引入element-ui变量文件 **/
+$--font-path: '~element-plus/lib/theme-chalk/fonts';
+@import "~element-plus/packages/theme-chalk/src/index";
+:export {
+  themeColor: $--color-primary;
+}
--- a/src/assets/css/themes/THEME_README.md
+++ b/src/assets/css/themes/THEME_README.md
@@ -1,13 +0,0 @@
-# 主题功能说明
-
-### 说明
-
- 对项目中的主题相关颜色进行归类、抽取变量
- 代码中设置元素的颜色时，对主题相关色应使用变量，不应使用颜色值
- 切换主题时，更改body标签上的class
-
-### 源码改动
- theme-chalk/src/common/var.scss 首行增加$--theme属性
- theme-chalk/src/mixins/mixins.scss 改动较多，如需了解请比对文件差异
-   // $arrow-selector: #{& + '__arrow'};   
-    改为 $arrow-selector: '.el-popper__arrow';
--- a/src/assets/css/themes/common.scss
+++ b/src/assets/css/themes/common.scss
@@ -1,67 +0,0 @@
-/*---滚动条默认显示样式--*/
-::-webkit-scrollbar-thumb {
-  background-color: #ddd;
-  border-radius: 6px;
-  border: 1px solid #fff;
-}
-/*---鼠标点击滚动条显示样式--*/
-::-webkit-scrollbar-thumb:hover {
-  background-color: #c8c8c8;
-  border-radius: 6px;
-}
-/*---滚动条大小--*/
-::-webkit-scrollbar {
-  width: 14px;
-  height: 14px;
-}
-/*---滚动框背景样式--*/
-::-webkit-scrollbar-track-piece {
-  background-color: transparent;
-}
-/* input的placeholder字色 */
-input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
-  color: lighten(#0091ff, 20%);
-}
-.myDatePicker .el-picker-panel__footer{
-  .el-button{
-    display: none;
-  }
-  .is-plain{
-    display: inline-block;
-  }
-}
-
-th *:first-letter,
-.left-menu *:first-letter,
-.option-popper *,
-.header__operations *:first-letter {
-  text-transform: capitalize;
-}
-
-.outer-box {
-  padding: 10px;
-  height: 100%;
-  width: 100%;
-}
-
-.el-table__empty-block {
-  width: 100% !important;
-}
-
-/* 淡化amcharts的logo */
-g [aria-labelledby$=-title] {
-  opacity: 0.1;
-  transform: translateX(calc(100% - 52px)) scale(.7);
-}
-
-.no-data {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  color: #999;
-}
-.no-data-hide {
-  display: none;
-}
--- a/src/assets/css/themes/src/affix.scss
+++ b/src/assets/css/themes/src/affix.scss
@@ -1,7 +0,0 @@
-@import "mixins/mixins";
-
-@include b(affix) {
-  @include m(fixed) {
-    position: fixed;
-  }
-}
--- a/src/assets/css/themes/src/alert.scss
+++ b/src/assets/css/themes/src/alert.scss
@@ -1,147 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(alert) {
-  width: 100%;
-  padding: $--alert-padding;
-  margin: 0;
-  box-sizing: border-box;
-  border-radius: $--alert-border-radius;
-  position: relative;
-  background-color: $--color-white;
-  overflow: hidden;
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  transition: opacity .2s;
-
-  @include when(light) {
-    .#{$namespace}-alert__closebtn {
-      color: $--color-text-placeholder;
-    }
-  }
-
-  @include when(dark) {
-    .#{$namespace}-alert__closebtn {
-      color: $--color-white;
-    }
-    .#{$namespace}-alert__description {
-      color: $--color-white;
-    }
-  }
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @include m(success) {
-    &.is-light {
-      background-color: $--alert-success-color;
-      color: $--color-success;
-
-      .#{$namespace}-alert__description {
-        color: $--color-success;
-      }
-    }
-
-    &.is-dark {
-      background-color: $--color-success;
-      color: $--color-white;
-    }
-  }
-
-  @include m(info) {
-    &.is-light {
-      background-color: $--alert-info-color;
-      color: $--color-info;
-    }
-
-    &.is-dark {
-      background-color: $--color-info;
-      color: $--color-white;
-    }
-
-    .#{$namespace}-alert__description {
-      color: $--color-info;
-    }
-  }
-
-  @include m(warning) {
-    &.is-light {
-      background-color: $--alert-warning-color;
-      color: $--color-warning;
-
-      .#{$namespace}-alert__description {
-        color: $--color-warning;
-      }
-    }
-
-    &.is-dark {
-      background-color: $--color-warning;
-      color: $--color-white;
-    }
-  }
-
-  @include m(error) {
-    &.is-light {
-      background-color: $--alert-danger-color;
-      color: $--color-danger;
-
-      .#{$namespace}-alert__description {
-        color: $--color-danger;
-      }
-    }
-
-    &.is-dark {
-      background-color: $--color-danger;
-      color: $--color-white;
-    }
-  }
-
-  @include e(content) {
-    display: table-cell;
-    padding: 0 8px;
-  }
-
-  @include e(icon) {
-    font-size: $--alert-icon-size;
-    width: $--alert-icon-size;
-    @include when(big) {
-      font-size: $--alert-icon-large-size;
-      width: $--alert-icon-large-size;
-    }
-  }
-
-  @include e(title) {
-    font-size: $--alert-title-font-size;
-    line-height: 18px;
-    @include when(bold) {
-      font-weight: bold;
-    }
-  }
-
-  & .#{$namespace}-alert__description {
-    font-size: $--alert-description-font-size;
-    margin: 5px 0 0 0;
-  }
-
-  @include e(closebtn) {
-    font-size: $--alert-close-font-size;
-    opacity: 1;
-    position: absolute;
-    top: 12px;
-    right: 15px;
-    cursor: pointer;
-
-    @include when(customed) {
-      font-style: normal;
-      font-size: $--alert-close-customed-font-size;
-      top: 9px;
-    }
-  }
-}
-
-.#{$namespace}-alert-fade-enter-from,
-.#{$namespace}-alert-fade-leave-active {
-  opacity: 0;
-}
--- a/src/assets/css/themes/src/aside.scss
+++ b/src/assets/css/themes/src/aside.scss
@@ -1,7 +0,0 @@
-@import "mixins/mixins";
-
-@include b(aside) {
-  overflow: auto;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
--- a/src/assets/css/themes/src/autocomplete.scss
+++ b/src/assets/css/themes/src/autocomplete.scss
@@ -1,85 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-@import "./input.scss";
-@import "./scrollbar.scss";
-@import "./popper";
-
-@include b(autocomplete) {
-  position: relative;
-  display: inline-block;
-
-  @include e(popper) {
-    @include picker-popper(
-      $--color-white,
-      1px solid $--border-color-light,
-      $--box-shadow-light,
-    );
-  }
-}
-
-@include b(autocomplete-suggestion) {
-  border-radius: $--border-radius-base;
-  box-sizing: border-box;
-
-  @include e(wrap) {
-    max-height: 280px;
-    padding: 10px 0;
-    box-sizing: border-box;
-  }
-
-  @include e(list) {
-    margin: 0;
-    padding: 0;
-  }
-
-  & li {
-    padding: 0 20px;
-    margin: 0;
-    line-height: 34px;
-    cursor: pointer;
-    color: $--color-text-regular;
-    font-size: $--font-size-base;
-    list-style: none;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-      background-color: $--select-option-hover-background;
-    }
-
-    &.highlighted {
-      background-color: $--select-option-hover-background;
-    }
-
-    &.divider {
-      margin-top: 6px;
-      border-top: 1px solid $--color-black;
-    }
-
-    &.divider:last-child {
-      margin-bottom: -6px;
-    }
-  }
-
-  @include when(loading) {
-    li {
-      text-align: center;
-      height: 100px;
-      line-height: 100px;
-      font-size: 20px;
-      color: #999;
-      @include utils-vertical-center;
-
-      &:hover {
-        background-color: $--color-white;
-      }
-    }
-
-    & .#{$namespace}-icon-loading {
-      vertical-align: middle;
-    }
-  }
-}
--- a/src/assets/css/themes/src/avatar.scss
+++ b/src/assets/css/themes/src/avatar.scss
@@ -1,51 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(avatar) {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  overflow: hidden;
-  color: $--avatar-font-color;
-  background: $--avatar-background-color;
-  width: $--avatar-large-size;
-  height: $--avatar-large-size;
-  line-height: $--avatar-large-size;
-  font-size: $--avatar-text-font-size;
-
-  >img {
-    display: block;
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  @include m(circle) {
-    border-radius: 50%;
-  }
-
-  @include m(square) {
-    border-radius: $--avatar-border-radius;
-  }
-
-  @include m(icon) {
-    font-size: $--avatar-icon-font-size;
-  }
-
-  @include m(large) {
-    width: $--avatar-large-size;
-    height: $--avatar-large-size;
-    line-height: $--avatar-large-size;
-  }
-
-  @include m(medium) {
-    width: $--avatar-medium-size;
-    height: $--avatar-medium-size;
-    line-height: $--avatar-medium-size;
-  }
-
-  @include m(small) {
-    width: $--avatar-small-size;
-    height: $--avatar-small-size;
-    line-height: $--avatar-small-size;
-  }
-}
--- a/src/assets/css/themes/src/backtop.scss
+++ b/src/assets/css/themes/src/backtop.scss
@@ -1,22 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(backtop) {
-  position: fixed;
-  background-color: $--backtop-background-color;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  color: $--backtop-font-color;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  box-shadow: 0 0 6px rgba(0,0,0, .12);
-  cursor: pointer;
-  z-index: 5;
-
-  &:hover {
-    background-color: $--backtop-hover-background-color
-  }
-}
--- a/src/assets/css/themes/src/badge.scss
+++ b/src/assets/css/themes/src/badge.scss
@@ -1,57 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(badge) {
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-
-  @include e(content) {
-    background-color: $--badge-background-color;
-    border-radius: $--badge-radius;
-    color: $--color-white;
-    display: inline-block;
-    font-size: $--badge-font-size;
-    height: $--badge-size;
-    line-height: $--badge-size;
-    padding: 0 $--badge-padding;
-    text-align: center;
-    white-space: nowrap;
-    border: 1px solid $--color-white;
-
-    @include when(fixed) {
-      position: absolute;
-      top: 0;
-      right: #{1 + $--badge-size / 2};
-      transform: translateY(-50%) translateX(100%);
-
-      @include when(dot) {
-        right: 5px;
-      }
-    }
-
-    @include when(dot) {
-      height: 8px;
-      width: 8px;
-      padding: 0;
-      right: 0;
-      border-radius: 50%;
-    }
-
-    @each $type in (primary, success, warning, info, danger) {
-      @include m($type) {
-        @if $type == primary {
-          background-color: $--color-primary;
-        } @else if $type == success {
-          background-color: $--color-success;
-        } @else if $type == warning {
-          background-color: $--color-warning;
-        } @else if $type == info {
-          background-color: $--color-info;
-        } @else {
-          background-color: $--color-danger;
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/themes/src/base.scss
+++ b/src/assets/css/themes/src/base.scss
@@ -1,2 +0,0 @@
-@import "common/transition.scss";
-@import "icon.scss";
--- a/src/assets/css/themes/src/breadcrumb-item.scss
+++ b/src/assets/css/themes/src/breadcrumb-item.scss
--- a/src/assets/css/themes/src/breadcrumb.scss
+++ b/src/assets/css/themes/src/breadcrumb.scss
@@ -1,55 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-
-@include b(breadcrumb) {
-  font-size: 14px;
-  line-height: 1;
-  @include utils-clearfix;
-
-  @include e(separator) {
-    margin: 0 9px;
-    font-weight: bold;
-    color: $--color-text-placeholder;
-
-    &[class*=icon] {
-      margin: 0 6px;
-      font-weight: normal;
-    }
-  }
-
-  @include e(item) {
-    float: left;
-
-    @include e(inner) {
-      color: $--color-text-regular;
-
-      &.is-link, & a {
-        font-weight: bold;
-        text-decoration: none;
-        transition: $--color-transition-base;
-        color: $--color-text-primary;
-
-        &:hover {
-          color: $--color-primary;
-          cursor: pointer;
-        }
-      }
-    }
-
-    &:last-child {
-      .#{$namespace}-breadcrumb__inner,
-      .#{$namespace}-breadcrumb__inner a {
-        &, &:hover {
-          font-weight: normal;
-          color: $--color-text-regular;
-          cursor: text;
-        }
-      }
-
-      .#{$namespace}-breadcrumb__separator {
-        display: none;
-      }
-    }
-  }
-}
--- a/src/assets/css/themes/src/button-group.scss
+++ b/src/assets/css/themes/src/button-group.scss
--- a/src/assets/css/themes/src/button.scss
+++ b/src/assets/css/themes/src/button.scss
@@ -1,264 +0,0 @@
-@charset "UTF-8";
-@import "common/var";
-@import "mixins/button";
-@import "mixins/mixins";
-@import "mixins/utils";
-
-@include b(button) {
-  display: inline-block;
-  line-height: 1;
-  min-height: $--input-height;
-  white-space: nowrap;
-  cursor: pointer;
-  background: $--button-default-background-color;
-  border: $--border-base;
-  border-color: $--button-default-border-color;
-  color: $--button-default-font-color;
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: none;
-  margin: 0;
-  transition: .1s;
-  font-weight: $--button-font-weight;
-  @include utils-user-select(none);
-  & + & {
-    margin-left: 10px;
-  }
-
-  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
-
-  &:hover,
-  &:focus {
-    color: $--color-primary;
-    border-color: $--color-primary-light-7;
-    background-color: $--color-primary-light-9;
-  }
-
-  &:active {
-    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    outline: none;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  & [class*="#{$namespace}-icon-"] {
-    & + span {
-      margin-left: 5px;
-    }
-  }
-
-  @include when(plain) {
-    &:hover,
-    &:focus {
-      background: $--color-white;
-      border-color: $--color-primary;
-      color: $--color-primary;
-    }
-
-    &:active {
-      background: $--color-white;
-      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      outline: none;
-    }
-  }
-
-  @include when(active) {
-    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-  }
-
-  @include when(disabled) {
-    &,
-    &:hover,
-    &:focus {
-      color: $--button-disabled-font-color;
-      cursor: not-allowed;
-      background-image: none;
-      background-color: $--button-disabled-background-color;
-      border-color: $--button-disabled-border-color;
-    }
-
-    &.#{$namespace}-button--text {
-      background-color: transparent;
-    }
-
-    &.is-plain {
-      &,
-      &:hover,
-      &:focus {
-        background-color: $--color-white;
-        border-color: $--button-disabled-border-color;
-        color: $--button-disabled-font-color;
-      }
-    }
-  }
-
-  @include when(loading) {
-    position: relative;
-    pointer-events: none;
-
-    &:before {
-      pointer-events: none;
-      content: '';
-      position: absolute;
-      left: -1px;
-      top: -1px;
-      right: -1px;
-      bottom: -1px;
-      border-radius: inherit;
-      background-color: rgba(255,255,255,.35);
-    }
-  }
-  @include when(round) {
-    border-radius: 20px;
-    padding: 12px 23px;
-  }
-  @include when(circle) {
-    border-radius: 50%;
-    padding: $--button-padding-vertical;
-  }
-  @include m(primary) {
-    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
-  }
-  @include m(success) {
-    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
-  }
-  @include m(warning) {
-    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
-  }
-  @include m(danger) {
-    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
-  }
-  @include m(info) {
-    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
-  }
-  @include m(medium) {
-    min-height: $--input-medium-height;
-
-    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
-    @include when(circle) {
-      padding: $--button-medium-padding-vertical;
-    }
-  }
-  @include m(small) {
-    min-height: $--input-small-height;
-
-    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
-    @include when(circle) {
-      padding: $--button-small-padding-vertical;
-    }
-  }
-  @include m(mini) {
-    min-height: $--input-mini-height;
-
-    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
-    @include when(circle) {
-      padding: $--button-mini-padding-vertical;
-    }
-  }
-  @include m(text) {
-    border-color: transparent;
-    color: $--color-primary;
-    background: transparent;
-    padding-left: 0;
-    padding-right: 0;
-
-    &:hover,
-    &:focus {
-      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
-      border-color: transparent;
-      background-color: transparent;
-    }
-    &:active {
-      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      border-color: transparent;
-      background-color: transparent;
-    }
-
-    &.is-disabled,
-    &.is-disabled:hover,
-    &.is-disabled:focus {
-      border-color: transparent;
-    }
-  }
-}
-
-@include b(button-group) {
-  @include utils-clearfix;
-  display: inline-block;
-  vertical-align: middle;
-
-  & > .#{$namespace}-button {
-    float: left;
-    position: relative;
-    & + .#{$namespace}-button {
-      margin-left: 0;
-    }
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &:first-child:last-child {
-      border-top-right-radius: $--button-border-radius;
-      border-bottom-right-radius: $--button-border-radius;
-      border-top-left-radius: $--button-border-radius;
-      border-bottom-left-radius: $--button-border-radius;
-
-      &.is-round {
-        border-radius: 20px;
-      }
-
-      &.is-circle {
-        border-radius: 50%;
-      }
-    }
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-    &:not(:last-child) {
-      margin-right: -1px;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 1;
-    }
-
-    @include when(active) {
-      z-index: 1;
-    }
-  }
-
-  & > .#{$namespace}-dropdown {
-    & > .#{$namespace}-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left-color: rgba($--color-white, 0.5);
-    }
-  }
-
-  @each $type in (primary, success, warning, danger, info) {
-    .#{$namespace}-button--#{$type} {
-      &:first-child {
-        border-right-color: rgba($--color-white, 0.5);
-      }
-      &:last-child {
-        border-left-color: rgba($--color-white, 0.5);
-      }
-      &:not(:first-child):not(:last-child) {
-        border-left-color: rgba($--color-white, 0.5);
-        border-right-color: rgba($--color-white, 0.5);
-      }
-    }
-  }
-}
--- a/src/assets/css/themes/src/calendar.scss
+++ b/src/assets/css/themes/src/calendar.scss
@@ -1,79 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "button";
-@import "button-group";
-
-@include b(calendar) {
-  background-color:#fff;
-
-  @include e(header) {
-    display: flex;
-    justify-content: space-between;
-    padding: 12px 20px;
-    border-bottom: $--table-border;
-  }
-
-  @include e(title) {
-    color: #000000;
-    align-self: center;
-  }
-
-  @include e(body) {
-    padding: 12px 20px 35px;
-  }
-}
-
-@include b(calendar-table) {
-  table-layout: fixed;
-  width: 100%;
-
-  thead th {
-    padding: 12px 0;
-    color: $--color-text-regular;
-    font-weight: normal;
-  }
-
-  &:not(.is-range) {
-    td.prev,
-    td.next {
-      color: $--color-text-placeholder;
-    }
-  }
-
-  td {
-    border-bottom: $--calendar-border;
-    border-right: $--calendar-border;
-    vertical-align: top;
-    transition: background-color 0.2s ease;
-
-    @include when(selected) {
-      background-color: $--calendar-selected-background-color;
-    }
-
-    @include when(today) {
-      color: $--color-primary;
-    }
-  }
-
-  tr:first-child td {
-    border-top: $--calendar-border;
-  }
-
-  tr td:first-child {
-    border-left: $--calendar-border;
-  }
-
-  tr.#{$namespace}-calendar-table__row--hide-border td {
-    border-top: none;
-  }
-
-  @include b(calendar-day) {
-    box-sizing: border-box;
-    padding: 8px;
-    height: $--calendar-cell-width;
-    &:hover {
-      cursor: pointer;
-      background-color: $--calendar-selected-background-color;
-    }
-  }
-}
--- a/src/assets/css/themes/src/card.scss
+++ b/src/assets/css/themes/src/card.scss
@@ -1,32 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(card) {
-  border-radius: $--card-border-radius;
-  border: 1px solid $--card-border-color;
-  background-color: $--color-white;
-  overflow: hidden;
-  color: $--color-text-primary;
-  transition: 0.3s;
-
-  @include when(always-shadow) {
-    box-shadow: $--box-shadow-light;
-  }
-
-  @include when(hover-shadow) {
-    &:hover,
-    &:focus {
-      box-shadow: $--box-shadow-light;
-    }
-  }
-
-  @include e(header) {
-    padding: #{$--card-padding - 2 $--card-padding};
-    border-bottom: 1px solid $--card-border-color;
-    box-sizing: border-box;
-  }
-
-  @include e(body) {
-    padding: $--card-padding;
-  }
-}
--- a/src/assets/css/themes/src/carousel-item.scss
+++ b/src/assets/css/themes/src/carousel-item.scss
@@ -1,50 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(carousel) {
-  @include e(item) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    overflow: hidden;
-    z-index: #{$--index-normal - 1};
-
-    @include when(active) {
-      z-index: #{$--index-normal + 1};
-    }
-
-    @include when(animating) {
-      transition: transform .4s ease-in-out;
-    }
-
-    @include m(card) {
-      width: 50%;
-      transition: transform .4s ease-in-out;
-      &.is-in-stage {
-        cursor: pointer;
-        z-index: $--index-normal;
-        &:hover .#{$namespace}-carousel__mask,
-        &.is-hover .#{$namespace}-carousel__mask {
-          opacity: 0.12;
-        }
-      }
-      &.is-active {
-        z-index: #{$--index-normal + 1};
-      }
-    }
-  }
-
-  @include e(mask) {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: $--color-white;
-    opacity: 0.24;
-    transition: .2s;
-  }
-}
--- a/src/assets/css/themes/src/carousel.scss
+++ b/src/assets/css/themes/src/carousel.scss
@@ -1,161 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(carousel) {
-  position: relative;
-
-  @include m(horizontal) {
-    overflow-x: hidden;
-  }
-
-  @include m(vertical) {
-    overflow-y: hidden;
-  }
-
-  @include e(container) {
-    position: relative;
-    height: 300px;
-  }
-
-  @include e(arrow) {
-    border: none;
-    outline: none;
-    padding: 0;
-    margin: 0;
-    height: $--carousel-arrow-size;
-    width: $--carousel-arrow-size;
-    cursor: pointer;
-    transition: .3s;
-    border-radius: 50%;
-    background-color: $--carousel-arrow-background;
-    color: $--color-white;
-    position: absolute;
-    top: 50%;
-    z-index: 10;
-    transform: translateY(-50%);
-    text-align: center;
-    font-size: $--carousel-arrow-font-size;
-
-    @include m(left) {
-      left: 16px;
-    }
-
-    @include m(right) {
-      right: 16px;
-    }
-
-    &:hover {
-      background-color: $--carousel-arrow-hover-background;
-    }
-
-    & i {
-      cursor: pointer;
-    }
-  }
-
-  @include e(indicators) {
-    position: absolute;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    z-index: #{$--index-normal + 1};
-
-    @include m(horizontal) {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    @include m(vertical) {
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    @include m(outside) {
-      bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
-      text-align: center;
-      position: static;
-      transform: none;
-      .#{$namespace}-carousel__indicator:hover button {
-        opacity: 0.64;
-      }
-      button {
-        background-color: $--carousel-indicator-out-color;
-        opacity: 0.24;
-      }
-    }
-
-    @include m(labels) {
-      left: 0;
-      right: 0;
-      transform: none;
-      text-align: center;
-
-      .#{$namespace}-carousel__button {
-        height: auto;
-        width: auto;
-        padding: 2px 18px;
-        font-size: 12px;
-      }
-
-      .#{$namespace}-carousel__indicator {
-        padding: 6px 4px;
-      }
-    }
-  }
-
-  @include e(indicator) {
-    background-color: transparent;
-    cursor: pointer;
-
-    &:hover button {
-      opacity: 0.72;
-    }
-
-    @include m(horizontal) {
-      display: inline-block;
-      padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
-    }
-
-    @include m(vertical) {
-      padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
-      .#{$namespace}-carousel__button {
-        width: $--carousel-indicator-height;
-        height: #{$--carousel-indicator-width / 2};
-      }
-    }
-
-    @include when(active) {
-      button {
-        opacity: 1;
-      }
-    }
-  }
-
-  @include e(button) {
-    display: block;
-    opacity: 0.48;
-    width: $--carousel-indicator-width;
-    height: $--carousel-indicator-height;
-    background-color: $--color-white;
-    border: none;
-    outline: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    transition: .3s;
-  }
-}
-
-.carousel-arrow-left-enter-from,
-.carousel-arrow-left-leave-active {
-  transform: translateY(-50%) translateX(-10px);
-  opacity: 0;
-}
-
-.carousel-arrow-right-enter-from,
-.carousel-arrow-right-leave-active {
-  transform: translateY(-50%) translateX(10px);
-  opacity: 0;
-}
--- a/src/assets/css/themes/src/cascader-panel.scss
+++ b/src/assets/css/themes/src/cascader-panel.scss
@@ -1,121 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "./checkbox";
-@import "./radio";
-@import "./scrollbar";
-
-@include b(cascader-panel) {
-  display: flex;
-  border-radius: $--cascader-menu-radius;
-  font-size: $--cascader-menu-font-size;
-
-  @include when(bordered) {
-    border: $--cascader-menu-border;
-    border-radius: $--cascader-menu-radius;
-  }
-}
-
-@include b(cascader-menu) {
-  min-width: 180px;
-  box-sizing: border-box;
-  color: $--cascader-menu-font-color;
-  border-right: $--cascader-menu-border;
-
-  &:last-child {
-    border-right: none;
-    .#{$namespace}-cascader-node {
-      padding-right: 20px;
-    }
-  }
-
-  @include e(wrap) {
-    height: 204px;
-  }
-
-  @include e(list) {
-    position: relative;
-    min-height: 100%;
-    margin: 0;
-    padding: 6px 0;
-    list-style: none;
-    box-sizing: border-box;
-  }
-
-  @include e(hover-zone) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  @include e(empty-text) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-    color: $--cascader-color-empty;
-  }
-}
-
-@include b(cascader-node) {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 30px 0 20px;
-  height: 34px;
-  line-height: 34px;
-  outline: none;
-
-  &.is-selectable.in-active-path {
-    color: $--cascader-menu-font-color;
-  }
-
-  &.in-active-path,
-  &.is-selectable.in-checked-path,
-  &.is-active {
-    color: $--cascader-menu-selected-font-color;
-    font-weight: bold;
-  }
-
-  &:not(.is-disabled) {
-    cursor: pointer;
-    &:hover, &:focus {
-      background: $--cascader-node-background-hover;
-    }
-  }
-
-  @include when(disabled) {
-    color: $--cascader-node-color-disabled;
-    cursor: not-allowed;
-  }
-
-  @include e(prefix) {
-    position: absolute;
-    left: 10px;
-  }
-
-  @include e(postfix) {
-    position: absolute;
-    right: 10px;
-  }
-
-  @include e(label) {
-    flex: 1;
-    text-align: left;
-    padding: 0 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  > .#{$namespace}-radio {
-    margin-right: 0;
-
-    .#{$namespace}-radio__label {
-      padding-left: 0;
-    }
-  }
-}
--- a/src/assets/css/themes/src/cascader.scss
+++ b/src/assets/css/themes/src/cascader.scss
@@ -1,185 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "./input";
-@import "./popper";
-@import "./tag";
-@import "./cascader-panel";
-
-@include b(cascader) {
-  display: inline-block;
-  position: relative;
-  font-size: $--font-size-base;
-  line-height: $--input-height;
-  outline: none;
-
-  &:not(.is-disabled):hover {
-    .#{$namespace}-input__inner {
-      cursor: pointer;
-      border-color: $--input-hover-border;
-    }
-  }
-
-  .#{$namespace}-input {
-    cursor: pointer;
-
-    .#{$namespace}-input__inner {
-      text-overflow: ellipsis;
-
-      &:focus {
-        border-color: $--input-focus-border;
-      }
-    }
-
-    .#{$namespace}-icon-arrow-down {
-      transition: transform .3s;
-      font-size: 14px;
-
-      @include when(reverse) {
-        transform: rotateZ(180deg);
-      }
-    }
-
-    .#{$namespace}-icon-circle-close:hover {
-      color: $--input-clear-hover-color;
-    }
-
-    @include when(focus) {
-      .#{$namespace}-input__inner {
-        border-color: $--input-focus-border;
-      }
-    }
-  }
-
-  @include m(medium) {
-    font-size: $--input-medium-font-size;
-    line-height: $--input-medium-height;
-  }
-
-  @include m(small) {
-    font-size: $--input-small-font-size;
-    line-height: $--input-small-height;
-  }
-
-  @include m(mini) {
-    font-size: $--input-mini-font-size;
-    line-height: $--input-mini-height;
-  }
-
-  @include when(disabled) {
-    .#{$namespace}-cascader__label {
-      z-index: #{$--index-normal + 1};
-      color: $--disabled-color-base;
-    }
-  }
-
-  @include e(dropdown) {
-    font-size: $--cascader-menu-font-size;
-    border-radius: $--cascader-menu-radius;
-
-    @include picker-popper(
-      $--cascader-menu-fill,
-      $--cascader-menu-border,
-      $--cascader-menu-shadow,
-    );
-  }
-
-  @include e(tags) {
-    position: absolute;
-    left: 0;
-    right: 30px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-wrap: wrap;
-    line-height: normal;
-    text-align: left;
-    box-sizing: border-box;
-
-    .#{$namespace}-tag {
-      display: inline-flex;
-      align-items: center;
-      max-width: 100%;
-      margin: 2px 0 2px 6px;
-      text-overflow: ellipsis;
-      background: $--cascader-tag-background;
-
-      &:not(.is-hit) {
-        border-color: transparent;
-      }
-
-      > span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .#{$namespace}-icon-close {
-        flex: none;
-        background-color: $--color-text-placeholder;
-        color: $--color-white;
-
-        &:hover {
-          background-color: $--color-text-secondary;
-        }
-      }
-    }
-  }
-
-  @include e(suggestion-panel) {
-    border-radius: $--cascader-menu-radius;
-  }
-
-  @include e(suggestion-list) {
-    max-height: 204px;
-    margin: 0;
-    padding: 6px 0;
-    font-size: $--font-size-base;
-    color: $--cascader-menu-font-color;
-    text-align: center;
-  }
-
-  @include e(suggestion-item) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 34px;
-    padding: 0 15px;
-    text-align: left;
-    outline: none;
-    cursor: pointer;
-
-    &:hover, &:focus {
-      background: $--cascader-node-background-hover;
-    }
-
-    &.is-checked {
-      color: $--cascader-menu-selected-font-color;
-      font-weight: bold;
-    }
-
-    > span {
-      margin-right: 10px;
-    }
-  }
-
-  @include e(empty-text) {
-    margin: 10px 0;
-    color: $--cascader-color-empty;
-  }
-
-  @include e(search-input) {
-    flex: 1;
-    height: 24px;
-    min-width: 60px;
-    margin: 2px 0 2px 15px;
-    padding: 0;
-    color: $--cascader-menu-font-color;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-
-    &::placeholder {
-      color: $--color-text-placeholder;
-    }
-  }
-}
--- a/src/assets/css/themes/src/check-tag.scss
+++ b/src/assets/css/themes/src/check-tag.scss
@@ -1,26 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(check-tag) {
-  background-color: $--background-color-base;
-  border-radius: $--border-radius-base;
-  color: $--color-info;
-  cursor: pointer;
-  display: inline-block;
-  font-size: $--font-size-base;
-  line-height: $--font-size-base;
-  padding: 7px 15px;
-  transition: $--all-transition;
-  font-weight: bold;
-  &:hover {
-    background-color: rgb(220, 223, 230);
-  }
-
-  @include when(checked) {
-    background-color: #DEEDFC;
-    color: $--color-primary-light-1;
-    &:hover {
-      background-color: $--color-primary-light-7;
-    }
-  }
-}
--- a/src/assets/css/themes/src/checkbox-button.scss
+++ b/src/assets/css/themes/src/checkbox-button.scss
--- a/src/assets/css/themes/src/checkbox-group.scss
+++ b/src/assets/css/themes/src/checkbox-group.scss
--- a/src/assets/css/themes/src/checkbox.scss
+++ b/src/assets/css/themes/src/checkbox.scss
@@ -1,359 +0,0 @@
-@import "common/var";
-@import "mixins/mixins";
-@import "mixins/_button";
-@import "mixins/utils";
-
-@include b(checkbox) {
-  color: $--checkbox-font-color;
-  font-weight: $--checkbox-font-weight;
-  font-size: $--font-size-base;
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  white-space: nowrap;
-  user-select: none;
-  margin-right: 30px;
-
-  @include when(bordered) {
-    padding: $--checkbox-bordered-padding;
-    border-radius: $--border-radius-base;
-    border: $--border-base;
-    box-sizing: border-box;
-    line-height: normal;
-    height: $--checkbox-bordered-height;
-
-    &.is-checked {
-      border-color: $--color-primary;
-    }
-
-    &.is-disabled {
-      border-color: $--border-color-lighter;
-      cursor: not-allowed;
-    }
-
-    & + .#{$namespace}-checkbox.is-bordered {
-      margin-left: 10px;
-    }
-
-    &.#{$namespace}-checkbox--medium {
-      padding: $--checkbox-bordered-medium-padding;
-      border-radius: $--button-medium-border-radius;
-      height: $--checkbox-bordered-medium-height;
-
-      .#{$namespace}-checkbox__label {
-        line-height: 17px;
-        font-size: $--button-medium-font-size;
-      }
-
-      .#{$namespace}-checkbox__inner {
-        height: $--checkbox-bordered-medium-input-height;
-        width: $--checkbox-bordered-medium-input-width;
-      }
-    }
-
-    &.#{$namespace}-checkbox--small {
-      padding: $--checkbox-bordered-small-padding;
-      border-radius: $--button-small-border-radius;
-      height: $--checkbox-bordered-small-height;
-
-      .#{$namespace}-checkbox__label {
-        line-height: 15px;
-        font-size: $--button-small-font-size;
-      }
-
-      .#{$namespace}-checkbox__inner {
-        height: $--checkbox-bordered-small-input-height;
-        width: $--checkbox-bordered-small-input-width;
-
-        &::after {
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-
-    &.#{$namespace}-checkbox--mini {
-      padding: $--checkbox-bordered-mini-padding;
-      border-radius: $--button-mini-border-radius;
-      height: $--checkbox-bordered-mini-height;
-
-      .#{$namespace}-checkbox__label {
-        line-height: 12px;
-        font-size: $--button-mini-font-size;
-      }
-
-      .#{$namespace}-checkbox__inner {
-        height: $--checkbox-bordered-mini-input-height;
-        width: $--checkbox-bordered-mini-input-width;
-        &::after {
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-  }
-
-  @include e(input) {
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    vertical-align: middle;
-
-    @include when(disabled) {
-      .#{$namespace}-checkbox__inner {
-        background-color: $--checkbox-disabled-input-fill;
-        border-color: $--checkbox-disabled-border-color;
-        cursor: not-allowed;
-
-        &::after {
-          cursor: not-allowed;
-          border-color: $--checkbox-disabled-icon-color;
-        }
-
-        & + .#{$namespace}-checkbox__label {
-          cursor: not-allowed;
-        }
-      }
-
-      &.is-checked {
-        .#{$namespace}-checkbox__inner {
-          background-color: $--checkbox-disabled-checked-input-fill;
-          border-color: $--checkbox-disabled-checked-input-border-color;
-
-          &::after {
-            border-color: $--checkbox-disabled-checked-icon-color;
-          }
-        }
-      }
-
-      &.is-indeterminate {
-        .#{$namespace}-checkbox__inner {
-          background-color: $--checkbox-disabled-checked-input-fill;
-          border-color: $--checkbox-disabled-checked-input-border-color;
-
-          &::before {
-            background-color: $--checkbox-disabled-checked-icon-color;
-            border-color: $--checkbox-disabled-checked-icon-color;
-          }
-        }
-      }
-
-      & + span.#{$namespace}-checkbox__label {
-        color: $--disabled-color-base;
-        cursor: not-allowed;
-      }
-    }
-
-    @include when(checked) {
-      .#{$namespace}-checkbox__inner {
-        background-color: $--checkbox-checked-background-color;
-        border-color: $--checkbox-checked-input-border-color;
-
-        &::after {
-          transform: rotate(45deg) scaleY(1);
-        }
-      }
-
-      & + .#{$namespace}-checkbox__label {
-        color: $--checkbox-checked-font-color;
-      }
-    }
-    @include when(focus) { /*focus时 视觉上区分*/
-      .#{$namespace}-checkbox__inner {
-        border-color: $--checkbox-input-border-color-hover;
-      }
-    }
-    @include when(indeterminate) {
-      .#{$namespace}-checkbox__inner {
-        background-color: $--checkbox-checked-background-color;
-        border-color: $--checkbox-checked-input-border-color;
-
-        &::before {
-          content: '';
-          position: absolute;
-          display: block;
-          background-color: $--checkbox-checked-icon-color;
-          height: 2px;
-          transform: scale(0.5);
-          left: 0;
-          right: 0;
-          top: 5px;
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-    }
-  }
-  @include e(inner) {
-    display: inline-block;
-    position: relative;
-    border: $--checkbox-input-border;
-    border-radius: $--checkbox-border-radius;
-    box-sizing: border-box;
-    width: $--checkbox-input-width;
-    height: $--checkbox-input-height;
-    background-color: $--checkbox-background-color;
-    z-index: $--index-normal;
-    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
-    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
-
-    &:hover {
-      border-color: $--checkbox-input-border-color-hover;
-    }
-
-    &::after {
-      box-sizing: content-box;
-      content: "";
-      border: 1px solid $--checkbox-checked-icon-color;
-      border-left: 0;
-      border-top: 0;
-      height: 7px;
-      left: 4px;
-      position: absolute;
-      top: 1px;
-      transform: rotate(45deg) scaleY(0);
-      width: 3px;
-      transition: transform .15s ease-in .05s;
-      transform-origin: center;
-    }
-  }
-
-  @include e(original) {
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    margin: 0;
-    width: 0;
-    height: 0;
-    z-index: -1;
-  }
-
-  @include e(label) {
-    display: inline-block;
-    padding-left: 10px;
-    line-height: 19px;
-    font-size: $--checkbox-font-size;
-  }
-
-  &:last-of-type {
-    margin-right: 0;
-  }
-}
-
-@include b(checkbox-button) {
-  position: relative;
-  display: inline-block;
-
-  @include e(inner) {
-    display: inline-block;
-    line-height: 1;
-    font-weight: $--checkbox-font-weight;
-    white-space: nowrap;
-    vertical-align: middle;
-    cursor: pointer;
-    background: $--button-default-background-color;
-    border: $--border-base;
-    border-left: 0;
-    color: $--button-default-font-color;
-    -webkit-appearance: none;
-    text-align: center;
-    box-sizing: border-box;
-    outline: none;
-    margin: 0;
-    position: relative;
-    transition: $--all-transition;
-    @include utils-user-select(none);
-
-    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
-
-    &:hover {
-      color: $--color-primary;
-    }
-
-    & [class*="#{$namespace}-icon-"] {
-      line-height: 0.9;
-
-      & + span {
-        margin-left: 5px;
-      }
-    }
-  }
-
-  @include e(original) {
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    margin: 0;
-    z-index: -1;
-  }
-
-  &.is-checked {
-    & .#{$namespace}-checkbox-button__inner {
-      color: $--checkbox-button-checked-font-color;
-      background-color: $--checkbox-button-checked-background-color;
-      border-color: $--checkbox-button-checked-border-color;
-      box-shadow: -1px 0 0 0 $--color-primary-light-4;
-    }
-    &:first-child .#{$namespace}-checkbox-button__inner {
-      border-left-color: $--checkbox-button-checked-border-color;
-    }
-  }
-
-  &.is-disabled {
-    & .#{$namespace}-checkbox-button__inner {
-      color: $--button-disabled-font-color;
-      cursor: not-allowed;
-      background-image: none;
-      background-color: $--button-disabled-background-color;
-      border-color: $--button-disabled-border-color;
-      box-shadow: none;
-    }
-    &:first-child .#{$namespace}-checkbox-button__inner {
-      border-left-color: $--button-disabled-border-color;
-    }
-  }
-
-  &:first-child {
-    .#{$namespace}-checkbox-button__inner {
-      border-left: $--border-base;
-      border-radius: $--border-radius-base 0 0 $--border-radius-base;
-      box-shadow: none !important;
-    }
-  }
-
-  &.is-focus {
-    & .#{$namespace}-checkbox-button__inner {
-      border-color: $--checkbox-button-checked-border-color;
-    }
-  }
-
-  &:last-child {
-    .#{$namespace}-checkbox-button__inner {
-      border-radius: 0 $--border-radius-base $--border-radius-base 0;
-    }
-  }
-  @include m(medium) {
-    .#{$namespace}-checkbox-button__inner {
-      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
-    }
-  }
-  @include m(small) {
-    .#{$namespace}-checkbox-button__inner {
-      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
-    }
-  }
-  @include m(mini) {
-    .#{$namespace}-checkbox-button__inner {
-      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
-    }
-  }
-}
-
-@include b(checkbox-group) {
-  font-size: 0;
-}
--- a/src/assets/css/themes/src/col.scss
+++ b/src/assets/css/themes/src/col.scss
@@ -1,200 +0,0 @@
-@import './common/var.scss';
-@import './mixins/mixins.scss';
-
-[class*='#{$namespace}-col-'] {
-  float: left;
-  box-sizing: border-box;
-  @include when(guttered) {
-    display: block;
-    min-height: 1px;
-  }
-}
-
-.#{$namespace}-col-0 {
-  display: none;
-  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
-  @include when(guttered) {
-    display: none;
-  }
-}
-
-@for $i from 0 through 24 {
-  .#{$namespace}-col-#{$i} {
-    max-width: (1 / 24 * $i * 100) * 1%;
-    flex: 0 0 (1 / 24 * $i * 100) * 1%;
-  }
-
-  .#{$namespace}-col-offset-#{$i} {
-    margin-left: (1 / 24 * $i * 100) * 1%;
-  }
-
-  .#{$namespace}-col-pull-#{$i} {
-    position: relative;
-    right: (1 / 24 * $i * 100) * 1%;
-  }
-
-  .#{$namespace}-col-push-#{$i} {
-    position: relative;
-    left: (1 / 24 * $i * 100) * 1%;
-  }
-}
-
-@include res(xs) {
-  .#{$namespace}-col-xs-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-xs-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xs-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xs-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xs-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(sm) {
-  .#{$namespace}-col-sm-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-sm-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-sm-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-sm-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-sm-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(md) {
-  .#{$namespace}-col-md-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-md-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-md-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-md-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-md-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(lg) {
-  .#{$namespace}-col-lg-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-lg-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-lg-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-lg-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-lg-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(xl) {
-  .#{$namespace}-col-xl-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-xl-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xl-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xl-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xl-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
--- a/src/assets/css/themes/src/collapse-item.scss
+++ b/src/assets/css/themes/src/collapse-item.scss
--- a/src/assets/css/themes/src/collapse-transition.scss
+++ b/src/assets/css/themes/src/collapse-transition.scss
--- a/src/assets/css/themes/src/collapse.scss
+++ b/src/assets/css/themes/src/collapse.scss
@@ -1,63 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "common/transition";
-
-@include b(collapse) {
-  border-top: 1px solid $--collapse-border-color;
-  border-bottom: 1px solid $--collapse-border-color;
-}
-@include b(collapse-item) {
-  @include when(disabled) {
-    .#{$namespace}-collapse-item__header {
-      color: $--font-color-disabled-base;
-      cursor: not-allowed;
-    }
-  }
-  @include e(header) {
-    display: flex;
-    align-items: center;
-    height: $--collapse-header-height;
-    line-height: $--collapse-header-height;
-    background-color: $--collapse-header-background-color;
-    color: $--collapse-header-font-color;
-    cursor: pointer;
-    border-bottom: 1px solid $--collapse-border-color;
-    font-size: $--collapse-header-font-size;
-    font-weight: 500;
-    transition: border-bottom-color .3s;
-    outline: none;
-    @include e(arrow) {
-      margin: 0 8px 0 auto;
-      transition: transform .3s;
-      font-weight: 300;
-      @include when(active) {
-        transform: rotate(90deg);
-      }
-    }
-    &.focusing:focus:not(:hover){
-      color: $--color-primary;
-    }
-    @include when(active) {
-      border-bottom-color: transparent;
-    }
-  }
-
-  @include e(wrap) {
-    will-change: height;
-    background-color: $--collapse-content-background-color;
-    overflow: hidden;
-    box-sizing: border-box;
-    border-bottom: 1px solid $--collapse-border-color;
-  }
-
-  @include e(content) {
-    padding-bottom: 25px;
-    font-size: $--collapse-content-font-size;
-    color: $--collapse-content-font-color;
-    line-height: 1.769230769230769;
-  }
-
-  &:last-child {
-    margin-bottom: -1px;
-  }
-}
--- a/src/assets/css/themes/src/color-picker.scss
+++ b/src/assets/css/themes/src/color-picker.scss
@@ -1,387 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(color-predefine) {
-  display: flex;
-  font-size: 12px;
-  margin-top: 8px;
-  width: 280px;
-
-  @include e(colors) {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-  }
-
-  @include e(color-selector) {
-    margin: 0 0 8px 8px;
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    cursor: pointer;
-
-    &:nth-child(10n + 1) {
-      margin-left: 0;
-    }
-
-    &.selected {
-      box-shadow: 0 0 3px 2px $--color-primary;
-    }
-
-    > div {
-      display: flex;
-      height: 100%;
-      border-radius: 3px;
-    }
-
-    @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-    }
-  }
-}
-
-@include b(color-hue-slider) {
-  position: relative;
-  box-sizing: border-box;
-  width: 280px;
-  height: 12px;
-  background-color: #f00;
-  padding: 0 2px;
-  float: right;
-
-  @include e(bar) {
-    position: relative;
-    background: linear-gradient(
-      to right, #f00 0%,
-      #ff0 17%, #0f0 33%,
-      #0ff 50%, #00f 67%,
-      #f0f 83%, #f00 100%);
-    height: 100%;
-  }
-
-  @include e(thumb) {
-    position: absolute;
-    cursor: pointer;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    border-radius: 1px;
-    background: #fff;
-    border: 1px solid #f0f0f0;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-    z-index: 1;
-  }
-
-  @include when(vertical) {
-    width: 12px;
-    height: 180px;
-    padding: 2px 0;
-
-    .#{$namespace}-color-hue-slider__bar {
-      background: linear-gradient(
-        to bottom, #f00 0%,
-        #ff0 17%, #0f0 33%,
-        #0ff 50%, #00f 67%,
-        #f0f 83%, #f00 100%);
-    }
-
-    .#{$namespace}-color-hue-slider__thumb {
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 4px;
-    }
-  }
-}
-
-@include b(color-svpanel) {
-  position: relative;
-  width: 280px;
-  height: 180px;
-
-  @include e(('white', 'black')) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  @include e('white') {
-    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
-  }
-
-  @include e('black') {
-    background: linear-gradient(to top, #000, rgba(0,0,0,0));
-  }
-
-  @include e(cursor) {
-    position: absolute;
-
-    > div {
-      cursor: head;
-      width: 4px;
-      height: 4px;
-      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
-      border-radius: 50%;
-      transform: translate(-2px, -2px);
-    }
-  }
-}
-
-@include b(color-alpha-slider) {
-  position: relative;
-  box-sizing: border-box;
-  width: 280px;
-  height: 12px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-
-  @include e(bar) {
-    position: relative;
-    background: linear-gradient(
-      to right, rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%);
-    height: 100%;
-  }
-
-  @include e(thumb) {
-    position: absolute;
-    cursor: pointer;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    border-radius: 1px;
-    background: #fff;
-    border: 1px solid #f0f0f0;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-    z-index: 1;
-  }
-
-  @include when(vertical) {
-    width: 20px;
-    height: 180px;
-
-    .#{$namespace}-color-alpha-slider__bar {
-      background: linear-gradient(
-        to bottom, rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 1) 100%);
-    }
-
-    .#{$namespace}-color-alpha-slider__thumb {
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 4px;
-    }
-  }
-}
-
-@include b(color-dropdown) {
-  width: 300px;
-
-  @include e(main-wrapper) {
-    margin-bottom: 6px;
-
-    &::after {
-      content: "";
-      display: table;
-      clear: both;
-    }
-  }
-
-  @include e(btns) {
-    margin-top: 6px;
-    text-align: right;
-  }
-
-  @include e(value) {
-    float: left;
-    line-height: 26px;
-    font-size: 12px;
-    color: $--color-black;
-    width: 160px;
-  }
-
-  @include e(btn) {
-    border: 1px solid #dcdcdc;
-    color: #333;
-    line-height: 24px;
-    border-radius: 2px;
-    padding: 0 20px;
-    cursor: pointer;
-    background-color: transparent;
-    outline: none;
-    font-size: 12px;
-
-    &[disabled] {
-      color: #cccccc;
-      cursor: not-allowed;
-    }
-    &:hover {
-      color: $--color-primary;
-      border-color: $--color-primary;
-    }
-  }
-
-  @include e(link-btn) {
-    cursor: pointer;
-    color: $--color-primary;
-    text-decoration: none;
-    padding: 15px;
-    font-size: 12px;
-    &:hover {
-      color: tint($--color-primary, $--button-hover-tint-percent);
-    }
-  }
-}
-
-@include b(color-picker) {
-  display: inline-block;
-  position: relative;
-  line-height: normal;
-  height: 40px;
-
-  @include when(disabled) {
-    .#{$namespace}-color-picker__trigger {
-      cursor: not-allowed;
-    }
-  }
-
-  @include m(medium) {
-    height: 36px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 36px;
-      width: 36px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 34px;
-      width: 34px;
-    }
-  }
-
-  @include m(small) {
-    height: 32px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 32px;
-      width: 32px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 30px;
-      width: 30px;
-    }
-
-    .#{$namespace}-color-picker__icon,
-    .#{$namespace}-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.8);
-    }
-  }
-
-  @include m(mini) {
-    height: 28px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 28px;
-      width: 28px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 26px;
-      width: 26px;
-    }
-
-    .#{$namespace}-color-picker__icon,
-    .#{$namespace}-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.8);
-    }
-  }
-
-  @include e(mask) {
-    height: 38px;
-    width: 38px;
-    border-radius: 4px;
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    z-index: 1;
-    cursor: not-allowed;
-    background-color: rgba(255, 255, 255, .7);
-  }
-
-  @include e(trigger) {
-    display: inline-block;
-    box-sizing: border-box;
-    height: 40px;
-    width: 40px;
-    padding: 4px;
-    border: 1px solid #e6e6e6;
-    border-radius: 4px;
-    font-size: 0;
-    position: relative;
-    cursor: pointer;
-  }
-
-  @include e(color) {
-    position: relative;
-    display: block;
-    box-sizing: border-box;
-    border: 1px solid #999;
-    border-radius: $--border-radius-small;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-
-    @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-    }
-  }
-
-  @include e(color-inner) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  @include e(empty) {
-    font-size: 12px;
-    color: #999;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-  }
-
-  @include e(icon) {
-    display: inline-block;
-    position: absolute;
-    width: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-    color: $--color-white;
-    text-align: center;
-    font-size: 12px;
-  }
-
-  @include e(panel) {
-    position: absolute;
-    z-index: 10;
-    padding: 6px;
-    box-sizing: content-box;
-    background-color: $--color-white;
-    border-radius: $--border-radius-base;
-    box-shadow: $--dropdown-menu-box-shadow;
-    &.#{$namespace}-popper{
-      border: 1px solid $--border-color-lighter;
-    }
-  }
-}
--- a/src/assets/css/themes/src/common/popup.scss
+++ b/src/assets/css/themes/src/common/popup.scss
@@ -1,42 +0,0 @@
-@import "./var.scss";
-@import "../mixins/mixins";
-
-.v-modal-enter {
-  animation: v-modal-in .2s ease;
-}
-
-.v-modal-leave {
-  animation: v-modal-out .2s ease forwards;
-}
-
-@keyframes v-modal-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-  }
-}
-
-@keyframes v-modal-out {
-  0% {
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.v-modal {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: $--popup-modal-opacity;
-  background: $--popup-modal-background-color;
-}
-
-@include b(popup-parent) {
-  @include m(hidden) {
-    overflow: hidden;
-  }
-}
--- a/src/assets/css/themes/src/common/transition.scss
+++ b/src/assets/css/themes/src/common/transition.scss
@@ -1,103 +0,0 @@
-@import '../mixins/config';
-@import "var";
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-
-.fade-in-linear-enter-from,
-.fade-in-linear-leave-to {
-  opacity: 0;
-}
-
-.#{$namespace}-fade-in-linear-enter-active,
-.#{$namespace}-fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-.#{$namespace}-fade-in-linear-enter-from,
-.#{$namespace}-fade-in-linear-leave-to {
-  opacity: 0;
-}
-
-.#{$namespace}-fade-in-enter-active,
-.#{$namespace}-fade-in-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.#{$namespace}-fade-in-enter-from,
-.#{$namespace}-fade-in-leave-active {
-  opacity: 0;
-}
-
-.#{$namespace}-zoom-in-center-enter-active,
-.#{$namespace}-zoom-in-center-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.#{$namespace}-zoom-in-center-enter-from,
-.#{$namespace}-zoom-in-center-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.#{$namespace}-zoom-in-top-enter-active,
-.#{$namespace}-zoom-in-top-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center top;
-
-  &[data-popper-placement^="top"] {
-    transform-origin: center bottom;
-  }
-}
-.#{$namespace}-zoom-in-top-enter-from,
-.#{$namespace}-zoom-in-top-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-bottom-enter-active,
-.#{$namespace}-zoom-in-bottom-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center bottom;
-}
-.#{$namespace}-zoom-in-bottom-enter-from,
-.#{$namespace}-zoom-in-bottom-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-left-enter-active,
-.#{$namespace}-zoom-in-left-leave-active {
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: $--md-fade-transition;
-  transform-origin: top left;
-}
-.#{$namespace}-zoom-in-left-enter-from,
-.#{$namespace}-zoom-in-left-leave-active {
-  opacity: 0;
-  transform: scale(.45, .45);
-}
-
-.collapse-transition {
-  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
-}
-.horizontal-collapse-transition {
-  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
-}
-
-.#{$namespace}-list-enter-active,
-.#{$namespace}-list-leave-active {
-  transition: all 1s;
-}
-.#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-
-.#{$namespace}-opacity-transition {
-  transition: opacity .3s cubic-bezier(.55,0,.1,1);
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
张帅	1e5a6dab7f	Update .gitlab-ci.yml	2021-10-25 07:19:30 +00:00
张帅	aa0d0a3921	Update .gitlab-ci.yml	2021-10-25 07:11:56 +00:00
张帅	f7ea7f1a6c	Update .gitlab-ci.yml	2021-10-25 07:04:20 +00:00
张帅	1b3fe6cbd4	Update Dockerfile	2021-10-25 06:07:00 +00:00
张帅	36f5904766	Update Dockerfile	2021-10-25 05:58:16 +00:00
张帅	81a429b171	Update Dockerfile	2021-10-25 03:45:46 +00:00
张帅	d9a2821195	Update Dockerfile	2021-10-25 03:17:01 +00:00
zhangshuai	730e94f252	feat :还原Tiles文件	2021-10-23 21:34:13 +08:00
zhangshuai	c2d53e9209	feat :删除Tiles文件	2021-10-23 21:07:09 +08:00
张帅	b1673491c6	Update .gitlab-ci.yml	2021-10-22 09:53:40 +00:00
张帅	ebd19390ed	Update .gitlab-ci.yml	2021-10-22 09:44:32 +00:00
方顺健	315e127083	Update package.json	2021-10-22 07:20:06 +00:00
方顺健	c80cf743be	Update .gitlab-ci.yml file	2021-10-20 02:43:53 +00:00
方顺健	60ec39b5c9	Update .gitlab-ci.yml file	2021-10-20 02:35:16 +00:00
方顺健	a413eb6aed	Update .gitlab-ci.yml file	2021-10-20 02:12:17 +00:00
方顺健	56e30dfe47	Update .gitlab-ci.yml	2021-10-20 02:08:03 +00:00