zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!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>国庆送福利</title>
    <style>
        html {
            background: rgb(244, 148, 35);
        }

        html,
        body {
            margin: 0 auto;
            padding: 0;
            max-width: 450px;
            font-size: 100px;
        }

        a {
            color: currentColor;
            text-decoration: none;
        }

        p {
            margin: 0;
        }

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

        .main_box img {
            width: 100%;
        }

        .recharge-list {
            position: absolute;
            width: 90%;
            top: 45%;
            left: 50%;
            transform: translateX(-50%);
        }

        .recharge-item {
            margin-bottom: 0.2rem;
            display: block;
            color: #1b5c00;
            width: 100%;
            height: 0.5rem;
            background: center / contain url(https://cdn-novel.iycdm.com/h5/activity-2018-09-28/btn1.png) no-repeat;
            -webkit-tap-highlight-color: transparent;
        }

        .item2 {
            background-image: url(https://cdn-novel.iycdm.com/h5/activity-2018-09-28/btn2.png)
        }

        .item3 {
            background-image: url(https://cdn-novel.iycdm.com/h5/activity-2018-09-28/btn3.png)
        }

        .item4 {
            background-image: url(https://cdn-novel.yunqibook.com/wap/activity-2018-09-29/17-undone.png)
        }
        .item5 {
            background-image: url(https://cdn-novel.yunqibook.com/wap/activity-2018-09-29/30-undone.png)
        }
        .item6 {
            background-image: url(https://cdn-novel.yunqibook.com/wap/activity-2018-09-29/58-undone.png)
        }

        .item7 {
            background-image: url(https://cdn-novel.yunqibook.com/wap/activity-2018-09-29/17-over.png)
        }
        .item8 {
            background-image: url(https://cdn-novel.yunqibook.com/wap/activity-2018-09-29/30-over.png)
        }
        .item9 {
            background-image: url(https://cdn-novel.yunqibook.com/wap/activity-2018-09-29/58-over.png)
        }

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

<body>
<main class="main_box">
    <div class="hide-div" data-first="{{$is_first_charge}}"></div>
    <!-- 首冲使用背景图bg_first，非首冲使用bg_not_first -->
    @if($is_first_charge)
        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-09-28/bg_first.jpg" alt="">
    @else
        <img src="https://cdn-novel.iycdm.com/h5/activity-2018-09-28/bg_not_first.jpg" alt="">
    @endif

    <!-- 要隐藏class加入d-none即可 -->
    <div class="recharge-list">
        @foreach($url as $key=>$v)
            @if($key == 0 && !$is_first_charge)
                <div class="recharge-item item1 d-none"></div>
            @else
                @if($code == 1)
                <!-- 活动进行中 -->
                    <div class="recharge-item item{{$key+1}} pay" data-value="{{$v}}"></div>
                @elseif($code == -1)
                <!-- 活动未开始 -->
                    <div class="recharge-item item{{$key+4}}" data-value=""></div>
                @else
                <!-- 活动结束 -->
                    <div class="recharge-item item{{$key+7}}" data-value=""></div>
                @endif

            @endif
        @endforeach
    </div>
</main>
</body>
<script>
    var d = document
    var h = d.querySelector('.hide-div')
    var l = d.querySelector('.recharge-list')
    var p = d.querySelectorAll('.pay')
    if (h.getAttribute('data-first') === "0") {
        l.style.top = '54%'
    } else {
        l.style.top = '45%'
    }

    for(i = 0;i<p.length;i++){
        p[i].addEventListener('click', function () {
            console.log(this)
            var  url = this.getAttribute('data-value');
            if(url){
                location.href = url;
            }else{
                alert('活动无效');
            }
        }, false)
    }

</script>

</html>