element-assits 0.0.89 → 0.0.90

package/lib/style.scss

@@ -1,887 +1,927 @@
-$--color-primary: #409EFF !default;
-$--color-success: #67C23A !default;
-$--color-warning: #E6A23C !default;
-$--color-danger: #F56C6C !default;
-$--color-info: #909399 !default;
-$--color-primary-text: #303133 !default;
-$--color-regular-text: #606266 !default;
-$--color-secondary-text: #909399 !default;
-$--color-placeholder-text: #C0C4CC !default;
-$--color-border-base: #DCDFE6 !default;
-$--color-border-light: #E4E7ED !default;
-$--color-border-lighter: #EBEEF5 !default;
-$--color-border-extralight: #F2F6FC !default;
-$--background-color-base: #F5F7FA !default;
-.ea-select {
-  display: inline-block;
-  position: relative;
-  .el-select {
-    width: 100%;
-  }
-  .async-loading.el-icon-loading {
-    position: absolute;
-    top: 10px;
-    right: 28px;
-    color: #999;
-  }
-  .is-collapse-tags .el-select__tags > span > .el-tag:first-child {
-    min-width: 36px;
-    max-width: calc(100% - 80px);
-  }
-}
-.ea-select-popover {
-  .el-select-dropdown__item {
-    display: flex;
-    justify-content: space-between;
-    .select-item-value {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .select-item-desc {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: #8492a6;
-      margin-left: 8px;
-    }
-  }
-  .tools {
-    padding: 0 20px;
-    margin-bottom: -5px;
-  }
-}
-
-// table
-.ea-table {
-  // 表格头部样式美化
-  .el-table {
-    transition: opacity 0.28s;
-    th {
-      background-color: $--background-color-base;
-      color: $--color-primary-text;
-      .cell {
-        min-height: 30px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-      }
-      &.is-center .cell { justify-content: center }
-      &.is-right .cell { justify-content: flex-end }
-    }
-    td, th {
-      .cell {
-        line-height: 1.2;
-      }
-    }
-    &.el-table--small {
-      td, th {
-        height: 50px;
-      }
-    }
-    &.is-dense {
-      td, th {
-        height: 32px;
-        padding: 2px 0;
-        .el-button {
-          padding-top: 0;
-          padding-bottom: 0;
-        }
-      }
-    }
-    &.is-unready {
-      opacity: 0;
-      .operation-column > div {
-        height: 32px;
-        overflow: hidden;
-      }
-      &.is-dense {
-        .operation-column > div {
-          height: 24px;
-        }
-      }
-    }
-  }
-  // 列的更多菜单项
-  .theader-th-cell {
-    .cell-icon-menu {
-      position: absolute;
-      top: 50%;
-      right: 4px;
-      transform: rotate(90deg) translateX(-50%);
-      color: $--color-placeholder-text;
-      cursor: pointer;
-      padding: 4px;
-      border-radius: 2px;
-      &:hover {
-        color: $--color-primary-text;
-        background-color: $--color-border-light;
-      }
-    }
-  }
-  // 表格底部
-  .ea-table__footer {
-    display: flex;
-    justify-content: space-between;
-    transition: opacity 0.28s;
-    .ea-table__footer-right {
-      margin-left: auto;
-      padding-right: 0;
-    }
-    > * {
-      margin-top: 12px;
-    }
-    &.is-unready {
-      opacity: 0;
-    }
-  }
-
-  .column-transition-active {
-    opacity: 0.33;
-  }
-
-  .el-button > i {
-    min-width: 12px;
-  }
-
-  .more-btn > i{
-    transform: rotate(-90deg);
-  }
-}
-
-// table - popover
-.el-popover.ea-popover-no-padding {
-  padding: 8px 0;
-  min-width: 100px;
-  &.dense {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    min-width: 70px;
-  }
-}
-
-.more-btn-panel {
-  &__item {
-    &:hover {
-      background-color: $--color-border-lighter;
-    }
-    .el-button {
-      padding: 8px 12px;
-      width: 100%;
-      text-align: left;
-    }
-  }
-}
-
-.ea-zoom-in-top-enter-active,
-.ea-zoom-in-top-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-  transform-origin: center top;
-}
-.ea-zoom-in-top-enter,
-.ea-zoom-in-top-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.ea-data-table {
-  .edt-row {
-    display: flex;
-    .edt-cell {
-      padding: 0 8px;
-      flex: 0 0 auto;
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      word-break: break-all;
-    }
-    &.edt-header {
-      background-color: $--color-border-extralight;
-      color: $--color-primary-text;
-    }
-  }
-  &--border {
-    border: 1px solid $--color-border-light;
-    .edt-row {
-      .edt-cell {
-        border-bottom: 1px solid $--color-border-light;
-        border-left: 1px solid $--color-border-light;
-        &:first-child {
-          border-left: 0;
-        }
-      }
-      &:last-child .edt-cell{
-        border-bottom: 0;
-      }
-    }
-  }
-  .loading-text {
-    color: $--color-secondary-text;
-    text-align: center;
-    font-size: inherit;
-  }
-}
-
-.el-dialog.ea-modal {
-  &.no-margin {
-    margin: 0 !important;
-  }
-  &.is-fullscreen {
-    border-radius: 0;
-    margin: 0;
-  }
-  .el-dialog__header {
-    color: #555;
-    font-size: 18px;
-    .el-dialog__title {
-      color: inherit;
-      font-size: inherit;
-    }
-  }
-}
-
-.ea-tree {
-  .ea-tree__main {
-    margin-top: 18px;
-    .ea-tree__header {
-      height: 50px;
-      padding-left: 24px;
-      padding-right: 14px;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background-color: $--background-color-base;
-      .ea-tree__header__text {
-        font-weight: bold;
-      }
-    }
-  }
-  .ea-tree-real {
-    .el-tree-node.is-current > .el-tree-node__content {
-      color: $--color-primary;
-    }
-  }
-  &.ea-tree--border {
-    .ea-tree__main {
-      border: 1px solid $--color-border-lighter;
-    }
-    .ea-tree__header {
-      border-bottom: 1px solid $--color-border-lighter;
-    }
-    .ea-tree-real {
-      margin: 10px 0;
-    }
-  }
-}
-
-.ea-split-container {
-  display: flex;
-  &.is-down {
-    user-select: none;
-  }
-  .sc-left {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-  .sc-right {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-  .sc-center {
-    flex-grow: 0;
-    flex-shrink: 0;
-    position: relative;
-  }
-  .sc-bamboo {
-    width: 8px;
-    height: 100%;
-    border: 1px solid #DCDEE2;
-    border-top: none;
-    border-bottom: none;
-    background-color: #F8F8F9;
-    cursor: col-resize;
-    user-select: none;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin: 0 16px;
-    .sc-texture {
-      width: 4px;
-      height: 1px;
-      background: rgba(23, 35, 61, .25);
-      margin-top: 3px;
-    }
-  }
-  .sc-on-bamboo {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #FFF;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-.ea-list {
-  .loading-text {
-    color: $--color-secondary-text;
-    text-align: center;
-    font-size: inherit;
-  }
-}
-
-.ea-desc {
-  font-size: 14px;
-  &__title {
-    font-size: 16px;
-    margin-bottom: 12px;
-  }
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-.ea-desc .item {
-  line-height: 24px;
-  margin-bottom: 10px;
-  flex: 0 0 auto;
-  .item-label {
-    float: left;
-    text-align: right;
-    padding-right: 8px;
-    color: #909399;
-  }
-  .item-value {
-    word-break: break-all;
-    overflow: hidden;
-    .value-no-wrap {
-      height: 48px;
-      overflow: hidden;
-      position: relative;
-      .click-see-more {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        height: 24px;
-        padding-left: 30px;
-        padding-right: 4px;
-        background-image: linear-gradient(to right, transparent 0%, #fff 20%, #fff 100%);
-        cursor: pointer;
-        color: $--color-primary;
-        user-select: none;
-      }
-    }
-  }
-}
-
-.ea-number .el-input__inner {
-  text-align: left;
-}
-
-.ea-button-tooltip + .ea-button-tooltip {
-  margin-left: 10px;
-}
-td {
-  .ea-button-tooltip + .ea-button-tooltip {
-    margin-left: 4px;
-    &.text {
-      margin-left: 10px;
-    }
-  }
-  .el-button [class*="el-icon-"] + span {
-    margin-left: 2px;
-  }
-}
-
-.el-button.ea-button.mini-rect-btn {
-  padding: 7px;
-  border: 0;
-  & [class^="design-"] {
-    margin-right: 0;
-  }
-  &:not(.is-disabled) {
-    &.primary {
-      background-color: rgba($--color-primary, .15);
-      color: $--color-primary;
-      &:hover,&:focus {
-        background-color: $--color-primary;
-        i { color: #fff }
-      }
-    }
-    &.success {
-      background-color: rgba($--color-success, .15);
-      color: $--color-success;
-      &:hover,&:focus {
-        background-color: $--color-success;
-        i { color: #fff }
-      }
-    }
-    &.info {
-      background-color: rgba($--color-info, .15);
-      color: $--color-info;
-      &:hover,&:focus {
-        background-color: $--color-info;
-        i { color: #fff }
-      }
-    }
-    &.warning {
-      background-color: rgba($--color-warning, .15);
-      color: $--color-warning;
-      &:hover,&:focus {
-        background-color: $--color-warning;
-        i { color: #fff }
-      }
-    }
-    &.danger {
-      background-color: rgba($--color-danger, .15);
-      color: $--color-danger;
-      &:hover,&:focus {
-        background-color: $--color-danger;
-        i { color: #fff }
-      }
-    }
-  }
-}
-
-.vjs-table {
-  position: relative;
-  overflow: hidden;
-}
-.vjs-header {
-  position: absolute;
-  top: 0;
-  border: 1px solid $--color-border-light;
-  border-bottom: 0;
-}
-.vjs-body {
-  border: 1px solid $--color-border-light;
-}
-
-.vjs-row {
-  height: 32px;
-  line-height: 32px;
-  display: flex;
-  justify-content: flex-start;
-  position: relative;
-  &.odd { background-color: #F8F8F8; }
-  &:not(.vjs-header):hover { background-color: #EBEEF5; }
-  .vjs-cell {
-    flex: 0 0 auto;
-    height: 100%;
-    font-size: 14px;
-    box-sizing: border-box;
-    padding: 0 8px;
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
-    & > .el-tag {
-      vertical-align: 1px;
-    }
-    &.vjs-cell-flex {
-      flex-grow: 1;
-    }
-    &.error {
-      border: 1px solid red;
-    }
-    & > .vjs-checkbox {
-      position: absolute;
-      top: 0;
-    }
-  }
-  .vjs-icon {
-    cursor: pointer;
-    position: absolute;
-    height: 100%;
-    color: #CCC;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    &:hover {
-      color: #333;
-    }
-  }
-  .vjs-temp {
-    color: #909399;
-  }
-}
-
-.vjs-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: $--color-secondary-text;
-  border-color: $--color-secondary-text;
-}
-
-.cell-text {
-  height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-break: break-all;
-  .cell-placeholder {
-    color: #C0C4CC;
-  }
-}
-
-.cell-input {
-  display: block;
-  height: 30px;
-  line-height: 30px;
-  font-size: inherit;
-  color: inherit;
-  font-family: inherit;
-  margin-left: -4.7px;
-  .el-input__inner {
-    border-radius: 0;
-    font-size: inherit;
-    color: inherit;
-    font-family: inherit;
-    padding-left: 4px;
-  }
-}
-
-.cell-select {
-  cursor: pointer;
-  &:not(.is-disabled):hover {
-    border-width: 0;
-    border-bottom-width: 1.5px;
-    border-style: solid;
-  }
-  &.is-disabled {
-    cursor: default;
-  }
-}
-
-.cell-required {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  .box {
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 4px;
-    cursor: pointer;
-    user-select: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-top: 4px;
-    color: #DDD;
-    background-color: rgba(0, 0, 0, 0.02);
-    &:not(.is-disabled):hover {
-      color: #999;
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.is-disabled {
-      cursor: default;
-      color: transparent;
-      background-color: transparent;
-    }
-    &.is-required, &.is-required:hover {
-      color: red;
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-  }
-}
-
-.cell-action {
-  width: 80px;
-  i {
-    cursor: pointer;
-    font-size: 16px;
-    padding: 4px;
-    border-radius: 4px;
-    &:hover {
-      background-color: rgba(0,0,0,0.1);
-    }
-  }
-}
-.action-popover {
-  margin: 0 !important;
-}
-
-.ea-blue {
-  color: #409EFF;
-}
-.ea-purple {
-  color: #EE46BC !important;
-}
-.ea-success {
-  color: $--color-success;
-}
-.ea-danger {
-  color: $--color-danger;
-}
-.ea-info {
-  color: $--color-info;
-}
-.ea-placeholder {
-  color: $--color-placeholder-text !important;
-}
-
-.ea-popover-no-margin {
-  margin: 0 !important;
-}
-
-@font-face {
-  font-family: 'eafont';
-  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQYAAsAAAAACMAAAAPLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqFDIRVATYCJAMQCwoABCAFhE8HQBu9BxEVnLHIfibwpknuXkitybkhDKpb3+RDeb1vMhOsa34zn2ST3rpbnaQ7jZOwi3OelIhQI3mLHn0haTkDFEZf6SdAAFkA/M/ltDHxABvfAoC7xti0t5dlvehe2rbAxhiUbfFAIsy8BXYOdTBB14AA0MJNMC4yOjETxsayzmZMwiDhCeDmksa6mjJIdwNYCkIgqYW8KxnIUvAAt4C7BGCJ+XnyER5JAAeeQtontTqqEsfe4I0bVawK6CPoOBDgaA4AD4ACcOqZidSmO8pB7bATCm1ckMEHOCiBA2ptM75xs1pZNCqFJDsBrvSfRwRICj1SvSIUeAOVBxzwxiiIU7qhaAUUTF8hARgJuAwQV0iaKfUsFCCNNxhGG7SjtYaxY4lGRgbuZDNvZTJvZzHv5riIWmmOGkzUuxFVl27lVB+9q7OkJEK51XPw7m2JcOs9dwL05isn1JNXdWXmfZuUzfstB7eqWw5k6s2HlMM6wyq1Ur1793aQwXL5uHLsklZ/6NadO2U+61H1yA23UsnOr6+wtChXH3JzL0iKIqt5uRoraFeuoKtaqxwuXs18qMz+If6j7B2qsiLTw2vHNIy5EZqYFJ8wvXp6reO9qIzItHL7SvuHY/ODcgM9ijxLm3N3HC3PcEt1dU11yygPdexWfv+Wuh0fmn/+fNVmI0fPkm3aUP9WzjNlTw6OGJcrozrKqO8IucXmW0liyTebp7aTH2z22fzAhy47ZeszcZbHrIk+a4L33vHyySlyqtG1ZtO2tHrQABahETOU7ZxfsjesIuV4ZLq7Z3rkXFJQo3Ome47HpVDPqpj+GrkyMLBSrvlKKHWuDKyRv1Ja3NHQyZE+ckXTJKc/WgEA1hN0Fw03WR/pMjpOe4ySKuya+Q6+fCl7UmKSv0k6BgB4ydgfclmPMZQTHnNhbsEVoizMWZJ9PQBjcRJVdNU5MiHdgxwArWwGLok4MMqTOlSjORsgEDDaBQ4iJgKFgBlERrUBHjo4yQRZ5YughaOg9TqMVgsKwjQAbAwAeAi9jcAx2gyU3kEio54F3jg/EOi9B63s/246NiVcehQjapAbOMWZFPuIQs98opmi6D1CHPXFfnCcoS6qQOyBGfuiC4bZNONIQD0nuBc4K0aGtmePaizsOLbnsqS4mxSK0+7SoxhRA7kBpziTzo/XCHfcE80URbmiOYjfcD847g5qhSqV+FBkKtjy/GE2jXEkQJ98TuDeiizKYQZt/DCPaizYEsH2rKRSlFdRjEmVNmkNgJZ0EIsjlDDCQ9oNQkbUp1VJPSXucbcDAA==') format('woff2');
-}
-.eafont {
-  font-family: eafont;
-  font-style: normal;
-  font-size: 16px;
-  color: #909399;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.ea-icon-disabled:before { content: "\e630" }
-.ea-icon-conf:before { content: "\e600" }
-.ea-icon-more:before { content: "\e60e" }
-.eafont.ea-icon-conf.has { color: #000 }
-
-.file-upload-dialog {
-  // 拖拽区域铺满
-  .el-upload,
-  .el-upload .el-upload-dragger {
-    width: 100%;
-  }
-  // 文件列表项边框
-  .el-upload-list {
-    .el-upload-list__item {
-      border: 1px dashed #aaa;
-      .el-icon-close {
-        display: inline-block;
-      }
-    }
-  }
-  // 清除文件列表变动过渡动画
-  .el-list-enter,
-  .el-list-enter-active,
-  .el-list-enter-to,
-  .el-list-leave,
-  .el-list-leave-active,
-  .el-list-leave-to {
-    -webkit-transition: none !important;
-    transition: none !important;
-  }
-}
-
-.ea-data-tree-body {
-  &.ea-data-tree-body__border {
-    border: 1px solid $--color-border-light;
-  }
-}
-
-.ea-data-tree-row {
-  display: flex;
-  justify-content: flex-start;
-  position: relative;
-  padding-left: 20px;
-  box-sizing: border-box;
-  &.odd { background-color: #F8F8F8; }
-  &:hover { background-color: #EBEEF5; }
-  .ea-data-tree-cell {
-    flex: 0 0 auto;
-    height: 100%;
-    font-size: 14px;
-    box-sizing: border-box;
-    padding: 0 8px;
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
-    & > .ea-data-tree-checkbox {
-      position: absolute;
-      top: 0;
-    }
-  }
-  .ea-data-tree-icon {
-    cursor: pointer;
-    position: absolute;
-    height: 100%;
-    color: #CCC;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    &:hover {
-      color: #333;
-    }
-  }
-}
-
-.ea-data-tree-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: $--color-secondary-text;
-  border-color: $--color-secondary-text;
-}
-
-.ea-data-tree-empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: $--color-secondary-text;
-}
-
-.ea-form .form-group-title {
-  position: relative;
-  height: 32px;
-  margin-bottom: 22px;
-  > span {
-    position: absolute;
-    top: 0;
-    left: 20%;
-    padding: 5px 25px;
-    background-color: #fff;
-    z-index: 1;
-    color: $--color-secondary-text;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 0;
-    border-bottom: 1px dashed $--color-border-base;
-  }
-}
-
-.ea-table-modal {
-  .el-dialog {
-    background: #fdfdfd;
-    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
-    .el-dialog__header {
-      padding: 12px 20px;
-      background-color: $--color-border-extralight;
-      border-bottom: 1px solid $--color-border-lighter;
-    }
-    .el-dialog__headerbtn {
-      top: 12px;
-    }
-    .el-dialog__close {
-      font-weight: bold;
-      color: $--color-secondary-text;
-    }
-    .el-dialog__body {
-      padding: 10px 0;
-      height: calc(100% - 70px);
-      min-height: 40px;
-      max-height: 800px;
-      overflow: auto;
-      .scm-title {
-        font-size: 12px;
-        font-weight: bold;
-        color: $--color-primary-text;
-        &.medium {
-          font-size: 14px;
-        }
-      }
-      .el-tree {
-        background: transparent;
-        font-size: 12px;
-        .el-tree-node__label {
-          font-size: 12px;
-        }
-        &.medium {
-          font-size: 14px;
-          .el-tree-node__label {
-            font-size: 14px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.conf-header {
-  border-bottom: 1px solid #DDD;
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-}
-.conf-body {
-  width: 300px;
-}
-.dense-much .el-form-item {
-  margin-bottom: 8px !important;
-}
-
-.ea-form .el-form-item__content {
-  & > .el-input-number,
-  & > .el-input,
-  & > .ea-select,
-  & > .el-date-editor,
-  & > .el-select {
-    width: 100%;
-  }
-}
-.ea-form .el-form-item.hidden-label {
-  > .el-form-item__label {
-    display: none;
-  }
-  > .el-form-item__content {
-    width: 100%;
-  }
-}
-
-.ea-select-container {
-  display: flex;
-  justify-content: flex-start;
-  font-size: 12px;
-  &.medium {
-    font-size: 14px;
-    .ea-select-panel .ea-select-panel__item {
-      line-height: 28px;
-    }
-  }
-  .ea-select-panel {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    flex-grow: 1;
-    min-width: 120px;
-    & + .ea-select-panel {
-      border-left: 1px solid #DDD;
-    }
-    &__item {
-      width: 100%;
-      line-height: 24px;
-      cursor: pointer;
-      padding: 0 12px;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: inherit;
-      &:hover {
-        background-color: $--color-border-lighter;
-      }
-      &.active {
-        color: $--color-primary;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-.ea-switch-mini {
-  .el-switch__core {
-    width: 30px !important;
-    height: 16px;
-    &::after {
-      width: 12px;
-      height: 12px;
-      left: 2px;
-    }
-  }
-  &.is-checked .el-switch__core::after {
-    margin-left: -13px;
-  }
-}
+$--color-primary: #409EFF !default;
+$--color-success: #67C23A !default;
+$--color-warning: #E6A23C !default;
+$--color-danger: #F56C6C !default;
+$--color-info: #909399 !default;
+$--color-primary-text: #303133 !default;
+$--color-regular-text: #606266 !default;
+$--color-secondary-text: #909399 !default;
+$--color-placeholder-text: #C0C4CC !default;
+$--color-border-base: #DCDFE6 !default;
+$--color-border-light: #E4E7ED !default;
+$--color-border-lighter: #EBEEF5 !default;
+$--color-border-extralight: #F2F6FC !default;
+$--background-color-base: #F5F7FA !default;
+.ea-data-table {
+  .edt-row {
+    display: flex;
+    .edt-cell {
+      padding: 0 8px;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+    }
+    &.edt-header {
+      background-color: $--color-border-extralight;
+      color: $--color-primary-text;
+    }
+  }
+  &--border {
+    border: 1px solid $--color-border-light;
+    .edt-row {
+      .edt-cell {
+        border-bottom: 1px solid $--color-border-light;
+        border-left: 1px solid $--color-border-light;
+        &:first-child {
+          border-left: 0;
+        }
+      }
+      &:last-child .edt-cell{
+        border-bottom: 0;
+      }
+    }
+  }
+  .loading-text {
+    color: $--color-secondary-text;
+    text-align: center;
+    font-size: inherit;
+  }
+}
+
+.ea-select {
+  display: inline-block;
+  position: relative;
+  .el-select {
+    width: 100%;
+  }
+  .async-loading.el-icon-loading {
+    position: absolute;
+    top: 10px;
+    right: 28px;
+    color: #999;
+  }
+  .is-collapse-tags .el-select__tags > span > .el-tag:first-child {
+    min-width: 36px;
+    max-width: calc(100% - 80px);
+  }
+}
+.ea-select-popover {
+  .el-select-dropdown__item {
+    display: flex;
+    justify-content: space-between;
+    .select-item-value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .select-item-desc {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #8492a6;
+      margin-left: 8px;
+    }
+  }
+  .tools {
+    padding: 0 20px;
+    margin-bottom: -5px;
+  }
+}
+
+.el-dialog.ea-modal {
+  &.no-margin {
+    margin: 0 !important;
+  }
+  &.is-fullscreen {
+    border-radius: 0;
+    margin: 0;
+  }
+  .el-dialog__header {
+    color: #555;
+    font-size: 18px;
+    .el-dialog__title {
+      color: inherit;
+      font-size: inherit;
+    }
+  }
+}
+
+.ea-split-container {
+  display: flex;
+  &.is-down {
+    user-select: none;
+  }
+  .sc-left {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .sc-right {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .sc-center {
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: relative;
+  }
+  .sc-bamboo {
+    width: 8px;
+    height: 100%;
+    border: 1px solid #DCDEE2;
+    border-top: none;
+    border-bottom: none;
+    background-color: #F8F8F9;
+    cursor: col-resize;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 16px;
+    .sc-texture {
+      width: 4px;
+      height: 1px;
+      background: rgba(23, 35, 61, .25);
+      margin-top: 3px;
+    }
+  }
+  .sc-on-bamboo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #FFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.ea-button-tooltip + .ea-button-tooltip {
+  margin-left: 10px;
+}
+td {
+  .ea-button-tooltip + .ea-button-tooltip {
+    margin-left: 4px;
+    &.text {
+      margin-left: 10px;
+    }
+  }
+  .el-button [class*="el-icon-"] + span {
+    margin-left: 2px;
+  }
+}
+
+.el-button.ea-button.mini-rect-btn {
+  padding: 7px;
+  border: 0;
+  & [class^="design-"] {
+    margin-right: 0;
+  }
+  &:not(.is-disabled) {
+    &.primary {
+      background-color: rgba($--color-primary, .15);
+      color: $--color-primary;
+      &:hover,&:focus {
+        background-color: $--color-primary;
+        i { color: #fff }
+      }
+    }
+    &.success {
+      background-color: rgba($--color-success, .15);
+      color: $--color-success;
+      &:hover,&:focus {
+        background-color: $--color-success;
+        i { color: #fff }
+      }
+    }
+    &.info {
+      background-color: rgba($--color-info, .15);
+      color: $--color-info;
+      &:hover,&:focus {
+        background-color: $--color-info;
+        i { color: #fff }
+      }
+    }
+    &.warning {
+      background-color: rgba($--color-warning, .15);
+      color: $--color-warning;
+      &:hover,&:focus {
+        background-color: $--color-warning;
+        i { color: #fff }
+      }
+    }
+    &.danger {
+      background-color: rgba($--color-danger, .15);
+      color: $--color-danger;
+      &:hover,&:focus {
+        background-color: $--color-danger;
+        i { color: #fff }
+      }
+    }
+  }
+}
+
+// table
+.ea-table {
+  // 表格头部样式美化
+  .el-table {
+    transition: opacity 0.28s;
+    th {
+      background-color: $--background-color-base;
+      color: $--color-primary-text;
+      .cell {
+        min-height: 30px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+      }
+      &.is-center .cell { justify-content: center }
+      &.is-right .cell { justify-content: flex-end }
+    }
+    td, th {
+      .cell {
+        line-height: 1.2;
+      }
+    }
+    &.el-table--small {
+      td, th {
+        height: 50px;
+      }
+    }
+    &.is-dense {
+      td, th {
+        height: 32px;
+        padding: 2px 0;
+        .el-button {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+    }
+    &.is-unready {
+      opacity: 0;
+      .operation-column > div {
+        height: 32px;
+        overflow: hidden;
+      }
+      &.is-dense {
+        .operation-column > div {
+          height: 24px;
+        }
+      }
+    }
+  }
+  // 列的更多菜单项
+  .theader-th-cell {
+    .cell-icon-menu {
+      position: absolute;
+      top: 50%;
+      right: 4px;
+      transform: rotate(90deg) translateX(-50%);
+      color: $--color-placeholder-text;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 2px;
+      &:hover {
+        color: $--color-primary-text;
+        background-color: $--color-border-light;
+      }
+    }
+  }
+  // 表格底部
+  .ea-table__footer {
+    display: flex;
+    justify-content: space-between;
+    transition: opacity 0.28s;
+    .ea-table__footer-right {
+      margin-left: auto;
+      padding-right: 0;
+    }
+    > * {
+      margin-top: 12px;
+    }
+    &.is-unready {
+      opacity: 0;
+    }
+  }
+
+  .column-transition-active {
+    opacity: 0.33;
+  }
+
+  .el-button > i {
+    min-width: 12px;
+  }
+
+  .more-btn > i{
+    transform: rotate(-90deg);
+  }
+}
+
+// table - popover
+.el-popover.ea-popover-no-padding {
+  padding: 8px 0;
+  min-width: 100px;
+  &.dense {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    min-width: 70px;
+  }
+}
+
+.more-btn-panel {
+  &__item {
+    &:hover {
+      background-color: $--color-border-lighter;
+    }
+    .el-button {
+      padding: 8px 12px;
+      width: 100%;
+      text-align: left;
+    }
+  }
+}
+
+.ea-zoom-in-top-enter-active,
+.ea-zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+}
+.ea-zoom-in-top-enter,
+.ea-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.ea-list {
+  .loading-text {
+    color: $--color-secondary-text;
+    text-align: center;
+    font-size: inherit;
+  }
+}
+
+.ea-desc {
+  font-size: 14px;
+  &__title {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.ea-desc .item {
+  line-height: 24px;
+  margin-bottom: 10px;
+  flex: 0 0 auto;
+  .item-label {
+    float: left;
+    text-align: right;
+    padding-right: 8px;
+    color: #909399;
+  }
+  .item-value {
+    word-break: break-all;
+    overflow: hidden;
+    .value-no-wrap {
+      height: 48px;
+      overflow: hidden;
+      position: relative;
+      .click-see-more {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        height: 24px;
+        padding-left: 30px;
+        padding-right: 4px;
+        background-image: linear-gradient(to right, transparent 0%, #fff 20%, #fff 100%);
+        cursor: pointer;
+        color: $--color-primary;
+        user-select: none;
+      }
+    }
+  }
+}
+
+.ea-tree {
+  .ea-tree__main {
+    margin-top: 18px;
+    .ea-tree__header {
+      height: 50px;
+      padding-left: 24px;
+      padding-right: 14px;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: $--background-color-base;
+      .ea-tree__header__text {
+        font-weight: bold;
+      }
+    }
+  }
+  .ea-tree-real {
+    .el-tree-node.is-current > .el-tree-node__content {
+      color: $--color-primary;
+    }
+  }
+  &.ea-tree--border {
+    .ea-tree__main {
+      border: 1px solid $--color-border-lighter;
+    }
+    .ea-tree__header {
+      border-bottom: 1px solid $--color-border-lighter;
+    }
+    .ea-tree-real {
+      margin: 10px 0;
+    }
+  }
+}
+
+.ea-number .el-input__inner {
+  text-align: left;
+}
+
+.vjs-table {
+  position: relative;
+  overflow: hidden;
+}
+.vjs-header {
+  position: absolute;
+  top: 0;
+  border: 1px solid $--color-border-light;
+  border-bottom: 0;
+}
+.vjs-body {
+  border: 1px solid $--color-border-light;
+}
+
+.vjs-row {
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+  &.odd { background-color: #F8F8F8; }
+  &:not(.vjs-header):hover { background-color: #EBEEF5; }
+  .vjs-cell {
+    flex: 0 0 auto;
+    height: 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+    padding: 0 8px;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    & > .el-tag {
+      vertical-align: 1px;
+    }
+    &.vjs-cell-flex {
+      flex-grow: 1;
+    }
+    &.error {
+      border: 1px solid red;
+    }
+    & > .vjs-checkbox {
+      position: absolute;
+      top: 0;
+    }
+  }
+  .vjs-icon {
+    cursor: pointer;
+    position: absolute;
+    height: 100%;
+    color: #CCC;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    &:hover {
+      color: #333;
+    }
+  }
+  .vjs-temp {
+    color: #909399;
+  }
+}
+
+.vjs-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: $--color-secondary-text;
+  border-color: $--color-secondary-text;
+}
+
+.cell-text {
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  .cell-placeholder {
+    color: #C0C4CC;
+  }
+}
+
+.cell-input {
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  font-size: inherit;
+  color: inherit;
+  font-family: inherit;
+  margin-left: -4.7px;
+  .el-input__inner {
+    border-radius: 0;
+    font-size: inherit;
+    color: inherit;
+    font-family: inherit;
+    padding-left: 4px;
+  }
+}
+
+.cell-select {
+  cursor: pointer;
+  &:not(.is-disabled):hover {
+    border-width: 0;
+    border-bottom-width: 1.5px;
+    border-style: solid;
+  }
+  &.is-disabled {
+    cursor: default;
+  }
+}
+
+.cell-required {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  .box {
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 4px;
+    color: #DDD;
+    background-color: rgba(0, 0, 0, 0.02);
+    &:not(.is-disabled):hover {
+      color: #999;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.is-disabled {
+      cursor: default;
+      color: transparent;
+      background-color: transparent;
+    }
+    &.is-required, &.is-required:hover {
+      color: red;
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+  }
+}
+
+.cell-action {
+  width: 80px;
+  i {
+    cursor: pointer;
+    font-size: 16px;
+    padding: 4px;
+    border-radius: 4px;
+    &:hover {
+      background-color: rgba(0,0,0,0.1);
+    }
+  }
+}
+.action-popover {
+  margin: 0 !important;
+}
+
+.ea-blue {
+  color: #409EFF;
+}
+.ea-purple {
+  color: #EE46BC !important;
+}
+.ea-success {
+  color: $--color-success;
+}
+.ea-danger {
+  color: $--color-danger;
+}
+.ea-info {
+  color: $--color-info;
+}
+.ea-placeholder {
+  color: $--color-placeholder-text !important;
+}
+
+.ea-popover-no-margin {
+  margin: 0 !important;
+}
+
+@font-face {
+  font-family: 'eafont';
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQYAAsAAAAACMAAAAPLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqFDIRVATYCJAMQCwoABCAFhE8HQBu9BxEVnLHIfibwpknuXkitybkhDKpb3+RDeb1vMhOsa34zn2ST3rpbnaQ7jZOwi3OelIhQI3mLHn0haTkDFEZf6SdAAFkA/M/ltDHxABvfAoC7xti0t5dlvehe2rbAxhiUbfFAIsy8BXYOdTBB14AA0MJNMC4yOjETxsayzmZMwiDhCeDmksa6mjJIdwNYCkIgqYW8KxnIUvAAt4C7BGCJ+XnyER5JAAeeQtontTqqEsfe4I0bVawK6CPoOBDgaA4AD4ACcOqZidSmO8pB7bATCm1ckMEHOCiBA2ptM75xs1pZNCqFJDsBrvSfRwRICj1SvSIUeAOVBxzwxiiIU7qhaAUUTF8hARgJuAwQV0iaKfUsFCCNNxhGG7SjtYaxY4lGRgbuZDNvZTJvZzHv5riIWmmOGkzUuxFVl27lVB+9q7OkJEK51XPw7m2JcOs9dwL05isn1JNXdWXmfZuUzfstB7eqWw5k6s2HlMM6wyq1Ur1793aQwXL5uHLsklZ/6NadO2U+61H1yA23UsnOr6+wtChXH3JzL0iKIqt5uRoraFeuoKtaqxwuXs18qMz+If6j7B2qsiLTw2vHNIy5EZqYFJ8wvXp6reO9qIzItHL7SvuHY/ODcgM9ijxLm3N3HC3PcEt1dU11yygPdexWfv+Wuh0fmn/+fNVmI0fPkm3aUP9WzjNlTw6OGJcrozrKqO8IucXmW0liyTebp7aTH2z22fzAhy47ZeszcZbHrIk+a4L33vHyySlyqtG1ZtO2tHrQABahETOU7ZxfsjesIuV4ZLq7Z3rkXFJQo3Ome47HpVDPqpj+GrkyMLBSrvlKKHWuDKyRv1Ja3NHQyZE+ckXTJKc/WgEA1hN0Fw03WR/pMjpOe4ySKuya+Q6+fCl7UmKSv0k6BgB4ydgfclmPMZQTHnNhbsEVoizMWZJ9PQBjcRJVdNU5MiHdgxwArWwGLok4MMqTOlSjORsgEDDaBQ4iJgKFgBlERrUBHjo4yQRZ5YughaOg9TqMVgsKwjQAbAwAeAi9jcAx2gyU3kEio54F3jg/EOi9B63s/246NiVcehQjapAbOMWZFPuIQs98opmi6D1CHPXFfnCcoS6qQOyBGfuiC4bZNONIQD0nuBc4K0aGtmePaizsOLbnsqS4mxSK0+7SoxhRA7kBpziTzo/XCHfcE80URbmiOYjfcD847g5qhSqV+FBkKtjy/GE2jXEkQJ98TuDeiizKYQZt/DCPaizYEsH2rKRSlFdRjEmVNmkNgJZ0EIsjlDDCQ9oNQkbUp1VJPSXucbcDAA==') format('woff2');
+}
+.eafont {
+  font-family: eafont;
+  font-style: normal;
+  font-size: 16px;
+  color: #909399;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.ea-icon-disabled:before { content: "\e630" }
+.ea-icon-conf:before { content: "\e600" }
+.ea-icon-more:before { content: "\e60e" }
+.eafont.ea-icon-conf.has { color: #000 }
+
+.file-upload-dialog {
+  // 拖拽区域铺满
+  .el-upload,
+  .el-upload .el-upload-dragger {
+    width: 100%;
+  }
+  // 文件列表项边框
+  .el-upload-list {
+    .el-upload-list__item {
+      border: 1px dashed #aaa;
+      .el-icon-close {
+        display: inline-block;
+      }
+    }
+  }
+  // 清除文件列表变动过渡动画
+  .el-list-enter,
+  .el-list-enter-active,
+  .el-list-enter-to,
+  .el-list-leave,
+  .el-list-leave-active,
+  .el-list-leave-to {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+.el-drawer.ea-drawer {
+  &.is-fullscreen {
+    border-radius: 0;
+    margin: 0;
+  }
+  .el-drawer__header {
+    color: #555;
+    font-size: 18px;
+    border-bottom: 1px solid #DDD;
+    margin-bottom: 0;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    .el-drawer__title {
+      color: inherit;
+      font-size: inherit;
+    }
+  }
+  .ea-drawer__body {
+    position: relative;
+    height: 100%;
+    .ea-drawer__content {
+      box-sizing: border-box;
+      height: 100%;
+      overflow: auto;
+    }
+    .ea-drawer__footer {
+      border-top: 1px solid #DDD;
+      background-color: #FFF;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.ea-data-tree-body {
+  &.ea-data-tree-body__border {
+    border: 1px solid $--color-border-light;
+  }
+}
+
+.ea-data-tree-row {
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+  padding-left: 20px;
+  box-sizing: border-box;
+  &.odd { background-color: #F8F8F8; }
+  &:hover { background-color: #EBEEF5; }
+  .ea-data-tree-cell {
+    flex: 0 0 auto;
+    height: 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+    padding: 0 8px;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    & > .ea-data-tree-checkbox {
+      position: absolute;
+      top: 0;
+    }
+  }
+  .ea-data-tree-icon {
+    cursor: pointer;
+    position: absolute;
+    height: 100%;
+    color: #CCC;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    &:hover {
+      color: #333;
+    }
+  }
+}
+
+.ea-data-tree-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: $--color-secondary-text;
+  border-color: $--color-secondary-text;
+}
+
+.ea-data-tree-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $--color-secondary-text;
+}
+
+.ea-form .form-group-title {
+  position: relative;
+  height: 32px;
+  margin-bottom: 22px;
+  > span {
+    position: absolute;
+    top: 0;
+    left: 20%;
+    padding: 5px 25px;
+    background-color: #fff;
+    z-index: 1;
+    color: $--color-secondary-text;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px dashed $--color-border-base;
+  }
+}
+
+.ea-table-modal {
+  .el-dialog {
+    background: #fdfdfd;
+    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
+    .el-dialog__header {
+      padding: 12px 20px;
+      background-color: $--color-border-extralight;
+      border-bottom: 1px solid $--color-border-lighter;
+    }
+    .el-dialog__headerbtn {
+      top: 12px;
+    }
+    .el-dialog__close {
+      font-weight: bold;
+      color: $--color-secondary-text;
+    }
+    .el-dialog__body {
+      padding: 10px 0;
+      height: calc(100% - 70px);
+      min-height: 40px;
+      max-height: 800px;
+      overflow: auto;
+      .scm-title {
+        font-size: 12px;
+        font-weight: bold;
+        color: $--color-primary-text;
+        &.medium {
+          font-size: 14px;
+        }
+      }
+      .el-tree {
+        background: transparent;
+        font-size: 12px;
+        .el-tree-node__label {
+          font-size: 12px;
+        }
+        &.medium {
+          font-size: 14px;
+          .el-tree-node__label {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.conf-header {
+  border-bottom: 1px solid #DDD;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.conf-body {
+  width: 300px;
+}
+.dense-much .el-form-item {
+  margin-bottom: 8px !important;
+}
+
+.ea-select-container {
+  display: flex;
+  justify-content: flex-start;
+  font-size: 12px;
+  &.medium {
+    font-size: 14px;
+    .ea-select-panel .ea-select-panel__item {
+      line-height: 28px;
+    }
+  }
+  .ea-select-panel {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    flex-grow: 1;
+    min-width: 120px;
+    & + .ea-select-panel {
+      border-left: 1px solid #DDD;
+    }
+    &__item {
+      width: 100%;
+      line-height: 24px;
+      cursor: pointer;
+      padding: 0 12px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: inherit;
+      &:hover {
+        background-color: $--color-border-lighter;
+      }
+      &.active {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.ea-form .el-form-item__content {
+  & > .el-input-number,
+  & > .el-input,
+  & > .ea-select,
+  & > .el-date-editor,
+  & > .el-select {
+    width: 100%;
+  }
+}
+.ea-form .el-form-item.hidden-label {
+  > .el-form-item__label {
+    display: none;
+  }
+  > .el-form-item__content {
+    width: 100%;
+  }
+}
+
+.ea-switch-mini {
+  .el-switch__core {
+    width: 30px !important;
+    height: 16px;
+    &::after {
+      width: 12px;
+      height: 12px;
+      left: 2px;
+    }
+  }
+  &.is-checked .el-switch__core::after {
+    margin-left: -13px;
+  }
+}