bindHkFreeCurrency.blade.php 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  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. <link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgo=">
  14. <meta
  15. name="viewport"
  16. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  17. />
  18. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  19. <title>微信阅读小管家福利</title>
  20. <style>
  21. html,
  22. body {
  23. margin: 0 auto;
  24. padding: 0;
  25. max-width: 450px;
  26. font-size: 100px;
  27. }
  28. html {
  29. background: #ff3628;
  30. }
  31. p {
  32. margin: 0;
  33. }
  34. i {
  35. font-style: normal;
  36. }
  37. a{text-decoration: none}
  38. .container {
  39. position: relative;
  40. padding-bottom: .17rem;
  41. }
  42. .container .top_banner {
  43. font-size: 0;
  44. position: relative;
  45. }
  46. .container .top_banner img {
  47. width: 100%;
  48. }
  49. .container .top_banner .u_can_get {
  50. width: 1.5rem;
  51. height: 0.3rem;
  52. font-size: 0.14rem;
  53. line-height: 0.3rem;
  54. text-align: center;
  55. color: #d02a13;
  56. background: -webkit-gradient(linear, left bottom, left top, from(#ffb72c), to(#fff1af));
  57. background: linear-gradient(0deg, #ffb72c, #fff1af);
  58. -webkit-box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
  59. box-shadow: 0px 0.05rem 0.1rem 0px rgba(255, 81, 60, 0.4);
  60. border-radius: 0.15rem;
  61. position: absolute;
  62. left: 4%;
  63. top: 48%;
  64. }
  65. .container .top_banner .u_can_get span {
  66. font-size: 0.17rem;
  67. font-weight: bold;
  68. }
  69. .container .wrap {
  70. font-size: 0;
  71. width: 95%;
  72. margin: 0 auto;
  73. padding-bottom: 0.17rem;
  74. background: -webkit-gradient(linear, left bottom, left top, from(white), to(#fffbe8));
  75. background: linear-gradient(0deg, white, #fffbe8);
  76. -webkit-box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  77. box-shadow: 0px 0px 0.1rem 0px rgba(0, 0, 0, 0.08);
  78. border-radius: 2px;
  79. }
  80. .container .wrap img {
  81. width: 100%;
  82. }
  83. .container .wrap .to_get {
  84. display:block;
  85. background: #ffdb5f;
  86. color: #8a4b18;
  87. font-size: 0.17rem;
  88. font-weight: bold;
  89. width: 85%;
  90. margin: 0 auto 0.15rem;
  91. padding: 0.15rem 0;
  92. text-align: center;
  93. border-radius: 40px;
  94. }
  95. .container .wrap .get_notice {
  96. font-size: 0.12rem;
  97. color: #666;
  98. text-align: center;
  99. }
  100. .container .wrap .help_wrap {
  101. background: white;
  102. border: 1px solid #d6cea5;
  103. border-radius: 2px;
  104. width: 90%;
  105. margin: 0.54rem auto 0;
  106. padding: 0.16rem 0 0.44rem;
  107. font-size: 0.13rem;
  108. color: #666;
  109. }
  110. .container .wrap .help_wrap p {
  111. padding: 0 0.18rem;
  112. }
  113. .container .wrap .help_wrap .title {
  114. color: #333;
  115. font-size: 0.15rem;
  116. font-weight: bold;
  117. margin-bottom: 0.15rem;
  118. }
  119. .container .wrap .help_wrap .item {
  120. line-height: 1.8;
  121. }
  122. .container .wrap .help_wrap .item i {
  123. color: #ff4930;
  124. font-size: 0.15rem;
  125. font-weight: bold;
  126. }
  127. .alert {
  128. width: 100%;
  129. height: 100%;
  130. position: absolute;
  131. z-index: 100;
  132. left: 0;
  133. top: 0;
  134. overflow: hidden;
  135. background: rgba(0, 0, 0, 0.4);
  136. }
  137. .alert .content {
  138. width: 80%;
  139. height: 2rem;
  140. position: absolute;
  141. font-size: 0.11rem;
  142. left: 50%;
  143. top: 50%;
  144. margin-left: -40%;
  145. margin-top: -40%;
  146. text-align: center;
  147. background: #f7f7f7;
  148. border-radius: 4px;
  149. overflow: hidden;
  150. }
  151. .content .title {
  152. height: 50px;
  153. line-height: 50px;
  154. font-size: 0.16rem;
  155. text-align: center;
  156. position: relative;
  157. border-bottom: 1px solid #f7f7f7;
  158. background: #ff4930;
  159. color: #fff;
  160. }
  161. .content .title img {
  162. width: 0.32rem;
  163. height: 0.32rem;
  164. position: absolute;
  165. right: 4%;
  166. top: 50%;
  167. transform: translateY(-50%);
  168. }
  169. .content .content-text {
  170. display: flex;
  171. justify-content: center;
  172. align-items: center;
  173. flex-direction: column;
  174. height: calc(100% - 50px);
  175. }
  176. .content-text p {
  177. width: 100%;
  178. }
  179. .content .notice1 {
  180. font-size: .18rem;
  181. margin-bottom: .2rem;
  182. }
  183. .content .notice2 {
  184. font-size: .16rem;
  185. color: #666;
  186. }
  187. .show {
  188. display: block;
  189. }
  190. .hide {
  191. display: none;
  192. }
  193. /*# sourceMappingURL=main.css.map */
  194. </style>
  195. </head>
  196. <body>
  197. <main class="container">
  198. <div class="top_banner">
  199. <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_banner.jpg" alt="" />
  200. <p class="u_can_get"><span>{{$fee}}</span>书币 人人有份</p>
  201. </div>
  202. <div class="wrap">
  203. <img src="https://cdn-novel.iycdm.com/h5/20190411/free_currency_wrap.jpg" alt="" />
  204. @if($is_get)
  205. <a class="to_get" href="{{$url}}">马上去看书> ></a>
  206. <p class="get_notice">领取成功 {{$fee}}书币已经到账</p>
  207. @else
  208. <a class="to_get js-get">领取{{$fee}}书币奖励</a>
  209. <p class="get_notice">领取成功后,会自动发放到您的余额中</p>
  210. @endif
  211. <div class="help_wrap">
  212. <p class="title">阅读小管家给您提供优质阅读体验</p>
  213. <div class="help_item">
  214. <p class="item">1.成功添加就送<i>{{$fee}}</i>书币奖励,人人有份;</p>
  215. <p class="item">2.提供最划算充值优惠,看书更便宜;</p>
  216. <p class="item">3.找书快人一步,提供任何您想看的书籍哦;</p>
  217. <p class="item">4.1对1阅读管家优质服务,疑难问题优先解决;</p>
  218. <p class="item">5.更多福利,您想要,我们就有!</p>
  219. </div>
  220. </div>
  221. </div>
  222. </main>
  223. <div class="hide alert">
  224. <div class="content">
  225. <p class="title">
  226. 温馨提示
  227. <img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM1QUFCMEQwMEFEQzExRThCMUE5OUM1NzYzQzgzODc3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM1QUFCMEQxMEFEQzExRThCMUE5OUM1NzYzQzgzODc3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzVBQUIwQ0UwQURDMTFFOEIxQTk5QzU3NjNDODM4NzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzVBQUIwQ0YwQURDMTFFOEIxQTk5QzU3NjNDODM4NzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6qIoivAAAF/ElEQVR42uSb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" alt="" />
  228. </p>
  229. <div class="content-text">
  230. <p class="notice1">领取成功</p>
  231. <p class="notice2">{{$fee}}书币已到账</p>
  232. </div>
  233. </div>
  234. </div>
  235. </body>
  236. <script>
  237. window.onload=function(){
  238. var d = document;
  239. var is_get = {{$is_get}};
  240. var source = {{$source}};
  241. var fee = {{$fee}};
  242. var url = "{{$url}}";
  243. is_get = parseInt(is_get);
  244. fee = parseInt(fee);
  245. var btn = d.querySelector('.js-get');
  246. var get_notice = d.querySelector('.get_notice');
  247. var uid = {{$uid}}
  248. uid = parseInt(uid);
  249. if(is_get){
  250. return ;
  251. }
  252. btn.addEventListener("click",function(){
  253. ajax('POST','/freecurrency',function(){
  254. show();
  255. setTimeout(function () {
  256. get_notice.innerText = '领取成功 200书币已经到账';
  257. btn.innerText = '马上去看书> >';
  258. btn.setAttribute("href",url);
  259. },200);
  260. })
  261. });
  262. close();
  263. function ajax(method,url,callback){
  264. var xhr = new XMLHttpRequest();
  265. xhr.open(method, url, true);
  266. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  267. xhr.send('uid='+uid+'&fee='+fee+'&source='+source);
  268. xhr.onreadystatechange=function(){
  269. if (xhr.readyState ==4 && xhr.status==200)
  270. {
  271. callback();
  272. }
  273. }
  274. }
  275. function close() {
  276. d.querySelector('.close').addEventListener('click',function () {
  277. d.querySelector('.alert').setAttribute("class","hide alert");
  278. })
  279. }
  280. function show() {
  281. d.querySelector('.alert').setAttribute("class","show alert");
  282. }
  283. }
  284. </script>
  285. </html>