广告平台(站长下代理使用)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

LandingPage.html 4.3 KiB

3 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" name="viewport"
  5. content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6. <title>Landing Page</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. img {
  13. display: block;
  14. object-fit: cover;
  15. }
  16. .center {
  17. display: flex;
  18. align-items: center;
  19. justify-content: center;
  20. }
  21. .universal-bg {
  22. background-size: cover;
  23. background-repeat: no-repeat;
  24. }
  25. .box {
  26. overflow: hidden;
  27. width: 100vw;
  28. height: 100vh;
  29. background-image: url("http://www.hairuyi.com/View/index/img/appapi/comm/pullnew_bgimg.png");
  30. background-color: #8d2527;
  31. background-position: center top;
  32. }
  33. .dialog {
  34. overflow: hidden;
  35. margin: calc((266 / 750) * 100vw) auto;
  36. width: calc((669 / 750) * 100vw);
  37. height: calc((906 / 750) * 100vw);
  38. background-image: url("http://www.hairuyi.com/View/index/img/appapi/comm/pullnew_tipimg.png");
  39. }
  40. .pull-new {
  41. margin: calc((227 / 750) * 100vw) auto calc((57 / 750) * 100vw) auto;
  42. width: calc((409 / 750) * 100vw);
  43. height: calc((57 / 750) * 100vw);
  44. }
  45. .first-label-box {
  46. height: calc((59 / 750) * 100vw);
  47. font: bold calc((62 / 750) * 100vw) Source Han Sans CN;
  48. color: #FFEFCB;
  49. }
  50. .second-label-box {
  51. margin-top: calc((21 / 750) * 100vw);
  52. height: calc((47 / 750) * 100vw);
  53. font: 800 calc((48 / 750) * 100vw) Source Han Sans CN;
  54. color: #FFEFCB;
  55. }
  56. .img-btn {
  57. margin: calc((81 / 750) * 100vw) auto calc((9 / 750) * 100vw) auto;
  58. width: calc((183 / 750) * 100vw);
  59. height: calc((201 / 750) * 100vw);
  60. animation: btn-scale .6s linear infinite alternate;
  61. }
  62. .logo {
  63. margin: 0 auto;
  64. width: calc((136 / 750) * 100vw);
  65. height: calc((40 / 750) * 100vw);
  66. }
  67. @keyframes btn-scale {
  68. 0% {
  69. transform: scale(1);
  70. }
  71. 100% {
  72. transform: scale(1.2);
  73. }
  74. }
  75. </style>
  76. </head>
  77. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  78. <script>
  79. var qs = (function (a) {
  80. if (a == "") return {};
  81. var b = {};
  82. for (var i = 0; i < a.length; ++i) {
  83. var p = a[i].split('=');
  84. if (p.length != 2) continue;
  85. b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
  86. }
  87. return b;
  88. })(window.location.search.substr(1).split('&'));
  89. $(document).ready(function () {
  90. $.ajaxSettings.async = false;
  91. var style
  92. var mob_url
  93. var url = "invite/url?master_id=" + qs["master_id"]
  94. $.getJSON(url, function (data) {
  95. console.log(data.data.style)
  96. style = JSON.parse(data.data.style.toString())
  97. mob_url = data.data.mob_url
  98. });
  99. // console.log(style)
  100. // console.log(mob_url)
  101. loadJS(mob_url, function () {
  102. MobLink([
  103. {
  104. el: '#btn',//这个是对应点击按钮
  105. path: "/invited",
  106. params: {
  107. tgid: qs["invite_code"],//邀请码
  108. }
  109. },
  110. ]);
  111. });
  112. }
  113. )
  114. function loadJS(url, callback) {
  115. var script = document.createElement('script'),
  116. fn = callback || function () { $(".load").show(); };
  117. script.type = 'text/javascript';
  118. //IE
  119. if (script.readyState) {
  120. script.onreadystatechange = function () {
  121. if (script.readyState == 'loaded' || script.readyState == 'complete') {
  122. script.onreadystatechange = null;
  123. fn();
  124. }
  125. };
  126. } else {
  127. //其他浏览器
  128. script.onload = function () {
  129. fn();
  130. };
  131. }
  132. script.src = url;
  133. document.getElementsByTagName('head')[0].appendChild(script);
  134. }
  135. </script>
  136. <body>
  137. <div class="box universal-bg">
  138. <div class="dialog universal-bg">
  139. <img id='title' src="http://ossq.izhyin.cn/invite_url_title.png" alt="PullNew" class="pull-new" />
  140. <div id="content" class="first-label-box center">
  141. 恭喜您获得
  142. </div>
  143. <div id="subcontent" class="second-label-box center">
  144. 现金红包
  145. </div>
  146. <img src="http://ossq.izhyin.cn/invite_url_btn.png" alt="ImgBtn" class="img-btn" id='btn' />
  147. <img src="http://ossq.izhyin.cn/invite_url_bottom.png" alt="Logo" class="logo" id='logo' />
  148. </div>
  149. </div>
  150. </body>
  151. </html>