book_admin/application/index/view/recharge/activity.html

{extend name="layout/layout" /}
{block name="title"}{$res.aname}{/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">
<style type="text/css">
    html,
    body {
    background-color: {$res.bgcolor};
    }
    .a_banner{
        overflow: hidden;
    }
    .a_info_box{
        margin: 0 auto .1rem;
        padding:.17rem .16rem;
        width: 2.41rem;
        height: .94rem;
        background: url({$res.payimage}) no-repeat 0 0/100% 100%;
        box-sizing: border-box;
    }
    .a_info_text{
        text-align: center;
        overflow: hidden;
    }
    .a_info_text strong
    {
        font-size: .18rem;
    color: {$res.paycolor};
    line-height: .3rem;
    white-space: nowrap;
    }

    .a_info_text span{
        font-size: .18rem;
    color: {$res.paycolor};
    line-height: .3rem;
    white-space: nowrap;
    }
    .a_info_text span{
        margin-left: .1rem;
    }
    .a_time{
        overflow: hidden;
        margin: 0 auto .1rem;
        text-align: center;
        font-size: .13rem;
    color: {$res.atimecolor};
    line-height: .24rem;
    }
    .re_but_box{
        overflow: hidden;
        display: block;
        text-align: center;
    }
    .re_but_box a{
        margin: 0;
        padding: 0;
        border: 0;
        display:inline-block;
        height: .36rem;
        font-size: 0;
    }
    .re_but_box a img{
        margin: 0;
        padding: 0;
        border: 0;
        display: block;
        height: .36rem;
        width: auto;
    }
    .a_pay_text{
        overflow: hidden;
        margin: .16rem .16rem .24rem;
    }
    .a_pay_text h3{
        font-size: .15rem;
    color: {$res.warningcolor};
    line-height: .3rem;
    }
    .a_pay_text {
        font-size: .13rem;
    color: {$res.warningcolor};
    line-height: .24rem;
    }
    .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;
    }

    .vry_sry{
        display:none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        overflow: hidden;
        background-color: rgba(0,0,0,.7);
        font-size: 0;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .vry_sry a,
    .vry_sry span{
        display: inline-block;
        *display: inline;
        *zoom:1;
        vertical-align: middle;
    }

    .vry_sry span{
        overflow: hidden;
        margin-left: -1px;
        height: 100%;
        width: 1px;
    }
    .vry_sry a{
        height: 3.13rem;
        width: 3.1rem;
        background: url(/assets/img/frontend/activity/btn3.png) no-repeat 0 0;
        background-size: 3.1rem 3.13rem;
    }
    .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, .bind_alert_box2{
        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;
    }
</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/activity/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; right:0; top:-0.4rem; 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="a_banner"><img src="{$res.bgimage}" /></div>
<div class="a_info_box">
    <div class="a_info_text"><strong>充值{$res.money|floatval}元</strong><span>{$res.warning1}</span></div>
    <div class="a_info_text"><strong>{$res.warning2}</strong></div>
</div>
<div class="a_time">活动时间：{$res.starttime|date="Y-m-d H:i",###} 至 {$res.endtime|date="Y-m-d H:i",###}</div>
<div class="re_but_box">
    {if $isGiveAct}
    <img class="img_give_act" data-api-url="{:url('index/activity/getActGiveMoney',['act_id'=>$res.activity_id,'res_id'=>$res.id])}" src="{$res.bannerimage}" />
    {else /}
    <a href="javascript:;" data-goods-id="{$res.id}" data-goods-aid="{$res.activity_id}" data-money="{$res.money|floatval}" data-goods-category="{res.classify}"><img src="{$res.bannerimage}" /></a>
    {/if}
</div>
<div class="js_loading"><strong>正在加载</strong></div>
<input type="hidden" value="{:$recent_url}" class="js_recent_url">
<div class="a_pay_text">
    <h3>温馨提示</h3>
    {$res.warning}
</div>
{if condition="$aid eq 100"}
<div class="vry_sry" {notempty name="$isRange"}style="display:block;"{/notempty}>
<a href="{$payUrl}"></a>
<span></span>
</div>
<input type="hidden" id="tourl" value="{$toUrl}" />
{else /}
<input type="hidden" id="tourl" value="{$toUrl}" />

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

</div>

<div class="a_pop_up" {notempty name="$is_max_end"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>您已达到参与最大次数</strong>
    <span>敬请期待下次活动</span>
    <a href="{$toUrl}">去看书</a>
</div>
<div class="a_pop_jgb"></div>

</div>

<div class="a_pop_up" {notempty name="$needWait"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>活动即将开始</strong>
    <span>距离开始时间：{notempty name="$lastTime"}{$lastTime}{/notempty}</span>
    <a href="{$toUrl}">去看书</a>
</div>
<div class="a_pop_jgb"></div>

</div>

<div class="a_pop_up" {notempty name="$isRange"}style="display:block;"{/notempty}>
<div class="a_pop_up_box">
    <strong>抱歉，您不符合活动要求</strong>
    <span>敬请期待下次活动</span>
    <a href="{$toUrl}">去看书</a>
</div>
<div class="a_pop_jgb"></div>
</div>


{/if}

<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" style="background:url({:asset('/img/frontend/activity/recharge/pop-tit-bk.png')}) no-repeat center;background-size:2.725rem;">已充值成功</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:#EA5E5E;" href="javascript:;">去看书</a>
        </div>
        <a class="suc_close" href="javascript:;"><img src="{:asset('/img/frontend/recharge/close.png')}"></a>
    </div>
</div>

<div class="bind_alert_box2" id="clear_alert_box2">
    <div class="bind_alert_main">
        <a href="javascript:;" class="bind_alert_off"></a>
        <div class="alert_tit">
            <h2>领取成功</h2>
            {if isset($the_max_time)}<span>最多可领取{$the_max_time}次</span>{/if}
        </div>
        <div class="alert_but_box">
            <a href="javascript:;" class="alert_but_1">去看书</a>
        </div>

    </div>

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

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