<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>天马出租 - 登录</title>
|
|
<link rel="shortcut icon" href="${ctxPath}/static/favicon1.ico">
|
<link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
<link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
|
<link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
|
<script>if (window.top !== window.self) {
|
window.top.location = window.location;
|
}</script>
|
<script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
|
<script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
|
<style>
|
.item{
|
display: flex;
|
align-items: center;
|
/*border: 1px solid red !important;*/
|
margin: 24px 0;
|
position: relative;
|
}
|
.item>img{
|
position: absolute;
|
left: 8px;
|
/*bottom: 50%;*/
|
}
|
.itemInput{
|
background:none;
|
outline:none;
|
border:0px;
|
border-bottom:1px solid grey ;
|
padding-left: 30px;
|
height: 34px;
|
width: 100%;
|
}
|
.itemInput[type="text"]{
|
|
background: #fff;
|
outline: none;
|
}
|
|
.itemInput:-webkit-autofill {
|
-webkit-box-shadow: 0 0 0 1000px white inset; // 背景设为白色
|
-webkit-text-fill-color: #fff; // 字体颜色
|
}
|
</style>
|
</head>
|
|
<body class="gray-bg" style="background:url(${ctxPath}/static/img/index1.png) no-repeat; background-size:cover;">
|
|
<div style="display: flex;align-items: center;justify-content: center;height: 100%">
|
|
|
<img src="${ctxPath}/static/img/index.png" style="width: 300px;height: 400px;z-index: 1000">
|
<div style="position: relative;left: -20px; max-width: 300px;min-height: 300px;background: white;border-radius: 8px;box-sizing: border-box;padding: 0 30px 0 50px;display: flex;align-items: center;justify-content: center;">
|
<div style="max-height: 100%">
|
<h3 style="color: black;"><img src="${ctxPath}/static/img/logo.png" width="30px" height="30px"/> 天马出租管理后台</h3>
|
<br/>
|
<h4 style="color: red;">${tips!}</h4>
|
<form class="m-t" role="form" action="${ctxPath}/login" method="post">
|
<div class="item">
|
<img src="${ctxPath}/static/img/account.png" />
|
<input class="itemInput" type="text" name="username" id="username" placeholder="请输入您的账号" required="" value="">
|
</div>
|
<div class="item">
|
<img src="${ctxPath}/static/img/password.png" />
|
<input class="itemInput" type="password" name="password" id="password" placeholder="请输入您的密码" required="" value="">
|
</div>
|
<div class="item">
|
<input class="itemInput" name="sms_code" id="sms_code" placeholder="请输入验证码" required="" value="" style="padding-left: 0px; text-align: center;">
|
<button id="btn" type="button" onclick="sendSMSCode(this)" style="width: 150px; font-size: 14px;">获取验证码</button>
|
</div>
|
<div class="form-group" style="float: left;">
|
<div class="checkbox" style="text-align: left">
|
<!--<label>
|
<input type="checkbox" name="remember" style="margin-top: 2px;">记住我
|
</label>-->
|
</div>
|
</div>
|
<button onclick="login()" class="btn full-width m-b" style="background-color: #d56b29;color: black;">登 录</button>
|
<button type="submit" id="submit" style="display: none;"></button>
|
</p>
|
</form>
|
</div>
|
</div></div>
|
</body>
|
<script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
|
<script src="${ctxPath}/static/js/common/ajax-object.js"></script>
|
<script src="${ctxPath}/static/js/common/Feng.js"></script>
|
<script src="${ctxPath}/static/crypto-js/crypto-js.js"></script>
|
<script>
|
$(function () {
|
$("#kaptcha").on('click', function () {
|
$("#kaptcha").attr('src', '${ctxPath}/kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
|
});
|
|
});
|
var key = CryptoJS.enc.Utf8.parse("xqT86jictTPpHMem");
|
var iv = CryptoJS.enc.Utf8.parse("xqT86jicxqT86jic");
|
|
//aes加密
|
function encryptAES(context) {
|
if(null == context || '' == context){
|
return context;
|
}
|
var encrypted = '';
|
if (typeof(context) == 'string') {
|
|
}else if(typeof(context) == 'object'){
|
context = JSON.stringify(context);
|
}
|
var srcs = CryptoJS.enc.Utf8.parse(context);
|
encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
iv: iv,
|
mode: CryptoJS.mode.CBC,
|
padding: CryptoJS.pad.Pkcs7
|
});
|
return encrypted.toString();
|
}
|
// aes解密
|
function decryptAES(context) {
|
if(null == context || '' == context){
|
return context;
|
}
|
var decrypt = CryptoJS.AES.decrypt(context, key, {
|
iv: iv,
|
mode: CryptoJS.mode.CBC,
|
padding: CryptoJS.pad.Pkcs7
|
});
|
var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
|
return decryptedStr.toString();
|
}
|
function login(){
|
let password = $('#password').val();
|
password = encryptAES(password);
|
$('#password').val(password);
|
$('#submit').submit();
|
}
|
|
|
window.addEventListener(
|
"mousewheel",
|
function(event) {
|
if (event.ctrlKey === true || event.metaKey) {
|
event.preventDefault();
|
}
|
},
|
{ passive: false }
|
);
|
|
//firefox
|
window.addEventListener(
|
"DOMMouseScroll",
|
function(event) {
|
if (event.ctrlKey === true || event.metaKey) {
|
event.preventDefault();
|
}
|
},
|
{ passive: false }
|
);
|
|
|
function fontSize(designWidth, maxWidth, minWidth) {
|
var doc = document,
|
win = window,
|
docEl = doc.documentElement,
|
remStyle = document.createElement("style"),
|
tid;
|
|
function refreshRem() {
|
var width = docEl.getBoundingClientRect().width;
|
maxWidth = maxWidth || 540;
|
width > maxWidth && (width = maxWidth);
|
var rem = (width * 100) / designWidth;
|
remStyle.innerHTML = "html{font-size:" + rem + "px;}";
|
}
|
|
if (docEl.firstElementChild) {
|
docEl.firstElementChild.appendChild(remStyle);
|
} else {
|
var wrap = doc.createElement("div");
|
wrap.appendChild(remStyle);
|
doc.write(wrap.innerHTML);
|
wrap = null;
|
}
|
// 要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
refreshRem();
|
|
win.addEventListener(
|
"resize",
|
function(res) {
|
// console.log(res);
|
if (minWidth < res.currentTarget.innerWidth) {
|
clearTimeout(tid); //防止执行两次
|
return;
|
}
|
|
tid = setTimeout(refreshRem, 10);
|
},
|
false
|
);
|
|
win.addEventListener(
|
"pageshow",
|
function(e) {
|
if (e.persisted) {
|
// 浏览器后退的时候重新计算
|
clearTimeout(tid);
|
tid = setTimeout(refreshRem, 300);
|
}
|
},
|
false
|
);
|
|
if (doc.readyState === "complete") {
|
doc.body.style.fontSize = "16px";
|
} else {
|
doc.addEventListener(
|
"DOMContentLoaded",
|
function(e) {
|
doc.body.style.fontSize = "16px";
|
},
|
false
|
);
|
}
|
}
|
fontSize(768, 1920);
|
|
|
|
function sendSMSCode(obj) {
|
let username = $('#username').val();
|
if(null == username || '' == username){
|
alert("请先输入您的账号");
|
return
|
}
|
$.ajax({
|
url: Feng.ctxPath + '/base/sendSMSCode',
|
type: 'POST',
|
data:{
|
username: username
|
},
|
success: function (res) {
|
if(res.status == 200){
|
invokeSettime(obj);
|
}else{
|
alert(res.msg);
|
}
|
}
|
});
|
}
|
|
function invokeSettime(obj){
|
var countdown=60;
|
settime(obj);
|
function settime(obj) {
|
if (countdown == 0) {
|
$(obj).attr("disabled",false);
|
$(obj).text("获取验证码");
|
countdown = 60;
|
return;
|
} else {
|
$(obj).attr("disabled",true);
|
$(obj).text("(" + countdown + ")s重新发送");
|
countdown--;
|
}
|
setTimeout(function() {
|
settime(obj) }
|
,1000)
|
}
|
}
|
</script>
|
</body>
|
|
</html>
|
