login.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!DOCTYPE html>
  2. <html class="ui-page-login">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="css/mui.min.css" rel="stylesheet" />
  8. <link href="css/main.css" rel="stylesheet" />
  9. <link href="css/index.css" rel="stylesheet" />
  10. <link href="css/reset-mobile.css" rel="stylesheet" />
  11. <style>
  12. .area {
  13. margin: 20px auto 0px auto;
  14. }
  15. .mui-input-group {
  16. margin-top: 10px;
  17. }
  18. .mui-input-group:first-child {
  19. margin-top: 20px;
  20. }
  21. .mui-input-group label {
  22. width: 22%;
  23. }
  24. .mui-input-row label~input,
  25. .mui-input-row label~select,
  26. .mui-input-row label~textarea {
  27. width: 78%;
  28. }
  29. .mui-checkbox input[type=checkbox],
  30. .mui-radio input[type=radio] {
  31. top: 6px;
  32. }
  33. .mui-content-padded {
  34. margin-top: 25px;
  35. }
  36. .mui-btn {
  37. padding: 10px;
  38. }
  39. .link-area {
  40. display: block;
  41. margin-top: 25px;
  42. text-align: center;
  43. }
  44. .spliter {
  45. color: #bbb;
  46. padding: 0px 8px;
  47. }
  48. .oauth-area {
  49. position: absolute;
  50. bottom: 20px;
  51. left: 0px;
  52. text-align: center;
  53. width: 100%;
  54. padding: 0px;
  55. margin: 0px;
  56. }
  57. .oauth-area .oauth-btn {
  58. display: inline-block;
  59. width: 50px;
  60. height: 50px;
  61. background-size: 30px 30px;
  62. background-position: center center;
  63. background-repeat: no-repeat;
  64. margin: 0px 20px;
  65. /*-webkit-filter: grayscale(100%); */
  66. border: solid 1px #ddd;
  67. border-radius: 25px;
  68. }
  69. .oauth-area .oauth-btn:active {
  70. border: solid 1px #aaa;
  71. }
  72. .oauth-area .oauth-btn.disabled {
  73. background-color: #ddd;
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <header class="mui-bar mui-bar-nav">
  79. <h1 class="mui-title">登录</h1>
  80. </header>
  81. <div class="mui-content">
  82. <section class="login">
  83. <a href="" class="logo"><img src="images/logo.png" width="100%" alt=""></a>
  84. </section>
  85. <section class="form">
  86. <form id='login-form' class="mui-input-group">
  87. <p class="form-item">
  88. <input type="text" placeholder="请输入账号" id='account'>
  89. </p>
  90. <p class="form-item">
  91. <input type="password" placeholder="请输入密码" id='password'>
  92. </p>
  93. <p class="form-item no-border" style='display:none;'>
  94. <a href="#">忘记密码?</a>
  95. </p>
  96. <p class="form-item no-border">
  97. <input type="button" value="确认登录" id='login'>
  98. </p>
  99. <p class="form-item tips no-border" id="J_state" style="visibility:hidden;">
  100. <span>登录成功</span>
  101. </p>
  102. </form>
  103. </section>
  104. <ul class="mui-table-view maze-foot">
  105. <li class="mui-table-view-cell">找回密码请用注册手机拨打:187-0113-9598</li>
  106. </ul>
  107. <div class="mui-content-padded oauth-area">
  108. </div>
  109. </div>
  110. <script src="js/mui.min.js"></script>
  111. <script src="js/mui.enterfocus.js"></script>
  112. <script src="js/login.js"></script>
  113. <script>
  114. (function($, doc) {
  115. $.init({
  116. statusBarBackground: '#f7f7f7'
  117. });
  118. /*
  119. window.addEventListener('refresh', function(event) {
  120. $.openWindow({
  121. id: 'index',
  122. url: 'index.html'
  123. });
  124. });
  125. */
  126. $.plusReady(function() {
  127. plus.screen.lockOrientation("portrait-primary");
  128. var settings = app.getSettings();
  129. var state = app.getState();
  130. var toMain = function() {
  131. $.openWindow({
  132. id: 'main',
  133. url: 'main.html'
  134. });
  135. };
  136. if (state.token) {
  137. toMain();
  138. } else {
  139. app.setState(null);
  140. }
  141. // close splash
  142. setTimeout(function() {
  143. //关闭 splash
  144. plus.navigator.closeSplashscreen();
  145. }, 600);
  146. //检查 "登录状态/锁屏状态" 结束
  147. var loginButton = doc.getElementById('login');
  148. var accountBox = doc.getElementById('account');
  149. var passwordBox = doc.getElementById('password');
  150. //var autoLoginButton = doc.getElementById("autoLogin");
  151. //var regButton = doc.getElementById('reg');
  152. //var forgetButton = doc.getElementById('forgetPassword');
  153. loginButton.addEventListener('tap', function(event) {
  154. var loginInfo = {
  155. account: accountBox.value,
  156. password: passwordBox.value
  157. };
  158. app.login(loginInfo, function(err) {
  159. if (err) {
  160. plus.nativeUI.toast(err);
  161. return;
  162. }
  163. toMain();
  164. });
  165. });
  166. $.enterfocus('#login-form input', function() {
  167. $.trigger(loginButton, 'tap');
  168. });
  169. window.addEventListener('resize', function() {
  170. oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
  171. }, false);
  172. //
  173. var backButtonPress = 0;
  174. $.back = function(event) {
  175. backButtonPress++;
  176. if (backButtonPress > 1) {
  177. plus.runtime.quit();
  178. } else {
  179. plus.nativeUI.toast('再按一次退出应用');
  180. }
  181. setTimeout(function() {
  182. backButtonPress = 0;
  183. }, 1000);
  184. return false;
  185. };
  186. });
  187. }(mui, document));
  188. </script>
  189. </body>
  190. </html>