<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<title>登录</title>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/alertPopShow.css">
<style>
html { font-size: 10px; }
html,body { background-color: #f0eff4; }
body { padding-bottom: 0;margin: 0; padding-top: 49px;}
* { padding: 0;margin: 0; }
header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 49px; background-color: #333; color: #fff;}
header .back { position: absolute;top: 0;left: 0; display: inline-block;padding-left: 5px; font-size: 30px; }
header p { margin: 0;line-height: 49px; font-size: 16px;text-align: center; }
.register { padding: 8px 6px; font-size: 14px;}
.res-item {position: relative; width: 100%; border-radius: 4px; margin-bottom: 8px;background-color: #fff; }
.res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; }
.res-item .input-item {display: inline-block;width: 100%;padding-left: 15px;height: 40px;border: none; font-size: inherit;}
.res-item .input-item:focus {
outline-offset: 0;
outline: -webkit-focus-ring-color auto -2px;
background-color: #fefffe;
border: 1px solid #e21945;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,.3);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,0.3);
}
.res-item .input-item:focus + .res-icon { color: #e21945; }
.yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100; display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #e21945;color: #fff;border-radius: 8px; }
.yanzhengma:disabled { background-color: #ddd; }
.res-btn { margin-top: 10px;padding: 0 5px; }
.res-btn button { background-color: #e21945;font-size: 14px; color: #fff;border-radius: 8px; }
.res-btn button:focus { color: #fff; }
</style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
href="http://browsehappy.com/" target="_blank">升级浏览器</a>
以获得更好的体验！</p>
<![endif]-->
<header>
<p>登录</p>
</header>
<div class="register">
<div class="login-tab" style="display:block">
<ul class="username-login login-selected" content-id="username_login"><span id="account_login_txt">账号密码登录</span></ul>
<ul class="sms-login" content-id="sms_login"><span id="sms_login_txt">短信验证码登录</span></ul>
</div>
<div class="username_login login_boxmess" style="display:block;">
<div class="res-item">
<input type="tel" placeholder="账号" class="input-item mobile">
</div>
<div class="res-item">
<input type="text" placeholder="密码" class="input-item yanzheng">
</div>
</div>
<div class="sms_login login_boxmess" style="display:none;">
<div class="res-item">
<input type="tel" placeholder="手机号" class="input-item mobile">
</div>
<div class="res-item">
<input type="text" placeholder="验证码" class="input-item yanzheng">
<button type="button" class="yanzhengma">发送验证码</button>
</div>
</div>
<div class="res-btn">
<button type="button" id="res-btn" class="am-btn am-btn-block">登录</button>
</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery.min.js"></script>
<script src="js/alertPopShow.js"></script>
<!--<![endif]-->
<script>
var times = 10;
function roof(){
if(times == 0){
$('.yanzhengma').text('发送验证码('+times+'s)');
$('.yanzhengma').prop('disabled',false);
$('.yanzhengma').text('发送验证码');
times = 10;
return
}
$('.yanzhengma').text('发送验证码('+times+'s)');
times--;
setTimeout(roof,1000);
}
$('.yanzhengma').on('click',function(){
$(this).prop('disabled',true);
roof();
});
$('#res-btn').on('click',function(){
webToast("账号或密码错误！","middle",3000);
var mobile = $('.mobile').val();
var yanzheng = $('.yanzheng').val();
var mima = $('.mima').val();
var repeatmima = $('.repeatmima').val();
if(!mobile){
$('.mobile').focus();
document.querySelector('.mobile').placeholder = '请填写手机号码';
return
}
if(!yanzheng){
$('.yanzheng').focus();
document.querySelector('.yanzheng').placeholder = '请填写验证码';
return
}
$(this).prop('disabled',true);
alert('注册成功');
})
// 登录切换
$(".login-tab ul").on("click",function(){
// 当前加上 login-selected类名 对应登录方式显示。
$(this).addClass("login-selected");
$(this).siblings().removeClass("login-selected");
//alert($(this).attr("content-id"));
if($(this).attr("content-id") == "sms_login"){
$(".sms_login").show();
$(".username_login").hide();
}else{
$(".username_login").show();
$(".sms_login").hide();
}
});
</script>
</body>
</html>
