yf_zd
/
yfwlwCut


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							{% 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/appName2.png'%}" width="25%" alt="">
        </div>
        <div class="logoName">
            <p class="companyName">测报数据采集终端App</p>
        </div>
        <div class="logoDescribe">
            <div>能够识别病虫害，查看其生活习性和防治方法并记录。</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>