<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>充9.9元，得2000书币，只有一次机会哦！</title>
    <style>
        html,
        body {
            margin: 0 auto;
            padding: 0;
            max-width: 450px;
            font-size: 100px;
            /*min-height: 100%;*/
            overflow: hidden;
            height: 100vh;
        }

        html {
            background: url(https://cdn-novel.iycdm.com/h5/activity-newuserv1/bg.png) no-repeat top / cover;
        }

        .main_box {
            font-size: 0;
            position: relative;
            width: 98%;
            margin: 0 auto;
        }

        .main_box img {
            width: 100%;
        }

        .time {
            position: absolute;
            font-size: 0.12rem;
            margin: 0;
            padding: 0;
            top: 44.4%;
            left: 50%;
            transform: translateX(-51%);
            width: 76%;
            text-align: center;
            color: #fff;
            font-weight: bold;
        }

        .recharge_box_one a {
            position: absolute;
            width: 80%;
            height: 0.75rem;
            top: 68%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
        }

        .recharge-list-box {
            font-size: 0;
            position: absolute;
            top: 41%;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
        }

        .recharge-list-box img {
            -webkit-tap-highlight-color: transparent;
        }

        .bg-repeat {
            background: url(https://cdn-novel.iycdm.com/h5/activity-newuserv1/bg_repeat.png) repeat-y left top / contain;
            height: 50px;
            width: 98%;
            margin: -1px auto 0;
        }

        .d_none {
            display: none;
        }
    </style>
</head>

<body>
<main class="main_box">
    <img src="https://cdn-novel.iycdm.com/h5/activity-newuserv1/bg_2.png" id="bg" alt=""/>
    <p class="time">活动有效期：{{$start_time}}到{{$end_time}}</p>
    <div class="recharge_box_one">
    @if($code == 0)
        <!-- 活动进行中 -->
            <a href="{{$url}}" class="beginning">
                <img src="https://cdn-novel.iycdm.com/h5/activity-newuserv1/doing.png" alt="">
            </a>
    @elseif($code == -1)
        <!-- 活动已充值 -->
            <a href="javascript:void(0)" class="done">
                <img src="https://cdn-novel.iycdm.com/h5/long_done.png" alt="">
            </a>
    @elseif($code == -3)
        <!-- 活动已充值 -->
            <a href="javascript:void(0)" class="done">
                <img src="https://cdn-novel.iycdm.com/h5/activity-newuserv1/undone.png" alt="">
            </a>
    @elseif($code == -2)
        <!-- 活动结束 -->
            <a href="javascript:void(0)" class="over">
                <img src="https://cdn-novel.iycdm.com/h5/activity-newuserv1/over.png" alt="">
            </a>
        @endif
    </div>
</main>
<div class="bg-repeat"></div>
</body>
<script>
    var d = document;
    var img = d.querySelector('#bg');
    var rb = d.querySelector('.bg-repeat');
    img.onload = function() {
        var h = img.offsetHeight;
        var wh = window.screen.height;
        rb.style.height = wh - h + 1 + 'px';
    }
</script>
</html>