<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="divport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/frontend/recharge/reset.css">
<link rel="stylesheet" href="/assets/frontend/recharge/icon.css">
<title>充值</title>
<style>
.page {
height: 100vh;
}
.content{
padding-top: 0.10rem;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
margin:0 auto;
width: 8.00rem;
background-color: #f8f8f8;
}
.phone-wrap {
width: 7.50rem;
padding:0 0.15rem 0.15rem;
}
.phone-item {
width: 100%;
height: 0.35rem;
border-bottom: 1px solid #F1F1F1;
justify-content: space-between;
}
.phone-item input {
flex:1;
font-size: 0.14rem;
background-color: #f8f8f8;
}
.phone-item .phone-nick{
color:#999999;
font-size: 0.13rem;
}
.recharge-wrap {
width: 7.50rem;
padding: 0.15rem;
padding-top: 0rpx;
padding-bottom: 0rpx;
}
.recharge-title {
font-size: 0.16rem;
font-weight: bold;
}
.exchange-section {
margin-top: 0.10rem;
display: flex;
flex-wrap: wrap;
/* justify-content: space-between; */
}
.exchange-box {
width: 1.25rem;
height: 0.71rem;
border: 0.01rem solid #7D73DC;
border-radius: 0.10rem;
margin-bottom: 0.15rem;
color: #999999;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 0.40rem;
}
.exchange-box:nth-child(4n){
margin-right: 0;
}
.exchange-top {
display: flex;
align-items: center;
}
.exchange-pic {
height: auto;
width: 0.18rem;
margin-right: 0.07rem;
}
.diamonds-num {
font-size: 0.16rem;
color: #261A00;
}
/* .actvie {
color: #FFFFFF;
} */
.diamonds-name {
font-size: 0.12rem;
margin-left: 0.04rem;
}
.exchange-price {
font-size: 0.12rem;
margin-top: 0.10rem;
}
.current {
background: linear-gradient(90deg, #629CFF, #7870F1);
box-shadow: 0px 3px 5px 0px rgba(126, 114, 220, 0.59);
color: #FFFFFF !important;
}
.current .diamonds-num{
color: #FFFFFF;
}
.mode-wrap{
width: 7.50rem;
height: 1.15rem;
padding: 0.15rem;
padding-top:0rpx;
}
.mode-wrap .mode-title{
font-size: 0.16rem;
font-weight: bold;
}
.mode-item{
width: 7.50rem;
height: 0.20rem;
justify-content: space-between;
margin-top: 0.10rem;
cursor: pointer;
}
.mode-left{
font-size: 0.14rem;
}
.mode-left .zicon-weixin{
font-size: 0.27rem;
color: #46BB36;
margin-right: 0.07rem;
}
.mode-left .zicon-alipay{
color:#02A9F1;
font-size: 0.27rem;
margin-right: 0.07rem;
}
.pay-ic{
font-size: 0.20rem;
}
.zicon-xuanze{
color: #46BB36;
}
.zicon-xuanze1{
color: #999;
}
.mode-tips{
width: 7.50rem;
align-items: flex-start;
margin-top: 0.20rem;
}
.mode-tips .zicon-tishi{
font-size: 0.14rem;
color: #FFCE00;
margin-top: 8rpx;
}
.mode-tips .mode-txt{
/* width: 2.25rem; */
margin-left: 0.05rem;
color: #999999;
font-size: 0.12rem;
}
.recharge-btn{
width: 2.90rem;
height: 0.40rem;
background: #EEEEEE;
border-radius: 0.20rem;
margin: 0.50rem auto 0.10rem;
font-size: 0.15rem;
font-family: PingFang SC;
font-weight: 500;
cursor: pointer;
}
.recharge-btn.active{
background: linear-gradient(90deg, #629CFF, #7870F1);
color: #FFFFFF;
}
</style>
<script>
!(function(win, doc) {
function setFontSize() {
var docEl = doc.documentElement;
var winWidth = docEl.clientWidth;
doc.documentElement.style.fontSize = (winWidth / 1920) * 100 + "px";
}
var userAgent = navigator.userAgent;
win.addEventListener("resize", function() {
if (navigator.userAgent !== userAgent) {
location.reload();
}
});
setFontSize();
})(window, document);
</script>
</head>
<body>
<div class="page">
<div class="content">
<form method="post" action="/index/recharge/recharge_pc">
<div class="phone-wrap row">
<div class="phone-item row">
<input type="text" name="mobile" placeholder="请输入注册手机号" autofocus="true"/>
<!--<span class="phone-nick" >昵称: 李大娃</span>-->
</div>
</div>
<div class="recharge-wrap">
<div class="recharge-title">充值金额</div>
<select name="rc_id" class="exchange-section">
{volist name='conf_list' id='vo'}
<option value="{$vo.id}">充￥{$vo.money}得{$vo.gold}金币</option>
{/volist}
</select>
<!--<div class="exchange-section">
<!– current为激活状态 @click="clickBox(index)"–>
<div class="exchange-box column current" >
<div class="exchange-top">
<img class="exchange-pic" src="/assets/frontend/recharge/images/b-b.png"></img>
<div class="diamonds-num" >1000</div>
<div class="diamonds-name">金币</div>
</div>
<div class="exchange-price">￥100.00</div>
</div>
<div class="exchange-box column" >
<div class="exchange-top">
<img class="exchange-pic" src="/assets/frontend/recharge/images/b-b.png"></img>
<div class="diamonds-num actvie" >3000</div>
<div class="diamonds-name">金币</div>
</div>
<div class="exchange-price">￥300.00</div>
</div>
<div class="exchange-box column" >
<div class="exchange-top">
<img class="exchange-pic" src="/assets/frontend/recharge/images/b-b.png"></img>
<div class="diamonds-num actvie" >5000</div>
<div class="diamonds-name">金币</div>
</div>
<div class="exchange-price">￥500.00</div>
</div>
</div>-->
</div>
<div class="mode-wrap" >
<div class="mode-title">充值方式</div>
<div class="mode-item row" data-type="wechat">
<div class="mode-left row">
<div class="zicon zicon-weixin"></div>
<div>微信充值</div>
</div>
<div class="zicon pay-ic zicon-xuanze1"></div>
</div>
<div class="mode-item row" data-type="alipay">
<div class="mode-left row">
<div class="zicon zicon-alipay"></div>
<div>支付宝充值</div>
</div>
<!-- <div class="zicon" :class="choosed ? 'zicon-xuanze' : 'zicon-xuanze1'" @click="changeIcon"></div> -->
<div class="zicon pay-ic zicon-xuanze"></div>
</div>
<div class="mode-tips row">
<div class="zicon zicon-tishi"></div>
<div class="mode-txt">说明：充值前请确认您已满18周岁，金币充值成功后无法退款，不可提现。</div>
</div>
</div>
<input type="submit" class="recharge-btn center active" value="立即充值" />
<input type="hidden" name="pay_type" value="alipay" class="payType">
<!--<div class="recharge-btn center active">立即充值</div>-->
</form>
</div>
</div>
</body>
</html>
<script src="/assets/frontend/recharge/jquery.min.js"></script>
<script>
$(".mode-item").click(function (e) {
$(this).find(".pay-ic").removeClass("zicon-xuanze1").addClass("zicon-xuanze");
$(this).siblings().find(".pay-ic").removeClass("zicon-xuanze").addClass("zicon-xuanze1");
var type = $(this).data("type");
$(".payType").val(type);
console.log($(".payType").val());
});
</script>