ly-front/src/assets/css/element-ui.scss

// 全局覆盖 element 样式
.el-popover {
  background-color: rgba(13, 40, 64, 0.8);
  color: rgba(255, 255, 255, 0.65);
  border: 0;
  .el-popover__title {
    display: none;
  }
}
.el-popper[x-placement^="right"] .popper__arrow {
  border-right-color: rgba(13, 40, 64, 0.8);
}
.el-popper[x-placement^="right"] .popper__arrow::after {
  border-top-color: rgba(13, 40, 64, 0.8);
  border-right-color: rgba(13, 40, 64, 0.8);
}
.v-modal {
  background: url(../img/model.png);
  background-size: 100% 105%;
  background-repeat: no-repeat;
  background-position: center;
}
.el-dialog {
  width: 95%;
  height: calc(100% - 15vh);
  margin-top: 5vh !important;
  background: url(../img/dialogTwo.png) no-repeat center/104% 107%;
  .el-dialog__header {
    padding: 13px 17px 13px;
    width: 90%;
    margin-left: 2%;
    margin-top: 2%;
    .el-dialog__title {
      font-size: 0.8vw;
      color: #fff;
    }
  }
  .el-dialog__headerbtn {
    top: 50px;
    right: 60px;
  }
  .el-dialog__body {
    width: 97%;
    margin: 0 auto;
    padding: 0;
    .el-form-item {
      .el-form-item__label {
        color: #fff;
      }
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            color: #fff;
            background-color: transparent;
          }
        }
      }
    }
    .vueOffice-container {
      height: 100%;
      .preview-box {
        height: 100% !important;
      }
    }
    .docx-wrapper {
      background: transparent;
    }
  }
  .el-icon-close:before {
    color: #fff;
  }

  .demo-formName {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .my-form {
      width: 100%;
      height: 100%;
      .el-form {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        .el-form-item {
          margin-right: 3%;
          margin-bottom: 13px;
          .el-form-item__label {
          }
          .el-form-item__content {
            border: 1px solid #ccc;
            border-radius: 5px;
            .el-cascader {
              width: 100%;
            }
            .el-input-number--small {
              width: 100%;
              .el-input__inner {
                text-align: left;
              }
            }
          }
          .el-date-editor {
            width: 100% !important;
            .el-range-input {
              background-color: transparent;
              color: #fff;
            }
            .el-range-separator {
              color: #fff;
            }
          }
          .form-item {
            display: flex;
            align-items: center;
            margin-left: -65px;
          }
        }
      }
    }
  }
  .count {
    width: 15%;
    height: 5%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 3%;
    right: 0;
  }

  .table-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-top: 1%;
    padding: 1%;
    .table-box {
      width: 100%;
      height: 100%;
      .el-table {
        width: 100%;
        height: 95%;
        margin-bottom: 0 !important;
        .el-table__header-wrapper {
          background-color: #065ad8;
        }
        .el-link--inner {
          font-size: 0.6vw;
          margin-left: 5px;
        }
        .el-table__body-wrapper {
          height: 90% !important;
          .el-table__empty-text {
            font-size: 1.3vw;
          }
        }
        .el-table__cell {
          background-color: transparent;
          img {
            width: 100px;
            height: 25px;
          }
        }
        .el-table__fixed-right::before,
        .el-table__fixed::before {
          height: 0;
        }
      }

      .pageContainer {
        width: 95%;
        height: 60px;
        margin: 0px auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .pageText {
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          font-weight: 400;
        }
        .el-pagination {
          background: transparent;
          .btn-prev {
            background: transparent;
            color: #fff;
          }
          .el-pager {
            background: transparent;
            color: #fff;
            li {
              background: transparent;
            }
          }
          .btn-next {
            background: transparent;
            color: #fff;
          }
        }
      }
    }
  }
  .ecarts-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-top: 1%;
    padding: 1%;
  }
}
.el-dialog-center {
  width: 50% !important;
  height: 50% !important;
  margin: 0 auto;
  .el-dialog__headerbtn {
    top: 40px;
    right: 60px;
  }
  .my-form {
    width: 100%;
    height: 100%;
    margin-top: 10%;
    .el-form {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .el-form-item {
        width: 100%;
        margin-right: 3%;
        margin-bottom: 13px;
        .el-form-item__label {
        }
        .el-form-item__content {
          border: 1px solid #ccc;
          border-radius: 5px;
          .el-cascader {
            width: 100%;
          }
          .el-input-number--small {
            width: 100%;
            .el-input__inner {
              text-align: left;
            }
          }
        }
        .el-date-editor {
          width: 100% !important;
          .el-range-input {
            background-color: transparent;
            color: #fff;
          }
          .el-range-separator {
            color: #fff;
          }
        }
        .form-item {
          display: flex;
          align-items: center;
          margin-left: -65px;
        }
      }
    }
  }

  .demo-drawer__footer {
    width: 100%;
    height: 70px;
    line-height: 70px;
    position: absolute;
    bottom: 5%;
    text-align: right;
    right: 3%;
  }
}
.el-popper {
  background-color: #065ad8;
  .el-scrollbar {
    .el-cascader-menu__list {
      color: #fff;
    }
    .el-cascader-node:not(.is-disabled):focus,
    .el-cascader-node:not(.is-disabled):hover {
      background-color: rgba(70, 138, 194, 0.8);
    }
    .el-cascader-node.in-active-path,
    .el-cascader-node.is-active,
    .el-cascader-node.is-selectable.in-checked-path {
      color: rgba(232, 243, 254, 1);
      background-color: rgba(70, 138, 194, 0.8);
    }
  }
}
//日期时间选择器
.el-picker-panel__body-wrapper {
  background-color: transparent;
  color: #fff;
}
.el-input--small .el-input__inner {
  background-color: transparent;
  color: #fff;
}
//禁用输入框
.el-input.is-disabled .el-input__inner {
  background-color: transparent;
}
.el-time-spinner__item {
  color: #fff;
}
.el-time-spinner__item.active:not(.disabled) {
  color: #fff;
}
.el-time-panel {
  width: 100%;
}
.el-time-panel__btn {
  color: #fff;
}
.el-date-picker__header-label {
  color: #fff;
}
.el-date-table th {
  color: #fff;
}
.el-dropdown-menu__item {
  color: #fff;
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background-color: transparent;
}
.el-picker-panel__footer {
  background-color: transparent;
  color: #fff;
  .el-button--default {
    color: #fff;
    background-color: #065ad8 !important;
  }
}

//表格
.el-table {
  color: #fff;
}
.el-table .el-table__header th {
  background-color: rgba(43, 76, 120, 0.6); /* 表头背景 */
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}
.el-table .cell {
  font-size: 14px;
}
//线
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-color: rgba(255, 255, 255, 0.1);
}
.el-table {
  background-color: transparent !important;
}
.el-table tr {
  background-color: transparent;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}
// .elTableContainer .el-table tr:hover {
//   background-color: transparent;
// }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent;
}
.el-input__inner {
  background-color: transparent;
  border-width: 0px;
  border-radius: 4px;
  color: #fff;
}
//鼠标浮动
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgba(70, 138, 194, 0.8) !important;
  color: #fff !important;
}
//下拉选中
.el-select-dropdown__item.selected {
  background-color: transparent;
}
.el-select-dropdown__item {
  color: #fff;
}
//日期时间选择器
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-picker-panel__body-wrapper {
  background-color: transparent;
  color: #fff;
}
//日历选年
.el-year-table td .cell {
  color: #fff;
}
//日历选月
.el-month-table td .cell {
  color: #fff;
}

//分页
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
  color: rgba(232, 243, 254, 1);
  font-size: 14px;
}

//抽屉

.el-drawer {
  width: 35% !important;
  background-color: rgba(6, 90, 216, 0.7);
  .el-drawer__header {
    text-align: left;
    color: #fff;
  }
  .el-drawer__body {
    width: 100%;
    height: 100%;
    .demo-drawer__content {
      position: relative;
      height: 100%;
      .my-form {
        width: 100%;
        height: calc(100% - 70px);
        overflow: auto;
        .el-form-item {
          width: 97%;
          margin-bottom: 18px;
          .el-form-item__label {
            color: #fff;
          }
          .el-form-item__content {
            width: 70%;
            color: #fff;
            .el-input__inner {
              border: 1px solid #ccc;
              border-radius: 5px;
            }
            .el-input-number--small {
              width: 100%;
              .el-input__inner {
                text-align: left;
              }
            }
            .el-date-editor {
              width: 100%;
            }
            .el-cascader {
              width: 100%;
            }
            .el-date-editor {
              width: 100% !important;
              .el-range-input {
                background-color: transparent;
                color: #fff;
              }
              .el-range-separator {
                color: #fff;
              }
            }
            .avatar-uploader {
              width: 100%;
              text-align: left;
              .el-upload {
                width: 100%;
                height: 100%;
                min-height: 200px;
                border: 1px dashed #ccc;
                position: relative;
                .el-icon-plus {
                  color: #ccc;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
          }
        }
        .demo-drawer__footer {
          width: 100%;
          height: 70px;
          line-height: 70px;
          position: absolute;
          bottom: 0;
          text-align: right;
          right: 3%;
        }
      }
    }
  }
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: rgb(13, 49, 211) !important;
}
.el-date-range-picker__time-picker-wrap {
  border: 1px solid #ccc;
  border-radius: 5px;
}
.el-time-range-picker__header {
  color: #fff;
}
.el-textarea__inner {
  background-color: transparent;
  border-radius: 5px;
  color: #fff;
}
.dialog-footer {
  .el-button--default {
    background: rgba(42, 68, 101, 1);
    border-color: transparent;
    color: #fff;
  }
}
.el-pager {
  .btn-quicknext,
  .btn-quickprev {
    color: #fff !important;
  }
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: rgba(70, 138, 194, 0.8) !important;
  color: #fff !important;
}
.el-dialog__wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.el-cascader-panel {
  max-height: 200px;
  overflow-y: auto;
}

.el-message-box {
  background: rgba(6, 90, 216, 0.5);
  .el-message-box__title {
    color: #fff;
  }
  .el-message-box__headerbtn .el-message-box__close {
    color: #fff;
  }
  .el-message-box__status + .el-message-box__message {
    color: #fff;
  }
  //提示框按钮容器
  .el-message-box__btns {
    display: flex;
    flex-direction: row-reverse;
    .el-button--small {
      margin-left: 10px;
      background-color: rgb(42, 68, 101) !important;
      border: 1px solid rgba(0, 0, 0, 0.15);
      color: rgba(255, 255, 255, 0.65);
    }
    .el-button--primary {
      background: rgb(24, 144, 255) !important;
      color: #fff;
    }
  }
}

.el-picker-panel__icon-btn {
  color: #fff;
}
.custom-class {
  .el-dialog {
    height: 50% !important;
    .el-dialog__header {
      .el-dialog__headerbtn {
        top: 30px;
        right: 40px;
      }
    }
    .el-dialog__body {
      height: calc(100% - 140px);
      .block {
        width: 80%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        .demonstration {
          width: 100px;
          color: #fff;
        }
        .el-slider {
          width: calc(100% - 120px);
        }
      }
    }
    .el-dialog__footer {
    }
  }
}
.custom-table {
  .el-dialog {
    height: 80% !important;
    .el-dialog__header {
      .el-dialog__headerbtn {
        top: 30px;
        right: 40px;
      }
    }
    .el-dialog__body {
      height: calc(100% - 110px);

      .table-container {
        height: calc(100% - 50px);
        margin-top: 0;
        padding-top: 0;
        .table-box {
          height: 90%;
          .el-table__body-wrapper {
            overflow: auto;
          }
        }
      }
    }
    .el-dialog__footer {
    }
  }
}