123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <title>下载旁路电缆监测</title>
- <script type="text/javascript">
- var resetWin=1;
- (function (doc, win) {
- var docEl = doc.documentElement,
- resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
- recalc = function () {
- var clientWidth = docEl.clientWidth;
- if (!clientWidth) return;
- if(clientWidth>=640){
- docEl.style.fontSize = '100px';
- }else{
- docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
- }
- };
- resetWin=recalc;
- if (!doc.addEventListener) return;
- win.addEventListener(resizeEvt, recalc, false);
- doc.addEventListener('DOMContentLoaded', recalc, false);
- })(document, window);
- </script>
- <style>
- body{
- width:100%;
- font-weight:400;
- color:rgb(153,153,153);
- position:relative;
- font-family: 'PingFangSC-Regular','微软雅黑',"Microsoft YaHei";
- }
- img{width: 100%}
- body,div,p,img{padding: 0;margin: 0;}
- .images{
- width: 1024px;
- margin: 0 auto;
- position:relative
- }
-
- .title{
- position: absolute;
- top: 210px;
- width: 100%;
- text-align: center;
- font-size: 60px;
- color: rgb(246,46,59);
- }
- .content{
- font-size: 28px;
- text-align: center;
- padding: 0 0 20px;
- color:#999;
- }
- .contentFirst{
- font-size: 42px;
- text-align: center;
- padding: 0 ;
- color:#333;
- }
- .download{
- width: 1024px;
- margin:0 -512px;
- left: 50%;
- }
- .confing{
- width: 48%;
- margin: 0 0 20px;
- background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
- background-size: 100%;
- height: 65px;
- line-height: 65px;
- text-align: center;
- border-radius: 30px;
- font-size:36px;
- color: #fff;
- float: left
- }
- .confingRight{
- float: right
- }
- @media screen and (min-width:600px) and (max-width:1024px){ /*当屏幕宽度在600~1024px*/
- .images{
- width: 80%;
- margin: 0 auto;
- position:relative
- }
- .title{
- position: absolute;
- top: 110px;
- width: 100%;
- text-align: center;
- font-size: 40px;
- color:rgb(246,46,59);
- }
- .download{
- width: 76%;
- padding:0 12%;
- }
- .content{
- font-size: 28px;
- text-align: center;
- padding: 0 0 10px;
- color:#999;
- }
- .contentFirst{
- font-size: 42px;
- text-align: center;
- padding: 0;
- color:#333;
- }
- .confing{
- width: 48%;
- margin: 0 0 20px;
- background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
- background-size: 100%;
- height: 50px;
- line-height: 50px;
- text-align: center;
- border-radius: 30px;
- font-size:28px;
- color: #fff;
- float: left
- }
- .confingRight{
- float: right
- }
- }
- @media screen and (max-width:600px){ /*屏幕宽度在小于等于600px*/
- .images{
- margin: 0rem 0 0;
- width: 100%;
- position:relative;
- float: left
- }
- .title{
- position: absolute;
- top: 1.5rem;
- width: 100%;
- text-align: center;
- font-size: 0.5rem;
- color: rgb(246,46,59);
- }
- .download{
- width: 76%;
- padding:0 12%;
- float: left;
- margin:0 auto;
- left: 0;
- }
- .confing{
- width: 48%;
- margin: 0 0 0.2rem;
- background: linear-gradient( 145deg, #ffac23 10%, #ffca48 100%);
- background-size: 100%;
- height: 0.7rem;
- line-height: 0.7rem;
- text-align: center;
- font-size: 0.28rem;
- border-radius: 0.5rem;
- color: #fff;
- float: left;
- }
- .confingRight{
- float: right
- }
- .content{
- width: 93%;
- float: left;
- font-size: 0.28rem;
- padding: 0 3.5% 0.2rem;
- text-align: center;
- color:#999;
- line-height:0.5rem;
- }
- .contentFirst{
- width: 93%;
- float: left;
- font-size: 0.42rem;
- text-align: center;
- padding: 0 3.5% ;
- color:#333;
- }
- }
- </style>
- <link rel="stylesheet" href="buttonLoading/ladda-themeless.min.css">
- </head>
- <body>
- <div class="images">
- <img src="static/cover.png" style="display:block">
- <?php if(!empty($_REQUEST["code"])&&isset($_REQUEST["code"])){?>
- <p class="contentFirst">邀请码: <?php echo $_REQUEST["code"];?></p>
- <p class="content">安装登录后注册请填写以上邀请码,该app请无视</p>
- <?php } ?>
- </div>
- <div class="download" style="position:fixed;bottom:10px;">
- <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>
- <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>
- </div>
- </body>
- <script src="buttonLoading/spin.min.js"></script>
- <script src="buttonLoading/ladda.min.js"></script>
- <script type="text/javascript">
- var u = navigator.userAgent
- var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
- document.getElementsByTagName('img')[0].style.height=document.documentElement.clientHeight+'px';
- if(isiOS){
- document.getElementById('ios').style.display="block";
- }
- else{
- document.getElementById('android').style.display="block";
- }
- Ladda.bind( '#android', {
- callback: function( instance ) {
- setTimeout( function() {
- instance.stop();
- }, 2000 );
- }
- } );
- </script>
- </html>
|