book_admin/application/index/view/recharge/singlepage/page_single_push.html

{extend name="layout/layout" /}
{block name="title"}限时活动{/block}
{block name="css"}
<style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100%;
        min-height: 100vh;
        background: url({:asset('/img/frontend/singlepage/images/bg.png')}) no-repeat top center/100% 2.5rem;
        background-color: rgba(255, 210, 87, 1);
        overflow: hidden;
        padding-bottom: 0.27rem;
    }

    .box {
        width: 3.41rem;
        min-height: 5.98rem;
        background: rgba(254, 250, 235, 1);
        box-shadow: 0px 3px 9px 0px rgba(255, 175, 46, 1);
        border-radius: 0.1rem;
        margin: 2.5rem auto 0;
        position: relative;
        padding-bottom: 0.15rem;
        box-sizing: border-box;
    }

    .top {
        width: 3.41rem;
        height: 0.5rem;
        position: absolute;
        background: url({:asset('/img/frontend/singlepage/images/time_content.png')}) no-repeat center center/100% 100%;
        transform: translateY(-30%);
        -webkit-transform: translateY(-30%);
        -o-transform: translateY(-30%);
        -ms-transform: translateY(-30%);
        -moz-transform: translateY(-30%);
    }

    .time-icon {
        position: absolute;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        top: 0.08rem;
        left: 0.7rem;
    }

    .time-icon::before {
        content: "";
        width: 0.23rem;
        height: 0.23rem;
        background: url({:asset('/img/frontend/singlepage/images/time.png')}) no-repeat center center/100% 100%;
        position: absolute;
        left: -0.26rem;
        top: -0.005rem;
    }

    .time-item {
        font-size: 0.17rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(201, 36, 3, 1);
        position: absolute;
        top: 0.08rem;
        left: 1.83rem;
    }

    .time-min.time-item {
        left: 2.21rem;
    }

    .time-sec.time-item {
        left: 2.6rem;
    }

    .book-list {
        padding-top: 0.46rem;
    }

    .book-item {
        width: 3.19rem;
        height: 1.68rem;
        border-radius: 0.08rem;
        background: rgba(255, 240, 201, 1);
        border: 0.01rem solid rgba(254, 212, 137, 1);
        font-size: 0;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0.16rem 0.1rem 0 0.1rem;
        margin-bottom: 0.15rem;
    }

    .book-item:last-of-type {
        margin-bottom: 0;
    }

    .img {
        width: 0.94rem;
        height: 1.3rem;
        display: inline-block;
    }

    .img img,.img .true_img {
        width: 0.94rem;
        height: 1.3rem;
        border-radius: 0.04rem;
    }

    .right {
        width: 1.82rem;
        float: right;
    }

    .book-name {
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(138, 39, 18, 1);
        font-size: 0.17rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .book-desc {
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(138, 39, 18, 1);
        line-height: 0.17rem;
        margin-top: 0.12rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .book-footer {
        width: 100%;
        height: 0.3rem;
        line-height: 0.3rem;
        background-color: rgba(252, 169, 33, 1);
        border-radius: 0.15rem;
        margin-top: 0.16rem;
        font-size: 0.13rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        padding-left: 0.24rem;
        box-sizing: border-box;
        position: relative;
    }

    .book-footer::before {
        content: '';
        width: 0.17rem;
        height: 0.17rem;
        position: absolute;
        margin-top: 0.065rem;
        margin-left: -0.18rem;
        background: url({:asset('/img/frontend/singlepage/images/hot.png')}) center center/0.17rem 0.17rem;
    }

    .book-footer .btn {
        width: 0.74rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        border-radius: 0.15rem;
        background: linear-gradient(60deg, rgba(255, 90, 61, 1), rgba(255, 65, 33, 1));
        position: absolute;
        right: -0.05rem;
        top: 0;
    }

    .tip {
        padding: 0.18rem;
        box-sizing: border-box;
    }

    .tip-title {
        font-size: 0.17rem;
        font-family: Lantinghei SC;
        font-weight: 600;
        color: rgba(120, 16, 6, 1);
        opacity: 0.9;
        margin-bottom: 0.05rem;
    }

    .tip-content {
        font-size: 0.13rem;
        font-family: Lantinghei SC;
        font-weight: 600;
        color: rgba(120, 16, 6, 0.7);
        line-height: 0.19rem;
    }
    .pop{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background:rgba(0,0,0,0.7);
        display: none;
    }
    .pop-box{
        width: 3.15rem;
        height: 2.55rem;
        background:rgba(255,255,255,1);
        border-radius: 0.12rem;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
    }
    .pop-title{
        width: 2.84rem;
        height: 0.65rem;
        background: url({:asset('/img/frontend/singlepage/images/pop_title.png')}) no-repeat center center/100% 100%;
        position: absolute;
        left: 0.16rem;
        top: -0.325rem;
        font-family:PingFang-SC-Bold,PingFang-SC;
        font-weight:bold;
        color:rgba(81,61,61,1);
        font-size: 0.18rem;
        line-height: 0.52rem;
        text-align: center;
    }
    .pop-img{
        width: 1rem;
        height: 1.12rem;
        background: url({:asset('/img/frontend/singlepage/images/pop_icon.png')}) no-repeat center center/100% 100%;
        position: absolute;
        left: 1.07rem;
        top: 0.32rem;
    }
    .pop-btn{
        width: 2.58rem;
        height: 0.38rem;
        text-align: center;
        line-height: 0.38rem;
        background:rgba(255,180,115,1);
        border-radius: 0.19rem;
        font-size:0.18rem;
        font-family:PingFang-SC-Medium,PingFang-SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        position: absolute;
        left: 0.28rem;
        bottom: 0.2rem;
    }
</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu"}{/block}
{block name="main"}
<div class="container">
    <div class="box">
        <div class="top">
            <div class="time-icon">距离活动结束: </div>
            <div class="time-item time-hour">00</div>
            <div class="time-item time-min">00</div>
            <div class="time-item time-sec">00</div>
        </div>
        <div class="book-list">
            {volist name="data.resource" id="vo" key="k" length='3'}
            <div class="book-item">
                <div class="img">
                    <img class="true_img"  src="{$vo.book_img}" alt="">
                </div>
                <div class="right">
                    <div class="book-name">{$vo.book_name}</div>
                    <div class="book-desc">
                        {$vo.description}
                    </div>
                    <div class="book-footer">
                        {$vo.read_num}人已购买
                        <div class="btn  {if condition='$vo.is_pay eq 1'} buy_book {else/} re_but_box {/if}" data-business_line="0" data-activity-id="0" data-goods-id="{$vo.goods_id}" data-money="{$vo.money}" data-book_id="{$vo.book_id}" data-goods-category="0">立即阅读</div>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
    <div class="tip">
        <div class="tip-title">温馨提示</div>
        <div class="tip-content">
            {:nl2br($data.bottom_tips)}
        </div>
    </div>
</div>
<input type="hidden" class="c-url" value="{$channelUrl}">
<div class="pop">
    <div class="pop-box">
        <div class="pop-title">充值成功</div>
        <div class="pop-img"></div>
        <div class="pop-btn pay_book">立即阅读</div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    //活动结束
    if ({$data.end_time} <= 0){
        $('.pop .pop-title').text('活动结束');
        $('.pop .pay_book').text('去看书');
        $('.pop .pay_book').addClass('buy_book');
        $('.pop .pay_book').removeClass('pay_book');
        $('.pop').show();
    }
    function countTime(obj) {
        /**
         * 倒计时函数
         * @obj传入对参数对象
         * @obj.seconds 传入的倒计时秒数，需计算当前时间到结束时间所差秒数
         * @obj.fn 传入的后续的函数操作
         *
         */
        function add0(n) {
            return n > 9 ? n : '0' + n;
        }
        var timer, result;
        var seconds = parseInt(obj.seconds / 1000)

        clearInterval(timer)
        if (seconds <= 0) {
            return 0 + ' 天 ' + 0 + ' 小时 ' + 0 + ' 分 ' + 0 + ' 秒';
        }
        var time = seconds; //秒数
        function freedjs() {
            var d = parseInt(time / 86400);
            time %= 86400;
            var h = parseInt(time / 3600);
            time %= 3600;
            var m = parseInt(time / 60);
            var s = time % 60;
            result = add0(d) + ' 天 ' + add0(h) + ' 小时 ' + add0(m) + ' 分 ' + add0(s) + ' 秒';
            obj.fn && obj.fn({
                day: add0(d),
                hour: add0(h),
                min: add0(m),
                sec: add0(s)
            })
        }
        freedjs();
        timer = setInterval(function () {
            seconds--;
            time = seconds;
            if (time < 1) {
                clearInterval(timer);
            }
            freedjs();
        }, 1000)
    }
    countTime({
        seconds: {$data.end_time},
        fn: function(obj){
            $('.time-hour').html(obj.hour)
            $('.time-min').html(obj.min)
            $('.time-sec').html(obj.sec)
        }
    })
</script>
<script type="text/javascript" src="{:asset('/js/frontend/recharge/singlepage_pay.js')}"></script>
{/block}