public-fuse/src/assets/style/public.scss

@import "../icon/fire/iconfont.css";
@import "../icon/fuse/iconfont.css";

* {
  margin : 0;
  padding: 0;
}

html {
  font-size: 14px;
}

html,
body {
  width : 100%;
  height: 100%;
}

:root {
  --primaryColor: var(--el-color-primary);
  --colorColor  : #303133;
  --bgColor     : #f0f2f5;
}

body {

  font-family: "Microsoft YaHei";
  color      : var(--colorColor);
  overflow   : auto;

}

#app {
  position  : relative;
  min-width : 1280px;
  min-height: 760px;
  height    : 100%;
  overflow  : hidden;
}

.fill.el-button {
  width: 100%;
}

.slide {
  .el-menu {
    border-right: none;
    background  : #fff;

    i {
      color       : inherit;
      margin-right: 8px;
    }
  }

  .el-menu-item.is-active {
    position  : relative;
    background: var(--el-menu-hover-bg-color);

    &::after {
      content         : "";
      position        : absolute;
      top             : 0;
      bottom          : 0;
      width           : 2px;
      right           : 0;
      background-color: var(--primaryColor);
    }
  }

  .el-menu-item,
  .el-menu-item i {
    transition: none;
  }

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

  .el-submenu__title,
  .el-submenu__title i {
    color: rgb(191, 191, 191) !important;
  }

  .el-submenu i {
    vertical-align: baseline;
  }
}

.head-layer {
  flex: 0 0 auto;
}

.body-layer {
  flex            : 1;
  overflow-y      : auto;
  margin-top      : 8px;
  background-color: #fff;
  border-radius   : 4px;
  padding         : 0 24px;
  display         : flex;
  flex-direction  : column;

  .body-head {
    height: 72px;
    display        : flex;
    justify-content: space-between;
    align-items    : center;

    h3 {
      font-size  : 1.14rem;
      font-weight: normal;
      padding    : 17px 0;
      color      : var(--colorColor);
    }
  }

  >* {
    flex: 0 0 auto;
  }

  >.el-table {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    border        : 1px solid #d9d9d9;

    .el-table__header-wrapper {
      background-color: #fafafa;
    }

    >* {
      flex: 0 0 auto;
    }

    .el-table__body-wrapper {
      flex      : 1;
      overflow-y: auto;
    }
  }
}

.el-table th {
  background: #fafafa;

  .cell {
    font-size  : 14px;
    color      : var(--colorColor);
    font-weight: normal;
  }
}

.pag-block {
  margin-top   : 16px;
  margin-bottom: 16px;

  .el-pagination {
    display: flex;
  }

  &.no-sizes {
    .el-pagination__total {
      flex      : 1;
      text-align: left;
    }
  }

  .el-pagination__sizes {
    flex      : 1;
    text-align: left;
  }
}

.head-layer .el-tabs__nav-wrap {
  padding: 0 24px;
}
.el-tabs--top .el-tabs__nav{
  padding-bottom: 16px;
}

.el-tabs__item {
  font-size  : 16px;
  line-height: 56px;
  height     : 56px;
}

.el-tabs__nav-wrap::after {
  height: 1px;
}

.stop-psw {
  position: absolute;
  left    : -9999999999px;
  top     : -999999999px;
}

.oper-span {
  --color  : #26559b !important;
  color    : #26559b;
  font-size: 14px;
  outline  : none !important;

  margin: 0 8px;

  &:first-child {
    margin-left: 0;
  }

  &:not(.disable) {
    cursor: pointer;
  }
}

.el-dropdown-menu {
  position : initial;
  transform: none;
  margin   : 0;
}

.el-dropdown-menu__item {
  word-break: keep-all;
}

.head-content {
  .el-form {
    display              : grid;
    grid-gap             : 20px;
    grid-template-columns: repeat(3, 1fr) 160px;
  }

  .el-form-item {
    display: flex;
    flex   : 0 0 auto;
  }

  .el-form-item__label {
    flex: 0 0 auto;
  }

  .el-form-item__content {
    flex: 1;
  }

  .el-select {
    display: block;
  }

  .el-date-editor--daterange.el-input__inner,
  .el-form-item__content {
    width    : 100%;
    max-width: 300px;
  }

  .searh-btns {
    min-width: 153px;
    grid-area: 1 / 4 / 2 / 5;

    .el-form-item__content {
      width      : 100%;
      max-width  : inherit;
      margin-left: 0 !important;
      align-items: flex-start;
    }
  }
}

.mandatory {
  .el-form-item__label {
    position: relative;

    &::before {
      content: "*";
      color  : var(--primaryColor);
    }
  }
}

.el-autocomplete-suggestion,
.el-select-dropdown {
  // margin-top: -10px;
}

.info-from {
  width : 380px;
  margin: 0 auto;
}

.loading {

  i,
  .el-loading-text {
    color: inherit;
  }
}

/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar {
  width : 5px;
  height: 5px;
}

/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background   : var(--bgColor);
}

/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
  display: none;
}

.el-message-box__message {
  min-height : 50px;
  padding    : 0 30px;
  display    : flex;
  align-items: center;
  gap        : 12px;
}

.el-message-box__container {
  position   : static !important;
  display    : flex;
  align-items: center;
  gap        : 12px;
}

.el-message-box__status {
  position   : static !important;
  transform  : translate(-40px, -49px);
  // top     : -20px !important;
  // left    : -31px;
}

.el-message-box__title span::before {
  content: "";
  display: inline-block;
  width  : 30px;
}

.click-row .el-table__body td:not(:first-child) {
  cursor: pointer;
}

.stop-psw {
  position: absolute;
  left    : -9999999999px;
  top     : -999999999px;
}

.el-popper.is-dark {
  position     : absolute;
  border-radius: 4px;
  padding      : 10px;
  z-index      : 2000;
  font-size    : 12px;
  line-height  : 1.2;
  min-width    : 10px;
  word-wrap    : break-word;
  background   : #303133;
  color        : #fff;
}

.el-popper:not(.el-cascader__dropdown, .el-picker__popper, .el-dropdown__popper) {
  max-width       : 500px;
  // background: #EFEFEF;
  // box-shadow: 0px 2px 4px 0px #e4e4e4;
  // border-radius: 2px;
  // border: 1px solid #D7D7D7;
  padding         : 2px 6px;
  word-break      : break-all;
  overflow        : hidden;
}

// .is-light.el-popper{
//   max-width: 500px;
//   background: #EFEFEF;
//   box-shadow: 0px 2px 4px 0px #e4e4e4;
//   border-radius: 2px;
//   border: 1px solid #D7D7D7;
//   padding: 2px 6px;
// }

.oper-link {
  cursor: pointer;

  &:hover {
    color: #3366ff;
  }
}

.el-table::before {
  background: none;
}

.el-date-editor--daterange {
  position: relative;

  .el-range-separator {
    display: none;
  }

  &::after {
    content       : "\e6d2";
    font-size     : 14px;
    color         : #303133;
    position      : absolute;
    left          : 50%;
    top           : 50%;
    transform     : translate(-50%, -50%) rotate(90deg);
    margin-left   : -10px;
    font-family   : element-icons !important;
    speak         : none;
    font-style    : normal;
    font-weight   : 400;
    font-variant  : normal;
    text-transform: none;
    line-height   : 1;
    vertical-align: baseline;
  }
}

.el-input {
  position: relative;

  .input-inner-btn {
    position   : absolute;
    right      : 7px;
    top        : 50%;
    height     : 36px;
    line-height: 36px;
    font-size  : 14px;
    padding    : 0 15px;
    text-align : center;
    transform  : translateY(-50%);
  }
}

.head-content .el-date-editor--daterange.el-input__inner {
  min-width: 260px;
}

.el-message-box__header {
  padding       : 34px;
  padding-bottom: 0;
}

.el-message-box__headerbtn .el-message-box__close {
  display: none;
}

.el-message-box__title {
  color    : #000;
  font-size: 16px;
}

.el-message-box__content {
  font-size  : 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color      : rgba(0, 0, 0, 0.65);
}

.el-message-box {
  padding-bottom: 24px;
}

.el-message-box__content {
  padding: 12px 32px 24px 62px;
}

.el-message-box__message {
  padding: 0;
}

.el-message-box__btns {
  padding: 0 16px;
}

.el-date-editor--date {
  &.el-input--prefix .el-input__inner {
    padding-left: 15px;
  }

  .el-input__prefix {
    position      : absolute;
    height        : 100%;
    right         : 5px;
    top           : 0;
    left          : inherit;
    text-align    : center;
    transition    : all 0.3s;
    pointer-events: none;
  }
}

.el-date-editor--daterange {
  padding-right: 28px !important;

  input {
    width: 50% !important;
  }
}

.el-date-editor--daterange .el-range__icon {
  position: absolute;
  right   : 5px;
}

.el-date-editor--daterange .el-range__close-icon {
  display: none;
}

.el-upload-list__item-name .el-icon-document {
  display: none;
}

.el-upload-list__item-name {
  font-size   : 14px;
  font-family : PingFangSC-Regular, PingFang SC;
  font-weight : 400;
  line-height : 20px;
  margin-right: 20px;
}

.el-upload-list__item .el-icon-close {
  display: inherit;
}

.el-upload-list__item .el-upload-list__item-status-label {
  display: none !important;
}

.el-table th .cell .el-checkbox {
  margin-left: 4px;
}
.el-table th .cell, .el-table td.el-table__cell div {
  margin-left: 16px;
}

.el-select-dropdown__empty {
  padding: 20px 0 10px;
}

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

.disable {
  opacity       : 0.3 !important;
  pointer-events: none !important;
}

.body-but {
  text-align   : right;
  margin-bottom: 15px;
}

.el-dropdown {
  vertical-align: inherit;
}

.header-top {
  background-color: var(--primaryColor);
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 15px 40px;
  height          : 5.33rem;
  box-sizing      : border-box;
}

html .el-input-group__append button.el-button {
  background-color         : var(--el-button-bg-color) !important;
  border-color             : var(--el-button-border-color) !important;
  color                    : var(--el-button-text-color) !important;
  border-top-left-radius   : 0 !important;
  border-bottom-left-radius: 0 !important;
}

.el-table__empty-block {
  width: 100% !important;
}

.el-cascader__dropdown {
  max-width: 100%;
}

.el-color-predefine__color-selector {
  border: 1px solid #e5e5e5;
}

// :root {
//   --el-color-primary: green;
// }