appDownload_zc.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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/dload.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,.companyName,.appName,.logoDescribe,.downloadBox{
  39. text-align: center;
  40. }
  41. .logo{
  42. margin-top: 15%;
  43. }
  44. .companyName,.appName{
  45. color: #fff;
  46. font-weight: 700;
  47. letter-spacing: 1px;
  48. }
  49. .companyName{
  50. font-size: 20px;
  51. line-height: 36px;
  52. }
  53. .appName{
  54. font-size: 18px;
  55. }
  56. .logoDescribe{
  57. margin-top: 35%;
  58. line-height: 40px;
  59. color: #424242;
  60. }
  61. .downloadBox{
  62. position: relative;
  63. background: #24b2e7 url(../static/img/dload.png) no-repeat center;
  64. width: 40%;
  65. height: 35px;
  66. border-radius: 30px;
  67. color: #fff;
  68. line-height: 34px;
  69. margin: 80px 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. .warning {
  80. color: red;
  81. width: 55%;
  82. margin: -52px auto;
  83. font-weight: 550;
  84. font-size: 12px;
  85. }
  86. </style>
  87. </head>
  88. <body>
  89. <div class="content">
  90. <div class="logo">
  91. <img src="{% static '/img/commonLogo.png'%}" width="24%" alt="">
  92. </div>
  93. <div class="logoName">
  94. <p class="companyName">河南云飞</p>
  95. <p class="appName">知虫</p>
  96. </div>
  97. <div class="logoDescribe">
  98. <div>专业病虫害识别,随时记录数据。</div>
  99. <div>河南云飞知虫病虫害识别APP</div>
  100. </div>
  101. <div class="logo"></div>
  102. <div class="warning">注意:请在浏览器内打开,点击普通下载,以免安装包无法使用</div>
  103. <div class="downloadBox">
  104. <a id="browserDownload" href="app_file/deity.apk" download="download"></a>
  105. </div>
  106. <div class="guideBox">
  107. <div>
  108. <img src="{% static '/img/guidance.png'%}" width="100%" alt="">
  109. </div>
  110. </div>
  111. </div>
  112. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  113. <script>
  114. var browser = {
  115. versions: function () {
  116. var u = navigator.userAgent, app = navigator.appVersion;
  117. return { //移动终端浏览器版本信息
  118. trident: u.indexOf('Trident') > -1, //IE内核
  119. presto: u.indexOf('Presto') > -1, //opera内核
  120. webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  121. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
  122. mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
  123. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  124. android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
  125. iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
  126. iPad: u.indexOf('iPad') > -1, //是否iPad
  127. webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
  128. };
  129. }(),
  130. language: (navigator.browserLanguage || navigator.language).toLowerCase()
  131. }
  132. if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
  133. var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
  134. if ((ua.match(/MicroMessenger/i) == "micromessenger") && browser.versions.android) {
  135. //在微信中打开
  136. $('#browserDownload').on('click',function(){
  137. $('.guideBox').show();
  138. })
  139. $('.guideBox').on('click',function(){
  140. $(this).toggle();
  141. })
  142. }
  143. if (ua.match(/WeiBo/i) == "weibo") {
  144. //在新浪微博客户端打开
  145. }
  146. if (ua.match(/QQ/i) == "qq") {
  147. //在QQ空间打开
  148. }
  149. if (browser.versions.ios) {
  150. //是否在IOS浏览器打开
  151. }
  152. if (browser.versions.android && !(ua.match(/MicroMessenger/i) == "micromessenger")) {
  153. //是否在安卓浏览器打开
  154. $('.guideBox').hide();
  155. }
  156. } else {
  157. //否则就是PC浏览器打开
  158. }
  159. </script>
  160. </body>
  161. </html>