yearactivityV3.blade.php 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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. }
  16. p {
  17. margin: 0;
  18. padding: 0;
  19. text-align: center;
  20. }
  21. .main_box {
  22. font-size: 0;
  23. position: relative;
  24. }
  25. .main_box img {
  26. width: 100%;
  27. }
  28. .main_box .intro {
  29. font-size: 0.15rem;
  30. line-height: 0.26rem;
  31. color: #612e24;
  32. text-indent: 2em;
  33. margin: 0.1rem;
  34. /*font-weight: 600;*/
  35. text-align: left;
  36. }
  37. .main_box .coupon {
  38. width: 90%;
  39. margin: 0 auto;
  40. }
  41. .main_box .coupon img{
  42. pointer-events: none;
  43. }
  44. .main_box .gray {
  45. color: #b4b4b4;
  46. font-size: 0.14rem;
  47. }
  48. .main_box .gray span {
  49. color: #ff3728;
  50. font-weight: bolder;
  51. }
  52. .purchase {
  53. display: block;
  54. width: 90%;
  55. margin: 0 auto 0.2rem;
  56. }
  57. .main_box .strong {
  58. font-size: 0.16rem;
  59. font-weight: 800;
  60. color: #f62b24;
  61. margin: 0.1rem;
  62. }
  63. .book-list {
  64. /* padding: 0.2rem 0; */
  65. background: #fff5f4;
  66. font-size: 0;
  67. }
  68. .book-list h3 {
  69. font-size: 0.16rem;
  70. color: #000;
  71. display: flex;
  72. justify-content: flex-start;
  73. align-items: center;
  74. }
  75. h3::before {
  76. content: "";
  77. display: inline-block;
  78. vertical-align: sup;
  79. width: 0.04rem;
  80. height: 0.16rem;
  81. border-radius: 4px;
  82. background: #ff7326;
  83. margin-right: 0.1rem;
  84. }
  85. h3 span {
  86. font-size: 0.14rem;
  87. color: #fe4c3f;
  88. margin-left: 0.1rem
  89. }
  90. .book-list__container {
  91. display: flex;
  92. justify-content: space-between;
  93. align-items: center;
  94. flex-flow: row wrap;
  95. padding: 0 0.1rem;
  96. }
  97. .book-item {
  98. width: 28%;
  99. margin-bottom: 0.1rem;
  100. }
  101. .book-item span {
  102. background: #ffe0e1;
  103. color: #ff7474;
  104. font-size: 0.12rem;
  105. margin-right: 0.05rem;
  106. padding: 0.02rem 0.06rem;
  107. border-radius: 20px;
  108. display: inline-block;
  109. margin-top: 0.1rem;
  110. }
  111. .coupon-dialog {
  112. position: fixed;
  113. top: 0;
  114. bottom: 0;
  115. left: 0;
  116. right: 0;
  117. background: rgba(0, 0, 0, 0.3);
  118. overflow: hidden;
  119. z-index: 99;
  120. }
  121. .dialog-box {
  122. position: absolute;
  123. width: 90%;
  124. top: 50%;
  125. left: 50%;
  126. transform: translate(-50%, -50%);
  127. }
  128. .dialog-box img {
  129. width: 100%;
  130. }
  131. .dialog-box .close {
  132. background: url(https://cdn-novel.iycdm.com/h5/activity-2018-10-26/close.png) center / contain no-repeat;
  133. width: 0.32rem;
  134. height: 0.32rem;
  135. margin: 0 auto;
  136. }
  137. </style>
  138. </head>
  139. <body>
  140. <main class="main_box">
  141. <div class="banner">
  142. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/banner.png" alt="">
  143. </div>
  144. <p class="intro">
  145. 365天内,全站小说任你畅读!一站式阅读所有小说,无需额外付费!不是每个人都像你这么幸运哦,时间有限,快使用优惠券成为最尊贵的VIP吧~
  146. </p>
  147. <input type="hidden" name="is_get" value="{{$is_get}}">
  148. <div class="coupon" data-value="{{$discount}}">
  149. @if($discount == 50)
  150. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/coupon_pick.png" alt="">
  151. @else
  152. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/coupon_pick_80.png" alt="">
  153. @endif
  154. </div>
  155. @if($discount == 50)
  156. <p class="gray">原价365元,领券立减50元,仅需<span>315</span>元</p>
  157. <p class="strong">每天0.8元,全站小说免费看</p>
  158. @elseif($discount == 80)
  159. <p class="gray">原价365元,领券立减80元,仅需<span>285</span>元</p>
  160. <p class="strong">每天0.7元,全站小说免费看</p>
  161. @endif
  162. <div>
  163. @if($code == 0)
  164. <!-- 活动进行中 -->
  165. <a class="purchase doing" href="{{$coupons_url}}" id="js-purchase-doing">
  166. {{-- <img src="https://cdn-novel.iycdm.com/h5/year_doing.png" alt="">--}}
  167. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/button.png" alt="">
  168. </a>
  169. @elseif($code == 1)
  170. <!-- 活动未开始 -->
  171. <a class="purchase undone " href="#">
  172. <img src="https://cdn-novel.iycdm.com/h5/year_undone.png" alt="">
  173. </a>
  174. @elseif($code == 2)
  175. <!-- 活动结束 -->
  176. <a class="purchase over " href="#">
  177. <img src="https://cdn-novel.iycdm.com/h5/year_over.png" alt="">
  178. </a>
  179. @elseif($code == 3)
  180. <!-- 已订购 -->
  181. <a class="purchase done " href="#">
  182. <img src="https://cdn-novel.iycdm.com/h5/year_done.png" alt="">
  183. </a>
  184. @endif
  185. </div>
  186. <div class="book-list">
  187. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/shuping.jpg" alt="">
  188. </div>
  189. </main>
  190. <div class="coupon-dialog" style="display:none">
  191. <div class="dialog-box">
  192. @if($discount == 80)
  193. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/dialog80.png" alt="">
  194. @else
  195. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-10/dialog50.png" alt="">
  196. @endif
  197. <div class="close"></div>
  198. </div>
  199. </div>
  200. </body>
  201. <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  202. <script>
  203. var isget = {{$is_get}}
  204. isget = parseInt(isget)
  205. var d = document.querySelector('.coupon-dialog')
  206. var c = document.querySelector('.close')
  207. function showDialog() {
  208. var s = document.body.style
  209. s.overflow = 'hidden'
  210. d.style.display = 'block'
  211. // ajax 自动打开领取框
  212. }
  213. c.addEventListener('click', function (e) {
  214. e.stopPropagation()
  215. d.style.display = 'none'
  216. closeDialog()
  217. }, false)
  218. function closeDialog() {
  219. document.body.style.overflow = ''
  220. }
  221. if(!isget){
  222. showDialog()
  223. }
  224. </script>
  225. </html>