matrix-spray-web/src/assets/styles/element.scss

:root {
  --el-font-size-base: 50px;
  --el-button-size: 80px;



  --el-color-primary:  #26509C;
  //--el-button-active-bg-color: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
  //--text-color-primary: #17213c;
  //--el-color-success: rgba(88, 162, 95, 1);
  //--text-color-info: #838b99;
  //--el-input-border: #dae0f2;
  //--el-font-weight-primary: 400;
  //--color-red: #f56c6c;
  //--color-green: #67c23a;
  //--color-yellow: #e6a23c;
  //--color-blue: --el-color-primary;
  --el-font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.el-input {
  height: 80px;
  background: #E8ECF7;
  .el-input__wrapper {
    background: #E8ECF7;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.01) inset;
    .el-input__inner {
      height: calc(100% - 2px);
    }
  }
}
.el-select {
  width: 400px;
}
.el-select__input {
  height: 80px;
}
.el-select__wrapper {
  min-height: 80px;
  background: #E8ECF7;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.01) inset;
  font-size: 40px;
  line-height:40px;
}
.el-select__placeholder {
  color: #0349A8;
  font-weight: 500;
}
.el-select-dropdown__item {
  height: 80px;
  line-height: 40px;
  padding: 20px;
  font-size: 40px;
}
.el-select-dropdown__empty {
 font-size: 40px;
  line-height: 40px;
  padding: 20px;
}
.el-select__selected-item {
  line-height: 60px;
}

.el-form-item {
  align-items: center;
  margin-bottom: 40px;
  .el-form-item__label {
    color: #0349A8;
    font-size: 40px;
    font-weight: 500;
    .el-form-item__content {
      max-width: 100%;
    }
  }
}
.el-checkbox {
  width: 60px;
  height: 60px;
}
.el-checkbox__input {
  border: 1px solid #ccc;
}
.el-checkbox__inner {
  border: none;
  width: 50px;
  height: 50px;

  &:after {
    left: 8px;
    top: 2px;
    width: 5px;
    height: 12px;
  }
}

.el-icon, .el-icon svg {
  width: 50px;
  height: 50px;
}

.el-dialog {
  margin: 0 auto !important;
  top: 50%;
  transform: translateY(-50%);
}

.el-dialog__header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.el-dialog__footer {
  border-top: 1px solid #ddd;
}
.el-dialog__title {
  font-size: 45px;
}
.el-dialog__body {
  max-height: 60vh;
  min-height: 20vh;
  overflow: auto;
  padding: 20px;
}

.el-table {
  width: 100%;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
}

.el-table th.el-table__cell {
  background: #ECF0F7;
  .cell {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 400;
  }
}
.el-table .el-table__header .cell {
  height: 100px !important;
  line-height: 100px;
  font-size: 40px;
}
.el-table__row .cell{
  height: 100px !important;
  line-height: 100px;
  font-size: 30px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
}
.el-table__row .el-table__cell {
  background: #ffffff;
}

.scope-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.cell {
  .el-checkbox__input {
    border: 1px solid #ccc;
  }
  .el-checkbox__inner {
    border: none;
    width: 30px;
    height: 30px;

    &:after {
      left: 5px;
      top: 0;
      width: 3px;
      height: 10px;
    }
  }
}

.el-pagination {
  .el-pager {
    li {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 25px;
      margin: 0 10px;
    }
  }
  .el-pagination__total {
    font-size: 30px;
  }
}

.el-switch {
  height: 40px;
  .el-switch__core {
    height: 40px;
    min-width: 80px;
    border-radius:20px;
    .el-switch__action {
      width: 30px;
      height: 30px;
    }
  }
}

.el-switch.is-checked .el-switch__core .el-switch__action {
  left: calc(100% - 30px);
}

.el-tabs {
  margin-bottom: 40px;
}
.el-tabs__header {
  height: 50px !important;
}
.el-tabs__item {
  height: 80px !important;
  font-size: 35px;
}

.el-drawer__header {
  border-bottom: 1px solid #ddd;
  padding: 20px;
  .el-drawer__title {
    font-size: 30px;
  }
}
.el-drawer__body {
  overflow: auto;
}

.el-message__content {
  font-size: 30px;
}

.el-message-box {
  max-width: 30vw;
  padding: 30px;
  .el-message-box__title {
    font-size: 40px;
  }
  .el-message-box__container {
    height: 300px;
    .el-message-box__message p {
      font-size: 40px;
    line-height: 60px;
      color: var(--el-color-primary);
    }
  }
  .el-message-box__btns {
    .el-button {
      height: 70px;
      width: 180px;
      font-size: 40px;
      border-radius: 10px;
    }
  }
}

.el-timeline {
  font-size: 30px;
  padding-left: 10px;
}
.el-timeline-item__content {
  color: var(--el-color-primary);
  font-weight: 500;
}
.el-timeline-item__timestamp {
  font-size: 28px;
  white-space: normal;
  word-break: break-all;
}
.el-tag {
  padding:20px;
  font-size: 25px;
}
.el-radio__inner {
  width: 30px;
  height: 30px;
  &:after {
    width: 5px;
    height: 5px;
  }
}