<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>感恩回馈-好礼驾到</title>
    <style>
        html,
        body {
            margin: 0 auto;
            padding: 0;
            max-width: 450px;
            font-size: 100px;
        }

        html {
            background: #ffd4af;
        }

        .main_box {
            font-size: 0;
            position: relative;
        }

        .main_box img {
            width: 100%;
        }

        .recharge_box_one a {
            position: absolute;
            width: 80%;
            height: 0.75rem;
            top: 72%;
            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;
        }

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

<body>
<main class="main_box">
    <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/banner.jpg" alt=""/>
    <div class="recharge-list-box">
        @if($charge_count == 0)
            <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/01-focus.png"
                 data-src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/01.png"
                 data-active="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/01-focus.png"
                 data-check="1"
                 data-href="{{$url['slow']}}"
                 alt=""/>
        @endif

        <img
                src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/02.png"
                data-src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/02.png"
                data-active="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/02-focus.png"
                data-check="0"
                data-href="{{$url['height']}}"
                alt=""/>
    </div>
    <div class="recharge_box_one">

        @if($code == 0)
            <!-- 活动进行中 -->
                @if($charge_count == 0)
                    <a href="{{$url['slow']}}" class="beginning" id="pay">
                        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/doing.png" alt=""/>
                    </a>
                    @else
                    <a href="{{$url['height']}}" class="beginning" id="pay">
                        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/doing.png" alt=""/>
                    </a>
                @endif

        @elseif($code == 1)
            <!-- 活动未开始 -->
                <a href="javascript:void(0)" class="un_begin" id="pay">
                    <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/undone.png" alt=""/>
                </a>
        @else
            <!-- 活动结束 -->
                <a href="javascript:void(0)" class="over" id="pay">
                    <img src="https://cdn-novel.iycdm.com/h5/activity-2018-11-21/over.png" alt=""/>
                </a>
        @endif


    </div>
</main>
</body>
<script>
    var d = document;
    var i = d.querySelectorAll(".recharge-list-box img");
    var pay = d.querySelector("#pay");
    for (var j = 0; j < i.length; j++) {
        (function (index) {
            i[index].addEventListener(
                    "click",
                    function () {
                        resetAllStatus();
                        var s = this.getAttribute("data-check");
                        var a = this.getAttribute("data-active");
                        var n = this.getAttribute("data-src");
                        pay.setAttribute("href",this.getAttribute("data-href"));
                        if (s === "0") {
                            this.setAttribute("src", a);
                            this.setAttribute("data-check", "1");
                        } else {
                            this.setAttribute("src", n);
                            this.setAttribute("data-check", "0");
                        }
                    },
                    false
            );
        })(j);
    }

    function resetAllStatus() {
        for (var j = 0; j < i.length; j++) {
            (function (index) {
                var n = i[index].getAttribute("data-src");
                i[index].setAttribute("data-check", "0");
                i[index].setAttribute("src", n);
            })(j);
        }
    }
</script>
</html>
