登陆页面修改

zq
1 parent adfc1508
Showing 6 changed files with 70 additions and 273 deletions
src/main/resources/static/assets/img/button_login.png
src/main/resources/static/assets/img/button_pwd.png
src/main/resources/static/assets/img/button_user.png
src/main/resources/static/assets/img/login_bgbg.png
src/main/resources/static/assets/img/login_bgcenter.png
src/main/resources/static/login.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>登录</title>
 <meta name=”renderer” content=”webkit”>
-<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″ >
+<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>
 <meta content="width=device-width, initial-scale=1" name="viewport" />
 <meta content="" name="description" />
 <meta content="" name="author" />
@@ -26,303 +26,100 @@ Login page
 ***/
 /* bg color */
 .login {
-	background-color: #364150 !important;
+	width: 100%;
+	height: 100%;
+	background-image: url(./assets/img/login_bgbg.png);
+	background-size: 100%
 }
-.login .logo {
-	margin: 0 auto;
-	margin-top: 60px;
-	padding: 15px;
-	text-align: center;
-}
-
-.login .content {
-	background-color: #eceef1;
-	-webkit-border-radius: 7px;
-	-moz-border-radius: 7px;
-	-ms-border-radius: 7px;
-	-o-border-radius: 7px;
-	border-radius: 7px;
-	width: 400px;
-	margin: 40px auto 10px auto;
-	padding: 30px;
-	padding-top: 10px;
-	overflow: hidden;
-	position: relative;
+.loginCenter {
+	background-image: url(./assets/img/login_bgcenter.png);
+	background-repeat: no-repeat;
+	background-size: 100%;
+	position: absolute;
 }
-.login .content h3 {
-	color: #4db3a5;
+.loginInputDiv {
+	top: 48%;
+	width: 80%;
+	position: absolute;
+	vertical-align: middle;
 	text-align: center;
-	font-size: 28px;
-	font-weight: 400 !important;
-}
-
-.login .content h4 {
-	color: #555;
-}
-
-.login .content .hint {
-	color: #999;
-	padding: 0;
-	margin: 15px 0 7px 0;
-}
-
-.login .content .login-form, .login .content .forget-form {
-	padding: 0px;
-	margin: 0px;
-}
-
-.login .content .form-control {
-	border: none;
-	background-color: #dde3ec;
-	height: 43px;
-	color: #8290a3;
-	border: 1px solid #dde3ec;
-}
-
-.login .content .form-control:focus, .login .content .form-control:active
-	{
-	border: 1px solid #c3ccda;
-}
-
-.login .content .form-control::-moz-placeholder {
-	color: #8290a3;
-	opacity: 1;
-}
-
-.login .content .form-control:-ms-input-placeholder {
-	color: #8290a3;
-}
-
-.login .content .form-control::-webkit-input-placeholder {
-	color: #8290a3;
-}
-
-.login .content select.form-control {
-	padding-left: 9px;
-	padding-right: 9px;
-}
-
-.login .content .forget-form {
-	display: none;
-}
-
-.login .content .register-form {
-	display: none;
-}
-
-.login .content .form-title {
-	font-weight: 300;
-	margin-bottom: 25px;
-}
-
-.login .content .form-actions {
-	clear: both;
-	border: 0px;
-	border-bottom: 1px solid #eee;
-	padding: 25px 30px 25px 30px;
-	margin-left: -30px;
-	margin-right: -30px;
-}
-
-.login-options {
-	margin-bottom: 30px;
-	overflow: hidden;
-}
-
-.login-options h4 {
-	float: left;
-	font-weight: 600;
-	font-size: 15px;
-	color: #7d91aa !important;
-}
-
-.login-options .social-icons {
-	float: right;
-	padding-top: 3px;
-}
-
-.login-options .social-icons li a {
-	border-radius: 15px 15px 15px 15px !important;
-	-moz-border-radius: 15px 15px 15px 15px !important;
-	-webkit-border-radius: 15px 15px 15px 15px !important;
 }
-.login .content .form-actions .checkbox {
-	margin-left: 0;
-	padding-left: 0;
+.loginInput {
+	padding: 6px 12px;
+	border: 1px solid #ffffff;
+	background-color: #FFFFFF;
+	vertical-align: middle;
 }
-.login .content .forget-form .form-actions {
-	border: 0;
-	margin-bottom: 0;
-	padding-bottom: 20px;
-}
-
-.login .content .register-form .form-actions {
-	border: 0;
-	margin-bottom: 0;
-	padding-bottom: 0px;
-}
-
-.login .content .form-actions .btn {
-	margin-top: 1px;
-}
-
-.login .content .form-actions .btn {
-	font-weight: 600;
-	padding: 10px 20px !important;
-}
-
-.login .content .form-actions .btn-default {
-	font-weight: 600;
-	padding: 10px 25px !important;
-	color: #6c7a8d;
-	background-color: #ffffff;
-	border: none;
-}
-
-.login .content .form-actions .btn-default:hover {
-	background-color: #fafaff;
-	color: #45b6af;
-}
-
-.login .content .forget-password {
-	font-size: 14px;
-	float: right;
-	display: inline-block;
-	margin-top: 10px;
-}
-
-.login .content .check {
-	color: #8290a3;
-}
-
-.login .content .rememberme {
-	margin-left: 8px;
-	margin-top: 10px;
-}
-
-.login .content .create-account {
-	margin: 0 -40px -30px -40px;
-	padding: 15px 0 17px 0;
-	text-align: center;
-	background-color: #6c7a8d;
-	-webkit-border-radius: 0 0 7px 7px;
-	-moz-border-radius: 0 0 7px 7px;
-	-ms-border-radius: 0 0 7px 7px;
-	-o-border-radius: 0 0 7px 7px;
-	border-radius: 0 0 7px 7px;
-}
-
-.login .content .create-account>p {
-	margin: 0;
-}
-
-.login .content .create-account p a {
-	font-weight: 600;
-	font-size: 14px;
-	color: #c3cedd;
-}
-
-.login .content .create-account a {
-	display: inline-block;
-	margin-top: 5px;
-}
-
-/* footer copyright */
-.login .copyright {
-	text-align: center;
-	margin: 0 auto 30px 0;
-	padding: 10px;
-	color: #7a8ca5;
-	font-size: 13px;
-}
-
-@media ( max-width : 440px) {
-	/***
-  Login page
-  ***/
-	.login .logo {
-		margin-top: 10px;
-	}
-	.login .content {
-		width: 280px;
-		margin-top: 10px;
-	}
-	.login .content h3 {
-		font-size: 22px;
-	}
-	.forget-password {
-		display: inline-block;
-		margin-top: 20px;
-	}
-	.login-options .social-icons {
-		float: left;
-		padding-top: 3px;
-	}
-	.login .checkbox {
-		font-size: 13px;
-	}
+.buttonLogin {
+	cursor: pointer;
 }
 </style>
 </head>
-<body class=" login">
-	<!-- BEGIN LOGO -->
-	<div class="logo">
-		<a href="index.html"> <img src="metronic_v4.5.4/img/logo-big.png"
-			alt="" />
-		</a>
-	</div>
-	<!-- END LOGO -->
-	<!-- BEGIN LOGIN -->
-	<div class="content">
+<body class="login">
+	<div class="loginCenter">
 		<form class="login-form" action="/login" method="post">
-			<h3 class="form-title font-green">Sign In</h3>
-			<div class="alert alert-danger display-hide">
-				<button class="close" data-close="alert"></button>
-				<span> Enter any username and password. </span>
-			</div>
-			<div class="form-group">
-				<label class="control-label visible-ie8 visible-ie9">用户名</label> <input
-					class="form-control form-control-solid placeholder-no-fix"
-					type="text" autocomplete="off" placeholder="用户名" name="username" value="admin"/>
-			</div>
-			<div class="form-group">
-				<label class="control-label visible-ie8 visible-ie9">密码</label> <input
-					class="form-control form-control-solid placeholder-no-fix"
-					type="password" autocomplete="off" placeholder="密码" name="password" value="admin"/>
-			</div>
-			<div class="form-actions">
-				<button type="submit" class="btn green uppercase">登录</button>
-				<a href="javascript:;" id="forget-password" class="forget-password">忘记密码
-					？</a>
+			<div class="col-md-12 loginInputDiv">
+				<img src="./assets/img/button_user.png" id="img_user"> 
+				<input class="loginInput" type="text" autocomplete="off" 
+					placeholder="用户名" name="username" value="admin" /> 
+				<img src="./assets/img/button_pwd.png"> 
+				<input class="loginInput" type="password" autocomplete="off" 
+					placeholder="密码" name="password" value="admin" /> 
+				<img src="./assets/img/button_login.png" class="buttonLogin">
 			</div>
 		</form>
 	</div>
-
 	<script src="metronic_v4.5.4/plugins/jquery.min.js"
 		type="text/javascript"></script>
 	<script src="metronic_v4.5.4/plugins/bootstrap/js/bootstrap.min.js"
 		type="text/javascript"></script>
 	<script src="metronic_v4.5.4/scripts/app.min.js" type="text/javascript"></script>
-	
+
 	<script src="assets/plugins/purl.js"></script>
-<script type="text/javascript">
-$(function(){
-	if($.url().param('error')){
-		//去session里查一下失败信息
-		$.get('/user/loginFailure', function(msg){
-			if(msg && msg != '')
-				alert(msg);
-			location.href = '/login.html';
+	<script type="text/javascript">
+		$(function() {
+			setCenterCss();
+			if ($.url().param('error')) {
+				//去session里查一下失败信息
+				$.get('/user/loginFailure', function(msg) {
+					if (msg && msg != '')
+						alert(msg);
+					location.href = '/login.html';
+				});
+			}
+			$(window).resize(setCenterCss);
+			// 设置登录界面样式,让登陆框始终居中
+			function setCenterCss() {
+				$(".loginCenter").css({
+					width : $(window).width() * 0.4,
+					height : $(window).height() * 0.2,
+				});
+				$(".loginCenter").css({
+					left : ($(window).width() - $(".loginCenter") .outerWidth()) / 2,
+					top : ($(window).height() - $(".loginCenter") .outerHeight()) / 2
+				});
+			}
+			// 设置两个输入框的高度和左边图片高度一致，宽度为父DIV loginInputDiv减 去三个按钮的宽带度/2*0。8
+			$(".loginInput").css({
+				height : $("#img_user").height(),
+				width : ($(".loginInputDiv").width()- $("#img_user").width() * 2 - 
+						$(".buttonLogin").width()) / 2 * 0.8
+			});
+			// 设置中间登陆框DIV左右居中
+			$(".loginInputDiv").css({
+				left : ($(".loginCenter").outerWidth() - $(".loginInputDiv").outerWidth()) / 2,
+			});
+			$(".buttonLogin").bind("click", function() {
+				$(".login-form").submit();
+			});
 		});
-	}
-});
-</script>
+	</script>
 </body>
 </html>
 \ No newline at end of file