应用下载页面

<html lang="zh-cmn-Hans"> <head> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="email=no" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <script type="text/javascript" src="static/rem.js" ></script> <script type="text/javascript" src="static/jquery.js" ></script> <title>应用下载页面</title> <style> *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; background-color: #FFFFFF; } .empty{ position: relative; width: 100%; min-height: 100%; background: url(/img/bg2x.png) no-repeat; background-size: 100% auto; } .logo-box{ width: 100%; height: 8rem; text-align: center; padding-top: 4.4375rem; } .logo-box img{ height: 12.314rem; } .button-img{ display: block; height: 2.21875rem; width: 9.866568rem; margin: 1.5rem auto 0 auto; } #tip-box{ position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,0.5); display: none; z-index: 1000; } .clear{ clear: both; } #tip-box img{ display: block; float: right; height: 5rem; padding: 1.3rem; } .content{ font-size: 0.8rem; color: #FFFFFF; font-weight: bold; width: 100%; text-align: center; } #close-btn{ font-size: 0.7rem; color: #FFFFFF; font-weight: bold; width: 30%; text-align: center; float: right; margin-top: 2rem; } .guide{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, .4); z-index: 100; } .guide .guide-img{ text-align: right; } .guide .guide-img .img{ width: 70px; height: 70px; margin-right: 10px; margin-top: 10px; margin-bottom: 20px; } .guide .text{ font-size: 14px; text-align: center; color: #FFFFFF; width: 120px; padding: 0 20px; height: 60px; border: 1px dashed #FFFFFF; border-radius: 60px; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; } </style> </head> <body> <div class="guide" id="guide-remind" style="display:none"> <div class="guide-img"> <img class="img" src="static/guide.png" /> </div> <div class="text"> <div>点击右上角选择</div> <div>在浏览器中打开~~</div> </div> </div>  <div id="tip-box"> <img src="static/arrow.png" /> <div class="clear"></div> <div class="content"> 请点击右上角，选择在浏览器中打开！ </div> <div id="close-btn">关闭</div> </div> <div class="empty"> <div style="width:100%;text-align:center;margin-top:30%;"> <img src="static/icon.png" style="width:35%;margin-bottom:30%;border-radius:50%"/> </div> <a id="J_weixin" href=""><img src="static/a.png" class="button-img" /></a> <a id="IOS-btn" href=""><img src="static/ios.png" class="button-img" /></a> </div> <script> $.ajax({url:"/hx/app/config",success:function(result){ console.log(result); $("#J_weixin").attr("href","https://app.vipbees.cn/app/caifeng"+result.appVersion+".apk"); $("#IOS-btn").attr("href",result.iosUrl); }}); var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})(); window.onload = function() { if(is_weixin) { document.getElementById('guide-remind').style.display = 'block' } var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS，不需要的可以去掉 var btn = document.getElementById('J_weixin'); if (is_weixin) { btn.onclick = function(e) { document.getElementById("tip-box").style.display = "block"; return false; } document.getElementById("close-btn").onclick = function() { document.getElementById("tip-box").style.display = 'none'; } }; } </script> </body> </html>

CINXE.COM

应用下载页面