otherYearActivity.blade.php 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>全年免费看书</title>
  8. <style>
  9. html,
  10. body {
  11. margin: 0 auto;
  12. padding: 0;
  13. max-width: 450px;
  14. font-size: 100px;
  15. background: #ff572a;
  16. }
  17. p {
  18. margin: 0;
  19. padding: 0;
  20. text-align: center;
  21. }
  22. .main_box {
  23. font-size: 0;
  24. position: relative;
  25. }
  26. .main_box img {
  27. width: 100%;
  28. }
  29. .main_box .box {
  30. position: relative;
  31. background: #fef7e9;
  32. margin: 0 .1rem;
  33. padding: .2rem .1rem;
  34. top: -.6rem;
  35. border-radius: .2rem;
  36. }
  37. .main_box .intro {
  38. font-size: 0.16rem;
  39. /* font-weight: bold; */
  40. color: #c9391c;
  41. padding: 0.06rem;
  42. text-align: center;
  43. }
  44. .main_box .weight {
  45. font-size: .18rem;
  46. color: #ff572a;
  47. font-weight: bold;
  48. }
  49. .to-buy {
  50. display: block;
  51. width: 90%;
  52. margin: 0.1rem auto;
  53. background: #ff572a;
  54. color: #fff;
  55. font-size: .18rem;
  56. font-weight: bolder;
  57. text-align: center;
  58. text-decoration: none;
  59. border-radius: .3rem;
  60. padding: .1rem 0;
  61. }
  62. .over {
  63. background: #CCCCCC;
  64. }
  65. .intro span {
  66. font-size: 0.16rem;
  67. display: block;
  68. }
  69. .intro.intro-weight {
  70. font-size: .18rem;
  71. font-weight: bold;
  72. }
  73. .intro-weight span {
  74. display: inline;
  75. }
  76. .intro span.weight {
  77. font-weight: bolder;
  78. margin-top: 0.05rem;
  79. }
  80. .main_box .coupon {
  81. width: 90%;
  82. margin: 0 auto;
  83. }
  84. .main_box .gray {
  85. color: #b4b4b4;
  86. font-size: 0.14rem;
  87. }
  88. .main_box .gray span {
  89. color: #ff3728;
  90. font-weight: bolder;
  91. }
  92. .main_box .strong {
  93. font-size: 0.16rem;
  94. font-weight: 800;
  95. color: #fe7b27;
  96. margin: 0.1rem;
  97. }
  98. .book-list {
  99. padding: 0 .2rem;
  100. display: flex;
  101. justify-content: space-between;
  102. align-items: center;
  103. }
  104. .book-list .book-item {
  105. width: 30%;
  106. font-size: .14rem;
  107. }
  108. .book-item p {
  109. text-overflow: ellipsis;
  110. overflow: hidden;
  111. white-space: nowrap;
  112. color: #999;
  113. }
  114. .count-down {
  115. font-size: .14rem;
  116. text-align: center;
  117. background: #ffece2;
  118. padding: .1rem 0;
  119. margin: 0 .2rem .2rem;
  120. color: #c9391c;
  121. }
  122. .count-down .time {
  123. display: inline-block;
  124. background: #ff572a;
  125. color: #fff;
  126. width: .2rem;
  127. height: .2rem;
  128. border-radius: 3px;
  129. margin-right: .05rem;
  130. }
  131. .banner-box {
  132. width: 80%;
  133. margin: .2rem auto;
  134. }
  135. .d-none {
  136. display: none;
  137. }
  138. </style>
  139. </head>
  140. <body>
  141. <main class="main_box">
  142. <div class="banner">
  143. <img src="https://cdn-novel.iycdm.com/h5/20181106/banner.jpg" alt="">
  144. </div>
  145. <div class="box">
  146. <div class="coupon-box">
  147. <p class="intro">原价365元年费VIP 仅需68元即可订购</p>
  148. <p class="intro intro-weight">每天<span class="weight">2毛钱</span> 全站小说免费看</p>
  149. </div>
  150. @if($code == 0)
  151. <a href="{{$url}}" class="to-buy paying">立即订购</a>
  152. @else
  153. <a href="#" class="to-buy over">活动过期</a>
  154. @endif
  155. <div class="count-down">
  156. 活动倒计时 |
  157. <span class="time" id="day">0</span>天
  158. <span class="time" id="hour">00</span>:
  159. <span class="time" id="minute">00</span>:
  160. <span class="time" id="second">00</span>
  161. </div>
  162. <div class="banner-box" style="width:100%;margin-bottom:0">
  163. <img src="https://cdn-novel.iycdm.com/h5/20181106/2.png" alt="">
  164. </div>
  165. </div>
  166. </main>
  167. </body>
  168. <script>
  169. var time_diff = {{$time_diff}}
  170. var status = {{$code}}
  171. var p = document.querySelectorAll('.paying');
  172. var i = 0;
  173. var j = 0;
  174. status =parseInt(status);
  175. time_diff = parseInt(time_diff);
  176. function times() {
  177. var oDay = document.querySelector('#day');
  178. var oHour = document.querySelector('#hour');
  179. var oMinute = document.querySelector('#minute');
  180. var oSecond = document.querySelector('#second');
  181. time_diff--;
  182. if(time_diff>=0){
  183. day = Math.floor(time_diff/86400);
  184. hour = Math.floor((time_diff-day*86400)/3600);
  185. minute = Math.floor((time_diff - day * 86400 - hour * 3600) / 60);
  186. second = time_diff - day * 86400 - hour * 3600 - minute * 60;
  187. oDay.innerHTML = day;
  188. oHour.innerHTML = hour<10?'0'+hour:hour;
  189. oMinute.innerHTML = minute<10?'0'+minute:minute;
  190. oSecond.innerHTML = second<10?'0'+second:second;
  191. }
  192. }
  193. function over() {
  194. for(i = 0;i<p.length;i++){
  195. p[i].setAttribute('href','#');
  196. p[i].setAttribute('class','to-buy over');
  197. p[i].innerText='活动过期';
  198. }
  199. }
  200. times();
  201. if(status == 0){
  202. var timeInterval = setInterval(function () {
  203. if(time_diff<=0){
  204. clearInterval(timeInterval);
  205. over();
  206. }else{
  207. times()
  208. }
  209. },1000)
  210. }
  211. </script>
  212. </html>