充值

Public/Mobile/css/recharge.css

@@ -0,0 +1,209 @@
+.recharge{
+    width: 100%;
+    font-family:PingFang SC;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.recharge-heard{
+    width: 100%;
+    height: 4.12rem;
+    background: url("../images/background.png");
+    background-size: 100% 100%;
+}
+.subpage-heard{
+    background-color: transparent;
+}
+.recharge-tabbar{
+    margin-top: 0.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.recharge-tabbar li{
+    font-size:0.28rem;
+    font-weight:400;
+    color:rgba(255,255,255,1);
+    list-style: none;
+}
+.recharge-tabbar li:last-child{
+    margin-left: 1.10rem;
+}
+.recharge-tabbar .selected{
+    font-size: 0.32rem;
+    -webkit-transition: all 250ms ease;
+    transition: all 250ms ease;
+}
+.content{
+    margin-top: -2rem;
+}
+.recharge-flat{
+    padding-top: 0.36rem;
+    width: 7.1rem;
+    height: 2.74rem;
+    background: url("../images/juxing3.png");
+    background-size: 100% 100%;
+}
+.recharge-discount{
+    padding-top: 0.36rem;
+    width: 7.1rem;
+    height: 5.4rem;
+    background: url("../images/juxing4.png");
+    background-size: 100% 100%;
+}
+.flat-box{
+    padding: 0 0.12rem;
+}
+.flat-info{
+    padding: 0.31rem 0.3rem;
+    height: 0.26rem;
+    font-size:0.28rem;
+    font-weight:500;
+    color:rgba(41,41,41,1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #F5F5F5;
+}
+.flat-info>span{
+    font-size:0.24rem;
+    font-weight:400;
+    color:rgba(169,169,169,1);
+}
+.flat-info>input{
+    height: 0.24rem;
+    font-size: 0.24rem;
+    outline: 0;
+    border: 0;
+    width: 2.77rem;
+}
+.flat-info>input::placeholder{
+    color: #A9A9A9;
+}
+.recharge-flat .flat-box:last-child .flat-info{
+    border: none;
+}
+.recharge-discount .flat-box:last-child .flat-info{
+    border: none;
+}
+.flat-info select {
+    background: transparent;
+    padding: 0.05rem;
+    font-size: 0.24rem;
+    border: 1px solid #ccc;
+    text-align: center;
+    outline: 0;
+    border: 0;
+    color: #A9A9A9;
+}
+.recharge-payment{
+    margin-top: 0.15rem;
+    width: 6.9rem;
+    height: 3.76rem;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 0.1rem 0px rgba(26,26,26,0.15);
+    border-radius:0.2rem;
+}
+.recharge-payment .title{
+    padding: 0.32rem 0.29rem;
+    font-size:0.28rem;
+    font-weight:500;
+    color:rgba(41,41,41,1);
+    border-bottom: 1px solid #F5F5F5;
+}
+.recharge-payment .alipay{
+    padding: 0.29rem 0.3rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom:1px solid  #F5F5F5;
+}
+.recharge-payment .alipay:last-child{
+    border: none;
+}
+.recharge-payment .alipay .alipay_img{
+    display: flex;
+    align-items: center;
+}
+.recharge-payment .alipay .alipay_img>img{
+    width: 0.8rem;
+    height: 0.8rem;
+}
+.recharge-payment .alipay .alipay_img .img_text{
+    margin-left: 0.16rem;
+    font-size: 0.28rem;
+    font-weight:500;
+    color:rgba(41,41,41,1);
+}
+.recharge-payment .alipay .alipay_img .img_text>div:last-child{
+    font-weight:400;
+    color:rgba(169,169,169,1);
+    font-size: 0.2rem;
+}
+.radio_select {
+    color: #292929;
+    font-size: 0.28rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    margin-left: 0.82rem;
+  }
+
+  .radio_select input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+  }
+  .radio_select input[type="radio"] + .radio-label:before {
+    margin-top: 0.12rem;
+    content: '';
+    background: #f4f4f4;
+    border-radius: 100%;
+    border: 1px solid #b4b4b4;
+    display: inline-block;
+    width: 0.3rem;
+    height: 0.3rem;
+    position: relative;
+    top: -0.2em;
+    /* margin-right: 1rem; */
+    vertical-align: top;
+    cursor: pointer;
+    text-align: center;
+    -webkit-transition: all 250ms ease;
+    transition: all 250ms ease;
+  }
+  .radio_select input[type="radio"]:checked + .radio-label:before {
+    background:#21B1EB;
+    display: block;
+    content: "\2714";
+    text-align: center;
+    line-height: 0.3rem;
+    font-size: 0.2rem;
+    border: 1px solid #21B1EB;
+    color: white;
+    /* box-shadow: inset 0 0 0 4px #f4f4f4; */
+  }
+  .radio_select input[type="radio"]:focus + .radio-label:before {
+    outline: none;
+    border-color: #21B1EB;
+  }
+  .radio_select input[type="radio"]:disabled + .radio-label:before {
+    box-shadow: inset 0 0 0 4px #f4f4f4;
+    border-color: #b4b4b4;
+    background: #b4b4b4;
+  }
+  .radio_select input[type="radio"] + .radio-label:empty:before {
+    margin-right: 0;
+  }
+  .payment_btn{
+    margin-top: 0.5rem;
+    width: 5rem;
+    height: 0.8rem;
+    border-radius: 0.4rem;
+    font-size: 0.32rem;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    text-align: center;
+    line-height: 0.8rem;
+    background-color: #21B1EB;
+  }

Public/Mobile/js/recharge.js

@@ -0,0 +1,25 @@
+$(function() {
+    var isSign = 'currency'
+    $(".recharge-tabbar li").click(    
+        function(){
+           var divShow = $(".content").children("div");
+           if($(this).hasClass("")){
+            var index = $(this).index();
+            $(this).addClass("selected");
+            isSign = $(this).attr('name');
+            $(this).siblings("li").removeClass("selected");
+            $(divShow[index]).show();  
+            $(divShow[index]).siblings("div").hide();
+         }
+      })
+      
+    //   点击充值按钮
+    $(".payment_btn").click(function(){
+        //isSign = 'currency'平台币充值 ；isSign = 'iscurrency'折扣充值
+        console.log(isSign);
+       var pattern = $('input:radio[name="radio"]:checked').val();
+    //    pattern判断支付宝 还是微信支付
+       console.log(pattern);
+
+    })
+})