appDownload.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  8. <meta content="yes" name="apple-mobile-web-app-capable" />
  9. <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  10. <meta content="telephone=no" name="format-detection" />
  11. <title>移动客户端</title>
  12. <style>
  13. html {
  14. margin: 0;
  15. padding: 0;
  16. }
  17. body {
  18. margin: 0;
  19. padding: 0;
  20. }
  21. @media screen and (max-width: 750px) {
  22. .el-message-box {
  23. width: 60% !important;
  24. }
  25. }
  26. .app_box {
  27. width: 100%;
  28. background-size: cover;
  29. background-position: center;
  30. background-image: url("./img/pic_beijing.png");
  31. padding-top: 62pt;
  32. padding-bottom: 12pt;
  33. }
  34. .app_logo {
  35. width: 50pt;
  36. height: 50pt;
  37. display: block;
  38. margin: 0 auto;
  39. }
  40. .app_title {
  41. color: #333333;
  42. font-size: 24pt;
  43. text-align: center;
  44. margin: 5pt;
  45. }
  46. .app_line {
  47. height: 1px;
  48. background-color: #dedede;
  49. width: 180pt;
  50. margin: 36pt auto 30pt;
  51. }
  52. .app_footer {
  53. height: 60px;
  54. width: 100%;
  55. bottom: 0;
  56. left: 0;
  57. position: fixed;
  58. background: #fff;
  59. }
  60. .app_footer_name {
  61. height: 20px;
  62. font-size: 14px;
  63. font-weight: 400;
  64. color: #666666;
  65. line-height: 20px;
  66. text-align: center;
  67. }
  68. .app_footer_links {
  69. display: flex;
  70. flex-direction: row;
  71. align-items: center;
  72. justify-content: center;
  73. }
  74. .app_footer_link {
  75. font-size: 12px;
  76. color: #999999;
  77. line-height: 16px;
  78. text-decoration: underline;
  79. }
  80. .app_footer_link a:visited,a:link {
  81. color: #999999;
  82. text-decoration: underline;
  83. }
  84. .mask {
  85. position: fixed;
  86. left: 0px;
  87. top: 0px;
  88. right: 0px;
  89. bottom: 0px;
  90. background: rgba(0, 0, 0, 0.4);
  91. }
  92. .mask .mask_alert {
  93. position: absolute;
  94. right: 12pt;
  95. left: 12pt;
  96. top: 120pt;
  97. text-align: center;
  98. color: #fff;
  99. font-size: 12pt;
  100. }
  101. .mask img {
  102. display: block;
  103. position: absolute;
  104. right: 0;
  105. top: 0;
  106. }
  107. .app_version {
  108. color: #999999;
  109. font-size: 12pt;
  110. text-align: center;
  111. }
  112. .actions {
  113. margin: 18pt auto 0;
  114. text-align: center;
  115. }
  116. .actions a {
  117. position: relative;
  118. display: inline-block;
  119. padding: 6pt 12pt;
  120. min-width: 140pt;
  121. border: 1px solid #fb4747;
  122. border-radius: 40px;
  123. font-size: 12pt;
  124. background: #fb4747;
  125. color: #fff;
  126. text-decoration: none;
  127. }
  128. .actions a img {
  129. width: 16pt;
  130. height: 16pt;
  131. vertical-align: middle;
  132. }
  133. .app_line {
  134. height: 1px;
  135. background-color: #dedede;
  136. width: 180pt;
  137. margin: 36pt auto 30pt;
  138. }
  139. .msg {
  140. margin: 12px;
  141. }
  142. .msg .msg_header {
  143. margin-top: 0;
  144. color: #333333;
  145. text-align: center;
  146. font-size: 14pt;
  147. }
  148. .msg .msg_body {
  149. width: 210pt;
  150. margin: 0 auto;
  151. text-align: left;
  152. font-size: 14pt;
  153. color: #999999;
  154. }
  155. </style>
  156. <script src="../o2_core/o2.min.js"></script>
  157. <script src="js/base_simple_anonymous.js"></script>
  158. </head>
  159. <body>
  160. <!-- 移动端app下载页面,用于自助打包发布的app下载 目前就只有android -->
  161. <div id="app">
  162. <div class="app_box">
  163. <img
  164. src="./img/icon_logo150.png"
  165. class="app_logo"
  166. />
  167. <h3 class="app_title">协同办公</h3>
  168. <div class="app_line"></div>
  169. <!-- 下载页面内容 -->
  170. <div id="android_box">
  171. <div
  172. id="android_version"
  173. class="app_version"
  174. >当前最新版本:{{android.versionName}}</div>
  175. <div
  176. id="actions_android"
  177. class="actions type-android"
  178. >
  179. <a id="android_download_link">
  180. <img src="./img/action_android.png" />
  181. 下载安装
  182. </a>
  183. </div>
  184. </div>
  185. <div
  186. class="mask"
  187. id="mask"
  188. >
  189. <img
  190. src="./img/menu_tap.png"
  191. width="110"
  192. height="140"
  193. />
  194. <p
  195. class="mask_alert"
  196. id="mask_alert"
  197. >请点右上角菜单,在浏览器打开</p>
  198. </div>
  199. </div>
  200. </div>
  201. <script>
  202. layout.addReady(function(){
  203. (function(layout){
  204. // 判断手机信息
  205. var checkUserAgent = function() {
  206. //判断平台
  207. var ua = window.navigator.userAgent.toLowerCase();
  208. console.log(ua);
  209. var isiOS = /(iPhone|iPad|iPod|iOS)/i.test(ua);
  210. var isAndroid = /(Android|Adr)/i.test(ua);
  211. console.log("isiOS:"+isiOS);
  212. console.log("isAndroid:"+isAndroid);
  213. var isDingding = false;
  214. var isWeixin = false;
  215. if (ua.match(/DingTalk/i) == "dingtalk") {
  216. //用钉钉打开
  217. isDingding = true;
  218. } else if (ua.match(/MicroMessenger/i) == "micromessenger") {
  219. //用微信打开
  220. isWeixin = true;
  221. }
  222. // $("android_box").setStyles({
  223. // display:isAndroid ? "block" : "none"
  224. // })
  225. $("mask").setStyles({
  226. display:isDingding || isWeixin ? "block" : "none"
  227. })
  228. };
  229. checkUserAgent();
  230. })(layout);
  231. });
  232. </script>
  233. </body>
  234. </html>