zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
							<!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%;
        }

        html {
            background: #f7f7f7;
        }

        .sign-wrap {
            font-size: 0;
        }

        .sign-wrap .sign-banner {
            position: absolute;
            top: 0;
            left: 0;
        }

        .sign-wrap .every-day__get {
            position: absolute;
            top: 7.5%;
            left: 50%;
            -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
            font-size: 18px;
            color: #fff;
        }

        .sign-wrap .every-day__get i {
            font-weight: bold;
        }

        .sign-wrap .wrap-box {
            margin: 0 10px;
            background: white;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            font-size: 13px;
            padding: 20px;
            position: relative;
        }

        .sign-wrap .wrap-box .wrap-box__banner {
            position: absolute;
            top: 0%;
            left: 50%;
            -webkit-transform: translate(-50%, -56%);
            transform: translate(-50%, -56%);
            width: 70%;
        }

        .sign-wrap .sign-week__wrap {
            margin-top: 30%;
        }

        .sign-wrap .sign-week__wrap .title-text {
            margin-top: 9px;
            font-size: 13px;
            color: #666;
        }

        .sign-wrap .sign-week__wrap .title-text i {
            font-size: 14px;
            color: #74aeff;
            font-weight: bold;
        }

        .sign-wrap .sign-week__wrap .sign-progress__wrap {
            position: relative;
            padding-bottom: 50px;
        }

        .sign-wrap .sign-list__wrap {
            position: absolute;
            width: 100%;
            top: 0;
            left: 50%;
            -webkit-transform: translate(-56%, 8%);
            transform: translate(-56%, 8%);
        }

        .sign-wrap .sign-list__wrap .sign-list__top,
        .sign-wrap .sign-list__wrap .sign-list__bottom {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: distribute;
            justify-content: space-around;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }

        .sign-wrap .sign-list__wrap .sign-list__top {
            margin-bottom: 6%;
        }

        .sign-wrap .sign-list__wrap .sign-list__bottom {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
        }

        .sign-wrap .sign-list__wrap .sign-item {
            width: 24%;
            font-size: 0;
        }

        .sign-wrap .sign-list__wrap .sign-item img {
            width: 22px;
            height: 22px;
        }

        .sign-wrap .sign-list__wrap .sign-item .day-send,
        .sign-wrap .sign-list__wrap .sign-item .day-text {
            display: block;
            font-size: 11px;
            color: #999;
        }

        .sign-wrap .sign-list__wrap .sign-item .day-send {
            width: 55px;
            margin: 10% auto 0;
            border: 1px solid #74aeff;
            color: #74aeff;
            border-radius: 2px;
            position: relative;
        }

        .sign-wrap .sign-list__wrap .sign-item .day-send::before, .sign-wrap .sign-list__wrap .sign-item .day-send::after {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 6px;
            border-color: transparent transparent #74aeff transparent;
            position: absolute;
            top: 0%;
            left: 50%;
            -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
        }

        .sign-wrap .sign-list__wrap .sign-item .day-send::after {
            border-width: 5px;
            border-color: transparent transparent #fff transparent;
            -webkit-transform: translate(-50%, -93%);
            transform: translate(-50%, -93%);
        }

        .sign-wrap .sign-list__wrap .sign-item.cur .day-send {
            background: #74aeff;
            color: #fff;
        }

        .sign-wrap .sign-list__wrap .sign-item.cur .day-send::after {
            border-color: transparent transparent #74aeff transparent;
        }

        .sign-wrap .sign-list__wrap .sign-item.cur .day-text {
            color: #74aeff;
            font-weight: bold;
        }

        .sign-wrap .sign-to__read {
            position: relative;
        }

        .sign-wrap .sign-to__read .to-read {
            display: block;
            text-align: center;
            width: 55%;
            margin: 0 auto;
            height: 35px;
            line-height: 35px;
            background: #74aeff;
            color: #fff;
            border-radius: 18px;
            font-size: 14px;
            font-weight: bold;
        }

        .sign-wrap .sign-to__read .sign-record {
            position: absolute;
            color: currentColor;
            right: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            color: #999;
            font-size: 12px;
        }

        .sign-wrap img {
            width: 100%;
        }

        @media screen and (max-width: 320px) {
            .sign-wrap .sign-list__wrap .sign-list__top {
                margin-bottom: 0%;
            }
        }

        @media screen and (min-width: 414px) {
            .sign-wrap .sign-list__wrap .sign-list__top {
                margin-bottom: 8%;
            }
        }

        .sign-wrap .read-today__wrap {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .sign-wrap .read-today__wrap h3 {
            font-size: 16px;
            color: #333;
            text-align: left;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-bottom: 14px;
        }

        .sign-wrap .read-today__wrap h3::before {
            content: "";
            width: 3px;
            height: 16px;
            background: #74aeff;
            border-radius: 1px;
            margin-right: 4px;
        }

        .sign-wrap .read-today__wrap .book-wrap .book-name {
            font-size: 16px;
            color: #333;
            margin-bottom: 12px;
        }

        .sign-wrap .read-today__wrap .book-wrap .book-intro {
            -webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #999;
            font-size: 13px;
        }

        .sign-wrap .read-today__wrap .book-wrap .other-book {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }

        .sign-wrap .read-today__wrap .book-wrap .other-book .one,
        .sign-wrap .read-today__wrap .book-wrap .other-book .two {
            font-size: 12px;
            display: block;
            padding: 0.06rem 0.12rem;
            border-radius: 3px;
        }

        .sign-wrap .read-today__wrap .book-wrap .other-book .one {
            background: #ffe08d;
            color: #846a23;
        }

        .sign-wrap .read-today__wrap .book-wrap .other-book .two {
            background: #ffb8b8;
            color: #c44444;
        }

        .sign-wrap .read-today__wrap .book-wrap .other-book span {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: left;
            margin-left: 6px;
            font-size: 13px;
            color: #666;
        }

        .sign-wrap .read-today__wrap .book-wrap .other-book span a {
            color: #74aeff;
        }

        .sign-wrap .read-today__wrap .book-wrap .other-book:not(:last-child) {
            margin: 16px auto;
        }

        .sign-wrap .x-book__multi {
            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;
        }

        .sign-wrap .x-book__coverbox {
            position: relative;
        }

        .sign-wrap .x-book__cover {
            -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
            border-radius: 3px;
            display: block;
            border: 0.05px solid #fff;
            -webkit-transition: 0.6s;
            transition: 0.6s;
            width: 77px;
            height: 103px;
        }

        .sign-wrap .x-book__text--multi {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding-left: 20px;
            position: relative;
            text-align: left;
            width: calc(100% - 77px);
            height: 103px;
        }

    </style>
    <title>签到</title>
</head>
<body>
<main class="sign-wrap">
    <img src="https://cdn-novel.iycdm.com/h5/sign/sign_banner.jpg" alt="" class="sign-banner" />
    <span class="every-day__get">获得<i>{{$fee}}</i>书币</span>
    <div class="wrap-box sign-week__wrap">
        <img src="https://cdn-novel.iycdm.com/h5/sign/sign_hf.png" alt="" class="wrap-box__banner" />
        <p class="title-text">
            您已连续签到<i>{{$sign_count}}</i>天，明天签到获得<i>{{$fee}}</i>书币
        </p>
        <div class="sign-progress__wrap">
            <svg
                    xmlns="http://www.w3.org/2000/svg"
                    version="1.1"
                    x="0px"
                    y="0px"
                    viewBox="0 0 305 130"
            >
                <path
                        id="base"
                        fill="#fff"
                        stroke="#f1f7ff"
                        stroke-width="3"
                        opacity="0.5"
                        d="m14,25.4375l278,-0.4375l0,83l-259,0"
                />
                <path
                        id="fill"
                        fill="#fff"
                        stroke="#4895ff"
                        stroke-width="3"
                        opacity="0.5"
                        d="m14,25.4375l278,-0.4375l0,83l-259,0"
                />
            </svg>
            <div class="sign-list__wrap">
                <div class="sign-list__top">
                    <!-- 说明： 图片三天使用sign_3 七天使用sign_5 -->
                    <!-- 已签到过的item上加入cur的class -->
                    @for($i =1;$i<=4;$i++)
                        <div class="sign-item {{$sign_count >=$i ? 'cur':''}}">
                            @if($i == 3)
                                <img src="https://cdn-novel.iycdm.com/h5/sign/sign_3.png" alt="" />
                                @elseif($i ==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_c.png" alt="" />
                            @endif
                            <span class="day-send">{{$fee_pool[$i]}}书币</span>
                            <span class="day-text">第{{$day[$i]}}天</span>
                        </div>
                    @endfor
                </div>
                <div class="sign-list__bottom">
                    @for($j =5;$j<=7;$j++)
                        <div class="sign-item {{$sign_count >=$j ? 'cur':''}}">
                            @if($j == 3)
                                <img src="https://cdn-novel.iycdm.com/h5/sign/sign_3.png" alt="" />
                            @elseif($j ==7)
                                <img src="https://cdn-novel.iycdm.com/h5/sign/sign_5.png" alt="" />
                            @else
                                <img src="https://cdn-novel.iycdm.com/h5/sign/sign_c.png" alt="" />
                            @endif
                            <span class="day-send">{{$fee_pool[$j]}}书币</span>
                            <span class="day-text">第{{$day[$j]}}天</span>
                        </div>
                    @endfor
                </div>
            </div>
        </div>
        <div class="sign-to__read">
            <a href="/continue" class="to-read">继续看书&gt;&gt;</a>
            <a href="/record/sign" class="sign-record">签到记录&gt;</a>
        </div>
    </div>
    <div class="wrap-box read-today__wrap">
        <h3>今日必读</h3>
        <div class="book-wrap">
            @if($book1)
                <div class="x-book">
                    <div class="x-book__multi">
                        <div class="x-book__coverbox">
                            <a href="{{$book1->url}}"><img src="{{$book1->cover}}" class="x-book__cover"/></a>
                        </div>
                        <div class="x-book__text--multi">
                            <p class="book-name">{{$book1->book_name}}</p>
                            <p class="book-intro">
                                {{$book1->intro}}
                            </p>
                        </div>
                    </div>
                </div>
            @endif
            @if($book2)
                @foreach($book2 as $key=>$item)
                        <p class="other-book"><i class="{{$key%2 == 0? 'one':'two'}}">{{$item->category_name}}</i><span>{{$item->desc}}<a href={{$item->url}}>点击阅读&gt;</a></span></p>
                @endforeach
            @endif
        </div>
    </div>
</main>
</body>
<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.min.js"></script>
<script>
    // 每天有对应的进度条进度
    var sign = {{$sign_count}}
    var dayWithProgress = [0,0, 0.13, 0.26, 0.39, 0.68, 0.85, 1];
    // 可以把签到天数放入元素获取 或者直接js赋值
    var bar = new ProgressBar.Path("#fill", {
        easing: "easeInOut",
        duration: 1400
    });
    bar.set(0);
    bar.animate(dayWithProgress[sign]);
</script>
</html>