bindHkFreeCurrency.blade.php 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <!--
  2. /**
  3. * Created by PhpStorm.
  4. * User: z-yang
  5. * Date: 2019/4/11
  6. * Time: 15:33
  7. */
  8. -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8" />
  13. <meta
  14. name="viewport"
  15. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  16. />
  17. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  18. <title>微信客服</title>
  19. <style>
  20. html,
  21. body {
  22. margin: 0 auto;
  23. padding: 0;
  24. max-width: 450px;
  25. font-size: 100px;
  26. }
  27. html {
  28. background: #ff3628;
  29. }
  30. p {
  31. margin: 0;
  32. }
  33. i {
  34. font-style: normal;
  35. }
  36. a{text-decoration: none}
  37. .container {
  38. position: relative;
  39. padding-bottom: .17rem;
  40. }
  41. .container .top_banner {
  42. font-size: 0;
  43. position: relative;
  44. }
  45. .container .top_banner img {
  46. width: 100%;
  47. }
  48. .container .top_banner .u_can_get {
  49. width: 1.5rem;
  50. height: 0.3rem;
  51. font-size: 0.14rem;
  52. line-height: 0.3rem;
  53. text-align: center;
  54. color: #d02a13;
  55. background: -webkit-gradient(linear, left bottom, left top, from(#ffb72c), to(#fff1af));
  56. background: linear-gradient(0deg, #ffb72c, #fff1af);
  57. -webkit-box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
  58. box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
  59. border-radius: 0.15rem;
  60. position: absolute;
  61. left: 4%;
  62. top: 48%;
  63. }
  64. .container .top_banner .u_can_get span {
  65. font-size: 0.17rem;
  66. font-weight: bold;
  67. }
  68. .container .wrap {
  69. font-size: 0;
  70. width: 95%;
  71. margin: 0 auto;
  72. padding-bottom: 0.17rem;
  73. background: -webkit-gradient(linear, left bottom, left top, from(white), to(#fffbe8));
  74. background: linear-gradient(0deg, white, #fffbe8);
  75. -webkit-box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  76. box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  77. border-radius: 2px;
  78. }
  79. .container .wrap img {
  80. width: 100%;
  81. }
  82. .container .wrap .to_get {
  83. display:block;
  84. background: #ffdb5f;
  85. color: #8a4b18;
  86. font-size: 0.17rem;
  87. font-weight: bold;
  88. width: 85%;
  89. margin: 0 auto 0.15rem;
  90. padding: 0.15rem 0;
  91. text-align: center;
  92. border-radius: 40px;
  93. }
  94. .container .wrap .get_notice {
  95. font-size: 0.12rem;
  96. color: #666;
  97. text-align: center;
  98. }
  99. .container .wrap .help_wrap {
  100. background: white;
  101. border: 1px solid #d6cea5;
  102. border-radius: 2px;
  103. width: 90%;
  104. margin: 0.54rem auto 0;
  105. padding: 0.16rem 0 0.44rem;
  106. font-size: 0.13rem;
  107. color: #666;
  108. }
  109. .container .wrap .help_wrap p {
  110. padding: 0 0.18rem;
  111. }
  112. .container .wrap .help_wrap .title {
  113. color: #333;
  114. font-size: 0.15rem;
  115. font-weight: bold;
  116. margin-bottom: 0.15rem;
  117. }
  118. .container .wrap .help_wrap .item {
  119. line-height: 1.8;
  120. }
  121. .container .wrap .help_wrap .item i {
  122. color: #ff4930;
  123. font-size: 0.15rem;
  124. font-weight: bold;
  125. }
  126. /*# sourceMappingURL=main.css.map */
  127. </style>
  128. </head>
  129. <body>
  130. <main class="container">
  131. <div class="top_banner">
  132. <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_banner.jpg" alt="" />
  133. <p class="u_can_get"><span>200</span>书币 人人有份</p>
  134. </div>
  135. <div class="wrap">
  136. <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_wrap.jpg" alt="" />
  137. @if($is_get)
  138. <a class="to_get" href="{{$url}}">马上去看书> ></a>
  139. <p class="get_notice">领取成功 200书币已经到账</p>
  140. @else
  141. <a class="to_get js-get">领取200书币奖励</a>
  142. <p class="get_notice">领取成功后,会自动发放到您的余额中</p>
  143. @endif
  144. <div class="help_wrap">
  145. <p class="title">阅读小管家给您提供优质阅读体验</p>
  146. <div class="help_item">
  147. <p class="item">1.成功添加就送<i>200</i>书币奖励,人人有份;</p>
  148. <p class="item">2.提供最划算充值优惠,看书更便宜;</p>
  149. <p class="item">3.找书快人一步,提供任何您想看的书籍哦;</p>
  150. <p class="item">4.1对1阅读管家优质服务,疑难问题优先解决;</p>
  151. <p class="item">5.更多福利,您想要,我们就有!</p>
  152. </div>
  153. </div>
  154. </div>
  155. </main>
  156. </body>
  157. <script>
  158. window.onload=function(){
  159. var d = document;
  160. var is_get = {{$is_get}};
  161. var url = "{{$url}}";
  162. is_get = parseInt(is_get);
  163. var btn = d.querySelector('.js-get');
  164. var get_notice = d.querySelector('.get_notice');
  165. var uid = {{$uid}}
  166. uid = parseInt(uid);
  167. if(is_get){
  168. return ;
  169. }
  170. btn.addEventListener("click",function(){
  171. ajax('POST','/freecurrency',function(){
  172. get_notice.innerText = '领取成功 200书币已经到账';
  173. btn.innerText = '马上去看书> >';
  174. btn.setAttribute("href",url);
  175. })
  176. });
  177. function ajax(method,url,callback){
  178. var xhr = new XMLHttpRequest();
  179. xhr.open(method, url, true);
  180. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  181. xhr.send('uid='+uid);
  182. if (xhr.readyState==4 && xhr.status==200)
  183. {
  184. var res = xmlhttp.responseText;
  185. console.log(res)
  186. callback();
  187. }
  188. }
  189. }
  190. </script>
  191. </html>