@each $theme-opt in $theme-colors {

  $theme-name: nth($theme-opt, 1);
  $theme-color: nth($theme-opt, 2);
  $colorMap: nth($theme-opt, 3);

  $orangeColor: map-get($colorMap, 'orange');
  $redColor: map-get($colorMap, 'red');
  $greenColor: map-get($colorMap, 'green');

  #{$theme-namespace}-#{$theme-name} {
    .c-primary-border {
      border-color: $theme-color !important;
    }

    .switch.active {
      border-color: rgba($theme-color, 1);
      background-color: rgba($theme-color, 1);
    }

    /**主页**/
    .index-hd {
      // #1B82D2 为支付宝基金纯色背景,#108EE9为主题色
      // 方案1，支付宝色当前：#108EE9-#1481D0，比较接近
      //background-image: linear-gradient(540deg, darken(desaturate($theme-color, 0%), 0%) 0%, darken(desaturate($theme-color, 5%), 4%) 99%);
      // 方案2
      background-image: linear-gradient(540deg, lighten(saturate($theme-color, 2%), 2%) 0%, darken(desaturate($theme-color, 5%), 4%) 99%);
    }

    // 说明：支付宝蓝色风格颜色微调都没啥问题，能看；绿色微信风格感觉不太好看；金色的问题比较大，颜色太浅白色的字就看不到；是否要做if判断处理
    .index-hd .hd-cell {
      background-color: lighten(saturate($theme-color, 0%), 2%);
    }

    .tip-info, .help {
      color: darken($theme-color, 10%);
      background-color: lighten($theme-color, 20%);
      box-shadow: 0 0 4px darken($theme-color, 10%);
    }

    .index-hd .mui-table-cell ~ .mui-table-cell:before {
      //支付宝基金的分割线颜色#8CCCF5，当前27%亮度颜色##8ccaf7，基本相等
      background-color: lighten($theme-color, 27%);
    }

    .help-card .help-close {
      color: $theme-color;
    }

    .index-tip .service-link {
      color: $theme-color;
    }

    // 其他颜色index-hd
    .index-hd-red {
      background-image: linear-gradient(540deg, lighten(saturate($redColor, 2%), 2%) 0%, darken(desaturate($redColor, 5%), 4%) 99%);
    }
    .index-hd-red .hd-cell {
      background-color: lighten(saturate($redColor, 0%), 2%);
    }
    .index-hd-red .mui-table-cell ~ .mui-table-cell:before {
      background-color: lighten($redColor, 27%);
    }

    .index-hd-green {
      background-image: linear-gradient(540deg, lighten(saturate($greenColor, 2%), 2%) 0%, darken(desaturate($greenColor, 5%), 4%) 99%);
    }
    .index-hd-green .hd-cell {
      background-color: lighten(saturate($greenColor, 0%), 2%);
    }
    .index-hd-green .mui-table-cell ~ .mui-table-cell:before {
      background-color: lighten($greenColor, 8%);
    }

    //经营统计
    .incomeTypeList.mui-button-row .mui-btn.active {
      color: $redColor;
      border-color: $redColor;
    }

    .consumeTypeList.mui-button-row .mui-btn.active {
      color: $greenColor;
      border-color: $greenColor;
    }

    /**上分套餐选择**/
    .device-para-row {
      color: $theme-color;
    }

    .device-para-grid .para-item.active2 {
      background: $theme-color;
      border-color: $theme-color;
    }

    /*设备注册*/
    .reg-bd .mui-row .mui-inline.active {
      background-color: $theme-color;
    }

    .reg-bd .option-list .option-list-item a.active {
      background-color: $theme-color;
    }

    .reg-bd .option-list .option-list-item a.option {
      color: $theme-color;
    }

    .reg-bd .option-list .option-list-item input {
      color: $theme-color;
    }


    /*设备流量卡管理按钮*/
    .charge-list .handle-panel .charge-btn {
      background-color: $theme-color;
    }

    /*类型快速选择，简易的tab标签*/
    .btn-outlined-check.active {
      border: 1px solid $theme-color;
      color: $theme-color;
    }

    /**用户管理*/
    .consuming-record .handle-panel .send-btn {
      background-color: $theme-color;
    }

    .consuming-record .handle-panel .record-btn {
      color: $theme-color;
    }

    /*mui切换页*/

    //这个样式在远程上分，套餐上分 远程充卡 可以切换！
    .mui-segmented-control {
      border: 1px solid $theme-color;
    }

    .mui-segmented-control .mui-control-item {
      color: $theme-color;
      border-color: $theme-color;
    }

    .mui-segmented-control .mui-control-item.mui-active {
      background-color: $theme-color;
      color: #fff;
    }

    .mui-segmented-control.mui-segmented-control-inverted {
      border: 0;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
      border: 0
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
      color: $theme-color;
      border-bottom: 2px solid $theme-color;
      background: 0 0
    }

    .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-progress-bar {
      background-color: $theme-color
    }

    #leftContents .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
      border-left: 3px solid $theme-color;
    }

    /**日期快速选择*/
    .datepicker .mui-button-row .mui-btn.active {
      color: $theme-color;
      border-color: $theme-color;
    }

    /**weui***/
    #weui-picker-confirm {
      color: $theme-color !important;
    }

    .theme-gold .mui-btn-block.disabled, .theme-gold .mui-btn-block.disabled:active {
      background-color: rgba($theme-color, .6) !important;
    }

    .total-mark {
      background-color: $theme-color;
      border: 1px $theme-color solid;
    }

    /**过滤器**/
    .active.filter-btn, .active.in-row-btn {
      color: $theme-color;
    }

    .active.filter-btn .icon-triangle-up, .active.in-row-btn .icon-triangle-up {
      color: $theme-color;
    }

    .filter-panel-btn .ok-btn {
      background: $theme-color;
    }

    .filter-panel-btn .cancel-btn {
      color: $theme-color;
      background-color: rgba($theme-color, .1)
    }

    .or-order-status input[type=radio]:checked:before {
      color: $theme-color;
    }

    .common-model-tit a {
      color: $theme-color;
    }

    .common-model-close {
      background: $theme-color;
    }

    .date-popover-modal .btn-list .handle-btn.active {
      border-bottom: 1px solid $theme-color;
    }

    /**日期范围选择器*/
    .date-popover-modal .btn-list .handle-btn.active .label-text {
      color: $theme-color;
    }

    .calendar-date .item-selected {
      background: $theme-color;
    }

    .calendar-date .item-curDay {
      color: $theme-color;
    }

    .date-popover-modal .ok-btn {
      background: $theme-color;
    }

    .income-panel.chart-active .icon-chart-pie {
      color: $theme-color;
    }

    .income-time .icon-chart-line.active {
      color: $theme-color;
    }

    .income-panel .head-status .mui-btn {
      background: $theme-color;
    }

    .edit-content input[type=submit] {
      color: $theme-color !important;
    }

    /**测试页面**/
    .test-fixed-btn {
      border: 1px solid $theme-color;
    }

  }
}