zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!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" />
    <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
    <title>金猪贺岁-送平安如意红包</title>
    <style>
        html,
        body {
            margin: 0 auto;
            padding: 0;
            max-width: 450px;
            font-size: 100px;
        }

        p {
            padding: 0;
            margin: 0;
        }

        html {
            background: #c41f30;
        }

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

        .main_box img {
            width: 100%;
        }

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

        .list-item__top {
            margin-bottom: 0.15rem;
        }

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

        .list {
            margin-bottom: 0.15rem;
        }

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

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

        .main_box img,
        a {
            -webkit-tap-highlight-color: transparent;
            text-decoration: none;
            color: currentColor;
        }

        .recharge_box a {
            width: 100%;
            display: block;
            margin: 0 auto;
        }

        .recharge_box .beginning img {
            width: 100%;
        }

        .to-activity__two {
            position: absolute;
            bottom: 0.6rem;
            right: 0;
            width: 1rem;
        }

        .activity_two__intro {
            font-size: 0.12rem;
            padding: 0 0.2rem;
            color: #fff;
            line-height: 1.5;
        }

        .activity_two__intro p {
            margin-bottom: 0.1rem;
        }

        .activity_two__intro i {
            font-style: normal;
            color: #ffdc6e;
        }

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

<body>
<main class="main_box">
    <div class="activity_one">
        <img src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/bg.jpg" alt="" />
        <div class="recharge_box">
            <div class="list">
                <div class="list-item__flex">
                    <div class="list-item">
                        <img
                                src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/btn1-active.png"
                                data-active-src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/btn1-active.png"
                                data-src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/btn1.png"
                                data-focus="1"
                                data-href="{{$url[0]}}"
                                alt=""
                        />
                    </div>
                    <div class="list-item">
                        <img
                                src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/btn2.png"
                                data-active-src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/btn2-active.png"
                                data-src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/btn2.png"
                                data-focus="0"
                                data-href="{{$url[1]}}"
                                alt=""
                        />
                    </div>
                </div>
            </div>
        @if($code == -1)
            <!-- 活动未开始 -->
                <a href="javascript:void(0)" class="un_begin">
                    <img src="https://cdn-novel.iycdm.com/h5/activity-2019-01-25/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-25/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-25/over.png" alt="" />
                </a>
            @endif
        </div>
    </div>
</main>
</body>
<script>
    var d = document;
    var imgs = d.querySelectorAll(".list-item img");
    var pay = d.querySelector('#paying');
    var key = 0;
    for (var i = 0; i < imgs.length; i++) {
        (function(index) {
            imgs[index].addEventListener(
                    "click",
                    function() {
                        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(pay){
                                pay.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>