zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
							<!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" />
    <style>
        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
        pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
        strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
        figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
        }

        html {
            background: #fff;
        }

        body {
            line-height: 1.5;
            font-size: 0.24rem;
            font-family: sans-serif, "Microsoft YaHei";
            margin: auto;
            max-width: 750px;
            text-align: center;
            -webkit-font-smoothing: antialiased;
        }

        :focus {
            outline: 1;
        }

        article,
        aside,
        canvas,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section,
        summary {
            display: block;
        }

        ul {
            list-style: none;
        }

        blockquote,
        q {
            quotes: none;
        }

        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: "";
            content: none;
        }

        a {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
            text-decoration: none;
        }

        ins {
            background-color: #ff9;
            color: #000;
            text-decoration: none;
        }

        mark {
            background-color: #ff9;
            color: #000;
            font-style: italic;
            font-weight: bold;
        }

        del {
            text-decoration: line-through;
        }

        abbr[title],
        dfn[title] {
            border-bottom: 1px dotted #000;
            cursor: help;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #cccccc;
            margin: 0;
            padding: 0;
        }

        input,
        select {
            vertical-align: middle;
            padding: 0;
            margin: 0;
        }

        input[type="button"],
        input[type="submit"],
        input[type="reset"] {
            -webkit-appearance: none;
        }

        img {
            -webkit-tap-highlight-color: transparent;
        }

        i {
            font-style: normal;
        }

        body.dialog-open {
            position: fixed;
            width: 100%;
        }

        input::-webkit-search-cancel-button {
            display: none;
        }
        .sign-container {
            font-size: 0;
            position: relative;
        }

        .sign-bg {
            width: 100%;
        }

        .sign-num__total {
            position: absolute;
            font-size: 22px;
            top: 22%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            color: #fff;
        }

        .sign-result__box {
            position: absolute;
            font-size: 14px;
            color: #333;
            top: 28%;
            left: 10%;
            right: 10%;
            text-align: center;
            z-index: 9;
        }

        .sign-new_tips {
            margin: 0.25rem 0;
            padding: 0.35rem 0;
            background-color: #fff2ef;
            border: solid 1px #fe6138;
            color: #fe6138;
            text-align: justify;
        }

        .sign-new_tips p {
            padding: 0 0.5rem;
        }

        .sign-new_tips p:nth-child(1) {
            font-weight: bold;
            letter-spacing: 2px;
        }

        .sign-new_tips p:nth-child(2) {
            font-size: 13px;
        }

        .sign-day__list {
            margin-top: 10px;
        }

        .day-box {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .day-box .day-item {
            width: 15%;
            margin-bottom: 10px;
            font-size: 12px;
            color: #999;
        }

        .day-box .day-item img {
            width: 100%;
        }

        .day-box .day-item.nmr {
            margin-right: 0;
        }

        .day-item .sign-img {
            position: relative;
        }

        .day-item .sign-img::after {
            content: "";
            position: absolute;
            right: -52%;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            height: 2px;
            width: 62%;
            background: #ff4400;
            z-index: -1;
        }

        .day-item .sign-img.line-v::after {
            width: 2px;
            height: 110%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            top: 77%;
        }

        .even-box .sign-img::after {
            right: 0;
            left: -52%;
        }

        .day-box .day-item:not(:last-child) {
            margin-right: 0.2rem;
        }

        .even-box {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
        }

        .even-box .day-item:first-child {
            margin-right: 0px;
        }

        .even-box .day-item:not(:last-child) {
            margin-right: 0px;
        }

        .to-sign__record {
            display: block;
            text-align: right;
            color: #999;
            font-size: 12px;
        }

        .to-read {
            font-size: 0;
            margin-top: 10px;
        }

        .to-read img {
            width: 100%;
        }

        .sign-status {
            text-align: center;
        }

        .sign-status img {
            width: 60%;
            margin: 10px 0;
        }

    </style>
    <title>签到</title>
</head>
<body>
<main class="sign-page">
    <div class="sign-container">
        <img
                class="sign-bg"
                src="https://cdn-novel.iycdm.com/h5/sign/20190613_sign_bg.jpg"
                alt=""
        />
        <p class="sign-num__total">连续签到{{$sign_count}}天</p>
        <div class="sign-result__box">
            <p class="sign-notice" id="sign-notice"></p>
            <div class="sign-new_tips">
                <p>亲爱的读者们:</p>
                <p>为了确保更好的奖励体验,签到活动即将改版哦,敬请关注!</p>
            </div>
            <div class="sign-day__list">
                <!-- even-box -->
                <!-- 每行一个day-box 偶数个添加even-box -->
                <div class="day-box">
                    @for($i = 1;$i <=5;$i++)
                        <div class="day-item">
                            <div class="sign-img {{$i == 5?'line-v':''}}">
                                @if(($i <= $sign_count% 15) || $sign_count% 15 == 0 )
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_pass.png" alt="" />
                                @elseif($i == $sign_count % 15)
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_today.png" alt="" />
                                @else
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_coin.png" alt="" />
                                @endif

                            </div>
                            <span>第{{$i}}天</span>
                        </div>
                    @endfor

                </div>
                <div class="day-box even-box">
                    @for($j = 6;$j <=10;$j++)
                        <div class="day-item">
                            <div class="sign-img {{$j == 10?'line-v':''}}">
                                @if(($j <= $sign_count % 15 || $sign_count% 15 == 0) && $j != 7)
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_pass.png" alt="" />
                                @elseif($j == $sign_count % 15)
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_today.png" alt="" />
                                @elseif($j == 7)
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_7.png" alt="" />
                                @else
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_coin.png" alt="" />
                                @endif
                            </div>
                            <span>第{{$j}}天</span>
                        </div>
                    @endfor
                </div>
                <div class="day-box">
                    @for($k = 11;$k <=15;$k++)
                        <div class="day-item">
                            <div class="{{$k == 15?'line-v':'sign-img'}}">
                                @if(($k < $sign_count % 15 || $sign_count % 15 == 0 ) && $k != 15)
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_pass.png" alt="" />
                                @elseif($k == $sign_count % 15 && $k != 15)
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_today.png" alt="" />
                                    @elseif($k == 15)
                                        <img src="https://cdn-novel.iycdm.com/h5/sign/sign_15.png" alt="" />
                                @else
                                    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_coin.png" alt="" />
                                @endif

                            </div>
                            <span>第{{$k}}天</span>
                        </div>
                    @endfor
                </div>
            </div>
            <a href="/record/sign" class="to-sign__record">签到记录 &gt;</a>
            <a href="/continue" class="to-read">
                <img src="https://cdn-novel.iycdm.com/h5/sign/to_read.png" alt="" />
            </a>
    </div>
    </div>
    </main>
    </body>
    <script>
    // 根据签到时间的不同 显示不同的文案
    var signDay = {{$sign_count}}
            signDay = parseInt(signDay)
    var signCoin = {{$fee}}
        signCoin = parseInt(signCoin)
    function getNoticeText(signDay, signCoin) {
        var html = "";
        switch (signDay) {
            case 1:
            case 2:
                html =
                        "今天签到赠送" +
                        signCoin +
                        "书币，连续签到每日可领50书币，最高月送2000书币~";
                break;
            case 6:
                html = "今天签到赠送" + signCoin +"书币，明日签到可以领取小礼包哦~";
                break;
            case 7:
                html = "今天签到赠送" + signCoin + "书币，签到已满7日，额外送您100书币大礼包~";
                break;
            case 14:
                html = "今天签到赠送" + signCoin + "书币，明日签到可以领取大礼包哦~";
                break;
            case 15:
                html = "今天签到赠送" + signCoin + "书币，签到已满15日，送您150书币大礼包~";
                break;
            default:
                html = "今天签到赠送" + signCoin + "书币，额外连续签到最高月送2000书币~";
        }
        return html;
    }

    document.querySelector("#sign-notice").innerHTML = getNoticeText(signDay, signCoin);
</script>
</html>