remuneration/src/styles/orangeTheme.scss

// 重新定义主题样式
// 菜单
.el-menu-item.is-active {
  background-color: $theme-color !important;
  color: #FFF !important;
}
.el-menu--horizontal>.el-menu-item.is-active,
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid $theme-color !important;
}

// tabs页
.el-tabs__item:hover,
.el-tabs__item:active,
.el-tabs__item.is-active {
  color: $theme-color !important;
}
.el-tabs__active-bar {
  background-color: $theme-color !important;
}
.el-tabs__new-tab {
  background: $theme-color !important;
  color: #FFF !important;
  border-color: $theme-color;
}

// 分页
.el-pagination.is-background .el-pager li:not(.disabled) {
  &.active {
    background: $theme-color;
  }
  &:hover:not(.active) {
    color: $theme-color;
  }
}

// 复选
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: $theme-color;
  border-color: $theme-color;
}

// 下拉菜单
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: lighten($theme-color, 38%);
  color: $theme-color;
}


// 定义主题颜色（仿照 Element UI）
$orange-color: $theme-color;
$theme-colors: (
  "default": (
    "base": #ffffff,       // 默认背景色
    "text": #606266,      // 默认文字颜色
    "border": #dcdfe6     // 默认边框颜色
  ),
  "primary": #409EFF,
  "success": #67C23A,
  "warning": #E6A23C,
  "danger": #F56C6C,
  "orange": $theme-color  // 新增橙色
);
// 生成按钮样式
@each $type, $color in $theme-colors {
  @if $type == "default" {
    .el-button--default {
      background-color: map-get($color, "base");
      border-color: map-get($color, "border");
      color: map-get($color, "text");

      // Hover 状态（浅橙色背景 + 浅橙色边框）
      &:hover,
      &:focus {
        background-color: lighten($orange-color, 42%); // 非常浅的橙色
        border-color: lighten($orange-color, 20%);    // 浅橙色边框
        color: $orange-color;                         // 文字变橙色
      }

      // Active 状态（稍深的橙色边框）
      &:active {
        background-color: lighten($orange-color, 38%); // 更浅橙色背景
        border-color: $orange-color;                   // 主橙色边框
        color: $orange-color;
      }

      // Disabled 状态（保持灰色）
      &.is-disabled {
        background-color: #ffffff;
        border-color: #e4e7ed;
        color: #c0c4cc;
        &:hover,
      &:focus {
        background-color: lighten($orange-color, 42%); // 非常浅的橙色
        border-color: lighten($orange-color, 20%);    // 浅橙色边框
        color: $orange-color;                         // 文字变橙色
      }
      }

      // Plain 模式（镂空按钮）
      &.is-plain {
        background-color: #ffffff;
        border-color: #dcdfe6;
        color: #606266;

        // Hover 状态（浅橙色背景）
        &:hover,
        &:focus {
          background-color: lighten($orange-color, 42%);
          border-color: lighten($orange-color, 20%);
          color: $orange-color;
        }

        // Active 状态（主橙色边框）
        &:active {
          background-color: lighten($orange-color, 38%);
          border-color: $orange-color;
          color: $orange-color;
        }

        // Disabled 状态（灰色）
        &.is-disabled {
          background-color: #ffffff;
          border-color: #e4e7ed;
          color: #c0c4cc;
          &:hover,
          &:focus {
            background-color: #ffffff;
            border-color: #e4e7ed;
            color: #c0c4cc;
          }
        }
      }
    }
  }
  // 其他颜色类型（primary、success、orange 等）
  @else {
    .el-button--#{$type} {
      background-color: $color;
      border-color: $color;
      color: #fff;

      &:hover,
      &:focus {
        background-color: lighten($color, 10%);
        border-color: lighten($color, 10%);
        color: #FFF;
      }

      &:active {
        background-color: darken($color, 10%);
        border-color: darken($color, 10%);
      }

      &.is-disabled {
        background-color: lighten($color, 20%);
        border-color: lighten($color, 20%);
        color: #fff;
        opacity: 0.6;
        &:hover,
        &:focus {
          background-color: lighten($color, 20%);
          border-color: lighten($color, 20%);
          color: #fff;
          opacity: 0.6;
        }
      }

      // 镂空按钮样式（is-plain）
      &.is-plain {
        background-color: lighten($color, 38%);
        border-color: lighten($color, 20%);
        color: $color;

        &:hover
        &:focus {
          background-color: $color;
          border-color: $color;
          color: #fff;
        }

        &:active {
          background-color: darken($color, 10%);
          border-color: darken($color, 10%);
          color: #fff;
        }

        &.is-disabled {
          background-color: lighten($color, 45%);
          border-color: lighten($color, 30%);
          color: lighten($color, 20%);
          &:hover
          &:focus {
            background-color: lighten($color, 45%);
            border-color: lighten($color, 30%);
            color: lighten($color, 20%);
          }
        }
      }
    }
  }
}

.el-tag--orange {
  background-color: lighten($orange-color, 40%);
  border-color: lighten($orange-color, 36%);
  color: $orange-color;
}