advertise.blade.php 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no0"
  8. />
  9. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  10. <title>全本免费看</title>
  11. <style>
  12. html,
  13. body {
  14. margin: 0 auto;
  15. padding: 0;
  16. /* max-width: 450px; */
  17. font-size: 100px;
  18. }
  19. p {
  20. margin: 0;
  21. padding: 0;
  22. }
  23. main {
  24. font-size: 0;
  25. position: relative;
  26. }
  27. main img {
  28. width: 100%;
  29. }
  30. .section-box {
  31. width: 95%;
  32. margin: 0 auto;
  33. }
  34. .welfare-box {
  35. font-size: 0.14rem;
  36. margin-bottom: 0.14rem;
  37. color: #282828;
  38. }
  39. .welfare-box span {
  40. display: inline-block;
  41. }
  42. .welfare-box .label {
  43. background: #ff4223;
  44. color: #fff;
  45. padding: 0.05rem 0.1rem;
  46. font-weight: bold;
  47. border-radius: 2px;
  48. }
  49. .welfare-box .strong {
  50. color: #5235ff;
  51. font-size: 0.18rem;
  52. font-weight: bold;
  53. }
  54. .down-for-free {
  55. background: linear-gradient(
  56. 0deg,
  57. rgba(243, 57, 31, 1),
  58. rgba(255, 122, 100, 1)
  59. );
  60. box-shadow: 0px 5px 9px 0px rgba(255, 85, 62, 0.3);
  61. border-radius: 23px;
  62. font-size: 0.16rem;
  63. font-weight: bold;
  64. color: #fff;
  65. text-align: center;
  66. padding: 0.14rem 0;
  67. width: 80%;
  68. margin: 0.24rem auto;
  69. cursor: pointer;
  70. }
  71. .disable-status {
  72. background: #ccc;
  73. box-shadow: none;
  74. }
  75. .rules-box {
  76. background: #f7f7f7;
  77. padding: 0.1rem 0.16rem;
  78. font-size: 0.13rem;
  79. color: #666;
  80. line-height: 0.2rem;
  81. }
  82. .rules-box .rule-title {
  83. font-weight: bold;
  84. color: #333;
  85. }
  86. .mask {
  87. position: fixed;
  88. top: 0;
  89. left: 0;
  90. bottom: 0;
  91. right: 0;
  92. background: rgba(0, 0, 0, 0.8);
  93. }
  94. .mask img {
  95. width: 100%;
  96. }
  97. @media screen and (max-width: 360px) {
  98. .welfare-box {
  99. font-size: 0.12rem;
  100. }
  101. .welfare-box .strong {
  102. font-size: 0.16rem;
  103. }
  104. .down-for-free {
  105. padding: 0.1rem 0;
  106. }
  107. .rules-box {
  108. font-size: 0.12rem;
  109. }
  110. }
  111. </style>
  112. </head>
  113. <body>
  114. <main>
  115. <img src="/static/img/banner.jpg" alt="米读App" />
  116. <div class="section-box">
  117. <p class="welfare-box">
  118. <span class="label">微信内福利</span>
  119. <span class="text">《{{$params['book_name']}}》</span>
  120. <span class="strong">全本免费看</span>
  121. </p>
  122. <p class="welfare-box">
  123. <span class="label">米读内福利</span>
  124. <span class="text">免费抽取iPhone XS</span>
  125. </p>
  126. <!-- 按钮变灰使用class disable-status -->
  127. <div class="down-for-free">立即下载</div>
  128. <div class="rules-box">
  129. <p class="rule-title">规则</p>
  130. <p class="rule-item">1. App下载注册成功后福利兑现</p>
  131. <p class="rule-item">2. 微信内福利在当前服务号兑现</p>
  132. <p class="rule-item">3. 米读内福利下载成功后兑现</p>
  133. </div>
  134. </div>
  135. </main>
  136. <div class="mask" style="display: none">
  137. <img src="/static/img/mask.png" alt="" />
  138. </div>
  139. </body>
  140. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  141. <script>
  142. var u = navigator.userAgent.toLowerCase();
  143. var uid="{{$params['uid']}}";
  144. var bid="{{$params['bid']}}";
  145. var ad_id="{{$ads['id']}}";
  146. var sign="{{$params['my_sign']}}";
  147. var timestamp="{{$params['timestamp']}}";
  148. var isWechat = u.match(/MicroMessenger/i) == "micromessenger";
  149. // 按钮状态 1-可以点击下载 0-无法点击下载
  150. var btn_status = 1;
  151. var btn = document.querySelector(".down-for-free");
  152. var mask = document.querySelector(".mask");
  153. btn.addEventListener(
  154. "click",
  155. function() {
  156. // 判断是否在微信内
  157. // 判断是否在微信内
  158. if (isWechat) {
  159. //mask.style.display = "block";
  160. $.ajax({
  161. url:'/advertise/recieveUserBehavior',
  162. type:'post',
  163. data:{
  164. 'uid':uid,
  165. 'bid':bid,
  166. 'position':'DOWNLOAD_BTN'
  167. }
  168. })
  169. //return;
  170. }
  171. // 执行下载操作
  172. location.href='/advertise/jump?uid='+uid+'&bid='+bid+'&ad='+ ad_id +'&sign=' +sign+ '&timestamp=' + timestamp;
  173. //location.href='https://url.cn/5T6fJWf';
  174. },
  175. false
  176. );
  177. mask.addEventListener("click", function() {
  178. mask.style.display = "none";
  179. }, false)
  180. </script>
  181. </html>