fcode.php 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">
  6. <meta name="format-detection" content="telephone=no">
  7. <title>首页</title>
  8. <style type="text/css">
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. html, body {
  14. width: 100%;
  15. height: 100%;
  16. font-family: PingFangSC-Light;
  17. }
  18. .container {
  19. width: 100%;
  20. height: 100%;
  21. min-height: 100%;
  22. display:-webkit-box;
  23. -webkit-box-align: center;
  24. -webkit-box-pack: center;
  25. background: rgba(0,0,0,0.6);
  26. }
  27. .push_content {
  28. position: relative;
  29. width: 573px;
  30. height: 637px;
  31. background: #fff;
  32. border-radius: 11px;
  33. box-sizing: border-box;
  34. text-align: center;
  35. padding: 50px 0 64px 0;
  36. -webkit-transform: scale(0);
  37. -webkit-transition: transform .4s ease;
  38. margin-bottom: 100px;
  39. }
  40. .push_label {
  41. font-size: 24px;
  42. color: #9B9B9B;
  43. }
  44. .push_title {
  45. font-size: 44px;
  46. color: #000000;
  47. font-weight: normal;
  48. margin-bottom: 19px;
  49. }
  50. .goods_img {
  51. position: relative;
  52. box-sizing: border-box;
  53. padding-top: 10px;
  54. padding-bottom: 30px;
  55. }
  56. .goods_img img {
  57. max-height: 278px;
  58. max-width: 320px;
  59. }
  60. .goods_img .label {
  61. width: 103px;
  62. height: 103px;
  63. position: absolute;
  64. right: 42px;
  65. bottom: 32px;
  66. background: #FD6C6C;
  67. border-radius: 50px;
  68. color: #fff;
  69. text-align: center;
  70. overflow: hidden;
  71. }
  72. .goods_img .label .sale_price {
  73. font-size: 24px;
  74. position: relative;
  75. top: 25px;
  76. }
  77. .goods_img .label .original_price {
  78. font-size: 14px;
  79. position: relative;
  80. top: 25px;
  81. }
  82. .goods_img .label .original_price span {
  83. position: relative;
  84. }
  85. .goods_img .label .original_price span:after {
  86. content: '';
  87. position: absolute;
  88. width: 100%;
  89. height: 1px;
  90. background: #fff;
  91. top: calc(50% - 1px);
  92. left: 0;
  93. }
  94. .btn span {
  95. display: block;
  96. width: 483px;
  97. height: 84px;
  98. line-height: 84px;
  99. background: #DCC27E;
  100. text-align: center;
  101. color: #fff;
  102. border-radius: 5px;
  103. margin: 0 auto;
  104. font-size: 33px;
  105. cursor: pointer;
  106. }
  107. .close_btn {
  108. position: absolute;
  109. top: 980px;
  110. right: 50%;
  111. margin-right: -36px;
  112. width: 73px;
  113. height: 73px;
  114. border-radius: 50px;
  115. }
  116. .close_btn img {
  117. width: 100%;
  118. height: 100%;
  119. }
  120. a {
  121. -webkit-tap-highlight-color: rgba(255,255,255,0);
  122. text-decoration: none;
  123. }
  124. </style>
  125. <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
  126. <script type="text/javascript">
  127. if ('addEventListener' in document) {
  128. document.addEventListener('DOMContentLoaded', function() {
  129. FastClick.attach(document.body);
  130. }, false);
  131. }
  132. </script>
  133. </head>
  134. <body>
  135. <div class="container">
  136. <div class="push_content">
  137. <a href="xmmz://p.lrlz.com/block/special?title=F码&special_id=283&isSpecial=true" class="schema_link">
  138. <p class="push_label">恭喜您获得新客专享礼</p>
  139. <h3 class="push_title">兰芝致美焕颜5件套</h3>
  140. <div class="goods_img">
  141. <img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/push/fcode/push_bg.png" class="img">
  142. <div class="label">
  143. <p class="sale_price">0.1元购</p>
  144. <p class="original_price"><span>专柜价267</span></p>
  145. </div>
  146. </div>
  147. <div class="btn"><span class="look_btn">查看详情</span></div>
  148. </a>
  149. </div>
  150. <span class="close_btn"><img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/push/fcode/close.png" class="img"></span>
  151. </div>
  152. <script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/new_bridge.js?<?php echo bonus_version(); ?>"></script>
  153. <script type="text/javascript">
  154. window.onload = function ()
  155. {
  156. var bridge = new Bridge();
  157. var ImgLoad = function (images,callback)
  158. {
  159. this.images = images;
  160. this.img_len = this.images.length;
  161. this.load_img = 1;
  162. this.imgLoad = function (img, callback) {
  163. var timer = setInterval(function () {
  164. if (img.complete) {
  165. callback(img)
  166. clearInterval(timer)
  167. }
  168. }, 50)
  169. };
  170. this.load = function () {
  171. var that = this;
  172. for (var i = 0; i < this.img_len; i++) {
  173. (function (i) {
  174. var j = i;
  175. that.imgLoad(that.images[j], function () {
  176. that.load_img++;
  177. if (that.img_len == that.load_img) {
  178. var jsonobject = {
  179. action: "resource_ready"
  180. };
  181. bridge.call_native_handler('on_native_click', JSON.stringify(jsonobject));
  182. callback();
  183. }
  184. })
  185. })(i)
  186. }
  187. }
  188. };
  189. var img_load = new ImgLoad(document.getElementsByClassName('img'),animate);
  190. img_load.load();
  191. function animate()
  192. {
  193. setTimeout(function(){
  194. document.getElementsByClassName('push_content')[0].setAttribute('style','-webkit-transform:scale(1)');
  195. },300);
  196. }
  197. document.getElementsByClassName('close_btn')[0].addEventListener('click', function ()
  198. {
  199. var jsonobject = {
  200. action: "back"
  201. };
  202. bridge.call_native_handler('on_native_click', JSON.stringify(jsonobject));
  203. });
  204. document.getElementsByClassName('close_btn')[0].addEventListener('touchstart', function ()
  205. {
  206. this.setAttribute('style','background:rgba(255,255,255,0.6);');
  207. });
  208. document.getElementsByClassName('close_btn')[0].addEventListener('touchend', function ()
  209. {
  210. this.setAttribute('style','background:rgba(255,255,255,0);');
  211. });
  212. document.getElementsByClassName('look_btn')[0].addEventListener('touchstart', function ()
  213. {
  214. this.setAttribute('style','background:rgba(220,194,126,0.6);');
  215. });
  216. document.getElementsByClassName('look_btn')[0].addEventListener('touchend', function ()
  217. {
  218. this.setAttribute('style','background:rgba(220,194,126,1);');
  219. });
  220. document.getElementsByClassName('schema_link')[0].addEventListener('click', function ()
  221. {
  222. var jsonobject = {
  223. action: "back"
  224. };
  225. call_native_handler('on_native_click', JSON.stringify(jsonobject));
  226. });
  227. }
  228. </script>
  229. </body>
  230. </html>