{extend name="layout/layout" /}
{block name="title"}VIP优惠{/block}

{block name="css"}
<!-- 这里引入css -->
<link href="{:asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/pay.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
    html,
    body {
        background:linear-gradient(90deg,#f9dc8b 0%,#f9dc8b 100%);
    }
    .js_loading strong{
        padding: .1rem .1rem .1rem .8rem;
        position:fixed;
        top:50%;
        left: .6rem;
        right: .6rem;
        z-index: 199;
        margin: -.3rem auto;
        height: .7rem;
        font-size:.16rem;
        color:#fff;
        line-height: .5rem;
        background:rgba(0,0,0,0.7) url({:asset('/img/frontend/icon/oval.svg')}) no-repeat .2rem center;
        background-size: .4rem .4rem;
        box-sizing: border-box;
        border-radius: .08rem;
    }
    .js_loading{
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        background-color: rgba(0,0,0,.3);
    }






/*弹出框*/
.bind_alert_box{
    display: none;
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	padding:20px 0;
	overflow:hidden;
	background-color:rgba(0,0,0,0.5);
	text-align:center;
	font-size:0;
	z-index:3000;
}
.bind_alert_main,
.bind_alert_height{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
}
.bind_alert_height{
	height:100%;
	overflow:hidden;
	width:1px;
	margin-left:-10px;
}

.bind_alert_main{
	overflow:hidden;
	width:240px;
	background-color:#fff;
	border-radius:6px;
	font-size:14px;


	-moz-box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
	box-shadow:0 0 10px 0px rgba(0,0,0,0.3);

}

    .bind_alert_off{
        float: right;
        width: 26px;
        height: 26px;
        background:#fff url(/assets/img/frontend/icon/cha_icon_2.png) no-repeat center center;
        background-size: 13px 13px;
        border-radius: 26px;
        margin: 0 0 10px;
    }
.alert_tit{
    margin: 20px 40px;
	text-align:center;
	overflow:hidden;
}

.alert_tit_clear{
	margin:5px 5px 0 0;
	float:right;
	width:30px;
	height:30px;
	background:url(/images/icons/cha_icon_2.png) no-repeat center center;
	background-size:18px auto;
}

.alert_tit h2{
	margin:0 40px;
	overflow:hidden;
	height:40px;
	font-size:16px;
	color:#808080;
	text-align:center;
	line-height:40px;
}
.alert_tit h3{
	margin-top:10px;
	padding-left:22px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	overflow:hidden;
	height:30px;
	background:url(/images/icons/warning_icon_2.png) no-repeat 0 center;
	background-size:18px auto;
	font-size:16px;
	color:#333;
	text-align:center;
	line-height:30px;
}

.alert_text{
	padding:10px;
}
.alert_txt_c{
	font-size:14px;
	color:#808080;
	text-align:left;
	line-height:20px;
}

.alert_but_box{
	border-top:1px solid #d8d8d8;
	overflow:hidden;
}
.alert_but_box a{
	display:block;
	box-sizing:border-box;
}

.alert_but_1{
	height:46px;
	font-size:15px;
	color:#77a4ff;
	text-align:center;
	line-height:46px;
}


    .v_top_bg{
        overflow: hidden;
    }
    .v_top_bg img{
        display: block;
        width: 100%;
        height: auto;
    }
    .v_text_box{
		margin-bottom: .3rem;
        overflow: hidden;
        height:.54rem;
		text-align: center;
		font-size: 0;
    }
	.v_text_box span{
		padding: 0 .16rem;
		overflow: hidden;
		display: inline-block;
		*display: inline;
		*zoom:1;
		height: .52rem;
		font-size: .18rem;
		color: #e7423a;
		line-height: .52rem;
		border:.01rem solid #e7423a;
		border-radius:.05rem;
		-ms-border-radius:.05rem;
		-moz-border-radius:.05rem;
		-webkit-border-radius:.05rem;
		-o-border-radius:.05rem;
	}
	.re_but_box .v_pay_but{
		margin: 0 auto .2rem;
		display: block;
		height: .45rem;
		width: 2.8rem;
		background: url({:asset('/img/frontend/vip_pay_banner/default_but.png')}) no-repeat 0 0;
		background-size: 2.8rem .45rem;
	}
	.v_pay_txt{
		margin-bottom: .3rem;
		overflow: hidden;
		height: .2rem;
		text-align: center;
		font-size: .13rem;
		color: #8d5e49;
		line-height: .2rem;
	}
	.re_but_box{
		padding: 0;
	}

    .a_pop_up{
        display:none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.8);
        white-space: nowrap;
        text-align: center;
    }
    .a_pop_up_box,
    .a_pop_jgb{
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }
    .a_pop_jgb{
        margin-left: -1px;
        height: 100%;
        width: 1px;
    }

    .a_pop_up_box{
        min-width: 2.6rem;
        padding: .3rem .2rem;
        background-color: #fff;
        border-radius: .1rem;
        box-sizing: border-box;
    }
    .a_pop_up_box strong{
        display: block;
        text-align: center;
        font-size: .18rem;
        color: #414141;
        line-height: .3rem;
    }
    .a_pop_up_box span{
        display: block;
        text-align: center;
        font-size: .13rem;
        color: #414141;
        line-height: .3rem;
    }
    .a_pop_up_box a{
        display: block;
        margin: .1rem .2rem;
        background-color: #ff2f10;
        font-size: .14rem;
        color: #fff;
        line-height: .4rem;
        border-radius: .06rem;
    }
</style>
<style>
    .dialoge_bg { position: fixed; left:0; top:0; right:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index: 1; display: none}
    .dialoge_main_div {position: fixed; top:50%; left:50%; margin:-1.655rem 0 0 -1.5125rem; width:3.025rem; height:3.31rem; z-index: 2;}

    .dialoge_main_div .h3 {position:absolute; top:0; left:0; width:100%; height:0.46rem; background:url({:asset('/img/frontend/recharge/pop-tit-bk.png')}) no-repeat center; background-size:2.725rem;
    padding-top:.16rem;
    font-size:0.175rem;
    font-family:PingFang-SC-Bold,PingFang-SC;
    font-weight:bold;
    color:rgba(81,61,61,1);
    text-align: center;
    z-index: 3;
    }
    .dialoge_main { position: relative; margin-top:.395rem;padding-top:.28rem; width:3.025rem; height:2.17rem; background:#fff; border-radius:0.115rem; text-align: center;}

    .suc_ico { margin:0 auto; width:.96rem;}
    .suc_p1 {font-size:.125rem;font-family:PingFangSC-Regular,PingFang SC;color:rgba(184,190,204,1);line-height:.18rem;text-align: center;}
    .dialoge_main .suc_btn_look {
        position:absolute; left:50%; bottom:.19rem;  margin-left:-1.2375rem;
        display:block; width:2.475rem;height:.365rem;line-height:.365rem;background:rgba(255,180,115,1);border-radius:.18rem;color:#fff;}
    .suc_close { position: absolute; left:50%; bottom:0.02rem; margin-left:-0.13rem; width:.26rem;}
    .suc_close img {width:.26rem;}
</style>
{/block}


{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu"}{/block}
{block name="main"}

<div class="v_top_bg"><img src="{:asset('/img/frontend/vip_pay_banner/default_bg_v1.png')}" /></div>
{if condition="$goods_info"}
<div class="v_text_box"><span>{$goods_info['desc'] ?? ''}</span></div>
<div class="re_but_box">
	<a href="javascript:;" class="v_pay_but" data-money="{$goods_info['money']}" data-business_line="{$business_line}" data-goods-id="{$goods_info['id']}" data-goods-category="{$goods_info['category_id']}"></a>
</div>
{/if}
<p class="v_pay_txt">VIP属于虚拟商品，一经购买不得退款</p>

<input type="hidden" value="{$recent_url}" class="js_recent_url">

<div class="bind_alert_box" id="clear_alert_box">
	<div class="bind_alert_main">
        <a href="javascript:;" class="bind_alert_off"></a>
        <div class="alert_tit">
            <h2>充值成功</h2>
        </div>
        <div class="alert_but_box">
            <a href="javascript:;" class="alert_but_1">去看书</a>
        </div>

    </div>

    <div class="bind_alert_height"></div>
</div>

<div class="dialoge_bg">
    <div class="dialoge_main_div">
        <h3 class="h3">已充值成功</h3>
        <div class="dialoge_main">
            <img class="suc_ico" src="{:asset('/img/frontend/recharge/pic-delayed.png')}">
            <p class="suc_p1">书币到账可能存在短暂延迟，<br>请稍后刷新继续阅读！</p>
            <a class="suc_btn_look" style="background:#FFB473;" href="javascript:;">去看书</a>
        </div>
        <a class="suc_close" href="javascript:;"><img src="{:asset('/img/frontend/recharge/close.png')}"></a>
    </div>
</div>

<div class="js_loading"><strong>正在加载</strong></div>


<div class="a_pop_up" {notempty name="$isend"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>活动已结束</strong>
    <span>敬请期待下次活动</span>
    <a href="{$recent_url}">去看书</a>
</div>
<div class="a_pop_jgb"></div>

</div>

{/block}


{block name="js"}
<script>

</script>
<script type="text/javascript" src="{:asset('/js/frontend/recharge/pay.js')}"></script>
{/block}