$deviceWidth: 750;

@function vmin($rpx) {
    @return #{$rpx * 100 / $deviceWidth}vmin;
}

@mixin pay-content {
  // height: calc(100% - 12.8vmin);
  height: vmin(844);
  .pay-top{
    display: flex;
    flex-direction: row;
    line-height: 6.25vmin;
    height: 6.25vmin;
    position: relative;
    .back_icon{
      width: vmin(32);
      height: vmin(32);
      position: absolute;
      top: vmin(32);
      left: vmin(32);
    }
  
    .pay-title{
      color: #333333;
      text-align: center;
      font-family: "PingFang SC";
      font-size: vmin(32);
      font-style: normal;
      font-weight: 500;
      line-height: vmin(96);
      height: vmin(96);
      flex: 1;
    }
  }

  
  .content{
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;


    .money{
      display: flex;
      flex-direction: row;
      margin-top: vmin(96);
      font-size: vmin(80);
      line-height: vmin(80);
      color: #333333;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 600;
      align-items: baseline;
      margin-bottom: vmin(48);

      .money-icon{
        text-align: center;
        font-family: "PingFang SC";
        font-size: vmin(48);
        font-style: normal;
        font-weight: 500;
        line-height: vmin(48);
      }

    }

    .balance {
      display: flex;
      flex-direction: row;
      border-radius: vmin(16);
      border: vmin(1) solid #CCC;
      width: vmin(590);
      height: vmin(144);
      align-items: center;
      justify-content: center;
      padding: 0 vmin(32);

      .pay-icon{
        width: vmin(48);
        height: vmin(48);
        margin-right: vmin(16);
        
      }
      .balance-type{
        flex: 1;
        display: flex;
        flex-direction: column;

        .type-name {
          color: #333333;
          font-family: "PingFang SC";
          font-size: vmin(28);
          font-style: normal;
          font-weight: 400;
          line-height: vmin(40);
        }

        .type-quota, .no-quota{
          color: #999999;
          font-family: "PingFang SC";
          font-size: vmin(24);
          font-style: normal;
          font-weight: 400;
          line-height: vmin(32);
        }

        .no-quota {
          color: #ff4747;
        }
      }

    }

    .pay-btn {
      width: vmin(510);
      height: vmin(80);
      line-height: vmin(80);
      border-radius: vmin(44);
      opacity: 1;
      color: #fff;
      text-align: center;
      font-size: vmin(28);
      font-weight: 500;
      border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
      background: linear-gradient(90deg, rgba(255,73,83,1) 0%, rgba(255,101,77,1) 50%, rgba(255,129,71,1) 100%);
      margin-bottom: vmin(26);
      position: absolute;
      bottom: vmin(16);
    }

    .pay-tips {
      width: vmin(590);
      text-align: center;
      margin: vmin(24) vmin(8) 0;
      height: vmin(36);
      font-size: vmin(24);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: vmin(36);
    }

    .pay-btn.vertical {
      bottom: vmin(58);
    }

    .disable{
      opacity: 0.3;
    }
  }

}

@mixin horizontal {
  width: vmin(750);
}

.pay-content{
  @include pay-content
}

.horizontal{
  @include horizontal
}

// 竖屏pad
@media screen and (min-width: 768px) and (orientation: portrait) {
  $deviceWidth: 1536 !global;

  .pay-content{
    @include pay-content
  }

  .horizontal{
    @include horizontal
  }
  
}


// PC 放大适配
@media screen and (min-height: 630px) and (orientation: landscape) {
  $deviceWidth: 1260 !global; 

  .pay-content{
    @include pay-content
  }

  .horizontal{
    @include horizontal
  }

}

// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
  $deviceWidth: 1536 !global;

  .pay-content{
    @include pay-content
  }

  .horizontal{
    @include horizontal
  }

}