appDownload.html 5.3 KB

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