wx_share.php 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>下载旁路电缆监测</title>
  8. <script type="text/javascript">
  9. var resetWin=1;
  10. (function (doc, win) {
  11. var docEl = doc.documentElement,
  12. resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  13. recalc = function () {
  14. var clientWidth = docEl.clientWidth;
  15. if (!clientWidth) return;
  16. if(clientWidth>=640){
  17. docEl.style.fontSize = '100px';
  18. }else{
  19. docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
  20. }
  21. };
  22. resetWin=recalc;
  23. if (!doc.addEventListener) return;
  24. win.addEventListener(resizeEvt, recalc, false);
  25. doc.addEventListener('DOMContentLoaded', recalc, false);
  26. })(document, window);
  27. </script>
  28. <style>
  29. body{
  30. width:100%;
  31. font-weight:400;
  32. color:rgb(153,153,153);
  33. position:relative;
  34. font-family: 'PingFangSC-Regular','微软雅黑',"Microsoft YaHei";
  35. }
  36. img{width: 100%}
  37. body,div,p,img{padding: 0;margin: 0;}
  38. .images{
  39. width: 1024px;
  40. margin: 0 auto;
  41. position:relative
  42. }
  43. .title{
  44. position: absolute;
  45. top: 210px;
  46. width: 100%;
  47. text-align: center;
  48. font-size: 60px;
  49. color: rgb(246,46,59);
  50. }
  51. .content{
  52. font-size: 28px;
  53. text-align: center;
  54. padding: 0 0 20px;
  55. color:#999;
  56. }
  57. .contentFirst{
  58. font-size: 42px;
  59. text-align: center;
  60. padding: 0 ;
  61. color:#333;
  62. }
  63. .download{
  64. width: 1024px;
  65. margin:0 -512px;
  66. left: 50%;
  67. }
  68. .confing{
  69. width: 48%;
  70. margin: 0 0 20px;
  71. background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
  72. background-size: 100%;
  73. height: 65px;
  74. line-height: 65px;
  75. text-align: center;
  76. border-radius: 30px;
  77. font-size:36px;
  78. color: #fff;
  79. float: left
  80. }
  81. .confingRight{
  82. float: right
  83. }
  84. @media screen and (min-width:600px) and (max-width:1024px){ /*当屏幕宽度在600~1024px*/
  85. .images{
  86. width: 80%;
  87. margin: 0 auto;
  88. position:relative
  89. }
  90. .title{
  91. position: absolute;
  92. top: 110px;
  93. width: 100%;
  94. text-align: center;
  95. font-size: 40px;
  96. color:rgb(246,46,59);
  97. }
  98. .download{
  99. width: 76%;
  100. padding:0 12%;
  101. }
  102. .content{
  103. font-size: 28px;
  104. text-align: center;
  105. padding: 0 0 10px;
  106. color:#999;
  107. }
  108. .contentFirst{
  109. font-size: 42px;
  110. text-align: center;
  111. padding: 0;
  112. color:#333;
  113. }
  114. .confing{
  115. width: 48%;
  116. margin: 0 0 20px;
  117. background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
  118. background-size: 100%;
  119. height: 50px;
  120. line-height: 50px;
  121. text-align: center;
  122. border-radius: 30px;
  123. font-size:28px;
  124. color: #fff;
  125. float: left
  126. }
  127. .confingRight{
  128. float: right
  129. }
  130. }
  131. @media screen and (max-width:600px){ /*屏幕宽度在小于等于600px*/
  132. .images{
  133. margin: 0rem 0 0;
  134. width: 100%;
  135. position:relative;
  136. float: left
  137. }
  138. .title{
  139. position: absolute;
  140. top: 1.5rem;
  141. width: 100%;
  142. text-align: center;
  143. font-size: 0.5rem;
  144. color: rgb(246,46,59);
  145. }
  146. .download{
  147. width: 76%;
  148. padding:0 12%;
  149. float: left;
  150. margin:0 auto;
  151. left: 0;
  152. }
  153. .confing{
  154. width: 48%;
  155. margin: 0 0 0.2rem;
  156. background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
  157. background-size: 100%;
  158. height: 0.7rem;
  159. line-height: 0.7rem;
  160. text-align: center;
  161. font-size: 0.28rem;
  162. border-radius: 0.5rem;
  163. color: #fff;
  164. float: left;
  165. }
  166. .confingRight{
  167. float: right
  168. }
  169. .content{
  170. width: 93%;
  171. float: left;
  172. font-size: 0.28rem;
  173. padding: 0 3.5% 0.2rem;
  174. text-align: center;
  175. color:#999;
  176. line-height:0.5rem;
  177. }
  178. .contentFirst{
  179. width: 93%;
  180. float: left;
  181. font-size: 0.42rem;
  182. text-align: center;
  183. padding: 0 3.5% ;
  184. color:#333;
  185. }
  186. }
  187. </style>
  188. <link rel="stylesheet" href="buttonLoading/ladda-themeless.min.css">
  189. </head>
  190. <body>
  191. <div class="images">
  192. <img src="static/cover.png" style="display:block">
  193. <?php if(!empty($_REQUEST["code"])&&isset($_REQUEST["code"])){?>
  194. <p class="contentFirst">邀请码: <?php echo $_REQUEST["code"];?></p>
  195. <p class="content">安装登录后注册请填写以上邀请码,该app请无视</p>
  196. <?php } ?>
  197. </div>
  198. <div class="download" style="position:fixed;bottom:10px;">
  199. <div id="ios" style="display:none;float:none;margin:0px auto;width:80%;" class="confing" onclick="alert('ios还未上架');return;location.href='https://itunes.apple.com/us/app/%E5%A4%A9%E5%A4%A9%E5%90%91%E5%B0%9A/id1375914709?l=zh&ls=1&mt=8'">下载APP</div>
  200. <div id="android" style="display:none;float:none;margin:0px auto;width:80%;" class="confing confingRight ladda-button" onclick="location.href='cable.apk'" data-style="expand-left">下载APP</div>
  201. </div>
  202. </body>
  203. <script src="buttonLoading/spin.min.js"></script>
  204. <script src="buttonLoading/ladda.min.js"></script>
  205. <script type="text/javascript">
  206. var u = navigator.userAgent
  207. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  208. document.getElementsByTagName('img')[0].style.height=document.documentElement.clientHeight+'px';
  209. if(isiOS){
  210. document.getElementById('ios').style.display="block";
  211. }
  212. else{
  213. document.getElementById('android').style.display="block";
  214. }
  215. Ladda.bind( '#android', {
  216. callback: function( instance ) {
  217. setTimeout( function() {
  218. instance.stop();
  219. }, 2000 );
  220. }
  221. } );
  222. </script>
  223. </html>