|
@@ -0,0 +1,362 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
+ <title>签到</title>
|
|
|
+ <style>
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0;
|
|
|
+ max-width: 450px;
|
|
|
+ font-size: 100px;
|
|
|
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main_box {
|
|
|
+ font-size: 0.15rem;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main_box img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 310px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_info {
|
|
|
+ position: absolute;
|
|
|
+ left: 5px;
|
|
|
+ top: 5%;
|
|
|
+ display: flex;
|
|
|
+ text-align: left;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_info img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: 1.5px solid white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_info .user_name {
|
|
|
+ margin-left: 10px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_info .user_name div:nth-child(1) {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_info {
|
|
|
+ width: 85%;
|
|
|
+ position: absolute;
|
|
|
+ left: 25px;
|
|
|
+ top: 40%;
|
|
|
+ text-align: left;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_record {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_list {
|
|
|
+ position: absolute;
|
|
|
+ top: 60px;
|
|
|
+ width: 100%;
|
|
|
+ color: #333;
|
|
|
+ line-height: 25px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 13px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_day {
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_day-wei {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_day div:nth-child(1) {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_day img {
|
|
|
+ width: 20px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_line {
|
|
|
+ border-bottom: 4px #318cf5 solid;
|
|
|
+ position: absolute;
|
|
|
+ width: 35px;
|
|
|
+ top: 47%;
|
|
|
+ right: -20px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign_line-wei {
|
|
|
+ border-bottom: 4px #e5e5e5 solid;
|
|
|
+ }
|
|
|
+
|
|
|
+ .read_record {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .read_record .title {
|
|
|
+ text-align: left;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .read_record .title span {
|
|
|
+ border-left: 4px solid #318cf5;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_box {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_box {
|
|
|
+ font-size: 0.13rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_box div:nth-child(3) {
|
|
|
+ color: #318cf5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_box img {
|
|
|
+ width: 100px;
|
|
|
+ box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_box-featured {
|
|
|
+ padding: 0 20px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_info {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_name {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_name span:nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_details {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_category {
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_category span {
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 2px 5px;
|
|
|
+ background-color: #fff0d5;
|
|
|
+ color: #b3883d;
|
|
|
+ border-radius: 50px;
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog .dialog_content {
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%);
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog .dialog_close {
|
|
|
+ position: absolute;
|
|
|
+ top: 60%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%);
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ .hide{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .sign_record{
|
|
|
+ color: white;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+<main class="main_box">
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_v3_top_banner.jpg" alt="" />
|
|
|
+ <div class="top_info">
|
|
|
+ <div class="user_info">
|
|
|
+ @if($head_img)
|
|
|
+ <img
|
|
|
+ src="{{$head_img}}"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ @endif
|
|
|
+ <div class="user_name">
|
|
|
+ <div>{{$name}}</div>
|
|
|
+ <div>持有书币:{{$balance}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sign_info">
|
|
|
+ <div class="sign_record">
|
|
|
+ <span>已经连续签到 <span style="font-weight: bold;">{{$sign_count}}</span> 天</span>
|
|
|
+ <span><a href="/record/sign" class="sign_record">签到记录></a></span>
|
|
|
+ </div>
|
|
|
+ <div class="sign_list">
|
|
|
+ @foreach($fee_pool as $k=>$value)
|
|
|
+ @if($k > 0)
|
|
|
+ <div class="sign_day">
|
|
|
+ <div>{{$k}}天</div>
|
|
|
+ @if($day > $k)
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_v3_over.png" alt="" />
|
|
|
+ @elseif($day == $k)
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_v3_doing.png" alt="" />
|
|
|
+ @else
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_v3_undone.png" alt="" />
|
|
|
+ @endif
|
|
|
+ <div>{{$value}}书币</div>
|
|
|
+ <!-- 连接线 -->
|
|
|
+ @if($k != 7)
|
|
|
+ @if($k >= $day)
|
|
|
+ <div class="sign_line sign_line-wei"></div>
|
|
|
+ @else
|
|
|
+ <div class="sign_line"></div>
|
|
|
+ @endif
|
|
|
+ @endif
|
|
|
+ </div>
|
|
|
+ @endif
|
|
|
+ @endforeach
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="read_record">
|
|
|
+ <div class="title"><span></span>最近阅读</div>
|
|
|
+ <div class="book_list">
|
|
|
+ @foreach($read_record as $ks=>$item)
|
|
|
+ @if($ks <2)
|
|
|
+ <div class="book_box">
|
|
|
+ <a href="{{$item['url']}}">
|
|
|
+ <img src="{{$item['cover']}}" alt="" />
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div>{{$item['book_name']}}</div>
|
|
|
+ @if($item['update_count'])
|
|
|
+ <div>·更新{{$item['update_count']}}章</div>
|
|
|
+ @endif
|
|
|
+ </div>
|
|
|
+ @endif
|
|
|
+ @endforeach
|
|
|
+ <div class="book_box">
|
|
|
+ <a href="/recent"><img src="https://cdn-novel.iycdm.com/h5/sign/sign_v3_more.png" alt="" /></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="read_record">
|
|
|
+ <div class="title"><span></span>精选推荐</div>
|
|
|
+ <div class="book_box book_box-featured">
|
|
|
+ <img
|
|
|
+ src="https://cdn-novel.iycdm.com/book/cover/201901221445344027.jpeg?x-oss-process=image/resize,w_200/format,jpg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="book_info">
|
|
|
+ <div class="book_name">
|
|
|
+ <span>何以笙箫默</span><span>霸道总裁</span>
|
|
|
+ </div>
|
|
|
+ <div class="book_details">
|
|
|
+ 有人说,七年是一个轮回。 舞轻尘用七年时光,自以为修成正果,终于嫁给心爱男人,却不料,新婚夜,他将她狠狠踏入尘埃。 七年后,她携滔天恨意归来,一步一个血印,他的万里江山,他的如花美眷,她要一样样给他揉碎了!
|
|
|
+ </div>
|
|
|
+ <div class="book_category">
|
|
|
+ <span>先混厚爱</span>
|
|
|
+ <span>死去活来</span>
|
|
|
+ <span>死去活来</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog {{$is_alert? '':'hide'}}" >
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sign_v3_alert.png" class="dialog_content" />
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/sign/sing_v3_close.png" class="dialog_close" />
|
|
|
+ </div>
|
|
|
+</main>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ var dialogClose = document.querySelector(".dialog_close");
|
|
|
+ var dialog = document.querySelector(".dialog");
|
|
|
+ function dialogBehavior() {
|
|
|
+ dialogClose.addEventListener(
|
|
|
+ "click",
|
|
|
+ function() {
|
|
|
+ dialog.style.display = "none";
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ function init() {
|
|
|
+ dialogBehavior();
|
|
|
+ }
|
|
|
+ init();
|
|
|
+</script>
|
|
|
+</html>
|