credit_h5/css/payment.css

body{
    width: 100%;min-height: 100vh;padding-top: 0.13rem;box-sizing: border-box;padding-bottom: 0.6rem;background: #fff;
}
.payment_hint{
    color: #666666;font-size: 0.15rem;line-height: 0.21rem;padding-left: 0.1rem;
}
.rechargeList{
    display: flex;align-items: center;flex-wrap: wrap; padding: 0.13rem 0 0.25rem;width: 3.55rem;margin: auto;min-height: 2.22rem;box-sizing: border-box;
}

.rechargeList li{
    width: 50%;
}
.rechargeList .rechargeLi{
    width: 1.62rem;height: 0.8rem;border-radius: 0.05rem;
    display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 0.12rem auto 0;position: relative;
}
.rechargeList .rechargeLi::after{
    content: "";
    width: 200%;
    height: 200%;
    border: 0.01rem solid #3369FF;border-radius: 0.1rem;
    position: absolute;
    top: -0.005rem;left: -0.005rem;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
}
.rechargeList .rechargeLi p{
    color: #444444;font-size: 0.17rem;line-height: 0.24rem;padding-bottom: 0.02rem;
}
.rechargeList .rechargeLi span{
    color: #FF4B13;font-size: 0.14rem;line-height: 0.2rem;
}
.rechargeList .rechargeLi img{
    width: 0.62rem;height: 0.16rem;position: absolute;left: -0.02rem;top: -0.08rem;z-index: 1;
}
.rechargeList .rechargeLiActive{
    background: #A5C3FF;color: #3369FF;
}
.rechargeList .rechargeLiActive p{
    color: #3369FF;
}
.rechargeList .rechargeLiActive span{
    color: #fff;
}
/* 支付方式 */
.payment_mode{
    border-top: 0.01rem solid #F5F5F5;margin-top: 0.1rem;
}
.payment_mode li{
    width: 100%;display: flex;align-items: center;justify-content: space-between; height: 0.46rem;margin-top: 0.22rem;padding: 0 0.2rem;box-sizing: border-box;
}
.payment_mode li label{
    display: flex;align-items: center;flex: 1;
}
.payment_mode li label img{
    width: 0.46rem;height: 0.46rem;margin-right: 0.21rem;
}
.payment_mode li label span{
    color: #222222;font-size: 0.16rem;line-height: 0.22rem;
}
.payment_mode li input[type='radio']{
    width: 0.16rem;
    height: 0.165rem;
    background-color: #fff;
    -webkit-appearance:none;
    /* border: 0.01rem solid #979797; */
    /* border-radius: 50%; */
    background: url('../img/noSelection.png') no-repeat center;
    background-size:100%; 
    outline: none;
    border: none;

}
.payment_mode li input[type=radio]:checked{
    background: url("../img/selection.png") no-repeat center;
    background-size:100%; 
    /* border: 0.01rem solid #1B82D2; */
 }
 /* 底部 */
 .payment_bottom{
     width: 100%;height: 0.6rem;background: #fff;border-top: 0.01rem solid #D6D6D6;display: flex;align-items: center;justify-content: space-between;position: fixed;bottom: 0;
 }
 .payment_bottom .total{
    flex: 1;color: #666666;font-size: 0.16rem;line-height: 0.6rem;padding-left: 0.1rem;
 }
 .payment_bottom .total span{
     color: #333333;font-size: 0.18rem;
 }
 .payment_bottom button{
    width:1.36rem;
    height:0.6rem;
    background:linear-gradient(90deg,rgba(6,135,255,1) 0%,rgba(20,82,255,1) 100%);
    color: #FFFFFF;font-size: 0.18rem;line-height: 0.6rem;border: none;
 }
 /* toast */
.alert-info {
    position: fixed;
    height: 0.38rem;
    top: 1.74rem;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    z-index: 9;
}

.alert-info p {
    display: inline-block;
    height: 0.38rem;
    color: #fff;
    font-size: 0.14rem;
    line-height: 0.38rem;
    padding: 0 0.10rem;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
}
.loading {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100vh;
}
.loading img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0.3rem;
    height: 0.3rem;
}
/* 微信支付是否成功弹框 */
.wx_payment_mask {
    width: 100%; height: 100vh;background: rgba(0, 0, 0, 0.6);position: fixed;top: 0;display: none;
}
.wx_payment_mask .con{
    width: 2.75rem;height: 1.9rem;background: #fff;border-radius: 0.21rem;position: absolute;left: 0;right: 0;top:0;bottom:0;margin: auto;padding: 0 0.21rem;box-sizing: border-box;
}
.wx_payment_mask .con h3{
    font-size: 0.16rem;text-align: center;line-height: 0.62rem;
}
.wx_payment_mask .con p{
    font-size: 0.16rem;text-align: center;line-height: 0.63rem;border-top: 0.01rem solid #d8d8d8;color: #444444;
}
.wx_payment_mask .con p:nth-of-type(1){
    color: #1285FF;
}
.wx_payment_mask .con p:nth-of-type(2){
    color: #E03F2B;
}