You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
7.0 KiB
159 lines
7.0 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>智慧营区-登录</title>
|
|
<link href="layui/css/layui.css" rel="stylesheet" />
|
|
<link type="text/css" href="login/css/css.css" rel="stylesheet" />
|
|
<style>
|
|
#login {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-content">
|
|
<div class="login-logo"><img src="login/img/login-logo.png"></div>
|
|
<form action="">
|
|
<div class="login-box">
|
|
<div class="login-input">
|
|
<input value="" id="username" type="text" placeholder="请输入用户名">
|
|
</div>
|
|
<div class="login-input">
|
|
<input value="" type="password" id="password" placeholder="请输入密码" style="background: url(login/img/login-password.png) 10px center no-repeat rgba(19,58,113,0.5);" />
|
|
</div>
|
|
<div class="login-input" style="display:block;">
|
|
<div style="width: 170px; float: left; height: 46px;"><input value="" type="text" id="rcode" placeholder="验证码" style="background:rgba(19,58,113,0.5); padding-left: 14px;"></div>
|
|
<div style="width: 100px; float: right; height: 46px; line-height: 46px;">
|
|
<a href="#" id="changeImg">
|
|
<canvas class="show-captcha" id="canvas" width="100" height="35"></canvas>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="login-input" style="display:none;">
|
|
<div class="input-checkbox fl">
|
|
<input value="" type="checkbox" placeholder="验证码">
|
|
</div>
|
|
<div style="padding-left: 26px; color: #0fa6e5; line-height: 16px;">记住密码</div>
|
|
</div>
|
|
<div class="login-input" style="height: 60px; text-align: center;margin-top: 80px;">
|
|
<div value="登 录" id="login" style="background: url(login/img/submit.png) top center no-repeat;line-height: 50px;font-size: 18px;color: #ffffff;height: 100%;border: 0;">登录</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div title="智慧营区手机APP下载二维码" style="position: absolute; bottom: 1%; right: 1%; width: 220px; height: 220px; background-image: url('login/img/QRcode.png')"></div>
|
|
<div style="text-align: center;opacity: 0.7; position: absolute;bottom: 10px;width: 100%;"><a href="https://beian.miit.gov.cn" target="OpenBA" style="color:#fff;">备案：鲁ICP备2021047323号-1</a></div>
|
|
<br />
|
|
</body>
|
|
</html>
|
|
<script src="js/jquery-2.1.3.min.js"></script>
|
|
<script src="js/jq_extend.js"></script>
|
|
<script src="js/jquery.cookie.js"></script>
|
|
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
|
|
<script src="layui/layui.js"></script>
|
|
<script>
|
|
layui.use(['form', 'layer'], function () {
|
|
var form = layui.form
|
|
layer = parent.layer === undefined ? layui.layer : top.layer;
|
|
|
|
/**生成一个随机数**/
|
|
function randomNum(min, max) {
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
}
|
|
/**生成一个随机色**/
|
|
function randomColor(min, max) {
|
|
var r = randomNum(min, max);
|
|
var g = randomNum(min, max);
|
|
var b = randomNum(min, max);
|
|
return "rgb(" + r + "," + g + "," + b + ")";
|
|
}
|
|
code = drawPic();
|
|
document.getElementById("changeImg").onclick = function (e) {
|
|
e.preventDefault();
|
|
code = drawPic();
|
|
}
|
|
/**绘制验证码图片**/
|
|
function drawPic() {
|
|
var canvas = document.getElementById("canvas");
|
|
var width = canvas.width;
|
|
var height = canvas.height;
|
|
//获取该canvas的2D绘图环境
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.textBaseline = 'bottom';
|
|
/**绘制背景色**/
|
|
ctx.fillStyle = randomColor(180, 240);
|
|
//颜色若太深可能导致看不清
|
|
ctx.fillRect(0, 0, width, height);
|
|
/**绘制文字**/
|
|
var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
|
|
var code = "";
|
|
//生成四个验证码
|
|
for (var i = 1; i <= 4; i++) {
|
|
var txt = str[randomNum(0, str.length)];
|
|
code = code + txt;
|
|
ctx.fillStyle = randomColor(50, 160);
|
|
//随机生成字体颜色
|
|
ctx.font = randomNum(15, 40) + 'px SimHei';
|
|
//随机生成字体大小
|
|
var x = 10 + i * 14;
|
|
var y = randomNum(25, 35);
|
|
var deg = randomNum(-25, 25);
|
|
//修改坐标原点和旋转角度
|
|
ctx.translate(x, y);
|
|
ctx.rotate(deg * Math.PI / 180);
|
|
ctx.fillText(txt, 0, 0);
|
|
//恢复坐标原点和旋转角度
|
|
ctx.rotate(-deg * Math.PI / 180);
|
|
ctx.translate(-x, -y);
|
|
}
|
|
return code;
|
|
}
|
|
$("#login").click(function () {
|
|
login();
|
|
})
|
|
$(document).keyup(function (event) {
|
|
if (event.keyCode == 13) {
|
|
login();
|
|
}
|
|
});
|
|
function login() {
|
|
if ($("#username").val() == "") { alert("请填写用户名"); return false; }
|
|
if ($("#password").val() == "") { alert("请填写密码"); return false; }
|
|
//if ($("#rcode").val() == "") { alert("请填写验证码"); return false; }
|
|
//if ($("#rcode").val().toUpperCase() != code) { alert("验证码不正确"); return false; }
|
|
window.sessionStorage.setItem('UserId', null);
|
|
window.sessionStorage.setItem('UserName', null);
|
|
window.sessionStorage.setItem('userInfo', null);
|
|
var index = layer.load(3, { time: 10 * 1000 }); //又换了种风格，并且设定最长等待10秒
|
|
//$.cookie('cip', returnCitySN['cip'], { path: '/' });
|
|
//$.cookie('cname', returnCitySN['cname'], { path: '/' });
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "ashx/LoginHandler.ashx",
|
|
data: {
|
|
"Action": "LoginAction",
|
|
"strUser": $("#username").val(),
|
|
"strPwd": $("#password").val(),
|
|
"random": new Date().getTime()//随机参数
|
|
},
|
|
dataType: "JSON",
|
|
success: function (res) {
|
|
//关闭
|
|
layer.close(index);
|
|
if (res.code == 1) {
|
|
window.sessionStorage.setItem("userInfo", JSON.stringify(res.data));
|
|
//location.href = "../Index/index.html";
|
|
location.href = "Index/guidance.html";
|
|
} else {
|
|
alert(res.msg);
|
|
}
|
|
},
|
|
error: function (e) {
|
|
console.log(e)
|
|
}
|
|
});
|
|
}
|
|
})
|
|
</script>
|