123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <!DOCTYPE html>
- <html class="ui-page-login">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title></title>
- <link href="css/mui.min.css" rel="stylesheet" />
- <link href="css/main.css" rel="stylesheet" />
- <link href="css/index.css" rel="stylesheet" />
- <link href="css/reset-mobile.css" rel="stylesheet" />
- <style>
- .area {
- margin: 20px auto 0px auto;
- }
-
- .mui-input-group {
- margin-top: 10px;
- }
-
- .mui-input-group:first-child {
- margin-top: 20px;
- }
-
- .mui-input-group label {
- width: 22%;
- }
-
- .mui-input-row label~input,
- .mui-input-row label~select,
- .mui-input-row label~textarea {
- width: 78%;
- }
-
- .mui-checkbox input[type=checkbox],
- .mui-radio input[type=radio] {
- top: 6px;
- }
-
- .mui-content-padded {
- margin-top: 25px;
- }
-
- .mui-btn {
- padding: 10px;
- }
-
- .link-area {
- display: block;
- margin-top: 25px;
- text-align: center;
- }
-
- .spliter {
- color: #bbb;
- padding: 0px 8px;
- }
-
- .oauth-area {
- position: absolute;
- bottom: 20px;
- left: 0px;
- text-align: center;
- width: 100%;
- padding: 0px;
- margin: 0px;
- }
-
- .oauth-area .oauth-btn {
- display: inline-block;
- width: 50px;
- height: 50px;
- background-size: 30px 30px;
- background-position: center center;
- background-repeat: no-repeat;
- margin: 0px 20px;
- /*-webkit-filter: grayscale(100%); */
- border: solid 1px #ddd;
- border-radius: 25px;
- }
-
- .oauth-area .oauth-btn:active {
- border: solid 1px #aaa;
- }
-
- .oauth-area .oauth-btn.disabled {
- background-color: #ddd;
- }
- </style>
- </head>
- <body>
- <header class="mui-bar mui-bar-nav">
- <h1 class="mui-title">登录</h1>
- </header>
- <div class="mui-content">
- <section class="login">
- <a href="" class="logo"><img src="images/logo.png" width="100%" alt=""></a>
- </section>
- <section class="form">
- <form id='login-form' class="mui-input-group">
- <p class="form-item">
- <input type="text" placeholder="请输入账号" id='account'>
- </p>
- <p class="form-item">
- <input type="password" placeholder="请输入密码" id='password'>
- </p>
- <p class="form-item no-border" style='display:none;'>
- <a href="#">忘记密码?</a>
- </p>
- <p class="form-item no-border">
- <input type="button" value="确认登录" id='login'>
- </p>
- <p class="form-item tips no-border" id="J_state" style="visibility:hidden;">
- <span>登录成功</span>
- </p>
- </form>
- </section>
- <ul class="mui-table-view maze-foot">
- <li class="mui-table-view-cell">找回密码请用注册手机拨打:187-0113-9598</li>
- </ul>
- <div class="mui-content-padded oauth-area">
- </div>
- </div>
- <script src="js/mui.min.js"></script>
- <script src="js/mui.enterfocus.js"></script>
- <script src="js/login.js"></script>
- <script>
- (function($, doc) {
- $.init({
- statusBarBackground: '#f7f7f7'
- });
-
- /*
- window.addEventListener('refresh', function(event) {
-
- $.openWindow({
- id: 'index',
- url: 'index.html'
- });
- });
- */
- $.plusReady(function() {
- plus.screen.lockOrientation("portrait-primary");
- var settings = app.getSettings();
- var state = app.getState();
- var toMain = function() {
- $.openWindow({
- id: 'main',
- url: 'main.html'
- });
- };
- if (state.token) {
- toMain();
- } else {
- app.setState(null);
- }
- // close splash
- setTimeout(function() {
- //关闭 splash
- plus.navigator.closeSplashscreen();
- }, 600);
- //检查 "登录状态/锁屏状态" 结束
- var loginButton = doc.getElementById('login');
- var accountBox = doc.getElementById('account');
- var passwordBox = doc.getElementById('password');
- //var autoLoginButton = doc.getElementById("autoLogin");
- //var regButton = doc.getElementById('reg');
- //var forgetButton = doc.getElementById('forgetPassword');
- loginButton.addEventListener('tap', function(event) {
- var loginInfo = {
- account: accountBox.value,
- password: passwordBox.value
- };
- app.login(loginInfo, function(err) {
- if (err) {
- plus.nativeUI.toast(err);
- return;
- }
- toMain();
- });
- });
- $.enterfocus('#login-form input', function() {
- $.trigger(loginButton, 'tap');
- });
-
- window.addEventListener('resize', function() {
- oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
- }, false);
- //
- var backButtonPress = 0;
- $.back = function(event) {
- backButtonPress++;
- if (backButtonPress > 1) {
- plus.runtime.quit();
- } else {
- plus.nativeUI.toast('再按一次退出应用');
- }
- setTimeout(function() {
- backButtonPress = 0;
- }, 1000);
- return false;
- };
- });
- }(mui, document));
- </script>
- </body>
- </html>
|