thing_web/public/cdn/theme/index.less

//============================================================base.less 开始=============================================//
//定义基础色

//主色

body {
  --color-primary: #409eff;
  --color-primary-light: rgb(64 158 255 / 8%);
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@--color-primary: ~'var(--color-primary)';
@--color-primary-light: ~'var(--color-primary-light)';
@--text-regular-color: ~'var(--el-text-color-regular)';
@text: #595959;
@text-2: #8c8c8c;
@tree-text-color: #ffffff;

//导航菜单
@dark-text: rgb(255 255 255 / 66%);
@dark-text-active: #eee;
@dark-bg: rgb(24, 24, 28);
@dark-bg-2: #101014;

@menu-bg-normal: rgb(24, 24, 28);

@light-text: @text;
@light-text-active: @--color-primary;
@light-bg: @text-regular-color;
@text-regular-color: @text-regular-color;
@light-bg-active: @--color-primary-light;

@primary-text: rgb(255 255 255 / 66%);
@primary-text-2: rgb(255 255 255 / 65%);
@primary-text-active: @text-regular-color;
@primary-bg: @--color-primary;
@primary-bg-light: @--color-primary-light;
@primary-bg-active: @--color-primary-light;

// 按钮文字颜色始终为白色
.el-button--primary {
  //color: #ffffff;
  // background-color: var(--color-primary) !important;
  //border-color: var(--color-primary) !important;
}

@text-regular-color: #fff;
@input-bg-color: #0c2852;
@border-color: #274778;
@tr-bg-color: rgb(23, 37, 70);
@tr-hover-bg-color: rgba(64, 66, 71, 0.5);
@text-color: #d7d7d7;
@selected-bg-color: rgba(0, 39, 137, 0.5);
@check-box-background-color: #274778;
@check-box-checked-background-color: #274778;
//@check-box-border-color: #0B6CA3;
@check-box-border-color: #0594d9;
@block-bg-color: #172546;
@block-active-bg-color: '#162E5A';
@view-ctx-bg-color: #121d3d;
@rr-view-tab-bg: #193567;
@el-tabs-item-color: rgba(255, 255, 255, 0.9);
@el-tabs-item-isActive-color: rgba(255, 255, 255, 0.9);
@el-tabs-item-isActive-bg: #182652;
@select-dropdown-hover-bg: rgb(23, 37, 70);
@tr-hightlight-row-bg: 'rgba(0, 39, 137, 0.5)';
@el-date-table-td-disabled: #232e3f;
@el-radio-button__inner: transparent;
@monitor-usage-chart-border-color: '#274778';
@iot-relation-view-bg: #293e6b;
@list-item-detail-table-td: #182246;
@list-item-detail-table-td-odd: #242e50;
@device-board-setting-bg: #112043;
@el-tree-node-hover-bg-color: #172546;
@hightlight-title-color: #0ee9e9;

.rr-view-ctx {
  background: @dark-bg-2;
  height: calc(100% - 39px);

  .rr-view-ctx-card {
    position: relative;
    height: 100%;
    background: @block-bg-color;
    overflow: auto;
  }

  ::v-deep .el-card__body {
    position: relative;
    height: 100%;
  }
}

.el-input {
  input.el-input__inner {
    //background: @input-bg-color !important;
    //border: 1px solid #DCDFE6;
    //color: @text-color !important;

    &::placeholder {
      // color: @text-2;
    }
  }

  .el-input__wrapper {
    //padding: 0 !important;
  }

  // --el-disabled-text-color: @text-2 !important;
  //--el-input-border-color: @border-color !important;
  // --el-disabled-border-color: @border-color !important;
}

.el-input-number {
  // --el-bg-color: @input-bg-color !important;
  //--el-border-base: var(--el-border-width-base) var(--el-border-style-base) @border-color !important;
  // --el-text-color-regular: @text-regular-color !important;
}

.el-select-v2__wrapper {
  //background: @input-bg-color !important;
  //border-color: @border-color !important;

  // --el-text-color-placeholder: @text-2 !important;
}

.el-select-dropdown__option-item {
  //color: @text-color !important;
  //--el-bg-color: @tr-bg-color !important;
  // font-size: var(--el-font-size-base) !important;
}

//.el-date-editor {
//  input.el-range-input {
//    background: @input-bg-color !important;
//    //border: 1px solid #DCDFE6;
//    color: @text-color !important;
//
//    &::placeholder {
//      color: @text-2;
//    }
//  }
//
//  .el-range-separator {
//    color: @text-2 !important;
//  }
//
//  --el-input-bg-color: @input-bg-color !important;
//  --el-disabled-text-color: @text-2 !important;
//  --el-input-border-color: @border-color !important;
//  --el-disabled-border-color: @border-color !important;
//}
//
//.el-date-table td.disabled .el-date-table-cell {
//  background: @el-date-table-td-disabled !important;
//}
//
//div.el-date-picker {
//  --el-datepicker-text-color: @text-color !important;
//  --el-datepicker-hover-text-color: var(--el-color-primary) !important;
//}
//
//.el-date-picker__header-label {
//  color: @text-color !important;
//}
//
//textarea.el-textarea__inner {
//  --el-input-bg-color: @input-bg-color !important;
//  color: @text-regular-color !important;
//
//  &::placeholder {
//    color: @text-2;
//  }
//
//  --el-input-border-color: @border-color !important;
//  --el-disabled-bg-color: @input-bg-color !important;
//
//}
//
//
//.el-select__popper .el-popper__arrow::before {
//  background: @input-bg-color !important;
//  border-color: @border-color !important;
//}
//
//.el-popper.is-light .el-popper__arrow::before {
//  background: @input-bg-color !important;
//}
//
//.el-select-dropdown__item {
//  color: @text-color !important;
//
//  &:hover {
//    background: @select-dropdown-hover-bg !important;
//  }
//
//  --el-bg-color: @tr-bg-color !important;
//
//  &.selected {
//    background: @tr-bg-color !important;
//
//  }
//}
//
//.el-steps {
//  --el-bg-color: @tr-bg-color !important;
//
//  .el-step__title.is-process, .el-step__head.is-process {
//    --el-text-color-primary: var(--el-color-primary);
//  }
//
//}

@el-table-thead-th-bg: #1f3059;
@el-table-cell-hover-bg: #24355e;
@el-table-row-striped-cell-bg: #1e2c4f;
@fixColumn-hover-bg: rgba(0, 39, 137, 1);
//.el-table {
//  border-radius: 6px;
//
//  thead th {
//    background: @el-table-thead-th-bg !important;
//    color: @text-color !important;
//    font-size: 16px;
//  }
//
//  .td.el-table__cell{
//    &:hover {
//      background: @el-table-cell-hover-bg !important;
//      //background: rgba(30, 44, 79, 1) !important;
//    }
//  }
//
//  tr.el-table__row--striped td.el-table__cell {
//    background: @el-table-row-striped-cell-bg !important;
//
//  }
//
//  tr td.el-table-fixed-column--right {
//    background: @tr-bg-color !important;
//
//    &:hover {
//      background: @fixColumn-hover-bg !important;
//    }
//  }
//
//  .el-table__expand-icon {
//    color: var(--el-text-color-placeholder) !important;
//  }
//
//  .el-table-column--selection {
//    label.el-checkbox {
//      .el-checkbox__inner {
//        background: @check-box-checked-background-color !important;
//        border-color: @check-box-border-color !important;
//      }
//    }
//    label.el-checkbox.is-checked {
//      .el-checkbox__inner {
//        background: @check-box-checked-background-color !important;
//        border-color: @check-box-border-color !important;
//      }
//    }
//  }
//
//
//  --el-table-text-color: @text-color !important;
//  --el-table-border-color: @border-color !important;
//  --el-table-border: 1px solid @border-color !important;
//  --el-table-tr-bg-color: @tr-bg-color !important;
//  --el-table-bg-color: @tr-bg-color !important;
//  --el-table-row-hover-bg-color: @selected-bg-color !important;
//  --el-table-current-row-bg-color: @selected-bg-color !important;
//  --el-table-expanded-cell-bg-color: @tr-bg-color !important;
//}

@pager-active-color: #3b99f0;

//.el-pagination {
//  color: @text-color !important;
//
//  .btn-prev, .btn-next {
//    border: 1px solid @border-color;
//    border-radius: 4px;
//  }
//
//  .btn-prev {
//    margin-right: 5px;
//  }
//
//  ul.el-pager {
//    li {
//      border: 1px solid @border-color;
//      border-radius: 4px;
//
//      &:not(last-child) {
//        margin-right: 5px;
//      }
//
//      &:first-child {
//        margin-left: 5px;
//      }
//
//      &.active {
//        border-color: @pager-active-color;
//        color: @pager-active-color;
//      }
//    }
//
//    li.active + li {
//      border: 1px solid @border-color;
//    }
//  }
//
//  --el-pagination-bg-color: @tr-bg-color !important;
//  --el-text-color-regular: @text-color !important;
//  --el-pagination-button-color: @border-color !important;
//  --el-pagination-button-disabled-bg-color: @tr-bg-color !important;
//}

//.el-loading-mask {
//  background: @tr-bg-color !important;
//}

@dialog-bg-color: #162e5a;
@dialog-header-bg: #234daf;
@dialog-footer-border-top: 1px solid @--text-regular-color;
@dialog-el-input-border: 1px solid rgba(#1d3d77, 0.1);
.el-dialog {
  //--el-dialog-bg-color: @dialog-bg-color !important;

  .el-dialog__header {
    text-align: center;
    //background: @dialog-header-bg;
    margin: 0 !important;
    padding: 16px 0;
    //border-bottom: 1px solid var(--el-border-color);
  }

  .el-dialog__title {
    //color: @text-color;
  }

  .el-dialog__footer {
    border-top: 1px solid var(--el-border-color);
  }

  .el-dialog__headerbtn {
    top: 0;

    .el-dialog__close {
      // color: @text-regular-color !important;

      &:hover {
        // color: @check-box-border-color !important;
      }
    }
  }

  .el-input {
    //border: @dialog-el-input-border !important;
  }
}

.el-form-item__label {
  //color: @text-color !important;
}

.el-radio {
  //--el-radio-text-color: @text-color !important;
}

.el-input-group__append {
  //--el-bg-color: @tr-bg-color !important;
}

.el-upload--picture-card,
.el-upload-list__item {
  // background: @input-bg-color !important;
  //border-color: @border-color !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-tabs--border-card {
  // background: @tr-bg-color !important;
  //--el-border-color-base: @border-color !important;

  .el-tabs__item {
    // background: @tr-bg-color !important;
    // border-color: @border-color !important;
  }
}

.el-tabs__nav {
  //border-color: @border-color !important;
}

.el-tabs__header {
  //border-color: @border-color !important;
}

.el-tabs__item {
  // border-left-color: @border-color !important;

  &.is-active {
    //  border-color: @border-color !important;
  }

  // --el-text-color-primary: @text-color !important;
}

.el-button--text {
  // --el-color-primary: @text-color;
}

.el-button {
  &.is-text {
    // color: @text-color !important;

    &:hover {
      //  color: @--color-primary !important;
    }
  }
}

.el-tree {
  background: transparent !important;
  //--el-tree-node-hover-bg-color: @el-tree-node-hover-bg-color !important;
  //--el-tree-text-color: @text-color !important;
  .el-tree-node.is-current > .el-tree-node__content {
    color: @--color-primary;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    // background: @el-tree-node-hover-bg-color !important;
  }
}

hr {
  //border-color: @border-color !important;
}

//.el-date-range-picker{
//  input.el-input__inner {
//    background: @text-regular-color !important;
//    color: var(--color-primary)!important;
//  }
//}

//.el-popper.is-light {
//  background: @input-bg-color !important;
//  border-color: @border-color !important;
//}
//
//.el-dropdown__popper.el-popper[role=tooltip] {
//  .el-dropdown-menu {
//    background: @input-bg-color !important;
//
//    .el-dropdown-menu__item {
//      --el-text-color-regular: @text-color !important;
//
//      :not(.is-disabled):focus {
//        // background: @tr-bg-color !important;
//      }
//    }
//  }
//}

@as-same-bg-color-as-right: #213361;
@content-bg-color: #172647;
//.el-collapse {
//  --el-collapse-border-color: @as-same-bg-color-as-right !important;
//  background: @as-same-bg-color-as-right !important;
//  --el-collapse-header-bg-color: @as-same-bg-color-as-right !important;
//  --el-collapse-content-bg-color: @content-bg-color !important;
//  --el-collapse-header-text-color: @text-color !important;
//  --el-collapse-content-text-color: @text-color !important;
//  border-color: @as-same-bg-color-as-right !important;
//}

@el-datepicker-inrange-bg-color: #1f3a63;
@el-datepicker-inrange-hover-bg-color: #4e71c4;
//.el-picker-panel {
//  background: @tr-bg-color !important;
//  color: @text-color !important;
//
//  .el-picker-panel__footer {
//    background: @tr-bg-color !important;
//  }
//
//  //.el-date-range-picker__content,.el-date-range-picker__time-header,.el-picker-panel__footer{
//  //  border-color: @border-color !important;
//  //}
//  --el-datepicker-inner-border-color: @border-color !important;
//  --el-datepicker-border-color: @border-color !important;
//  --el-datepicker-off-text-color: @text-2 !important;
//  --el-datepicker-header-text-color: @text-regular-color !important;
//  --el-datepicker-icon-color: @text-color !important;
//  --el-datepicker-inrange-bg-color: @el-datepicker-inrange-bg-color !important;
//  --el-datepicker-inrange-hover-bg-color: @el-datepicker-inrange-hover-bg-color !important;
//  --el-datepicker-hover-text-color: @text-regular-color !important;
//}
//
//.el-drawer {
//  --el-drawer-bg-color: @dialog-bg-color !important;
//
//  .el-drawer__header {
//    color: @text-color !important;
//    border-color: @border-color;
//  }
//}
//
//.el-checkbox {
//  --el-checkbox-text-color: @text-color !important;
//}
//
//.el-color-picker__trigger {
//  border-color: @border-color !important;
//}
//
//.el-color-picker__mask {
//  background: transparent !important;
//}
//
//.el-radio-group {
//  .el-radio-button {
//    .el-radio-button__inner {
//      background: @el-radio-button__inner !important;
//      border-color: @border-color !important;
//      color: @text-color !important;
//    }
//
//    &.is-active {
//      .el-radio-button__inner {
//        color: #ffffff !important
//      }
//    }
//
//    .el-radio-button__original-radio:checked + .el-radio-button__inner {
//      background: var(--el-color-primary) !important;
//    }
//  }
//}
//
//.el-button--text {
//  background: transparent !important;
//  border: none !important;
//}

@drawer-header-bg: #2f5ecc;
@drawer-body-bg: #132e60;
@drawer-footer-bg: #132e60;
@drawer-body-border-bottom: 1px solid #234685;
.drawerOuter {
  //inset: 50px 0 0 48% !important;

  .el-drawer__body {
    display: flex;
    flex-direction: column;
    //background-color: @drawer-body-bg;
    border-bottom: @--color-primary;
  }

  .el-drawer__header {
    // background-color: @drawer-header-bg;
    margin-bottom: 0px;
    padding-bottom: 20px;
    color: @--text-regular-color;
  }

  .el-drawer__footer {
    // background-color: @drawer-footer-bg;
  }
}

.drawerOuter.noInset {
  inset: 50px 0 0 0 !important;
}

.el-select-v2__placeholder {
  //color: @text-regular-color !important;
}

.el-select-v2__placeholder.is-transparent {
  //color: var(--el-text-color-placeholder) !important;
}

.el-select-v2__wrapper .el-select-v2__input-wrapper input {
  // color: @text-color;
}

.el-select-dropdown__option-item {
  &.is-selected {
    background-color: var(--el-bg-color) !important;
  }
}

//============================================================base.less 结束=============================================//

//============================================================app.less 开始 =============================================//
*,
:after,
:before {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: #595959;
  font-size: 14px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    '微软雅黑', Arial, sans-serif;
  color: #595959;
  background: #f0f2f5;

  //字体
  .text {
    &-2 {
      color: #8c8c8c;
    }
  }

  .text-center {
    text-align: center;
  }

  a {
    // color: @--color-primary;
    color: @--text-regular-color;
    text-decoration: none;

    &:focus,
    &:hover {
      color: @--color-primary;
    }
  }
}

.rr-setting-title {
  color: @text-regular-color;
}

//.el-space__item span {
//  color: @text-regular-color;
//}

.iconfont {
  cursor: pointer;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: text-bottom;
  display: inline-block;
  fill: currentColor;
  width: 17px;
  height: 17px;
}

.icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

.el-badge__content {
  height: 16px;
  line-height: 16px;
  padding: 0 5px;
  border: none;
  //background: #ff4d4f !important;
}

.ele-badge-static {
  line-height: 0;
}

.ele-badge-static .el-badge__content {
  position: static;
  transform: none;
}

//alert
.ele-alert-border.is-light.el-alert--warning {
  border: 1px solid #faad144d !important;
}

.el-alert--warning.is-light {
  background-color: #fff7e8 !important;
  //color: #faad14 !important;
}

.ele-alert-border.is-light .el-alert__title {
  //color: #262626 !important;
  font-size: 14px !important;
}

.el-alert__content {
  padding: 0;
}

//menu
.el-menu-item a,
.el-menu-item span,
.el-sub-menu > .el-sub-menu__title a,
.el-sub-menu > .el-sub-menu__title span {
  //color: @dark-text;
  text-decoration: none;
  margin-left: 5px;
  display: inline-flex;
  width: 100%;
}

.rr-sidebar-menu.el-menu--horizontal > .el-menu-item {
  padding: 0 12px;
  height: 50px;
  line-height: 50px;
}

.rr-sidebar-menu-pop-dark,
.rr-sidebar-menu-pop-light {
  box-shadow: none !important;
  border-width: 0 !important;
}

.el-sub-menu__icon-arrow {
  font-weight: bold;
}

//pop
.custom-table-cell-popper {
  max-width: 500px;
}

.el-popper.is-dark a {
  color: #fff;
  text-decoration: none;
}

.el-popover.el-popper {
  //max-height: 300px;
  //overflow: auto;
}

//表格
.el-table thead {
  //color: #303133 !important;

  th {
    // background-color: #f5f7fa !important;
  }

  th.el-table__cell {
    background-color: #f7f7f7;
  }

  th.el-table-fixed-column--right {
    background-color: #f7f7f7 !important;
  }
  th.el-table-fixed-column--left {
    background-color: #f7f7f7 !important;
  }
}

html.dark {
  .el-table thead {
    th.el-table__cell {
      background-color: var(--el-table-header-bg-color);
    }

    th.el-table-fixed-column--right {
      background-color: var(--el-table-header-bg-color) !important;
    }
    th.el-table-fixed-column--left {
      background-color: var(--el-table-header-bg-color) !important;
    }

    th.el-table__cell {
      background: var(--el-table-header-bg-color) !important;
    }
  }

  .switchStyle {
    .el-table__body .el-table__row td:first-child {
      background: var(--el-table-header-bg-color) !important;
    }
  }
}

.el-table__fixed-right::before {
  background: transparent !important; //element-plus表格高度动态计算bug，强制下划线不显示颜色
}

.el-form--inline .el-form-item {
  margin-right: 16px !important;
}

//分页
.el-pagination {
  margin-top: 15px !important;
  justify-content: right;
}

//tinymce
.tox-tinymce-aux {
  z-index: 3000 !important;
}

//弹窗popover
.popover-pop {
  padding: 10px 0 5px 5px !important;

  &-body {
    max-height: 255px;
    overflow: auto;
  }
}

//弹窗
.rr-dialog {
  min-width: 600px;
}

.rr {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  &-loading {
    z-index: 9999;
  }

  //全屏页面渲染
  &-fullscreen {
    width: 100vw;

    &.new-pop-window > div {
      padding: 15px;
      margin: 15px;
      background: #fff;
      border-radius: 4px;
    }
  }

  &-error {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1200;
  }

  &-drawer {
    .el-drawer__header {
      font-size: 15px;
      margin-bottom: 0;
      padding: 13px 16px;
      //border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .el-drawer__body {
      padding: 15px;
      overflow: auto;
    }
  }

  //顶部
  &-header {
    padding: 0 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;

    &-ctx {
      display: flex;
      height: 50px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

      &-logo {
        display: flex;
        color: #ffffffe6;
        font-size: 16px;
        letter-spacing: 1.5px;
        width: 200px;
        height: 100%;
        overflow: hidden;
        white-space: nowrap;
        justify-content: center;
        font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
          Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
          Noto Color Emoji;
        align-items: center;
        position: relative;
        transition: width 0.3s;
        padding: 0 15px;

        &-img {
          width: 32px;
          height: 32px;
          display: inline-block;
          flex-shrink: 0;

          &-wrap {
            display: flex;

            &.enabled-logo {
              &-false {
                display: none;
              }
            }
          }
        }

        &-line {
          display: inline-block;
          width: 10px;
          height: 1px;
        }

        &-text {
          display: inline-block;
          line-height: 1;
          overflow: hidden;
          text-transform: uppercase;
          font-weight: 700;
          font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
            '微软雅黑', Arial, sans-serif;
        }
      }
    }
  }

  &-body {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  //左侧侧边栏
  &-sidebar {
    margin-top: 50px;
    width: 200px !important;
    min-height: calc(100vh - 50px);
    overflow-x: hidden !important;
    transition: width 0.3s;
    z-index: 120;
    scrollbar-width: none;

    &-menu {
      transition: width 0.3s;
      overflow: hidden;

      &.el-menu--horizontal {
        border-bottom: none !important;
      }

      .el-menu-item {
        transition: none !important;
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }

    .el-menu {
      width: 200px !important;
      border-right: 0 !important;

      &-item {
        height: 45px;
        line-height: 45px;
        margin: 2px 0;
      }

      &-item,
      .el-sub-menu__title {
        background: transparent !important;

        &:focus {
          background: transparent !important;
        }
      }

      &-item,
      .el-sub-menu__title,
      &-item-group__title {
        font-size: 14px;
      }

      .el-sub-menu {
        .el-sub-menu__title {
          i {
            // color: inherit !important;
          }
        }
      }

      .el-menu-item,
      .el-sub-menu .el-sub-menu__title {
        margin: 0;
        height: 48px;
        line-height: 48px;
      }

      .el-sub-menu {
        .el-menu-item {
          height: 45px;
          line-height: 45px;
          margin: 2px 0;
        }
      }

      .el-menu-item [class^='el-icon'],
      .el-sub-menu > .el-sub-menu__title [class^='el-icon'] {
        font-size: 17px;
        margin-right: 0;
        width: auto;
      }

      .el-menu-item a,
      .el-menu-item span,
      .el-sub-menu > .el-sub-menu__title a,
      .el-sub-menu > .el-sub-menu__title span {
        margin-left: 10px;

        > a {
          margin-left: 0;
        }
      }
    }
  }

  .rr-setting-wrap {
    color: @--text-regular-color !important;
  }

  //页面内容区域外层
  &-view {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    //border-top: 1px solid #f4f4f4 !important;
    &-container {
      margin-top: 50px;
      background: @dark-bg-2;
    }

    &-wrap {
      display: flex;
      flex-direction: column;
    }

    &-ctx {
      margin-top: 39px;
      padding: 15px;
      flex: 1;
      //页面内容区域
      &-card {
        min-height: calc(100% - 5px);
        border-width: 0 !important;
      }
    }

    //页面内容顶部tab标签栏
    &-tab {
      width: 100%;
      height: 39px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;

      &__header {
        &:hover {
          background: inherit !important;
        }
      }

      &-wrap {
        position: fixed;
        top: 50px;
        left: 200px;
        right: 0;
        display: flex;
        background: @dark-bg;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        z-index: 100;
        transition: left 0.3s;
        border-top: 1px rgba(255, 255, 255, 0.2) solid;
      }

      &-ops {
        width: 40px;
        flex-shrink: 0;
        //background: #fff;
        display: flex !important;
        align-items: center;
        justify-content: center;
        //border-left: 1px solid #f4f4f4;
        cursor: pointer;
        text-align: center;
        color: #8c8c8c !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        margin-right: 5px; //element-plus el-dropdown自动定位bug bottom-end指令不生效，临时采用偏移5px
        // background: @rr-view-tab-bg;
        //border-left: 1px solid @text-2;
      }

      .el-tabs__active-bar {
        height: 0;
      }

      .el-tabs__nav {
        &-prev,
        &-next {
          .el-icon {
            display: none;
          }
        }

        .el-tabs__item {
          padding: 0 15px !important;
          //border-right: 1px solid #f4f4f4;
          user-select: none;
          color: #8c8c8c;

          &:hover {
            // color: #262626;
            background-color: rgba(0, 0, 0, 0.02);
          }

          .is-icon-close {
            transition: none !important;

            &:hover {
              color: #fff;
              background-color: #ff4d4f;
            }
          }

          &::before {
            content: '';
            width: 9px;
            height: 9px;
            margin-right: 8px;
            display: inline-block;
            background-color: #ddd;
            border-radius: 50%;
          }

          //&.is-active {
          //  color: @primary-bg-light;
          //  background-color: @primary-bg-light !important;
          //
          //  &:before {
          //    background-color: @primary-bg-light;
          //  }
          //}

          &:nth-child(2) {
            &::before {
              content: none;
            }
          }
        }
      }

      .el-tabs__nav-wrap {
        padding: 0px 39px 0 40px !important;

        &::before,
        &::after {
          width: 40px;
          height: 40px;
          line-height: 44px;
          text-align: center;
          box-sizing: border-box;
          font-size: 16px;
          color: #8c8c8c;
          transition: background-color 0.2s;
          position: absolute;
          top: 0;
          left: 0;
          font-family: element-icons !important;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          cursor: not-allowed;
        }

        &::before {
          content: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" color="rgb(140 140 140)" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"></path></svg>');
          //border-right: 1px solid #f4f4f4;
          //border-right: 1px solid @text-2;
        }

        &::after {
          content: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" color="rgb(140 140 140)" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"></path></svg>');
          right: 0;
          left: auto;
          bottom: auto;
          height: auto;
          background-color: transparent;
          // border-left: 1px solid #f4f4f4;
          //border-left: 1px solid @text-2;
        }
      }

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        box-sizing: border-box;
        font-size: 16px;
        color: #8c8c8c;
        transition: background-color 0.2s;
        z-index: 10;

        i {
          vertical-align: middle;
          margin-top: -4px;
        }

        &:hover {
          background: rgba(0, 0, 0, 0.02);
        }
      }

      .el-tabs__nav-prev {
        // border-right: 1px solid #8c8c8c;
      }
    }
  }

  //页面按钮样式

  //两个子的按钮
  .btn-size {
    width: 70px;
    // height: 28px;
  }

  //用于四个字的按钮
  .btn-midSize {
    width: 90px;
    // height: 28px;
  }

  //五个字按钮
  .btn-largeSize {
    width: 104px;
    // height: 28px;
  }

  //下拉按钮
  .btn-dropdown-size {
    margin-left: 12px;

    .el-button {
      //   height: 28px;
    }
  }

  //启用
  .btn-strUse {
    background: #3aa77f !important;
    border: none;
  }

  //新增 批量新增
  .btn-add {
    background: #169eac !important;
    border: none;
  }

  //删除
  .btn-delete {
    background: #f66c6c !important;
    border: none;
  }

  //停用
  .btn-stop {
    background: #e0553f !important;
    border: none;
  }

  //查询
  .btn-search {
    background: #4271e2 !important;
    border: none;
  }

  //预览
  .btn-preview {
    background: #4271e2 !important;
    border: none;
  }

  //导出
  .btn-export {
    background: #8aa9da !important;
    border: none;
  }

  //导入
  .btn-import {
    background: #0068b7 !important;
    border: none;
  }

  //模板下载
  .btn-dowmLoad {
    background: #546fb4 !important;
    border: none;
  }

  //生成报告
  .btn-report,
  .btn-reset {
    background: #12b5b0 !important;
    border: none;
  }

  //分配企业  分配数据源
  .btn-disButionCom {
    background: #4b96e9 !important;
    border: none;
  }

  //同步
  .btn-together {
    background: #12b5b0 !important;
    border: none;
  }

  //权限
  .btn-limit {
    background: #1890ff !important;
    border: none;
  }

  //重新计算
  .btn-recount {
    background: #438bcb !important;
    border: none;
  }
}

//============================================================app.less 结束 =============================================//

//=========================================================== 自定义全局样式开始 ===========================================================//
.el-menu--vertical.rr-sidebar-menu-pop-light,
.el-menu--vertical.rr-sidebar-menu-pop-dark {
  border-radius: 4px !important;
  box-shadow: none !important;

  .el-menu.el-menu--popup {
    min-width: 160px;
    border-radius: 4px !important;
  }

  .el-menu-item,
  .el-sub-menu__title {
    height: 45px;
    line-height: 45px;
  }

  .is-active {
    &.el-menu-item {
      border: 0 !important;
    }
  }
}

//深色侧边栏
.ui-sidebar-dark .rr-sidebar,
.rr-sidebar-menu-pop-dark {
  background: @menu-bg-normal !important;
  box-shadow: 0 4px 4px rgba(0, 21, 41, 0.35);

  .el-menu {
    background: @menu-bg-normal !important;

    .el-menu-item,
    .el-sub-menu__title {
      &:hover {
        i,
        a {
          //color: @dark-text-active !important;
        }
      }

      i,
      a {
        // color: @dark-text !important;
      }

      &:not(.is-active):hover {
        // background: inherit !important;
      }
    }

    .is-active {
      &.el-menu-item {
        border-right: none !important;
        background: @primary-bg !important;
      }

      &.el-menu-item,
      > .el-sub-menu__title:first-child {
        i,
        a {
          color: @dark-text-active !important;
        }
      }
    }
  }
}

//浅色侧边栏
.ui-sidebar-light .rr-sidebar,
.rr-sidebar-menu-pop-light {
  //background: @light-bg !important;
  box-shadow: 0 4px 4px rgba(0, 21, 41, 0.25);

  .el-menu {
    //  background: @light-bg !important;

    .el-menu-item,
    .el-sub-menu__title {
      &:hover {
        i,
        a {
          //   color: @light-text-active !important;
        }
      }

      i,
      a {
        // color: @light-text !important;
      }

      &:not(.is-active):hover {
        //background: inherit !important;
      }
    }

    .is-active {
      &.el-menu-item {
        border-right: 2px solid @light-text-active !important;
        //  background: @light-bg-active !important;
      }

      &.el-menu-item,
      > .el-sub-menu__title:first-child {
        i,
        a {
          color: @light-text-active !important;
        }
      }
    }
  }
}

//================================
.el-menu--horizontal.rr-sidebar-menu-pop-light,
.el-menu--horizontal.rr-sidebar-menu-pop-dark {
  border-radius: 4px !important;
  box-shadow: none !important;
  // background-color: @light-bg !important;
  border: none !important;
  margin-top: -5px;
  margin-left: 0;

  .el-popper {
    border: 0 !important;
  }

  .el-menu--horizontal {
    margin-left: -5px;
  }

  .el-menu.el-menu--popup {
    min-width: 160px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
  }

  .el-menu-item,
  .el-sub-menu__title {
    height: 45px;
    line-height: 45px;
  }

  .is-active {
    &.el-menu-item {
      border: 0 !important;
    }
  }
}

//浅色顶栏
.ui-topHeader-light {
  .rr-header-ctx {
    box-shadow: 0 1px 1px #f1f1f1;

    &-logo {
      //  background: @light-bg !important;
      color: #000000bf;
    }
  }

  &.ui-sidebar-dark {
    .rr-header-ctx {
      box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
    }
  }

  .rr-header-right {
    // background: @dark-bg !important;
    // color: @--text-regular-color !important;

    .rr-header-right-items {
      * {
        // color: @light-text !important;
      }

      > div {
        &:hover {
          //  color: #262626 !important;
          //   background: rgba(0, 0, 0, 0.1) !important;
        }
      }

      .el-badge__content {
        // color: #fff !important;
      }
    }

    .rr-sidebar-menu {
      &.el-menu {
        //   background: @light-bg !important;

        .el-menu-item,
        .el-sub-menu__title {
          &:hover {
            background: rgba(0, 0, 0, 0.1) !important;

            i,
            a {
              //   color: @light-text-active !important;
            }
          }

          i,
          a {
            //   color: @light-text !important;
          }

          i:not(.el-sub-menu__icon-arrow) {
            width: 17px !important;
            height: 17px !important;
            margin-right: 0 !important;
            margin-top: -4px;
            line-height: 17px;
          }

          span {
            margin-right: 0;
          }
        }

        .is-active {
          &.el-menu-item {
            // border-bottom: 2px solid @light-text-active !important;
            //background: @light-bg !important;
          }

          &.el-menu-item,
          .el-sub-menu__title {
            i,
            a {
              //   color: @light-text-active !important;
            }

            &:hover {
              background: rgba(0, 0, 0, 0.1) !important;
            }
          }

          &.isLink {
            border-bottom: 0 !important;

            i,
            a {
              //   color: @light-text !important;
            }
          }
        }
      }
    }
  }
}

//深色顶栏
.ui-topHeader-dark {
  .rr-header-ctx {
    &-logo {
      background: @dark-bg !important;
    }
  }

  .rr-header-right {
    background: @dark-bg !important;

    .rr-header-right-items {
      * {
        color: @dark-text !important;

        &:hover {
          color: @dark-text-active !important;
        }
      }

      .el-badge__content {
        color: #fff !important;
      }
    }

    .rr-sidebar-menu {
      &.el-menu {
        background: @menu-bg-normal !important;

        .el-menu-item,
        .el-sub-menu__title {
          &:hover {
            background: @menu-bg-normal !important;

            i,
            a {
              //  color: @dark-text-active !important;
            }
          }

          i,
          a {
            //color: @dark-text !important;
          }

          &:not(.is-active):hover {
            //background: inherit !important;
          }

          i:not(.el-sub-menu__icon-arrow) {
            width: 17px !important;
            height: 17px !important;
            margin-right: 0 !important;
            margin-top: -4px;
            line-height: 17px;
          }

          span {
            margin-right: 0;
          }
        }

        .is-active {
          &.el-menu-item {
            border-bottom: 2px solid @dark-text-active !important;
            background: @dark-bg !important;
          }

          &.el-menu-item,
          .el-sub-menu__title {
            // border-bottom: 2px solid @dark-text-active !important;

            i,
            a {
              // color: @dark-text-active !important;
            }
          }

          &.isLink {
            border-bottom: 0 !important;

            i,
            a {
              //  color: @dark-text !important;
            }
          }
        }
      }
    }
  }
}

//主题色
.ui-topHeader-primary {
  .rr-header-ctx {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    position: relative;
    z-index: 102;
  }

  .rr-header-ctx-logo {
    background: @menu-bg-normal !important;
  }

  .rr-header-right {
    background: @dark-bg !important;

    .rr-header-right-items,
    .rr-header-right-left-br {
      div,
      span,
      svg,
      i {
        color: @--text-regular-color !important;

        &:hover {
          color: @--color-primary !important;
        }
      }
    }

    .rr-sidebar-menu {
      &.el-menu {
        //  background: @dark-bg !important;

        .el-menu-item,
        .el-sub-menu__title {
          &:hover,
          &:focus {
            background: rgba(0, 0, 0, 0.1) !important;

            i.el-icon {
              svg {
                color: @--color-primary !important;
              }
            }

            i,
            a {
              //   color: @primary-text-active !important;
            }
          }

          i,
          a {
            //color: @primary-text !important;
          }

          i:not(.el-sub-menu__icon-arrow) {
            width: 17px !important;
            height: 17px !important;
            margin-right: 0 !important;
            margin-top: -4px;
            line-height: 17px;
          }

          span {
            margin-right: 0;
          }
        }

        .is-active {
          &.el-menu-item {
            i.el-icon {
              svg {
                color: @--color-primary !important;
              }
            }

            // border-bottom: 2px solid @primary-text-active !important;
          }

          &.el-menu-item,
          .el-sub-menu__title {
            // border-bottom: 2px solid @primary-text-active !important;

            i,
            a {
              // color: @primary-text-active !important;
            }

            &:hover {
              background: rgba(0, 0, 0, 0.1) !important;
            }
          }

          &.isLink {
            border-bottom: 0 !important;

            i,
            a {
              // color: @primary-text !important;
            }
          }
        }
      }
    }
  }
}

.list-page-slot {
  > header {
    .el-form-item__content > .el-input,
    .el-form-item__content > .el-select,
    .el-form-item__content > .search-multi-select,
    .el-form-item__content > .el-select-v2 {
      width: 150px;
    }
  }
}

.ui-navLayout-left {
  .el-sub-menu__title,
  .el-menu-item {
    a,
    i {
      color: #fff;
    }
  }
}

.ui-navLayout-top {
  .rr-header-ctx-logo {
    background: @dark-bg !important;
    color: @--text-regular-color !important;
  }

  .rr-sidebar-menu {
    //&.el-menu {
    //
    //  .el-menu-item,
    //  .el-sub-menu__title {
    //    &:hover {
    //      background: @menu-bg-normal !important;
    //
    //      i,
    //      a {
    //        color: @dark-text-active !important;
    //      }
    //    }
    //
    //    i,
    //    a {
    //      color: @dark-text !important;
    //    }
    //
    //  }
    //}

    background: @dark-bg !important;

    .el-sub-menu__title {
      a,
      i {
        color: @--text-regular-color !important;
      }
    }
  }
}

.ui-navLayout-mix {
  aside {
    .el-menu {
      .el-menu-item {
        a,
        i {
          color: #fff;
        }
      }
    }
  }

  .el-menu {
    .el-sub-menu__title {
      a,
      i {
        color: @--text-regular-color !important;
      }
    }
  }
}

//=============
//导航模式
.ui-navLayout-left {
  &.ui-sidebar-light {
    .rr-sidebar {
      box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
      z-index: 101;
    }
  }
}

.ui-navLayout-top {
  &.ui-topHeader-light {
    .rr-header-right {
      border-bottom: none !important;
    }
  }

  .rr-header-ctx-logo {
    max-width: inherit !important;

    &-text {
      max-width: inherit !important;
      overflow: inherit !important;
    }
  }

  .rr-view-tab-wrap {
    left: 0 !important;
  }
}

.ui-navLayout-mix {
  .rr-header-ctx-logo {
    max-width: inherit !important;

    &-text {
      max-width: inherit !important;
      overflow: inherit !important;
    }
  }

  &.ui-sidebar-light {
    .rr-sidebar {
      box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
      z-index: 101;
    }
  }

  .rr-sidebar {
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
    z-index: 101;
  }

  .rr-header-right-left-br {
    padding: 0 !important;
  }
}

//========
//内容不铺满
.ui-contentFull-false {
  .rr-view-ctx {
    width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
  }
}

//=======
//tab标签栏开关
.ui-openTabsPage {
  &-false {
    .rr-view-ctx {
      margin-top: 0;
    }
  }
}

//=======
//logo自动
//导航模式在顶部时logo自动要取消
.ui-logoAuto-true,
.ui-navLayout-top {
  .rr-header-ctx-logo {
    width: inherit !important;
    padding: 0 15px 0 20px;
    box-shadow: none !important;
  }

  &.ui-topHeader-primary .rr-header-ctx-logo {
    // background: @dark-bg !important;
    //color: #ffffffd9 !important;
  }

  &.ui-topHeader-dark .rr-header-ctx-logo {
    //background: @dark-bg !important;
    //color: #ffffffd9 !important;
  }

  &.ui-topHeader-light .rr-header-ctx-logo {
    // background: @light-bg !important;
    color: #000000bf;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08);
  }
}

//侧边栏多彩图标
.ui-colorIcon-true {
  .rr-sidebar {
    .el-menu {
      .el-sub-menu__title,
      .el-menu-item,
      .isLink {
        margin-left: -5px !important;
      }

      li {
        [class^='el-icon'] {
          &:first-child {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 14px;
            background-color: rgb(97, 178, 252);
            border-radius: 50%;
            text-align: center;
            color: rgb(255, 255, 255) !important;

            .iconfont {
              width: 14px;
              height: 14px;
            }
          }
        }

        &:nth-child(2n) {
          [class^='el-icon'] {
            &:first-child {
              background-color: rgb(125, 215, 51);
            }
          }
        }

        &:nth-child(3) {
          [class^='el-icon'] {
            &:first-child {
              background-color: rgb(50, 162, 212);
            }
          }
        }

        &:nth-child(4) {
          [class^='el-icon'] {
            &:first-child {
              background-color: rgb(115, 131, 207);
            }
          }
        }

        &:nth-child(5) {
          [class^='el-icon'] {
            &:first-child {
              background-color: rgb(245, 104, 111);
            }
          }
        }

        &:nth-child(6) {
          [class^='el-icon'] {
            &:first-child {
              background-color: rgb(43, 204, 206);
            }
          }
        }

        &:nth-child(7) {
          [class^='el-icon'] {
            &:first-child {
              background-color: rgb(125, 215, 51);
            }
          }
        }

        &:nth-child(8) {
          [class^='el-icon'] {
            &:first-child {
              background-color: rgb(250, 173, 20);
            }
          }
        }
      }

      //--
      .el-sub-menu {
        .el-menu {
          li,
          .el-sub-menu__title {
            [class^='el-icon'] {
              &:first-child:not(.el-sub-menu__icon-arrow) {
                width: 8px;
                height: 8px;
                line-height: 8px;
                font-size: 30px;
                overflow: hidden;
                border-radius: 50%;
                margin: 0 0 0 10px;
                background: @dark-text !important;
                color: @dark-text !important;

                &:before {
                  content: '';
                  margin-left: -11px;
                  font-family: element-icons !important;
                }
              }
            }
          }
        }
      }

      .el-menu-item,
      .el-sub-menu.is-active .el-sub-menu__title {
        i:first-child {
          color: #fff !important;
        }
      }
    }
  }

  &.ui-sidebar-light {
    .rr-sidebar {
      .el-sub-menu .el-menu {
        .el-sub-menu {
          .el-sub-menu__title {
            [class^='el-icon'] {
              &:first-child:not(.el-sub-menu__icon-arrow) {
                color: @light-text !important;
                opacity: 0.25;
              }
            }

            &:hover {
              [class^='el-icon'] {
                &:first-child:not(.el-sub-menu__icon-arrow) {
                  color: @light-text-active !important;
                  opacity: 0.25;
                }
              }
            }
          }

          &.is-active .el-sub-menu__title [class^='el-icon'] {
            &:first-child:not(.el-sub-menu__icon-arrow) {
              color: @light-text-active !important;
              opacity: 1;
            }
          }
        }

        .el-menu-item {
          [class^='el-icon'] {
            &:first-child:not(.el-sub-menu__icon-arrow) {
              background: @light-text !important;
              color: @light-text !important;
              opacity: 0.25;
            }
          }

          &.is-active,
          &:hover {
            [class^='el-icon'] {
              &:first-child:not(.el-sub-menu__icon-arrow) {
                background: @light-text-active !important;
                color: @light-text-active !important;
                opacity: 1;
              }
            }
          }

          &:hover:not(.is-active) {
            [class^='el-icon'] {
              &:first-child:not(.el-sub-menu__icon-arrow) {
                opacity: 0.2;
              }
            }
          }
        }
      }
    }
  }

  &.ui-sidebar-dark {
    .rr-sidebar {
      .el-sub-menu {
        .el-sub-menu.is-opened {
          &.is-active {
            .el-sub-menu__title {
              [class^='el-icon'] {
                &:first-child:not(.el-sub-menu__icon-arrow) {
                  background: @dark-text-active !important;
                  color: @dark-text-active !important;
                  opacity: 1;
                }
              }
            }
          }
        }

        .el-menu .el-menu-item,
        .el-sub-menu.is-opened .el-sub-menu__title {
          [class^='el-icon'] {
            &:first-child:not(.el-sub-menu__icon-arrow) {
              background: @dark-text !important;
              color: @dark-text !important;
              opacity: 0.85;
            }
          }

          &.is-active,
          &:hover {
            [class^='el-icon'] {
              &:first-child:not(.el-sub-menu__icon-arrow) {
                background: @dark-text-active !important;
                color: @dark-text-active !important;
                opacity: 1;
              }
            }
          }

          &:hover:not(.is-active) {
            [class^='el-icon'] {
              &:first-child:not(.el-sub-menu__icon-arrow) {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}

.rr-header-ctx-logo-expand {
  display: inline-flex;
  align-items: center;

  &-img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }
}

//侧边栏收缩状态
.rr.ui-sidebarCollapse {
  &-true {
    .rr-view-tab-wrap {
      left: 60px;
    }

    .rr-header-ctx-logo-line {
      width: 0;
    }

    .enabled-logo-false {
      display: flex;
    }

    .enabled-logo-false {
      display: flex;
      align-items: center;
    }

    &.ui-logoAuto {
      &-false {
        .rr-header-ctx-logo {
          width: 60px !important;

          &-text {
            display: none;
          }
        }
      }

      &-true {
        .enabled-logo-false {
          display: none;
        }

        .rr-header-ctx-logo-line {
          width: 10px;
        }
      }
    }

    &.ui-navLayout-top {
      //导航模式为顶部时自动展开logo状态
      .rr-header-ctx-logo {
        width: inherit !important;
        padding: 0 15px 0 20px;
        box-shadow: none !important;

        &-text {
          display: block;
        }
      }

      .enabled-logo-false {
        display: none;
      }
    }

    .rr-sidebar:not(.rr-sidebar-mobile) {
      width: 60px !important;

      .el-menu {
        width: 60px !important;
      }

      // 收起效果
      .rr-sidebar-menu {
        .el-menu-item,
        .el-sub-menu__title,
        .el-sub-menu {
          a,
          .el-menu {
            display: none;
          }
        }
      }
    }
  }

  &-false {
    .rr-header-ctx-logo {
      &-text {
        display: block;
        overflow: hidden;
      }
    }
  }
}

.el-tabs {
  .el-tabs__active-bar {
    background-color: @--color-primary;
  }

  .el-tabs__item {
    &.is-active {
      color: @--color-primary;
    }
  }
}

//tabStyle
.ui-tabStyle-default {
  .rr-view-tab {
    //background: @rr-view-tab-bg;

    .el-tabs__item {
      border-right: none !important;
      padding: 0 15px 0 !important;

      &.is-active {
        color: @--color-primary !important;
        //color: @text-regular-color !important;
      }

      &:before {
        content: none;
      }

      &:after {
        content: '';
        height: 3px;
        width: 0;
        background-color: @--color-primary !important;
        position: absolute;
        bottom: 0;
        left: 0;
      }

      &.is-active:after,
      &:hover:after {
        width: 100%;
      }
    }

    .el-tabs__nav-wrap {
      &:before,
      &:after,
      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        height: 40px;
        line-height: 44px;
      }
    }
  }
}

.ui-tabStyle-dot {
  .rr-view-tab-wrap {
    .rr-view-tab {
      .el-tabs__item {
        &.is-active {
          color: @--color-primary !important;

          &:before {
            background-color: @--color-primary !important;
          }
        }
      }
    }
  }
}

.ui-tabStyle-card {
  .rr-view-tab-wrap {
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 10px;

    .rr-view-tab {
      height: 30px;
      background: transparent !important;

      &-ops {
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        width: 30px;
        background-color: #fff;
        margin-right: 10px;

        .el-icon--right {
          margin-left: 0;
        }
      }

      .el-tabs__item {
        margin-left: 8px;
        padding: 0 15px 0 !important;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        background-color: #fff;

        &:nth-child(2) {
          margin-left: 0;
          padding: 0 15px !important;
        }

        &.is-active {
          background-color: @--color-primary !important;
          color: #fff;
        }

        &:before {
          content: none;
        }

        &:after {
          content: none;
        }
      }

      .el-tabs__nav-wrap {
        &:before,
        &:after,
        .el-tabs__nav-next,
        .el-tabs__nav-prev {
          height: 30px;
          line-height: 30px;
          background: #eff2f5 !important;
        }

        .el-tabs__nav-next,
        .el-tabs__nav-prev {
          &:hover {
            background: transparent !important;
          }
        }
      }
    }
  }
}

//外链
.rr-sidebar-menu.el-menu .el-menu-item.is-active.isLink {
  background: inherit !important;
}

//不同语言下的差异
[lang='en-US'] {
  .rr-header-ctx-logo-text {
    letter-spacing: 0px !important;
  }
}

@media screen and (min-width: 768px) {
  :not(html):not(body)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }

  :not(html):not(body)::-webkit-scrollbar-track {
    background: transparent;
  }

  :not(html):not(body)::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: hsla(0, 0%, 54.9%, 0.3);
  }

  :not(html):not(body)::-webkit-scrollbar-thumb:hover {
    background-color: hsla(0, 0%, 54.9%, 0.5);
  }

  .ele-scrollbar-mini::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .ele-scrollbar-mini::-webkit-scrollbar-thumb {
    border-radius: 3px;
  }

  .ele-scrollbar-hide::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

//=========================================================== 自定义全局样式结束 ===========================================================//

.list-page-slot {
  > header,
  > .container {
    background: @dark-bg;
  }
}

.normal-bg {
  background: @dark-bg;
}

.padding-16 {
  padding: 16px;
}

.iot-dictionary,
.iot-relation {
  &-left {
    background: @dark-bg;
  }
}

.el-range-editor.el-input__inner {
  height: 100%;
  background-color: @dark-bg;
}

//===========================================自定义业务样式开始=====================================================================//
.el-card.rr-view-ctx-card .el-card__body {
  height: 100%;
}

// views/iot/iot-thing-grouping-left
.iot-thing-grouping-left {
  width: 250px;

  .el-radio-group {
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  .el-select {
    width: 100%;
  }

  > .wrapper {
    > .block {
      color: @--text-regular-color;
      border: var(--el-border);
      background: @dark-bg;
      padding: 8px;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0.6;
      overflow: hidden;

      > div {
        line-height: 1.8em;
      }

      > .name {
        font-weight: bold;
      }

      > .date {
        color: @text-2;
      }

      > .desc {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &:not(last-child) {
        margin-bottom: 10px;
      }
    }
    > .active {
      opacity: 1;
    }
  }
}

// views/iot-entity
.el-table tr.el-table__row--striped.highlight-row td.el-table__cell {
  background-color: @--color-primary-light !important;
}

tr.highlight-row td {
  background-color: @--color-primary-light !important;
}

// src/components/cron/src/index
#changeContab {
  .el-tabs__nav-scroll {
    // background: @tr-bg-color !important;
  }

  .language {
    // background: @tr-bg-color;
    position: absolute;
    right: 25px;
    z-index: 1;
  }

  .el-tabs {
    box-shadow: none;
  }

  .tabBody {
    .el-row {
      margin: 10px 0;

      .long {
        .el-select {
          width: 350px;
        }
      }

      .el-input-number {
        width: 110px;
      }
    }
  }

  .bottom {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    position: relative;

    .value {
      font-size: 18px;
      vertical-align: middle;
      color: @text-regular-color;
    }
  }
}

// src/components/map/src/get-position-by-map
#get-position-by-map {
  position: relative;
  height: 100%;

  h4 {
    color: @--text-regular-color;
  }

  .search {
    background: @dark-bg;
  }

  .input-container {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    background: @dark-bg;
    color: @--text-regular-color;
    border-radius: 2px;
    padding: 8px 16px;
    z-index: 2;
  }
}

// src/components/sidetree/index
.side-tree-wrap .tree-wrap {
  background: @dark-bg;
}

// src/components/upload/uploadfile
.upload-file {
  .el-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .el-upload__tip {
    text-align: center;
    color: @--text-regular-color;
  }

  .el-upload-list__item-name {
    display: flex;
    align-items: center;
    color: @--text-regular-color;
  }

  .el-upload-list__item-file-name {
    color: @--text-regular-color;
  }

  .el-icon--close {
    // color: @text-regular-color !important;
  }

  .el-upload-dragger {
    .el-icon--upload {
      margin: 0;
    }
  }
}

// views/alarm/record-detail
.record-detail .container .el-row .el-col-1 .el-divider {
  border-color: @border-color;
}

// views/cache/cache-search/search-multi-select
.all-c:hover {
  // background-color: @tr-bg-color
}

// views/data-analysic/monotor-day-month-year, views/data-analysic/usage
.usage-chart-table {
  background-color: @block-bg-color;
}

// views/data-analysic/monotor-real-time , views/data-analysic/monotor
.usage-chart-table,
.monitor-chart-table {
  background-color: @dark-bg;
}

// views/device/components/basic-table
.list-item-detail-basic-table .table table {
  border-color: @border-color;
}

// views/device/components/list-item-detail-device-attribute
.list-item-detail-device-attribute .block-item {
  border: var(--el-border);
}

// views/iot/relation/component/left-modal
.left-modal-comp {
  //background: @content-bg-color;
  background: @dark-bg;

  > .collapse {
    //background: @content-bg-color;

    .el-collapse .el-collapse-item__content {
      > .rect {
        //border: 1px solid @border-color;
      }
    }
  }
}

// views/iot/relation/component/view
.iot-relation-view {
  color: @text-regular-color;
}

// src/views/tenant
.corporate-grouping-form {
  p {
    color: @text-color;
  }
}

.corporate-manage-admin-corporate-form {
  > .left,
  .right {
    p {
      color: @text-color;
    }
  }
}

.corporate-manage-admin-thing-form {
  > .left,
  .right {
    p {
      color: @text-color;
    }
  }
}

// views/iot/dictListWrapper
.dictListWrapper {
  .dict-list .dict-list-item:hover {
    background-color: var(--el-fill-color-light);
  }
}

// sidetree
.side-tree-wrap .tree-wrap .tree-content .el-tree {
  color: @--text-regular-color;
}

.expandFoldIcon {
  width: 20px;
  height: 20px;
  color: @text-color;
}

// data-analysis/monitor.vue, usage.vue, attributes.vue
.attributes,
.preview-form {
  border: var(--el-border);
}

.attributeGroups .caret {
  color: @text-regular-color;
}

.monitor .chartWrap,
.usage .chartWrap {
  border: var(--el-border);
}

// push/push-main-add-or-update
.config-params-form {
  border: var(--el-border);
}

// dataset/tingGroup.vue
.thing-group {
  border: var(--el-border);
}

.thing-group .item,
.dataset-selected-conditions {
  background-color: var(--el-fill-color-lighter);
}

// communication/index.vue
.dataset .avatar-icon {
  background-color: @dark-bg;
  border: 1px solid @border-color;
}

// device-control/add-or-update.vue
.editor-tooltip-text-color,
.normal-text-color {
  color: var(--el-text-color-regular);
}

// calculaton-module/rule-editor.vue
.ruleEditor {
  border: var(--el-border);
}

// calculaton-module/jsRuleTest.vue
.editor-title,
.format-and-fullscreen {
  color: @text-color;
}

// device/list-item-detail.vue
.list-item-detail {
  color: @--text-regular-color;
}

.list-item-detail > .main > .wrapper .el-tabs .el-tabs__content {
  //background: @input-bg-color;
}

.list-item-detail-basic-table > .table > table tr td {
  //  background: @list-item-detail-table-td;
}

.list-item-detail-basic-table > .table > table tr td.odd {
  //background: @list-item-detail-table-td-odd;
}

// iot/iot-device-extend.vue
.device-status {
  color: @--text-regular-color;
}

// device-board-setting/view.vue, edit.vue
.device-board-setting .setting-wrapper {
  background: @device-board-setting-bg;
}

// monitor-analysis-setting/components/data-treating
//.data-treating .editor-wrap .label {
//  color: @text-color;
//}

// sideTree/index.vue
.tree-dialog-icon {
  //color: @text-color;
}

.layout-toggle-button {
  color: #fff;
  background-color: @--color-primary;
}

.text-color-white-or-black {
  color: @--text-regular-color;
}

// device-board-setting/device-configration/index.vue
.hightlight-title-color {
  color: @hightlight-title-color;
}

.el-table thead.is-group th.el-table__cell {
  background: var(--el-fill-color-light);
}

// /device-board-setting/view
.dark-and-light-bg-toggle {
  background-color: @dark-bg;
}

// 分割面板样式开始
@css-prefix: eleU-;
@split-prefix-cls: ~'@{css-prefix}split';
@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
@trigger-bar-background: @text-color;
@trigger-background: @dark-bg;
@trigger-width: 12px;
@trigger-bar-width: 10px;
@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
@trigger-bar-interval: 3px;
@trigger-bar-weight: 1px;
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;

.@{split-prefix-cls} {
  &-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  &-pane {
    position: absolute;

    &.left-pane,
    &.right-pane {
      top: 0;
      bottom: 0;
    }

    &.left-pane {
      left: 0;
    }

    &.right-pane {
      right: 0;
    }

    &.top-pane,
    &.bottom-pane {
      left: 0;
      right: 0;
    }

    &.top-pane {
      top: 0;
    }

    &.bottom-pane {
      bottom: 0;
    }

    &-moving {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }

  &-trigger {
    border: var(--el-border);

    &-con {
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 10;
    }

    &-bar-con {
      position: absolute;
      overflow: hidden;

      &.vertical {
        left: @trigger-bar-offset;
        top: 50%;
        height: @trigger-bar-con-height;
        transform: translate(0, -50%);
      }

      &.horizontal {
        left: 50%;
        top: @trigger-bar-offset;
        width: @trigger-bar-con-height;
        transform: translate(-50%, 0);
      }
    }

    &-vertical {
      width: @trigger-width;
      height: 100%;
      background: @trigger-background;
      border-top: none;
      border-bottom: none;
      cursor: col-resize;

      .@{split-prefix-cls}-trigger-bar {
        width: @trigger-bar-width;
        height: 1px;
        background: @trigger-bar-background;
        float: left;
        margin-top: @trigger-bar-interval;
      }
    }

    &-horizontal {
      height: @trigger-width;
      width: 100%;
      background: @trigger-background;
      border-left: none;
      border-right: none;
      cursor: row-resize;

      .@{split-prefix-cls}-trigger-bar {
        height: @trigger-bar-width;
        width: 1px;
        background: @trigger-bar-background;
        float: left;
        margin-right: @trigger-bar-interval;
      }
    }
  }

  &-horizontal {
    > .@{split-prefix-cls}-trigger-con {
      top: 50%;
      height: 100%;
      width: 0;
    }
  }

  &-vertical {
    > .@{split-prefix-cls}-trigger-con {
      left: 50%;
      height: 0;
      width: 100%;
    }
  }

  .no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}

.dashboard-design,
.dashboard-preview {
  .dashboard-left {
    background: rgba(@dark-bg, 0.6);
    height: 100%;
    padding: 8px;
    border-radius: 4px;
    user-select: none;
    display: flex;
    flex-direction: column;

    ::-webkit-scrollbar {
      display: none;
    }

    .list {
      flex: 1;
      overflow-y: auto;
    }

    .el-card {
      margin-bottom: 20px;
      opacity: 0.7;
      cursor: pointer;

      .el-card__body {
        > div {
          display: flex;
          align-items: center;
          word-break: break-all;
          padding: 14px;

          > b {
            flex: 1;
          }
        }
      }

      button {
        width: 22px;
        height: 22px;
        border-radius: 100%;
        cursor: pointer;
        padding: 0 !important;
      }

      &.active {
        opacity: 1;
      }
    }

    img {
      width: 100%;
      height: 91.94px;
      object-fit: cover;
    }
  }

  div.active {
    border: 1px solid @--color-primary;
  }
}

.el-table {
  .table-header {
    display: flex;
    align-items: center;
    justify-content: center;

    > span {
      margin-right: 8px;
    }
  }
}

.el-drawer__header {
  color: @--text-regular-color;
  .el-drawer__title {
    font-size: var(--el-font-size-large);
  }
}

.firstlook-style-form {
  .style-select-container {
    .block {
      //background: @dark-bg-2;
    }
  }
}
.theme-bg {
  background: @dark-bg;
}
.normal-radius {
  border-radius: 4px;
}
.store-select-dialog {
  background: @dark-bg-2;
}

.test-new {
  background: @dark-bg;
}

.side-tree-container {
  .el-loading-mask,
  .side-tree-main {
    background: @dark-bg;
  }
}