登录界面ui修改

src/main/resources/views/themes/default/modules/sys/sysLogin.html

@@ -1,119 +1,211 @@
-<% layout('/layouts/default.html', {title: '登录', libs: ['validate'], bodyClass: 'login-page'}){ %>
+<% layout('/layouts/default.html', {title: '登录', libs: ['validate'], bodyClass: 'login-page mes-login-page'}){ %>
 <% include('/include/upgrade.html'){} // 如果客户浏览器版本过低，则显示浏览器升级提示。 %>
-<!-- <link rel="stylesheet" href="${ctxStatic}/icheck/1.0/square/blue.css?${_version}"> -->
 <link rel="stylesheet" href="${ctxStatic}/jquery-toastr/2.1/toastr.min.css?${_version}">
-<link rel="stylesheet" href="${ctxStatic}/modules/sys/sysLogin.css?${_version}">
-<div class="login-box" style="margin:7% auto 300px auto;">
-	<div class="login-logo">
-		<a href="${ctxAdmin}/login">
-			<b>${@Global.getConfig('productNamePrefix')}${@Global.getConfig('productName')}</b>
-			<small>${@Global.getConfig('productVersion')}</small>
-		</a>
-	</div>
-	<div class="login-box-body">
-		<% var defaultSkinName = @Global.getConfig('sys.index.skinName', 'skin-blue-light3');
-		var skinName = cookie('skinName', false, defaultSkinName);
-		if (skinName == 'skin-dark') { %>
-<!--			<a class="switchSkin" href="${ctxAdmin}/switchSkin/${defaultSkinName}" title="${text('浅色模式')}"><i class="fa fa-toggle-off"></i></a>-->
-		<% }else{ %>
-<!--			<a class="switchSkin" href="${ctxAdmin}/switchSkin/skin-dark" title="${text('黑暗模式')}"><i class="fa fa-toggle-on"></i></a>-->
-		<% } %>
-		<% var isLoginByValidCode = @Global.getConfigToBoolean('user.loginByValidCode', 'true'); %>
-		<% if(isLoginByValidCode){ %>
-			<ul id="loginTab" class="nav nav-tabs">
-				<li class="active"><a href="#tab-1" data-toggle="tab" action="${ctxAdmin}/login">${text('账号登录')}</a></li>
-<!--				<li><a href="#tab-2" data-toggle="tab" action="${ctxPath}/account/loginByValidCode">${text('手机登录')}</a></li>-->
-				<% if(isNotBlank(@Global.getConfig('shiro.ldapUrl'))){ %>
-<!--					<li><a href="#tab-3" data-toggle="tab" action="${ctxAdmin}/login-ldap">${text('LDAP登录')}</a></li>-->
+<style>
+	html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
+	body.mes-login-page {
+		overflow: hidden !important;
+		background-image: url("${ctxStatic}/screen/imgs/background.png") !important;
+		background-size: cover !important;
+		background-position: center center !important;
+		background-repeat: no-repeat !important;
+		background-attachment: fixed !important;
+		font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
+	}
+	body.mes-login-page::before {
+		content: "";
+		position: fixed;
+		inset: 0;
+		background: rgba(235, 245, 255, 0.45);
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	/* 重置 AdminLTE 自带的 login-box */
+	body.mes-login-page .login-box {
+		position: static !important;
+		width: auto !important;
+		max-width: none !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		background: transparent !important;
+		box-shadow: none !important;
+		border: none !important;
+	}
+	body.mes-login-page .login-logo,
+	body.mes-login-page .login-copyright-old,
+	body.mes-login-page #loginTab,
+	body.mes-login-page .login-box-msg,
+	body.mes-login-page .row,
+	body.mes-login-page .mt5.icheck,
+	body.mes-login-page .icheck { display: none !important; }
+	body.mes-login-page .login-box-body {
+		background: transparent !important;
+		padding: 0 !important;
+		box-shadow: none !important;
+		border: none !important;
+	}
+	body.mes-login-page .tab-content > .tab-pane { display: block !important; }
+
+	/* 左侧品牌区 - logo 图片已包含文字 */
+	.mes-brand {
+		position: fixed;
+		left: 15%;
+		top:  47%;
+		transform: translateY(-50%);
+		z-index: 10;
+	}
+	.mes-brand .mes-brand-logo {
+		height: 110px;
+		width: auto;
+		max-width: 600px;
+		object-fit: contain;
+		display: block;
+	}
+
+	/* 登录卡片 */
+	.mes-login-box {
+		position: fixed;
+		top: 50%;
+		right: 10%;
+		transform: translateY(-50%);
+		width: 480px;
+		min-height: 540px;
+		background: rgba(255, 255, 255, 0.95);
+		box-shadow: 0 10px 40px rgba(30, 60, 120, 0.15);
+		border-radius: 8px;
+		padding: 60px 50px 40px;
+		z-index: 20;
+		box-sizing: border-box;
+	}
+	.mes-login-box h2.mes-login-title {
+		font-size: 26px;
+		font-weight: bold;
+		color: #1F3B7A;
+		margin: 0 0 40px;
+		letter-spacing: 2px;
+	}
+	.mes-login-box .form-group {
+		margin-bottom: 22px;
+		position: relative;
+	}
+	.mes-login-box .form-control {
+		height: 52px !important;
+		width: 100% !important;
+		border: 1px solid #d5dbe8 !important;
+		border-radius: 6px !important;
+		padding: 10px 16px !important;
+		font-size: 15px !important;
+		color: #1F3B7A !important;
+		background: #ffffff !important;
+		box-shadow: none !important;
+		transition: border-color 0.2s, box-shadow 0.2s;
+		display: block !important;
+	}
+	.mes-login-box .form-control::placeholder { color: #8a97b3; }
+	.mes-login-box .form-control:focus {
+		border-color: #1F3B7A !important;
+		box-shadow: 0 0 0 3px rgba(31, 59, 122, 0.08) !important;
+		outline: none !important;
+	}
+	.mes-login-box .has-feedback .form-control-feedback { display: none !important; }
+	.mes-login-box .btn-login {
+		width: 100%;
+		height: 52px;
+		background: #1F3B7A;
+		border: none;
+		border-radius: 6px;
+		color: #ffffff;
+		font-size: 16px;
+		letter-spacing: 6px;
+		font-weight: bold;
+		cursor: pointer;
+		transition: background 0.2s;
+	}
+	.mes-login-box .btn-login:hover,
+	.mes-login-box .btn-login:focus,
+	.mes-login-box .btn-login:active {
+		background: #163066;
+		outline: none;
+	}
+	.mes-login-box .forget-row {
+		text-align: center;
+		margin-top: 18px;
+		font-size: 13px;
+		color: #6b7a99;
+	}
+	.mes-login-box .forget-row a { color: #6b7a99; text-decoration: none; }
+	.mes-login-box .forget-row a:hover { color: #1F3B7A; }
+
+	/* 底部版权 */
+	.mes-copyright {
+		position: fixed;
+		bottom: 24px;
+		left: 0;
+		right: 0;
+		text-align: center;
+		font-size: 13px;
+		color: #3C5A99;
+		letter-spacing: 1px;
+		z-index: 10;
+	}
+</style>
+
+<!-- 左侧品牌 -->
+<div class="mes-brand">
+	<img class="mes-brand-logo" src="${ctxStatic}/screen/imgs/logo.png" alt="鲁匠人MES生产管理系统">
+</div>
+
+<!-- 登录卡片 -->
+<div class="mes-login-box">
+	<h2 class="mes-login-title">欢迎登录</h2>
+	<div class="login-box">
+		<div class="login-box-body">
+			<#form:form id="loginForm" model="${user!}" action="${ctxAdmin}/login" method="post" class="tab-content">
+				<% if(isNotBlank(message!)){ %>
+					<h4 class="login-box-msg text-red">${message}</h4>
 				<% } %>
-			</ul>
-		<% } %>
-		<#form:form id="loginForm" model="${user!}" action="${ctxAdmin}/login" method="post" class="tab-content">
-			<% if(!isLoginByValidCode && isBlank(message!)){ %>
-				<h4 class="login-box-msg">${text('欢迎回来')+'！'}</h4>
-			<% }else if(isNotBlank(message!)){ %>
-				<h4 class="login-box-msg text-red">${message}</h4>
-			<% } %>
-			<div class="form-group has-feedback">
-				<span class="icon-user form-control-feedback" title="${text('登录账号')}"></span>
-				<#form:input type="text" name="username" class="form-control required"
-					data-msg-required="${text('请填写登录账号.')}" placeholder="${text('登录账号')}"
-					value="${cookie('rememberUserCode')}"/>
-			</div>
-			<div class="form-group has-feedback tab-pane tab-1 tab-3 active">
-				<span class="icon-lock form-control-feedback" title="${text('登录密码，鼠标按下显示密码')}"
-					onmousedown="$('#password').attr('type','text')" onmouseup="$('#password').attr('type','password')"
-					onmouseenter="$(this).removeClass('icon-lock').addClass('icon-eye')"
-					onmouseout="$(this).removeClass('icon-eye').addClass('icon-lock')"></span>
-				<#form:input type="password" name="password" class="form-control required"
-					data-msg-required="${text('请填写登录密码.')}" placeholder="${text('登录密码')}" autocomplete="off"/>
-			</div>
-			<% if(@Global.getConfigToBoolean('user.loginCodeCorpUnique', 'false')){ %>
-			<div class="form-group has-feedback">
-				<#form:treeselect id="switchCorpSelect" title="${text('登录租户')}" allowClear="false"
-					name="param_corpCode" url="${ctxAdmin}/sys/corpAdmin/treeData?isShowCode=true" placeholder="${text('登录租户')}"/>
-			</div>
-			<% } %>
-			<div class="form-group has-feedback" id="isValidCodeLogin" style="display:${isValidCodeLogin?'blank':'none'}">
-				<#form:validcode name="validCode" isRequired="true" isRemote="true" isLazy="${!isValidCodeLogin}"/>
-			</div>
-			<div class="form-group has-feedback tab-pane tab-2">
-				<div class="input-group">
-					<input type="text" id="loginValidCode" name="loginValidCode" class="form-control required"
-						data-msg-required="${text('请填写手机验证码.')}" placeholder="${text('手机验证码')}" />
-					<span class="input-group-btn">
-						<input type="button" id="sendLoginValidCode" value="${text('获取手机验证码')}" class="btn btn-flat"/>
-					</span>
+				<div class="form-group has-feedback">
+					<#form:input type="text" name="username" class="form-control required"
+						data-msg-required="${text('请填写登录账号.')}" placeholder="${text('请输入用户名...')}"
+						value="${cookie('rememberUserCode')}"/>
 				</div>
-			</div>
-			<div class="form-group">
-				<div class="mt5 icheck">
-					<label title="${text('公共场所慎用,下次不需要再填写帐号')}"><input type="checkbox"
-						name="rememberUserCode"${isNotBlank(cookie('rememberUserCode'))?' checked':''}
-						class="form-control" data-style="minimal-grey"> ${text('记住账号')}</label> &nbsp; 
-					<label title="${text('公共场所慎用,下次不需要再填写帐号和密码')}"><input type="checkbox"
-						name="rememberMe"${isNotBlank(cookie('rememberMe'))?' checked':''}
-						class="form-control" data-style="minimal-grey"> ${text('自动登录')}</label>
+				<div class="form-group has-feedback tab-pane tab-1 tab-3 active">
+					<#form:input type="password" name="password" class="form-control required"
+						data-msg-required="${text('请填写登录密码.')}" placeholder="${text('请输入密码...')}" autocomplete="off"/>
 				</div>
-			</div>
-			<div class="form-group">
-				<!-- <input type="hidden" name="param_deviceType" value="pc"> -->
-				<input type="hidden" name="__url" value="${parameter.__url!}">
-				<button type="submit" class="btn btn-primary btn-block btn-flat"
-					id="btnSubmit" data-loading="${text('登录验证成功，正在进入...')}"
-					data-login-valid="${text('正在验证登录，请稍候...')}">${text('立即登录')}</button>
-			</div>
-		</#form:form>
-		<div class="row">
-			<div class="col-xs-12">
-<!--				<a href="${ctxPath}/account/forgetPwd" class="pull-left">[ ${text('忘记密码')} ]</a>-->
-				<% if(@Global.getConfigToBoolean('sys.account.registerUser', 'false')){ %>
-					<a href="${ctxPath}/account/registerUser" class="pull-left ml10">[ ${text('注册账号')} ]</a>
-				<% } %>
-				<% if (@com.jeesite.common.i18n.I18nLocaleResolver.enabled()){ %>
-				<div class="dropdown pull-right">
-					<a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
-						<i class="fa icon-globe"></i> ${@DictUtils.getDictLabel('sys_lang_type', lang(), 'zh_CN')}
-					</a>
-					<ul class="dropdown-menu">
-						<li class="mt5"></li>
-						<% for(var dict in @DictUtils.getDictList('sys_lang_type')){ %>
-							<li><a href="${ctxPath}/lang/${dict.dictValue}">${dict.dictLabel}</a></li>
-						<% } %>
-						<li class="mt10"></li>
-					</ul>
+				<% if(@Global.getConfigToBoolean('user.loginCodeCorpUnique', 'false')){ %>
+				<div class="form-group has-feedback">
+					<#form:treeselect id="switchCorpSelect" title="${text('登录租户')}" allowClear="false"
+						name="param_corpCode" url="${ctxAdmin}/sys/corpAdmin/treeData?isShowCode=true" placeholder="${text('登录租户')}"/>
 				</div>
 				<% } %>
-			</div>
+				<div class="form-group has-feedback" id="isValidCodeLogin" style="display:${isValidCodeLogin?'blank':'none'}">
+					<#form:validcode name="validCode" isRequired="true" isRemote="true" isLazy="${!isValidCodeLogin}"/>
+				</div>
+				<div class="form-group mt5 icheck" style="display:none">
+					<label><input type="checkbox" name="rememberUserCode"${isNotBlank(cookie('rememberUserCode'))?' checked':''}></label>
+					<label><input type="checkbox" name="rememberMe"${isNotBlank(cookie('rememberMe'))?' checked':''}></label>
+				</div>
+				<div class="form-group">
+					<input type="hidden" name="__url" value="${parameter.__url!}">
+					<button type="submit" class="btn-login"
+						id="btnSubmit" data-loading="${text('登录验证成功，正在进入...')}"
+						data-login-valid="${text('正在验证登录，请稍候...')}">${text('登录')}</button>
+				</div>
+				<div class="forget-row">
+					<a href="javascript:void(0);">${text('忘记密码')}?</a>
+				</div>
+			</#form:form>
 		</div>
 	</div>
-	<div class="login-copyright">
-		&copy; ${@DateUtils.getYear()} ${@Global.getConfig('productName')} - Powered By <a
-			id="loginKey" data-key="${@Global.getConfig('shiro.loginSubmit.secretKey')}"
-			href="#">${@Global.getConfig('companyName')}</a>
-	</div>
+</div>
+
+<div class="mes-copyright">
+	Copyright &copy; ${@DateUtils.getYear()} 鲁匠人MES生产管理系统 &nbsp;&nbsp; 版权所有
+	<a id="loginKey" data-key="${@Global.getConfig('shiro.loginSubmit.secretKey')}" href="#" style="display:none">${@Global.getConfig('companyName')}</a>
 </div>
 <% } %>
 <script src="${ctxStatic}/common/des.js?${_version}"></script>
 <script src="${ctxStatic}/jquery-toastr/2.1/toastr.min.js?${_version}"></script>
-<script src="${ctxStatic}/modules/sys/sysLogin.js?${_version}"></script>
+<script src="${ctxStatic}/modules/sys/sysLogin.js?${_version}"></script>