<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>后台登录-进销存管理系统</title>
<meta name="author" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="static/css/style.css" />
<style>
canvas {
z-index: -1;
position: absolute;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 35%;
width: 25%;
height: 15%;
padding: 16px;
border: 2 solid black;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
<style>
<!--
* {
margin: 0px;
padding: 0px;
}
body {
background: url(static/images/login/bg.jpg) repeat-x top center;
background-color: #084e8d;
}
.login_box {
margin: 0 auto;
width: 1024px;
height: 725px;
background: url(static/images/login/login_bg.png) no-repeat;
}
.login_text {
font-size: 13px;
color: #075398;
width: 270px;
padding: 220px 0px 0px 470px;
line-height: 22px;
}
.login_text P {
height: 38px;
vertical-align: middle;
}
.login_submit {
padding-left: 50px;
}
.text_bg {
background: url(static/images/login/input_bg.jpg) no-repeat;
width: 182px;
height: 27px;
border: none;
margin-bottom: -4px;
}
.code_bg {
width: 90px;
border-right: 1px solid #88b0dc;
}
-->
</style>
<script src="static/js/jquery.js"></script>
<script src="static/js/verifyCode.js"></script>
<script src="static/js/Particleground.js"></script>
<script>
$(document)
.ready(
function() {
//粒子背景特效
$('body').particleground({
dotColor : '#5cbdaa',
lineColor : '#5cbdaa'
});
$("#loginBtn")
.click(
function() {
$
.post(
"./user/login",
{
userName : $(
"#userName")
.val(),
password : $(
"#password")
.val(),
imageCode : $(
"#imageCode")
.val()
},
function(result) {
console
.log(result);
if (result.success) {
if (result.roleSize == 1) {
var roleId = result.roleList[0].id;
$
.post(
"./user/saveRole",
{
roleId : roleId
},
function(
result) {
if (result.success) {
window.location.href = "./main.html";
}
});
} else {
$(
"#roleList")
.empty();
var roles = result.roleList;
for (var i = 0; i < roles.length; i++) {
if (i == 0) {
$(
"#roleList")
.append(
"<input type='radio' checked=true name='role' value='"+roles[i].id+"'/>"
+ roles[i].name
+ " ")
} else {
$(
"#roleList")
.append(
"<input type='radio' name='role' value='"+roles[i].id+"'/>"
+ roles[i].name
+ " ")
}
}
document
.getElementById('light').style.display = 'block';
document
.getElementById('fade').style.display = 'block';
}
} else {
alert(result.errorInfo);
}
});
});
});
function saveRole() {
var roleId = $("input[name='role']:checked").val();
$.post("./user/saveRole", {
roleId : roleId
}, function(result) {
if (result.success) {
window.location.href = "/main.html";
}
});
}
</script>
</head>
<body>
<div class="login_box">
<dl class="login_text">
<dl class="" style="margin-bottom:80px;margin-left:-180px;word-spacing:6px; font-size:30px;color:#ffffff">
<p>设备管理系统</p>
</dl>
<dd class="" style="word-spacing: 6px;">
<p>
帐号:<input type="text" id="userName" placeholder="账号"
class="text_bg " />
</p>
</dd>
<dd class="">
<p>
密码:<input type="password" id="password" placeholder="密码"
class="text_bg " />
</p>
</dd>
<dd>
<p>
验证码:<input type="text" id="imageCode" name="imageCode"
style="margin-bottom: -5px;" placeholder="验证码" maxlength="4"
class="text_bg code_bg"> <img id="imgObj" title="看不清,换一张"
src="./drawImage" onclick="changeImg()"
style="margin-bottom: -5px;" />
</p>
</dd>
<dd class="login_submit">
<input type="image" id="loginBtn" value="立即登陆"
src="static/images/login/submit_btn.jpg" /> <input type="image"
id="loginBtn" value="立即登陆" src="static/images/login/reset_btn.jpg" />
</dd>
</dl>
<div id="light" class="white_content">
<p>你的帐号未设定角色,请联系系统管理员!</p>
<div id="roleList"></div>
</div>
<div id="fade" class="black_overlay"></div>
</div>
</body>
</html>
07-03
342
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)