appDownload_zx.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>下载</title>
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. .content {
  15. /* background: url(../static/img/dloadBj.jpg) no-repeat; */
  16. background: url(../static/img/lpcbj.jpg) no-repeat;
  17. position: absolute;
  18. left: 0;
  19. right: 0;
  20. top: 0;
  21. bottom: 0;
  22. background-size: 100%;
  23. }
  24. .guideBox {
  25. display: none;
  26. position: fixed;
  27. left: 0;
  28. right: 0;
  29. top: 0;
  30. bottom: 0;
  31. background: rgba(0, 0, 0, 0.73);
  32. }
  33. .guideBox>div {
  34. position: absolute;
  35. right: 10px;
  36. top: 10px;
  37. width: 75%;
  38. }
  39. .logo,
  40. .appName,
  41. .logoDescribe,
  42. .downloadBox {
  43. text-align: center;
  44. }
  45. .logo {
  46. margin-top: 15%;
  47. }
  48. .appName {
  49. color: #fff;
  50. font-weight: 700;
  51. letter-spacing: 1px;
  52. font-size: 18px;
  53. line-height: 90px;
  54. }
  55. .logoDescribe {
  56. margin-top: 35%;
  57. line-height: 40px;
  58. color: #424242;
  59. }
  60. .downloadBox {
  61. position: relative;
  62. /* background: #24b2e7 url(../static/img/dloadTxt.png) no-repeat center; */
  63. background: #70c895 url(../static/img/dloadTxt.png) no-repeat center;
  64. width: 40%;
  65. height: 35px;
  66. border-radius: 30px;
  67. color: #fff;
  68. line-height: 34px;
  69. margin: 0 auto;
  70. background-size: 100%;
  71. }
  72. #browserDownload {
  73. position: absolute;
  74. left: 0;
  75. right: 0;
  76. top: 0;
  77. bottom: 0;
  78. }
  79. </style>
  80. </head>
  81. <body>
  82. <div class="content">
  83. <div class="logo">
  84. <img src="{% static '/img/lpc.png'%}" width="25%" alt="">
  85. </div>
  86. <div class="logoName">
  87. <p class="appName">病虫测报统计识别设备APP</p>
  88. </div>
  89. <div class="logoDescribe">
  90. <div>能够识别病虫害,查看其生活习性和防治方法并记录。</div>
  91. <div>病虫测报统计识别设备APP</div>
  92. </div>
  93. <div class="logo"></div>
  94. <div class="downloadBox">
  95. <a id="browserDownload" href="app_file/plant.apk" download="download"></a>
  96. </div>
  97. <div class="guideBox">
  98. <div>
  99. <img src="{% static '/img/guidanceImg.png'%}" width="100%" alt="">
  100. </div>
  101. </div>
  102. </div>
  103. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  104. <script>
  105. var browser = {
  106. versions: function () {
  107. var u = navigator.userAgent, app = navigator.appVersion;
  108. return { //移动终端浏览器版本信息
  109. trident: u.indexOf('Trident') > -1, //IE内核
  110. presto: u.indexOf('Presto') > -1, //opera内核
  111. webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  112. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
  113. mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
  114. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  115. android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
  116. iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
  117. iPad: u.indexOf('iPad') > -1, //是否iPad
  118. webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
  119. };
  120. }(),
  121. language: (navigator.browserLanguage || navigator.language).toLowerCase()
  122. }
  123. if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
  124. var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
  125. if ((ua.match(/MicroMessenger/i) == "micromessenger") && browser.versions.android) {
  126. //在微信中打开
  127. $('#browserDownload').on('click', function () {
  128. $('.guideBox').show();
  129. })
  130. $('.guideBox').on('click', function () {
  131. $(this).toggle();
  132. })
  133. }
  134. if (ua.match(/WeiBo/i) == "weibo") {
  135. //在新浪微博客户端打开
  136. }
  137. if (ua.match(/QQ/i) == "qq") {
  138. //在QQ空间打开
  139. }
  140. if (browser.versions.ios) {
  141. //是否在IOS浏览器打开
  142. }
  143. if (browser.versions.android && !(ua.match(/MicroMessenger/i) == "micromessenger")) {
  144. //是否在安卓浏览器打开
  145. $('.guideBox').hide();
  146. }
  147. } else {
  148. //否则就是PC浏览器打开
  149. }
  150. </script>
  151. </body>
  152. </html>