{extend name="$member_style_layout" /}

{block name="title"}欢迎在线充值{/block}
{block name="content"}
<style>
.payType{overflow:hidden; position:relative; background:#f6f6f6; padding-bottom:30px; margin:20px 5px 30px 5px;}
.payType span.pays{float:left; width:85px; position:absolute; top:calc(50% - 13px); left:10px; font-size:16px;}
.pay_type{float:right; width:calc(100% - 85px);}
.PayContainer{
	background:#f6f6f6;
	padding: 15px 0;
}
.PayContainer .pays{
	display: table;
	width: 100%;
}
.PayContainer .pays	ol,.PayContainer .pays li{
	display: table-cell;
	vertical-align: middle;
	padding: 10px;
}
.PayContainer .pays	ol{
	width: 70px;
	text-align: right;
	padding-right: 0;
}
.PayContainer .pays li div{
	width:23%;
	float: left;
	padding: 0 1%;
	text-align: center;
	font-size: 14px;
}
.PayContainer .pays li div span{
	display: block;
	position: relative;
	background:#b4b4b4;
	border-radius: 50%;
	overflow: hidden;
	color: #FFF;
	cursor: pointer;
}
.PayContainer .pays li div.ck span{
	background:#F60;
}
.PayContainer .pays li div span:before{
	content: '';
	display: block;
	padding-top: 100%;
}
.PayContainer .pays li div span img,.PayContainer .pays li div span i{
	position:absolute;
	font-size: 30px;
	width: 30px;
	left:50%;
	top: 50%;
	-webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
}
.write_money{
	display:table;
	width:100%; 
	background:#fff; 
	border-top:1px solid #eee; 
	border-bottom:1px solid #eee;
}
.write_money ol,.write_money li{
	display: table-cell;
	vertical-align: middle;
	padding: 5px;
}
.write_money ol{
	width: 70px;
	text-align: right;
}
.write_money li input{
	width:80%;
	border:none;
	line-height: 25px;
	outline: none;
	text-indent: 10px;
}
.yuMoney{padding:10px 10px 15px 10px; font-size:14px; color:#666;}
.payBut{text-align:center;}
.payBut button{border:none;color:#fff;background:#0099ff; line-height: 45px; width: 90%; border-radius: 5px; cursor: pointer;}
.note{
	padding: 10px;
	font-size: 14px;
	color: #666;
}
</style>
<div class="PayContainer">
	<ul class="pays">
		<ol>支付方式:</ol>
		<li>
			<div class="alipay" onclick="paytype('alipay')"><span><img src="__STATIC__/images/ali.png"></span><p>支付宝</p></div>
			<div class="weixin" onclick="paytype('weixin')"><span><i class="fa fa-weixin"></i></span><p>微信</p></div>
			<!--div class="yu_er" onclick="paytype('yu_er')"><span><i class="fa fa-yen"></i></span><p>余额</p></div>
			<div class="card" onclick="paytype('card')"><span><i class="fa fa-money"></i></span><p>充值卡</p></div-->
		</li>
	</ul>
	<form name="form1" method="post" action="?"> 
		<ul class="write_money">
			<ol>金额(元)</ol> 
			<li><input type="text" name="money" placeholder="输入金额"/></li>
		</ul>
	    <div class="yuMoney">你目前已有积分数是 <span class="B red">{$userdb.money}</span> 个，请输入您要充值的金额</div>
	    <div class="payBut"><button type="submit">充值</button><input type="hidden" name="paytype" value="weixin"></div>
	</form>
    <div class="note">
    	注意：<br>每支付 <span class="B red">1</span> 元，将可获得 <span class="B red">{$webdb.money_ratio|default=10}</span> 个积分，充值金额只能是整数 
    </div>
</div>
<script>
function paytype(str){
	$('.PayContainer .pays div').removeClass('ck')
	$('.'+str).addClass('ck')
	$('.payBut input').val(str);
}
paytype('weixin');
</script>
{/block}