zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<!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"
    />
    <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
    <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: #eff6ff;
        }

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

        .main_box img {
            width: 100%;
        }

        .time {
            font-size: 0.14rem;
            font-weight: bold;
            text-align: center;
            color: #fff;
        }

        .recharge-item {
            font-size: 0;
            width: 90%;
            margin: 0.3rem auto;
        }

        .recharge_box_one {
            width: 80%;
            margin: 0 auto;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 55%;
        }

        .list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .15rem;
        }

        .list .list-item {
            width: 48%;
        }

        .main_box img,
        a {
            -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-2019-01-17/bg.jpg" alt="" />
    <div class="recharge_box_one">
        <div class="list">

            <div class="list-item">
                <img
                        src="{{$img[$type][0]}}"
                        data-active-src="{{$img[$type][0]}}"
                        data-src="{{$img[$type][1]}}"
                        data-focus="1"
                        data-href="{{$url[0]}}"
                        alt=""
                />
            </div>
            <div class="list-item">
                <img
                        src="{{$img[$type][3]}}"
                        data-active-src="{{$img[$type][2]}}"
                        data-src="{{$img[$type][3]}}"
                        data-focus="0"
                        data-href="{{$url[1]}}"
                        alt=""
                />
            </div>
        </div>
        @if($code == -1)
            <!-- 活动未开始 -->
            <a href="javascript:void(0)" class="un_begin">
                <img src="https://cdn-novel.iycdm.com/h5/activity-2019-01-17/undone.png" alt="" />
            </a>
        @elseif($code == 0)
            <!-- 活动进行中 -->
            <a href="{{$url[0]}}" class="beginning" id="paying">
                <img src="https://cdn-novel.iycdm.com/h5/activity-2019-01-17/doing.png" alt="" />
            </a>
       @elseif($code == -2)
            <!-- 活动结束 -->
            <a href="javascript:void(0)" class="over">
                <img src="https://cdn-novel.iycdm.com/h5/activity-2019-01-17/over.png" alt="" />
            </a>
        @endif
    </div>
</main>
</body>
<script>
    var d = document;
    var imgs = d.querySelectorAll(".list-item img");
    var alink = d.querySelector("#paying");
    var key = 0;
    for (var i = 0; i < imgs.length; i++) {
        (function(index) {
            imgs[index].addEventListener(
                    "click",
                    function() {
                        if (key === index) return;
                        reset();
                        var active = this.getAttribute("data-active-src");
                        var un_active = this.getAttribute("data-src");
                        var is_active = this.getAttribute("data-focus");
                        var href = this.getAttribute("data-href");
                        if (is_active === "0") {
                            // 未勾选
                            this.setAttribute("data-focus", "1");
                            this.setAttribute("src", active);
                            if(alink){
                                alink.setAttribute('href',href);
                            }
                        }
                        key = index;
                    },
                    false
            );
        })(i);
    }
    function reset() {
        for (var i = 0; i < imgs.length; i++) {
            (function(index) {
                imgs[index].setAttribute("src", imgs[index].getAttribute("data-src"));
                imgs[index].setAttribute("data-focus", "0");
            })(i);
        }
    }
</script>
</html>