2022-01-02

king

2022-01-02 bde2916433c7830e2879e6524e32b9f6c8bd0bab

 src/assets/css/viewstyle.scss

@@ -15,13 +15,13 @@
  .login-container {
    background-color: $bg1;
    .logo {
      border-color: transparent;
      border-color: $color6;
      .plat-name {
        color: $font1;
      }
    }
    .login-middle {
      border-color: transparent;
      border-color: $color6;
      .login-form-button {
        background-color: $color6;
        border-color: $color6;
@@ -33,13 +33,13 @@
      button.vercode {
        color: $color6;
      }
      .ant-tabs {
        .ant-tabs-tab.ant-tabs-tab-active {
      .login-way-wrap {
        .login-way.active, .login-way:hover {
          color: $color6;
        }
        .ant-tabs-tab:hover {
          color: $color6;
        }
      }
      .anticon-eye {
        color: $color6;
      }
    }
    .login-bottom {
@@ -50,7 +50,20 @@
    }
  }

  #root > .main-view {
  .menu-board {
    .menu-wrap {
      .title {
        color: $color6;
      }
      .menu-detail {
        div:hover {
          color: $color5;
        }
      }
    }
  }

  #root > .mk-main-view {
    > .header-container {
      background: $bg1;
      color: $font1;
@@ -59,7 +72,7 @@
      .header-setting span {
        color: $font1;
      }
      > .header-collapse i {
      > .header-collapse .anticon {
        color: $font1;
      }
      > .header-menu {
@@ -83,7 +96,7 @@
        }
      }
    }
    > .side-menu {
    > .mk-side-menu {
      border-right: 1px solid #d9d9d9;
      background: $bg1;
      > .ant-menu {
@@ -119,7 +132,7 @@
        }
      }
    }
    > .side-menu:not(.edit) {
    > .mk-side-menu:not(.edit) {
      > .ant-menu {
        > .ant-menu-submenu {
          > .ant-menu-sub {
@@ -134,7 +147,7 @@
        }
      }
    }
    >.content-box {
    >.mk-tabview-wrap {
      >.content-header {
        >.ant-tabs {
          >.ant-tabs-bar {
@@ -150,41 +163,7 @@
          }
        }
      }
      .normal-data-table, .normal-custom-table {
        table {
          .ant-table-tbody {
            > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
              background-color: $color1;
            }
            > tr.ant-table-row-selected:not(.background) td {
              background-color: $color1;
            }
            > tr.ant-table-row-selected:not(.background):hover .ant-table-column-sort {
              background-color: $color1;
            }
            > tr.mk-row-active:not(.background) td {
              background-color: $color3;
            }
            > tr.ant-table-row-selected.mk-row-active:not(.background):hover .ant-table-column-sort {
              background-color: $color3;
            }
          }
        }
      }
      .top-search {
        >.ant-row {
          .ant-col.search-button {
            .ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
              color: $color7;
              border-color: $color7;
            }
            .ant-btn-primary {
              background-color: $color6;
              border-color: $color6;
            }
          }
        }
      }

      .ant-tabs-nav .ant-tabs-tab-active {
        color: $color6;
      }
@@ -197,109 +176,304 @@
      .ant-tabs-nav .ant-tabs-tab:hover {
        color: $color5;
      }
      .ant-pagination {
        .ant-pagination-item-active {
          border-color: $color6;
          a {
            color: $color6;
          }
        }
        .ant-pagination-item:hover a {
          color: $color6;
        }
        .ant-pagination-prev:hover .ant-pagination-item-link {
          color: $color6;
        }
        .ant-pagination-next:hover .ant-pagination-item-link {
          color: $color6;
    }
    >.mk-breadview-wrap {
      >.ant-breadcrumb {
        .anticon-redo:hover, .anticon-home:hover {
          color: $color5;
        }
      }
    }
  }
  .custom-data-card-box, .custom-prop-card-box {
    .data-zoom.radio .card-row-list > .ant-col:not(.active):not(.selected):hover > .card-item-box, .data-zoom.checkbox .card-row-list > .ant-col:not(.active):not(.selected):hover > .card-item-box {
      border-color: $color4 !important;
      box-shadow: 0 0 4px $color4 !important;
    }
    .card-row-list.radio, .card-row-list.checkbox {
      >.ant-col:not(.active):not(.selected):hover {
        >.card-item-box {
    .data-zoom.radio.active, .data-zoom.checkbox.active {
      .mk-card:not(.active):not(.selected):hover {
        > .card-item-box {
          border-color: $color4 !important;
          box-shadow: 0 0 4px $color4 !important;
        }
      }
      .mk-card.active {
        > .card-item-box {
          border-color: $color6!important;
          box-shadow: 0 0 4px $color6!important;
        }
      }
      .mk-card.selected {
        > .card-item-box {
          border-color: $color4!important;
          box-shadow: 0 0 4px $color4!important;
        }
      }
    }
    .card-row-list {
      >.active >.card-item-box {
        border-color: $color6!important;
        box-shadow: 0 0 4px $color6;
    .data-zoom.radio.backFont, .data-zoom.checkbox.backFont {
      .mk-card:hover, .mk-card.active, .mk-card.selected {
        > .card-item-box {
          border-color: $color6!important;
          background-color: $color1!important;
          .ant-mk-text, .ant-mk-date {
            color: $color6;
          }
        }
      }
      >.selected >.card-item-box {
        border-color: $color4!important;
        box-shadow: 0 0 4px $color4;
    }
    .data-zoom.radio.font, .data-zoom.checkbox.font {
      .mk-card:hover, .mk-card.active, .mk-card.selected {
        > .card-item-box {
          border-color: $color6!important;
          .ant-mk-text, .ant-mk-date {
            color: $color6;
          }
        }
      }
    }
  }
  .normal-group-wrap {
    .print-button:hover, .print-button:focus, .print-button:active {
      color: $color5;
    }
  }
  // 搜索栏
  .top-search {
    >.ant-row {
      .ant-col.search-button {
        .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):active, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link).active, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):hover, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):focus {
          color: $color7;
          border-color: $color7;
        }
        .ant-btn-primary {
          background-color: $color6;
          border-color: $color6;
        }
        .ant-btn-link {
          color: $color6;
        }
      }
    }
    .advanced-list {
      .advance-value {
        color: $color6;
      }
    }
  }
  // 表格
  .normal-data-table, .normal-custom-table {
    table {
      .ant-table-tbody {
        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
          background-color: $color1;
        }
        > tr.ant-table-row-selected:not(.background) td {
          background-color: $color1;
        }
        > tr.ant-table-row-selected:not(.background):hover .ant-table-column-sort {
          background-color: $color1;
        }
        > tr.mk-row-active:not(.background) td {
          background-color: $color3;
        }
        > tr.ant-table-row-selected.mk-row-active:not(.background):hover .ant-table-column-sort {
          background-color: $color3;
        }
      }
    }
  }
  // 弹窗按钮
  .popview-modal {
    .ant-modal-footer {
      .ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
        color: $color7;
        border-color: $color7;
      }
    }
  }
  // 表单弹窗
  .action-modal {
    .ant-modal-footer {
      .ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
        color: $color7;
        border-color: $color7;
      }
      .ant-btn-primary {
        background-color: $color6;
        border-color: $color6;
      }
    }
  }
  // 是否框
  .ant-modal-confirm-confirm {
    .ant-modal-confirm-btns {
      .ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
        color: $color7;
        border-color: $color7;
      }
      .ant-btn-primary {
        background-color: $color6;
        border-color: $color6;
      }
    }
  }

  // 系统样式修改
  // .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
  //   background-color: $color1;
  // }
  // .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
  //   background-color: $color1;
  // }
  // // 复选框
  // .ant-checkbox-checked .ant-checkbox-inner {
  //   background-color: $color6;
  //   border-color: $color6;
  // }
  // .ant-checkbox-checked::after {
  //   border: 1px solid $color6;
  // }
  // .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  //   background-color: $color6;
  // }
  // .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
  //   border-color: $color6;
  // }
  // // 下拉框
  // .ant-select-selection:hover {
  //   border-color: $color5;
  // }
  // .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active {
  //   border-color: $color5;
  //   box-shadow: 0 0 0 2px $color2;
  // }
  // // 切换
  // .ant-switch-checked {
  //   background-color: $color6;
  // }
  // // 输入框
  // .ant-input:hover {
  //   border-color: $color5;
  // }
  // .ant-input:focus, .ant-input:active {
  //   border-color: $color5;
  //   box-shadow: 0 0 0 2px $color2;
  // }
  // .ant-input-number-focused {
  //   border-color: $color5;
  //   box-shadow: 0 0 0 2px $color2;
  // }
  // .ant-input-number:hover, .ant-input-number:focus, .ant-input-number:active, .ant-input-number-input:hover, .ant-input-number-input:focus, .ant-input-number-input:active, .ant-input-number-focused:hover, .ant-input-number-focused:focus, .ant-input-number-focused:active {
  //   border-color: $color5;
  // }
  // .ant-input-number:focus, .ant-input-number:active {
  //   box-shadow: 0 0 0 2px $color2;
  // }
  // // 日历
  // .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
  //   border-color: $color5;
  // }
  .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: $color1;
  }
  .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: $color1;
  }
  // 单选框
  .ant-radio-checked .ant-radio-inner {
    border-color: $color6;
  }
  .ant-radio-checked::after {
    border: 1px solid $color6;
  }
  .ant-radio-inner::after {
    background-color: $color6;
  }
  .ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner {
    border-color: $color6;
  }
  // 复选框
  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: $color6;
    border-color: $color6;
  }
  .ant-checkbox-checked::after {
    border: 1px solid $color6;
  }
  .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: $color6;
  }
  .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: $color6;
  }
  // 下拉框
  .ant-select-selection:hover {
    border-color: $color5;
  }
  .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active {
    border-color: $color5;
    box-shadow: 0 0 0 2px $color2;
  }
  // 切换
  .ant-switch-checked {
    background-color: $color6;
  }
  // 输入框
  .ant-input:hover {
    border-color: $color5;
  }
  .ant-input:focus, .ant-input:active {
    border-color: $color5;
    box-shadow: 0 0 0 2px $color2;
  }
  .ant-input-number-focused {
    border-color: $color5;
    box-shadow: 0 0 0 2px $color2;
  }
  .ant-input-number:hover, .ant-input-number:focus, .ant-input-number:active, .ant-input-number-input:hover, .ant-input-number-input:focus, .ant-input-number-input:active, .ant-input-number-focused:hover, .ant-input-number-focused:focus, .ant-input-number-focused:active {
    border-color: $color5;
  }
  .ant-input-number:focus, .ant-input-number:active {
    box-shadow: 0 0 0 2px $color2;
  }
  .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
    border-color: $color5;
  }
  // 日历
  .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
    border-color: $color5;
  }
  // 分页
  .ant-pagination {
    .ant-pagination-item-active {
      border-color: $color6;
      a {
        color: $color6;
      }
    }
    .ant-pagination-item:hover a {
      color: $color6;
    }
    .ant-pagination-prev:hover .ant-pagination-item-link {
      color: $color6;
    }
    .ant-pagination-next:hover .ant-pagination-item-link {
      color: $color6;
    }
  }
  // 表格排序图标
  .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-up.on, .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-down.on {
    color: $color6;
  }
  .mk-water-mark {
    color: $color4;
  }
  .mk-form-split-line {
    color: $color6;
  }
  .system-color {
    color: $color6;
  }
  .ant-timeline.system {
    .ant-timeline-item-tail {
      border-color: $color2;;
    }
  }
  .custom-tab-form-box .mk-normal-form-title.mkbtn {
    .form-title {
      color: $color6;
      border-color: $color6;
    }
    .form-title.active {
      background: $color6;
      color: #ffffff;
    }
  }
  .ant-input-search .ant-input-group-addon .ant-input-search-button {
    background-color: $color6;
    border-color: $color6;
  }
  .ant-modal-wrap .ant-modal-footer, .ant-drawer .ant-drawer-footer {
    .ant-btn:not(.ant-btn-primary):hover {
      color: $color6;
      border-color: $color6;
    }
    .ant-btn-primary {
      background-color: $color6;
      border-color: $color6;
    }
  }
  .ant-carousel {
    .slick-dots {
      >li {
        button {
          background-color: $color3;
        }
      }
      >li.slick-active {
        button {
          background-color: $color6;
        }
      }
    }
  }
}

body.hidden-split-line #root { // 去除登录页分割线
  .login-container {
    .logo {
      border-color: transparent;
    }
    .login-middle {
      border-color: transparent;
    }
  }
}

@mixin bgblack() {
  #root > .main-view {
  #root > .mk-main-view {
    > .header-container {
      box-shadow: none;
      > .header-menu {
@@ -432,3 +606,12 @@
  --antd-wave-shadow-color: #aeb303;
  @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #f2efda, #e6de97, #d9d26c, #ccc845, #bfbf22, #aeb303, #838c00, #5c6600, #374000, #151a00);
}
body.mk-deep-red-black {
  --antd-wave-shadow-color: #c32539;
  @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c, #750b20, #4f0315, #29010c);
  @include bgblack();
}
body.mk-deep-red-white {
  --antd-wave-shadow-color: #c32539;
  @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c, #750b20, #4f0315, #29010c);
}