clockIn.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
  6. <meta name="format-detection" content="telephone=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <title>读书挑战赛</title>
  9. <link rel="stylesheet" href="{:asset('/css/frontend/campaign/common.css')}">
  10. <link rel="stylesheet" href="{:asset('/css/frontend/campaign/base.css?v=2')}">
  11. <link rel="stylesheet" href="{:asset('/css/frontend/campaign/clockIn.css?v=7')}">
  12. <script>
  13. (function (doc, win) {
  14. var docEl = doc.documentElement,
  15. resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  16. recalc = function () {
  17. var clientWidth = docEl.clientWidth;
  18. if (!clientWidth) return;
  19. docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
  20. };
  21. recalc();
  22. if (!doc.addEventListener) return;
  23. win.addEventListener(resizeEvt, recalc, false);
  24. doc.addEventListener('DOMContentLoaded', recalc, false);
  25. window.log_host = '{$log_host}';
  26. window.theme = '{$Think.config.template.view_theme}';
  27. })(document, window);
  28. </script>
  29. </head>
  30. <body>
  31. <div class="clock_in">
  32. <input type="hidden" id="web_status" value="{$webStatus}" pop-type="{$popType}" channel-url="{$channelUrl}">
  33. <input type="hidden" id="match_id" user-id="{$userId}" act-next="{$active['next']}" data-match="{$userMatch['match_id']}" data-date="{$userMatch['match_date']}" read_num="{$userMatch['num']}" data-active="{$userMatch['active_id']}" data-kandian="{$userMatch['kandian']}">
  34. <div class="top">
  35. <div class="top_tip">
  36. <!-- <div class="top_shadow"></div>-->
  37. <!-- <div class="top_list">-->
  38. <!-- <div class="top_item">aaa</div>-->
  39. <!-- <div class="top_item">aaaaa</div>-->
  40. <!-- <div class="top_item">aaa</div>-->
  41. <!-- -->
  42. <!-- </div>-->
  43. </div>
  44. <!-- 明天打开 -->
  45. <div class="top_card tomo_clock_card">
  46. <div class="top_card_title">
  47. 本期书币奖池
  48. </div>
  49. <div class="top_all_money">
  50. {$dateNum['totalAward']}
  51. </div>
  52. <div class="top_pub_money ">
  53. <div class="top_num_issue">
  54. <span class="top_where_num">{$curMatch['match_date']}期</span>
  55. <span class="top_where_money">{$userMatch['kandian']}书币赛场</span>
  56. </div>
  57. </div>
  58. <div class="top_prev" >
  59. 明日开始打卡,别忘了阅读{$active['read_number']}章后来打卡哦~<span style="cursor: pointer">去看好书 ></span>
  60. </div>
  61. <div class="no_start_icon"></div>
  62. </div>
  63. <!-- 今天准备打卡 -->
  64. <div class="today_now_clock">
  65. <div class="today_now_num">
  66. <div class="today_now_num_left">{$curMatch['match_date']}期</div>
  67. <div class="today_now_num_right">{$curMatch['kandian']}书币赛场</div>
  68. </div>
  69. <div class="today_middle">
  70. <div class="today_middle_left">
  71. <img src="{:asset('/img/frontend/campaign/today_now_bg.png')}" alt="">
  72. </div>
  73. <div class="today_middle_right">
  74. <div class="today_times">
  75. 今日已读<span>{$curMatch['cur_read_num']}</span>章
  76. </div>
  77. <div class="today_middle_tip">每日累计阅读{$active['read_number'] ?? 3}章即可打卡,别忘了回来哦~</div>
  78. </div>
  79. </div>
  80. <div class="clock_status">
  81. <div class="clock_status_bg"></div>
  82. {for start="1" end="$active['period']+1" temp="1" name="i"}
  83. <div class="clock_status_item {if $userMatch['num'] >= $i }
  84. clock_status_finished
  85. {/if}">
  86. {$i}
  87. </div>
  88. {/for}
  89. <div class="clock_status_award"></div>
  90. </div>
  91. <div class="today_footer">
  92. <span class="today_footer_tip">坚持{$curMatch['period']}天阅读打卡瓜分<span>{$curMatch['preKandian']}</span>书币</span>
  93. <span class="see_more_btn" style="cursor: pointer">去看好书></span>
  94. </div>
  95. </div>
  96. <!-- 打卡成功 -->
  97. <div class="charge_common today_success">
  98. <div class="today_now_num">
  99. <div class="today_now_num_left">{$curMatch['match_date']}期</div>
  100. <div class="today_now_num_right">{$curMatch['kandian']}书币赛场</div>
  101. </div>
  102. <div class="today_middle">
  103. <div class="today_middle_left">
  104. <img src="{:asset('/img/frontend/campaign/today_clock_success.png')}" alt="">
  105. </div>
  106. <div class="today_middle_right">
  107. <div class="today_success_text">
  108. 今日打卡成功!
  109. </div>
  110. <div class="today_times">
  111. 明天继续加油~
  112. </div>
  113. </div>
  114. </div>
  115. <div class="clock_status">
  116. <div class="clock_status_bg"></div>
  117. {for start="1" end="$active['period']+1" temp="1" name="i"}
  118. <div class="clock_status_item {if $userMatch['num'] >= $i }
  119. clock_status_finished
  120. {/if}">
  121. {$i}
  122. </div>
  123. {/for}
  124. <div class="clock_status_award"></div>
  125. </div>
  126. <div class="today_footer">
  127. <span class="today_footer_tip">坚持{$curMatch['period']}天阅读打卡瓜分<span>{$curMatch['preKandian']}</span>书币</span>
  128. <span class="see_more_btn" style="cursor: pointer">去看好书></span>
  129. </div>
  130. </div>
  131. <!-- 挑战成功 -->
  132. <div class="charge_common charge_sucess">
  133. <div class="today_now_num">
  134. <div class="today_now_num_left">{$userMatch['match_date']}期</div>
  135. <div class="today_now_num_right">{$userMatch['kandian']}书币赛场</div>
  136. </div>
  137. <div class="charge_success_text">
  138. <div>恭喜您!</div>
  139. <div>已完成本次挑战</div>
  140. </div>
  141. <div class="recharge_img">
  142. <img src="{:asset('/img/frontend/campaign/recharge_success_icon.png')}" alt="">
  143. </div>
  144. <div class="recharge_text">
  145. 明日开奖,瓜分<span>{$curMatch['preKandian']}</span>书币
  146. </div>
  147. <div class="clock_status">
  148. <div class="clock_status_bg"></div>
  149. {for start="1" end="$active['period']+1" temp="1" name="i"}
  150. <div class="clock_status_item {if $userMatch['num'] >= $i }
  151. clock_status_finished
  152. {/if}">
  153. {$i}
  154. </div>
  155. {/for}
  156. <div class="clock_status_award"></div>
  157. </div>
  158. </div>
  159. <!-- 领取奖励 -->
  160. <div class="charge_common get_awrard">
  161. <div class="today_now_num">
  162. <div class="today_now_num_left">{$userMatch['match_date']}期</div>
  163. <div class="today_now_num_right">{$userMatch['kandian']}书币赛场</div>
  164. </div>
  165. <div class="charge_success_text">
  166. <div>恭喜您!</div>
  167. <div class="small">已完成本次挑战</div>
  168. </div>
  169. <div class="recharge_img">
  170. <img src="{:asset('/img/frontend/campaign/recharge_success_icon.png')}" alt="">
  171. </div>
  172. <div class="recharge_text">
  173. 打败了<span>{$dateNum['canquer']}</span>用户
  174. </div>
  175. <div class="recharge_text">
  176. 成功瓜分<span>{$curMatch['award']}</span>书币
  177. </div>
  178. <div class="clock_status">
  179. <div class="clock_status_bg"></div>
  180. {for start="1" end="$active['period']+1" temp="1" name="i"}
  181. <div class="clock_status_item {if $userMatch['num'] >= $i }
  182. clock_status_finished
  183. {/if}">
  184. {$i}
  185. </div>
  186. {/for}
  187. <div class="clock_status_award"></div>
  188. </div>
  189. </div>
  190. <!-- 挑战失败 -->
  191. <div class="charge_common charge_failed">
  192. <div class="today_now_num">
  193. <div class="today_now_num_left">{$userMatch['match_date']}</div>
  194. <div class="today_now_num_right">{$userMatch['kandian']}书币赛场</div>
  195. </div>
  196. <div class="charge_success_text">
  197. <div>很遗憾</div>
  198. <div class="small">您未能完成连续打卡挑战</div>
  199. </div>
  200. <div class="recharge_img">
  201. <img src="{:asset('/img/frontend/campaign/recharge_failed.png')}" alt="">
  202. </div>
  203. <div class="recharge_text" style="cursor: pointer">
  204. 别灰心,赶快报名下一期挑战赛吧!
  205. </div>
  206. <div class="clock_status">
  207. <div class="clock_status_bg"></div>
  208. {for start="1" end="$active['period']+1" temp="1" name="i"}
  209. <div class="clock_status_item {if $userMatch['num'] >= $i }
  210. clock_status_finished
  211. {/if}">
  212. {$i}
  213. </div>
  214. {/for}
  215. <div class="clock_status_award"></div>
  216. </div>
  217. </div>
  218. <div class="top_my_change">
  219. </div>
  220. <div class="top_change_rule"></div>
  221. </div>
  222. <div class="top_my_change">
  223. </div>
  224. <div class="top_change_rule"></div>
  225. </div>
  226. <div class="huodong_over">
  227. <div class="huodong_btn_common huodong_btn_tomo">明日开奖</div>
  228. <div class="huodong_btn_common huodong_btn_get_award" style="cursor: pointer" >领取奖励</div>
  229. <div class="huodong_btn_common huodong_btn_recharge_next" style="cursor: pointer">别灰心,赶快报名下一期挑战赛吧!</div>
  230. <div class="huodong_btn_common huodong_btn_more_award" style="cursor: pointer">精彩书籍</div>
  231. </div>
  232. <!-- 活动未结束的主要内容 -->
  233. <div class="content">
  234. <div class="award_status award_status_three">
  235. <div class="bg_img">
  236. <div class="award_item">
  237. <div class="award_top">截至目前可分得</div>
  238. <div class="award_bottom">
  239. <div class="award_title">{$curMatch['preKandian']}</div>
  240. <div class="award_tip">书币</div>
  241. <div class="award_line"></div>
  242. </div>
  243. </div>
  244. <div class="award_item sign-d">
  245. <div class="award_top">已打卡人数</div>
  246. <div class="award_bottom">
  247. <div class="award_title">{$dateNum['signNum']}</div>
  248. <div class="award_tip">人已打卡</div>
  249. <div class="award_line"></div>
  250. </div>
  251. </div>
  252. <div class="award_item ">
  253. <div class="award_top sign-b">报名人数</div>
  254. <div class="award_bottom">
  255. <div class="award_title">{$dateNum['lSignNum']}</div>
  256. <div class="award_tip">已报名</div>
  257. <div class="award_line"></div>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. <div class="now_btn active_now_btn " style="cursor: pointer">
  263. 成功报名!明日开始打卡
  264. </div>
  265. {if condition="!empty($like)"}
  266. <div class="books">
  267. <div class="books_title">
  268. <span class="books_title_left"></span>
  269. <span class="bookd_title_text">精品好书推荐</span>
  270. <span class="books_title_right"></span>
  271. </div>
  272. <div class="books-title-tip">{$percent}%的书友在看</div>
  273. <div class="book_list">
  274. {volist name="like" id="l"}
  275. <div class="book_item" style="cursor: pointer" data-bookId='{$l.book_id}'>
  276. <img class='book_img' src="{$l.image}" alt="" onerror='notfind()'>
  277. <div class="book_name">{$l.book_name}</div>
  278. <div class="book_author">{$l.author}</div>
  279. </div>
  280. {/volist}
  281. </div>
  282. </div>
  283. {/if}
  284. </div>
  285. </div>
  286. <!-- 挑战规则 -->
  287. <div class="charge_rule_pop common_pop">
  288. <div class="common_pop_content" >
  289. <div class="recharge_top_bg"></div>
  290. <p style="height:200px;overflow-y: scroll">{$active['copywriter']}</p>
  291. <!-- <p>1、参与方式<br>-->
  292. <!-- (1)选择并通过余额支付-->
  293. <!-- 加入不同的挑战,挑战期数以支付当天为准如12月01日参与挑战,则为1202期。<br>-->
  294. <!-- (2)报名第二天开始打卡,每天阅读15分钟后重新进入挑战赛页面<br>-->
  295. <!-- (3)选择并通过余额支付-->
  296. <!-- 加入不同的挑战,挑战期数以支付当天为准如12月01日参与挑战,则为1202期。<br>-->
  297. <!-- (4)报名第二天开始打卡,每天阅读15分钟后重新进入挑战赛页面<br>-->
  298. <!-- </p>-->
  299. <div class="pop_close" style="cursor: pointer"></div>
  300. </div>
  301. </div>
  302. <!-- 打卡成功 -->
  303. <div class="clock_sign_success common_pop">
  304. <div class="common_pop_content">
  305. <div class="clock_sign_success_text clock_sign_success_text_top">
  306. 再坚持<span class='clock_sign_success_span'>{$userMatch['num']?:0}</span>天
  307. </div>
  308. <div class="clock_sign_success_text clock_sign_success_text_6">
  309. <!-- 再坚持<span class='clock_sign_success_span_need'>{$curMatch['period']-$userMatch['num']}</span>天-->
  310. 可瓜分<span class='clock_sign_success_span_count'>{$curMatch['preKandian']}书币</span>
  311. </div>
  312. <div class="clock_sign_success_text clock_sign_success_text_7" style="display: none;">
  313. 明日开奖,可瓜分<span class='clock_sign_success_span_count'>{$curMatch['preKandian']}书币</span>
  314. </div>
  315. <div class="pop_close" style="cursor: pointer" ></div>
  316. </div>
  317. </div>
  318. <!-- 打卡失败 -->
  319. <div class="clock_sign_fail common_pop">
  320. <div class="common_pop_content">
  321. <div class="clock_sign_success_text clock_sign_success_text_top">
  322. 您今日阅读章节还未满<span>{$active['read_number']}</span>章
  323. </div>
  324. <div class="clock_sign_fail_btn" style="cursor: pointer">去看好书 ></div>
  325. <div class="pop_close" style="cursor: pointer"></div>
  326. </div>
  327. </div>
  328. <!-- 领取奖励 -->
  329. <div class="clock_sign_get_award common_pop">
  330. <div class="common_pop_content">
  331. <div class="clock_sign_get_award_text">
  332. 成功瓜分<span>{$curMatch['award']}</span>书币
  333. </div>
  334. <div class="pop_close" style="cursor: pointer"></div>
  335. </div>
  336. </div>
  337. <!-- 昨日忘记打卡 -->
  338. <div class="clock_forget_sign common_pop">
  339. <div class="common_pop_content">
  340. <div class="clock_forget_text">
  341. 挑战失败,失去瓜分<span>{$curMatch['preKandian']}</span>书币资格
  342. </div>
  343. <div class="clock_forget_tip">充值任意金额,可获得1次补签机会</div>
  344. <div class="clock_forget_btn" style="cursor: pointer">去补签 ></div>
  345. <div class="clock_forget_footer">挑战期间可补签1次</div>
  346. <div class="pop_close" style="cursor: pointer"></div>
  347. </div>
  348. </div>
  349. <!-- 补签成功 -->
  350. <div class="clock_supple_success common_pop">
  351. <div class="common_pop_content">
  352. <div class="clock_forget_tip clock_supple_success_tip">记得阅读{$active['read_number']}章后</div>
  353. <div class="clock_forget_tip">准时打卡哦~</div>
  354. <div class="pop_close" style="cursor: pointer"></div>
  355. </div>
  356. </div>
  357. <!-- 报名成功 -->
  358. <div class="clock_enter_success common_pop">
  359. <div class="common_pop_content">
  360. <div class="enter_title">{$userMatch['kandian']}</div>
  361. <div class="enter_tip">成功加入{$userMatch['kandian']}书币挑战</div>
  362. <div class="enter_which">第 <span>{$userMatch['match_date']}</span> 期挑战赛</div>
  363. <div class="enter_tip_text">记得每日阅读{$active['read_number']}章后,准时打卡哦~</div>
  364. <div class="clocl_enter_success_see_book" style="cursor: pointer">去看好书 ></div>
  365. <div class="clock_enter_success_rule_btn">查看详细规则 ></div>
  366. <div class="pop_close" style="cursor: pointer"></div>
  367. </div>
  368. </div>
  369. <!-- 挑战失败 -->
  370. <div class="clock_charge_fail common_pop">
  371. <div class="common_pop_content">
  372. <div class="clock_charge_fail_tip clock_charge_fail_tip_top">挑战失败</div>
  373. <div class="clock_charge_fail_tip">失去瓜分<span>{$curMatch['preKandian']}</span>书币资格!</div>
  374. <div class="pop_close" style="cursor: pointer"></div>
  375. </div>
  376. </div>
  377. <script type="text/javascript" src="{:asset('/js/frontend/campaign/zepto.min.js')}"></script>
  378. <script type="text/javascript" src="{:asset('/libs/Zepto-Cookie/zepto.cookie.min.js')}"></script>
  379. <script type="text/javascript" src="{:asset('/js/frontend/campaign/common.js?v=5')}"></script>
  380. <script type="text/javascript" src="{:asset('/js/frontend/common.js?v=5')}"></script>
  381. <script type="text/javascript" src="{:asset('/js/frontend/cps_log.js')}"></script>
  382. <script type="text/javascript" src="{:asset('/js/frontend/campaign/clockIn.js?v=3')}"></script>
  383. </body>
  384. </html>