<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta charset="UTF-8"/>
		<title>工作流</title>

		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

	</head>
	<body class="text-center" >
		<div style="margin-top: 100px;">

			<h1 class="h3 mb-3 font-weight-normal" style="color: #fff;font-size: 32px;">佰邦达后台登录系统</h1>

			<img class="mb-4"  th:src="@{/images/logo.png}"   alt="logo" width="206"  height="37">

			<form action="/login" method="post" class="form-signin" >

				<p style="text-align: left;font-size:24px;color: #919dac;">欢迎登录</p>


				<div class="username">
					<span class="usernameicon"></span>
					<input type="text" name="username" id="inputEmail" class="form-control" placeholder="请输入用户名" required="" autofocus="">
				</div>


				<!--<label for="inputEmail" class="sr-only">请输入用户名</label>-->


				<div class="username">
					<span class="passwordicon"></span>
					<input type="password" name="password" id="inputPassword" class="form-control" placeholder="请输入密码" required="">
				</div>

				<div class="provingImg" style="position: relative;">
				<input type="text" name="msgCode" id="MsgCode" class="form-control" placeholder="请输入验证码" required="">
					<div class="little" style="position: absolute;top: -10px;right: 0px;">
						<img th:src="@{/loadverify}" style=" width: 120px; margin-top:10px;height: 46px;" class="get_yzm img img_pointer" alt="图片验证码"
												   id="verify_codeid"/>
					</div>
				</div>


				<!--<div class="checkbox  mb-3">-->
					<!--<label>-->
						<!--<input type="checkbox" value="remember-me"> Remember me-->
					<!--</label>-->
				<!--</div>-->


					<!--<button class="btn btn-lg btn-defalt btn-block col-md-6" type="">立即注册</button>-->
					<button class="btn btn-lg btn-primary btn-block " type="submit">立即登录</button>

				<p class="mt-5 mb-3 text-muted" style="text-align: right;">忘记密码?</p>

			</form>
		</div>
	</body>
</html>

<style>
* {
	font-family: "微软雅黑";
	font-size: 15px;
	margin: 0 auto;
}
/*div{*/
	/*width: 400px;*/
	/*text-align:center;*/
	/*padding-top:10px;*/
/*}*/
.username{
	position: relative;
}
.usernameicon{
	width: 30px;
	height:30px;
	display: inline-block;
	position: absolute;
	left: 4px;
	margin: 8px;
	background: url("../images/username.png")no-repeat;
	background-size: 100%;
}
.passwordicon{
	width: 30px;
	height:30px;
	display: inline-block;
	position: absolute;
	left: 4px;
	margin: 8px;
	background: url("../images/pass.png")no-repeat;
	background-size: 100%;
}
.form-control{
	height:46px;
	padding-left: 52px;
	background-color: #dff5f5;
}
.form-signin{
	width: 492px;
	box-sizing: border-box;
	padding: 50px;
	background-color: #fff;
	border:8px transparent solid;
	border-image:linear-gradient(to bottom,#0069b7,#003681) 1 10;
	box-shadow: 0px 3px  10px rgba(0,0,0,0.7);
}
.text-center{
	width: 100%;
	height: 500px;
	background: url("../images/backgroundImg.jpg")no-repeat;
	background-size: 100%;
}
input,button{
	margin-top:10px;
}

button {
	padding:5px 0;
	width: 408px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
	function go(){
	    location.href="/web/bpm/user/toRegister";
	}

    //点击跟新验证码
    $("#verify_codeid").click(function () {
        loadVerifyCode();
    })
    function loadVerifyCode() {
        var url = "/loadverify";
        $("#verify_codeid").attr("src", url + "?" + Date.parse(new Date()));
    }


</script>

