|
|
@@ -0,0 +1,436 @@
|
|
|
+<!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)
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_pass.png" alt="" />
|
|
|
+ @elseif($i == $sign_count)
|
|
|
+ <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 && $j != 7)
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_pass.png" alt="" />
|
|
|
+ @elseif($j == $sign_count)
|
|
|
+ <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 && $k != 15)
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_pass.png" alt="" />
|
|
|
+ @elseif($k == $sign_count && $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">签到记录 ></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>
|
