.page-recharge {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  .recharge-con {
    padding: 30rpx 30rpx 146rpx;
    :deep(uni-radio .uni-radio-input.uni-radio-input-checked) {
      background: #008aff !important;
      border-color: #008aff !important;
    }
    .tit {
      font-size: 28rpx;
      font-weight: 600;
      margin-top: 20rpx;
    }
    /* 充值金额 */
    .price-box {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 20rpx;
      .item {
        width: 330rpx;
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        position: relative;
        background: #f9fafb;
        margin-top: 30rpx;
        border: 2rpx solid #f9fafb;
        min-height: 160rpx;
        &:nth-child(2n) {
          margin-left: 30rpx;
        }
        /* 自定义充值金额 */
        &.recharge-free {
          width: 690rpx;
          .text {
            margin-top: 0;
            font-size: 28rpx;
          }
          .recharge-input {
            margin-top: 20rpx;
          }
          // eslint-disable-next-line vue-scoped-css/no-unused-selector
          .uni-input-placeholder {
            font-size: 24rpx;
          }
        }
        .send {
          position: absolute;
          right: -2rpx;
          top: -2rpx;
          background: #008aff;
          border-radius: 0 10rpx 0 20rpx;
          color: #fff;
          font-size: 22rpx;
          padding: 4rpx 10rpx;
          min-width: 90rpx;
          text-align: center;
        }
        .text {
          word-break: break-all;
          display: flex;
          align-items: flex-end;
          margin-top: 10rpx;
          .number {
            font-size: 40rpx;
            margin-right: 4rpx;
            margin-bottom: -4rpx;
          }
        }
        .des {
          margin-top: 20rpx;
          color: #999;
        }
        &.active {
          border-color: #008aff;
        }
      }
    }
    /* 充值说明 */
    .des-box {
      padding-bottom: 20rpx;
      .item {
        color: #999;
        margin-top: 16rpx;
        line-height: 36rpx;
        display: flex;
        &:first-child {
          margin-top: 20rpx;
        }
      }
    }
    /* 支付方式 */
    .pay-way {
      .item {
        border: 2rpx solid #eee;
        padding: 30rpx 40rpx;
        display: flex;
        justify-content: space-between;
        border-radius: 100rpx;
        margin-top: 30rpx;
        &.active {
          border-color: #008aff;
        }
        .pay-name {
          display: flex;
          align-items: center;
          .img {
            width: 40rpx;
            height: 40rpx;
            font-size: 0;
            margin-right: 20rpx;
          }
          .name {
            font-size: 26rpx;
            font-weight: 600;
          }
        }
      }
    }
    /* 底部 */
    .btn-box {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx 30rpx;
      background: #fff;
      box-shadow: 0 -4rpx 4rpx rgba(0,138,255,.03);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        margin-right: 20rpx;
        font-size: 28rpx;
        font-weight: 600;
        .number {
          color: #fc1b35;
          margin-left: 20rpx;
        }
      }
      .btn {
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 70rpx;
        color: #fff;
        background: #008aff;
        padding: 0 40rpx;
        font-size: 26rpx;
        font-weight: 600;
      }
    }
  }
}
