login.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport"
  6. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <!-- <meta name="apple-mobile-web-app-capable" content="yes" />
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black" /> -->
  9. <title>登录页面</title>
  10. <!-- 引入mui样式 -->
  11. <link href="css/mui.css" rel="stylesheet" />
  12. <!-- 引入app样式 -->
  13. <link href="css/app.css" rel="stylesheet">
  14. <!-- 引入app补充样式 -->
  15. <link rel="stylesheet" href="css/app.new.css">
  16. <!-- 引入字体 -->
  17. <link rel="stylesheet" href="fonts/font-jt.css">
  18. <style>
  19. body,
  20. html {
  21. width: 100%;
  22. height: calc(100vh);
  23. }
  24. /* 顶部视图容器样式 */
  25. .wc-ico-panel {
  26. width: 100%;
  27. height: 170px;
  28. line-height: 170px;
  29. text-align: center;
  30. margin-top: 10px;
  31. margin-bottom: 10px;
  32. }
  33. /* 顶部视图图标样式 */
  34. .wc-ico {
  35. width: 90px;
  36. height: 90px;
  37. }
  38. /* 顶部视图标题文字样式 */
  39. .wc-title {
  40. font-size: 26px;
  41. height: 30px;
  42. line-height: 30px;
  43. font-weight: 100;
  44. color: rgb(59, 146, 255);
  45. color: rgb(203, 203, 203);
  46. letter-spacing: 3px;
  47. text-shadow: 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255);
  48. text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
  49. }
  50. /* 顶部视图APP版本样式 */
  51. .wc-version {
  52. position: relative;
  53. font-size: 14px;
  54. height: 30px;
  55. line-height: 30px;
  56. font-weight: normal;
  57. color: rgb(84, 126, 251);
  58. }
  59. /* 底部容器样式 */
  60. .wc-div-bottom {
  61. position: absolute;
  62. width: 100%;
  63. bottom: 10px;
  64. text-align: center;
  65. }
  66. /* 底部容器内段落样式 */
  67. .wc-div-bottom p {
  68. font-size: 12px;
  69. color: rgb(203, 203, 203);
  70. margin: 0px;
  71. padding: 0px;
  72. }
  73. /* 底部连接样式 */
  74. .link-area {
  75. display: flex;
  76. flex-direction: row;
  77. justify-content: center;
  78. margin-top: 25px;
  79. text-align: center;
  80. align-items: center;
  81. }
  82. /* 服务设置文字颜色 */
  83. .link-area>a {
  84. color: rgb(84, 126, 251);
  85. font-size: 15px;
  86. }
  87. /* 输入行样式 */
  88. .wc-input-row {
  89. position: relative;
  90. height: 36px;
  91. line-height: 36px;
  92. border: solid 1px rgb(121, 183, 246);
  93. border-radius: 20px;
  94. margin-left: 15%;
  95. margin-right: 15%;
  96. display: flex;
  97. flex-direction: row;
  98. align-items: center;
  99. margin-bottom: 5px;
  100. }
  101. .wc-input-row-none {
  102. border: solid 0px rgb(121, 183, 246);
  103. }
  104. /* 输入行小图标样式 */
  105. .wc-input-img {
  106. width: 24px;
  107. height: 24px;
  108. margin-left: 20px;
  109. margin-right: 10px;
  110. }
  111. /* 输入行竖向分隔线样式 */
  112. .wc-input-v-line {
  113. width: 1px;
  114. height: 80%;
  115. background-color: rgb(145, 195, 249);
  116. }
  117. /* 输入行输入行样式 */
  118. .wc-input-row .mui-input-row {
  119. width: 90% !important;
  120. }
  121. /* 输入行输入控件样式 */
  122. .wc-input-row .mui-input-row>input {
  123. margin-bottom: 0px !important;
  124. height: 34px !important;
  125. border: solid 0px red !important;
  126. background-color: rgba(255, 255, 255, 0) !important;
  127. color: rgb(203, 203, 203) !important;
  128. }
  129. /* 标签样式 */
  130. .wc-input-label {
  131. margin-left: 20px;
  132. font-size: 14px;
  133. }
  134. /* 开关样式 */
  135. .wc-input-switch {
  136. margin-left: auto;
  137. margin-right: 20px;
  138. }
  139. /* 按钮样式 */
  140. .wc-login-btn {
  141. padding: 0px;
  142. border-radius: 25px;
  143. height: 50px;
  144. display: flex;
  145. flex-direction: row;
  146. align-items: center;
  147. justify-content: center;
  148. border: solid 1px rgba(255, 255, 255, 0);
  149. background-color: rgb(84, 126, 251) !important;
  150. font-size: 16px;
  151. }
  152. .wc-login-btn:active {
  153. border: solid 1px rgb(255, 0, 0) !important;
  154. }
  155. /* 整体内容样式 */
  156. .wc-content {
  157. position: absolute;
  158. width: 100%;
  159. top: calc(33% - 45px);
  160. }
  161. /* 页面宽度小于600 */
  162. @media screen and (max-width: 600px) {
  163. /* 服务设置文字颜色 */
  164. .link-area>a {
  165. color: rgb(84, 126, 251);
  166. font-size: 15px;
  167. }
  168. /* 中间分隔竖线 */
  169. .link-area>span {
  170. display: block;
  171. width: 1px;
  172. height: 13px;
  173. background-color: rgba(255, 255, 255, 0.4);
  174. margin: 0px 10px;
  175. }
  176. /* 输入行样式 */
  177. .wc-input-row {
  178. margin-left: 10%;
  179. margin-right: 10%;
  180. }
  181. /* 登陆按钮样式 */
  182. .cr-content-padded {
  183. margin-top: 10px;
  184. margin-left: 10%;
  185. margin-right: 10%;
  186. }
  187. }
  188. /* 页面宽度在600~1000 */
  189. @media screen and (min-width: 600px) and (max-width:1000px) {
  190. /* 服务设置文字颜色 */
  191. .link-area>a {
  192. color: rgb(84, 126, 251);
  193. font-size: 16px;
  194. }
  195. /* 中间分隔竖线 */
  196. .link-area>span {
  197. display: block;
  198. width: 1px;
  199. height: 14px;
  200. background-color: rgba(255, 255, 255, 0.4);
  201. margin: 0px 10px;
  202. }
  203. /* 输入行样式 */
  204. .wc-input-row {
  205. margin-left: 15%;
  206. margin-right: 15%;
  207. }
  208. /* 登陆按钮样式 */
  209. .cr-content-padded {
  210. margin-top: 10px;
  211. margin-left: 15%;
  212. margin-right: 15%;
  213. }
  214. }
  215. /* 检查更新文字颜色 */
  216. .cr-upload-text {
  217. color: rgb(252, 170, 52) !important;
  218. }
  219. </style>
  220. </head>
  221. <body style="background-image: url(img/login/back_login_02.png);background-size: 100% 100%;">
  222. <div class="wc-content">
  223. <!-- 顶部图标及应用名称 -->
  224. <div class="mui-row">
  225. <div class="wc-ico-panel">
  226. <div style="height: 100px;line-height: 100px;">
  227. <img src="img/login/login_log02.png" class="wc-ico" />
  228. </div>
  229. <div class="wc-title" id="lblAppName">兰山区综合执法</div>
  230. <div class="wc-version" id="lblAppVersion">
  231. <span>APP版本</span>
  232. <span class="jt-font-number">{V0.0.0}</span>
  233. </div>
  234. </div>
  235. </div>
  236. <!-- 账号输入框 -->
  237. <div class="mui-row wc-input-row">
  238. <img class="wc-input-img" src="img/login/ico_login_user.png">
  239. <div class="wc-input-v-line"></div>
  240. <div class="mui-input-row">
  241. <input id="userName" type="text" class="mui-input-clear mui-input f-color" placeholder="请输入账号">
  242. </div>
  243. </div>
  244. <!-- 密码输入框 -->
  245. <div class="mui-row wc-input-row">
  246. <img class="wc-input-img" src="img/login/ico_login_passwrod.png">
  247. <div class="wc-input-v-line"></div>
  248. <div class="mui-input-row">
  249. <input id="passWord" type="password" class="mui-input mui-input-password f-color"
  250. placeholder="请输入密码">
  251. </div>
  252. </div>
  253. <!-- 记住用户名和密码 -->
  254. <div class="mui-row wc-input-row wc-input-row-none">
  255. <span class="wc-input-label jt-font-color">记住用户名和密码</span>
  256. <div id="autoLogin" class="mui-switch mui-switch-mini mui-active wc-input-switch">
  257. <div class="mui-switch-handle"></div>
  258. </div>
  259. </div>
  260. <!-- 登录按钮 -->
  261. <div class="mui-content-padded cr-content-padded">
  262. <button type="button" class="mui-btn mui-btn-block mui-btn-primary wc-login-btn"
  263. onclick="loginCheck()">进入系统</button>
  264. <div class="link-area" style="margin-top: 0px;">
  265. <a href="#" onclick="setting()">服务设置</a>
  266. <span></span>
  267. <a class="cr-upload-text" href="#" onclick="click_AppUpload()">检查更新</a>
  268. </div>
  269. </div>
  270. </div>
  271. <!-- 底部版权信息 -->
  272. <div id="divButtom" class="wc-div-bottom">
  273. </div>
  274. </body>
  275. </html>
  276. <!-- 引入mui脚本 -->
  277. <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  278. <!-- 引入jquery脚本 -->
  279. <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  280. <!-- 引入存储脚本 -->
  281. <script type="text/javascript" src="js/save.js"></script>
  282. <!-- 引入远程请求脚本 -->
  283. <script type="text/javascript" src="js/ajax.js"></script>
  284. <!-- 通用脚本 -->
  285. <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
  286. <!-- 引入webview脚本 -->
  287. <script src="js/webview.js" type="text/javascript" charset="utf-8"></script>
  288. <!-- 引入数据库管理脚本 -->
  289. <script src="js/DatabaseManager.js" type="text/javascript" charset="utf-8"></script>
  290. <!-- 引入app更新脚本 -->
  291. <script src="js/app.upload.js"></script>
  292. <!-- 本页独有脚本 -->
  293. <script src="js/login.js" type="text/javascript" charset="utf-8"></script>
  294. <!-- 本页面独有脚本 -->
  295. <script type="text/javascript">
  296. /* 初始化 */
  297. plusInit(function() {
  298. plus.screen.lockOrientation('portrait-primary');
  299. })
  300. </script>