king
2024-12-27 3728c728f6106b14e2149bcc7f45de437460c71f
src/assets/css/main.scss
@@ -16,6 +16,29 @@
    outline: none;
  }
}
::selection {
  color: #ffffff;
  background: var(--mk-sys-color);
}
::-moz-selection {
  color: #ffffff;
  background: var(--mk-sys-color);
}
::-webkit-selection {
  color: #ffffff;
  background: var(--mk-sys-color);
}
.table-col-1, .table-col-2, .table-col-3, .table-col-4 {
  .ant-table colgroup > col.ant-table-selection-col {
    width: 40px!important;
  }
}
.table-col-5, .table-col-6, .table-col-7 {
  .ant-table colgroup > col.ant-table-selection-col {
    width: 50px!important;
  }
}
/* 设置iconfont标签font-family */ 
[class^="icon-"],[class*=" icon-"] {
@@ -36,11 +59,9 @@
/*背景色*/
html, body {
  --mk-sys-color: #1890ff;
  width: 100%;
  font-size: 14px;
  // .ant-table, .ant-dropdown {
  //   color: rgba(0, 0, 0, 0.85);
  // }
}
#root {
  height: 100%;
@@ -79,9 +100,15 @@
  color: unset;
}
// 重置按钮中文字与图标距离
.ant-btn > .anticon + span, .ant-btn > span + .anticon {
  margin-left: 5px;
// 重置按钮加载中样式
.ant-btn.ant-btn-loading .anticon:not(.anticon-loading) {
  transition: all 0.3s;
}
.ant-btn.ant-btn-loading >.anticon-loading + span .anticon, .ant-btn.ant-btn-loading >.anticon-loading + .anticon {
  width: 0;
  opacity: 0;
  margin-left: 0px!important;
  margin-right: 0px!important;
}
// 设置下拉搜索滚动条样式
@@ -124,15 +151,15 @@
// 重置时间插件时间滚动条
.ant-calendar-time-picker-select {
  overflow-y: auto;
  overflow-y: auto!important;
}
.ant-calendar-time-picker-select::-webkit-scrollbar {
  width: 7px;
  width: 6px;
}
.ant-calendar-time-picker-select::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
  background: rgba(0, 0, 0, 0.13);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.08);
}
.ant-calendar-time-picker-select::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
@@ -140,6 +167,41 @@
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0);
}
.ant-calendar-header .ant-calendar-prev-century-btn::before, .ant-calendar-header .ant-calendar-prev-decade-btn::before, .ant-calendar-header .ant-calendar-prev-year-btn::before, .ant-calendar-header .ant-calendar-prev-century-btn::after, .ant-calendar-header .ant-calendar-prev-decade-btn::after, .ant-calendar-header .ant-calendar-prev-year-btn::after {
  border-color: rgba(0, 0, 0, 0.85)!important;
  border-width: 2px 0 0 2px!important;
}
.ant-calendar-header .ant-calendar-next-century-btn::before, .ant-calendar-header .ant-calendar-next-decade-btn::before, .ant-calendar-header .ant-calendar-next-year-btn::before, .ant-calendar-header .ant-calendar-next-century-btn::after, .ant-calendar-header .ant-calendar-next-decade-btn::after, .ant-calendar-header .ant-calendar-next-year-btn::after {
  border-color: rgba(0, 0, 0, 0.85)!important;
  border-width: 2px 0 0 2px!important;
}
.ant-calendar-header .ant-calendar-next-century-btn:hover::before, .ant-calendar-header .ant-calendar-next-decade-btn:hover::before, .ant-calendar-header .ant-calendar-next-year-btn:hover::before, .ant-calendar-header .ant-calendar-next-century-btn:hover::after, .ant-calendar-header .ant-calendar-next-decade-btn:hover::after, .ant-calendar-header .ant-calendar-next-year-btn:hover::after {
  border-color: rgba(0, 0, 0, 1)!important;
}
.ant-calendar-header .ant-calendar-prev-century-btn:hover::before, .ant-calendar-header .ant-calendar-prev-decade-btn:hover::before, .ant-calendar-header .ant-calendar-prev-year-btn:hover::before, .ant-calendar-header .ant-calendar-prev-century-btn:hover::after, .ant-calendar-header .ant-calendar-prev-decade-btn:hover::after, .ant-calendar-header .ant-calendar-prev-year-btn:hover::after {
  border-color: rgba(0, 0, 0, 1)!important;
}
.ant-calendar-header .ant-calendar-prev-month-btn {
  left: 35px!important;
}
.ant-calendar-header .ant-calendar-next-month-btn {
  right: 35px!important;
}
.ant-calendar-header .ant-calendar-prev-month-btn::before, .ant-calendar-header .ant-calendar-prev-month-btn::after {
  border-color: rgba(0, 0, 0, 0.85)!important;
  border-width: 2px 0 0 2px!important;
}
.ant-calendar-header .ant-calendar-next-month-btn::before, .ant-calendar-header .ant-calendar-next-month-btn::after {
  border-color: rgba(0, 0, 0, 0.85)!important;
  border-width: 2px 0 0 2px!important;
}
.ant-calendar-header .ant-calendar-prev-month-btn:hover::before, .ant-calendar-header .ant-calendar-prev-month-btn:hover::after {
  border-color: rgba(0, 0, 0, 1)!important;
}
.ant-calendar-header .ant-calendar-next-month-btn:hover::before, .ant-calendar-header .ant-calendar-next-month-btn:hover::after {
  border-color: rgba(0, 0, 0, 1)!important;
}
// 重置模态框滚动条
.ant-modal-wrap::-webkit-scrollbar, .ant-drawer-wrapper-body::-webkit-scrollbar {
  width: 7px;
@@ -180,9 +242,9 @@
  z-index: 1090!important;
}
.ant-dropdown {
  z-index: 1090!important;
}
// .ant-dropdown {
//   z-index: 1090!important;
// }
.mk-normal-dropdown {
  .ant-dropdown-menu {
@@ -233,6 +295,9 @@
    color: #ffffff;
  }
}
.ant-notification .ant-notification-notice-message {
  word-break: break-all;
}
// 重置提示框
.ant-tooltip {
@@ -264,28 +329,23 @@
  }
}
.ant-modal.popview-modal {
  top: 70px;
  .ant-modal-body {
    min-height: 200px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
// 消息提示
.ant-notification-notice.notification-custom-error {
  background: #f5222d;
  .anticon.ant-notification-notice-icon-error {
    color: #ffffff;
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 7px;
  .ant-notification-notice-message {
    color: #ffffff;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .ant-modal-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  .ant-notification-close-icon {
    color: #ffffff;
  }
}
.ant-notification .ant-notification-notice-message {
  word-break: break-all;
}
.ant-modal-wrap.popview-modal {
  .ant-modal {
    top: 70px;
@@ -297,6 +357,7 @@
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 7px;
    height: 0;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
@@ -309,12 +370,38 @@
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
  .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: var(--mk-sys-color);
      border-color: var(--mk-sys-color);
    }
  }
}
// 设置模态框样式,规定最大最小高度,重置滚动条
.action-modal {
  .ant-modal {
    max-width: 95vw;
    top: 70px;
    .ant-modal-title {
      height: 22px;
      .mk-modal-icon-def {
        margin-right: 10px;
        background: transparent!important;
      }
      .mk-modal-icon-circle {
        display: inline-block;
        border-radius: 30px;
        margin-right: 10px;
        margin-top: -5px;
        color: #ffffff!important;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
  }
  .ant-modal-body {
    max-height: calc(100vh - 205px);
@@ -336,6 +423,23 @@
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
  .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: var(--mk-sys-color);
      border-color: var(--mk-sys-color);
    }
    .ant-btn-primary {
      background-color: var(--mk-sys-color);
      border-color: var(--mk-sys-color);
    }
  }
}
.moveable-modal {
  overflow-x: hidden!important;
  .ant-modal-header {
    cursor: move;
  }
}
@@ -441,12 +545,168 @@
    color: inherit!important;
  }
}
// .ant-table.ant-table-mini .ant-table-thead > tr > th {
//   padding: 8px 4px;
// }
// .ant-table.ant-table-mini .ant-table-tbody > tr > td {
//   padding: 4px 4px;
// }
.ant-table.ant-table-mini .ant-table-thead > tr > th {
  padding: 8px 8px!important;
}
.ant-table.ant-table-mini .ant-table-tbody > tr > td {
  padding: 2px 8px!important;
  line-height: 1.5;
}
.ant-calendar-picker-container {
  .ant-calendar-range {
    .ant-calendar-selected-start-date .ant-calendar-date,
    .ant-calendar-selected-end-date .ant-calendar-date {
      background: var(--mk-sys-color);
    }
    .ant-calendar-in-range-cell::before {
      background: var(--mk-sys-color1);
    }
    .ant-calendar-selected-start-date .ant-calendar-date:hover,
    .ant-calendar-selected-end-date .ant-calendar-date:hover {
      background: var(--mk-sys-color);
    }
  }
  .ant-calendar-date:hover {
    background: var(--mk-sys-color1);
  }
  .ant-calendar-date:active {
    background: var(--mk-sys-color5);
  }
  .ant-calendar-today:not(.ant-calendar-disabled-cell):not(.ant-calendar-selected-day) {
    .ant-calendar-date {
      color: var(--mk-sys-color);
      border-color: var(--mk-sys-color4);
    }
  }
  .ant-calendar-today.ant-calendar-disabled-cell {
    .ant-calendar-date {
      color: var(--mk-sys-color);
    }
    .ant-calendar-date::before {
      border-color: var(--mk-sys-color4);
    }
  }
  .ant-calendar-header a:hover {
    color: var(--mk-sys-color5);
  }
  .ant-calendar-year-panel-header a:hover {
    color: var(--mk-sys-color5);
  }
  .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month,
  .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month:hover {
    color: rgba(0, 0, 0, 0.25);
  }
  .ant-calendar-decade-panel-decade:hover {
    background: var(--mk-sys-color1);
  }
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover,
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
    color: #ffffff;
    background: var(--mk-sys-color);
  }
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year {
    background: var(--mk-sys-color);
  }
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover {
    color: #fff;
    background: var(--mk-sys-color);
  }
  .ant-calendar-year-panel-year:hover {
    background: var(--mk-sys-color1);
  }
  .ant-calendar-month-panel-selected-cell:not(.ant-calendar-month-panel-cell-disabled) .ant-calendar-month-panel-month {
    background: var(--mk-sys-color);
  }
  .ant-calendar-month-panel-selected-cell:not(.ant-calendar-month-panel-cell-disabled) .ant-calendar-month-panel-month:hover {
    color: #fff;
    background: var(--mk-sys-color);
  }
  .ant-calendar-month-panel-month:hover {
    background: var(--mk-sys-color1);
  }
  .ant-calendar-time-picker-select li:hover {
    background: var(--mk-sys-color1);
  }
  .ant-calendar-time-picker-select li:focus {
    color: var(--mk-sys-color);
  }
  .ant-calendar {
    tr td {
      .ant-calendar-year-panel-year.ant-year-selected {
        color: #fff;
        background: var(--mk-sys-color);
      }
      .ant-calendar-year-panel-year:hover {
        color: var(--mk-sys-color5);
        background: var(--mk-sys-color1);
      }
    }
  }
  .ant-calendar-time-picker-btn {
    color: var(--mk-sys-color);
  }
  .ant-calendar {
    .ant-calendar-ok-btn {
      background-color: var(--mk-sys-color);
      border-color: var(--mk-sys-color);
    }
    .ant-calendar-ok-btn:hover,
    .ant-calendar-ok-btn:focus,
    .ant-calendar-ok-btn:active,
    .ant-calendar-ok-btn.active {
      background-color: var(--mk-sys-color);
      border-color: var(--mk-sys-color);
    }
  }
  .ant-calendar-footer-extra {
    .ant-tag-blue {
      color: var(--mk-sys-color);
      background: var(--mk-sys-color1);
      border-color: var(--mk-sys-color3);
    }
  }
  .ant-calendar-selected-day .ant-calendar-date {
    background: var(--mk-sys-color2);
  }
  .ant-calendar-today-btn {
    color: var(--mk-sys-color);
  }
  .ant-calendar-week-number {
    .ant-calendar-body tr.ant-calendar-active-week {
      background: var(--mk-sys-color2);
    }
    .ant-calendar-body tr:hover {
      background: var(--mk-sys-color1);
    }
  }
}
.ant-calendar-quarter-picker .ant-calendar {
  tr:not(.ant-quarter-selected):hover {
    background: var(--mk-sys-color1);
  }
  tr.ant-quarter-selected {
    background: var(--mk-sys-color2);
  }
}
.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
  border-color: var(--mk-sys-color5)!important;
  box-shadow: 0 0 0 2px var(--mk-sys-color2)!important;
}
.mk-date-picker.minute {
  .ant-calendar-time-picker-combobox {
    .ant-calendar-time-picker-select {
@@ -468,4 +728,137 @@
      display: none;
    }
  }
}
.mk-button-progress {
  position: fixed!important;
  top: 0px;
  left: 0px;
  z-index: 1100;
  width: 100vw!important;
  .ant-progress-outer {
    .ant-progress-inner {
      vertical-align: top;
      background-color: transparent;
      .ant-progress-bg {
        height: 4px!important;
        background-color: var(--mk-sys-color);
      }
    }
  }
}
.video-wrap {
  overflow: hidden;
  .video-react .video-react-poster {
    background-size: cover;
  }
}
.table-vertical-top {
  table td {
    vertical-align: top;
  }
}
.table-vertical-bottom {
  table td {
    vertical-align: bottom;
  }
}
.fixed-table-height {
  tr, td, th {
    overflow: hidden;
  }
  ::-webkit-scrollbar {
    width: 17px;
    height: 17px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(193, 193, 193, 0.7);
  }
  ::-webkit-scrollbar-track {
    background: #fafafa;
  }
  .ant-table-body {
    min-height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    .ant-table-fixed {
      border-bottom: 0;
    }
  }
}
@media screen and (max-width: 1400px) {
  .fixed-table-height {
    ::-webkit-scrollbar {
      width: 16px;
    }
  }
}
@media screen and (min-width: 1600px) {
  .fixed-table-height {
    ::-webkit-scrollbar {
      width: 18px;
    }
  }
}
@media screen and (min-width: 1900px) {
  .fixed-table-height {
    ::-webkit-scrollbar {
      width: 21px;
    }
  }
}
// 系统色设置
.mk-main-view {
  display: flex;
  flex: auto;
  min-height: 100%;
}
.component-wrap >.ant-col {
  min-height: 0;
}
.ant-col.ant-col-0 {
  display: inline-block;
}
.mk-cell-btn.ant-col-0 {
  width: auto;
  float: left;
}
.ant-dropdown {
  .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
    background-color: var(--mk-sys-color1);
  }
}
.ant-radio-group {
  .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    color: var(--mk-sys-color);
    border-color: var(--mk-sys-color);
    box-shadow: -1px 0 0 0 var(--mk-sys-color);
  }
  .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    color: var(--mk-sys-color);
    border-color: var(--mk-sys-color);
    box-shadow: -1px 0 0 0 var(--mk-sys-color);
  }
  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked):not(.ant-radio-button-wrapper-disabled):hover {
    color: var(--mk-sys-color);
  }
}
// 鼠标悬浮增加下划线
.mk-hover-underline:hover {
  text-decoration: underline!important;
}
// 隐藏空值时的图标
body .mk-empty-hide .ant-empty, body .mk-empty-hide + .ant-empty {
  min-height: 50px;
  padding-top: 0px;
  margin: 0px;
  .ant-empty-image, .ant-empty-description {
    display: none;
  }
}