| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- {% load staticfiles %}
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>下载</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .content {
- background: url(../static/img/dloadBj.jpg) no-repeat;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background-size: 100%;
- }
- .guideBox {
- display: none;
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.73);
- }
- .guideBox>div {
- position: absolute;
- right: 10px;
- top: 10px;
- width: 75%;
- }
- .logo,
- .companyName,
- .appName,
- .logoDescribe,
- .downloadBox {
- text-align: center;
- }
- .logo {
- margin-top: 15%;
- }
- .companyName,
- .appName {
- color: #fff;
- font-weight: 700;
- letter-spacing: 1px;
- }
- .companyName {
- font-size: 20px;
- line-height: 36px;
- }
- .appName {
- font-size: 18px;
- }
- .logoDescribe {
- margin-top: 35%;
- line-height: 40px;
- color: #424242;
- }
- .downloadBox {
- position: relative;
- background: #24b2e7 url(../static/img/dloadTxt.png) no-repeat center;
- width: 40%;
- height: 35px;
- border-radius: 30px;
- color: #fff;
- line-height: 34px;
- margin: 0 auto;
- background-size: 100%;
- }
- #browserDownload {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- }
- </style>
- </head>
- <body>
- <div class="content">
- <div class="logo">
- <img src="{% static '/img/appName.png'%}" width="25%" alt="">
- </div>
- <div class="logoName">
- <p class="companyName">云飞科技</p>
- <p class="appName">病虫害移动数据采集设备APP</p>
- </div>
- <div class="logoDescribe">
- <div>能够识别病虫害,查看其生活习性和防治方法并记录。</div>
- <div>河南云飞科技病虫害移动数据采集设备APP</div>
- </div>
- <div class="logo"></div>
- <div class="downloadBox">
- <a id="browserDownload" href="app_file/plant.apk" download="download"></a>
- </div>
- <div class="guideBox">
- <div>
- <img src="{% static '/img/guidanceImg.png'%}" width="100%" alt="">
- </div>
- </div>
- </div>
- <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
- <script>
- var browser = {
- versions: function () {
- var u = navigator.userAgent, app = navigator.appVersion;
- return { //移动终端浏览器版本信息
- trident: u.indexOf('Trident') > -1, //IE内核
- presto: u.indexOf('Presto') > -1, //opera内核
- webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
- gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
- mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
- ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
- android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
- iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
- iPad: u.indexOf('iPad') > -1, //是否iPad
- webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
- };
- }(),
- language: (navigator.browserLanguage || navigator.language).toLowerCase()
- }
- if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
- var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
- if ((ua.match(/MicroMessenger/i) == "micromessenger") && browser.versions.android) {
- //在微信中打开
- $('#browserDownload').on('click', function () {
- $('.guideBox').show();
- })
- $('.guideBox').on('click', function () {
- $(this).toggle();
- })
- }
- if (ua.match(/WeiBo/i) == "weibo") {
- //在新浪微博客户端打开
- }
- if (ua.match(/QQ/i) == "qq") {
- //在QQ空间打开
- }
- if (browser.versions.ios) {
- //是否在IOS浏览器打开
- }
- if (browser.versions.android && !(ua.match(/MicroMessenger/i) == "micromessenger")) {
- //是否在安卓浏览器打开
- $('.guideBox').hide();
- }
- } else {
- //否则就是PC浏览器打开
- }
- </script>
- </body>
- </html>
|