修改登录页面样式

jee-mes-x04c.iml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="FacetManager">
+    <facet type="web" name="Web2">
+      <configuration>
+        <descriptors>
+          <deploymentDescriptor name="web.xml" url="file://$MODULE_DIR$/src/main/webapp/WEB-INF/web.xml" />
+        </descriptors>
+        <webroots>
+          <root url="file://$MODULE_DIR$/src/main/webapp" relative="/" />
+        </webroots>
+      </configuration>
+    </facet>
+  </component>
+</module>

src/main/resources/static/modules/sys/sysLogin.css

@@ -0,0 +1,113 @@
+.login-page {
+    background: no-repeat center center fixed;
+    background-size: cover !important;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.login-page::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 60, 120, 0.4);
+}
+
+.login-container {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 1100px;
+    padding: 40px;
+}
+
+.login-logo-area {
+    flex: 1;
+    padding-right: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.login-logo-area .logo-img {
+    max-width: 420px;
+    height: auto;
+}
+
+.login-logo-area .system-name {
+    font-size: 28px;
+    font-weight: bold;
+    color: #fff;
+    margin-top: 16px;
+    letter-spacing: 2px;
+}
+
+.login-logo-area .slogan {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+    margin-top: 8px;
+    letter-spacing: 4px;
+}
+
+.login-box {
+    width: 400px;
+    flex-shrink: 0;
+    z-index: 1;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.login-box .login-logo {
+    display: none;
+}
+
+.login-box-body {
+    background: rgba(255, 255, 255, 0.97);
+    border-radius: 10px;
+    padding: 36px 32px;
+}
+
+.login-box-body .login-box-msg {
+    text-align: center;
+    font-size: 20px;
+    color: #333;
+    margin-bottom: 24px;
+    font-weight: normal;
+}
+
+.login-box-body .form-control {
+    height: 44px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+    padding-left: 38px;
+    font-size: 14px;
+}
+
+.login-box-body .btn-primary {
+    height: 44px;
+    border-radius: 22px;
+    font-size: 16px;
+    margin-top: 8px;
+}
+
+.login-copyright {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 12px;
+    z-index: 1;
+    width: 100%;
+}

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

@@ -3,13 +3,12 @@
 <!-- <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>
+<style>.login-page{background-image:url("${ctxStatic}/screen/imgs/loginBg.png")!important;}</style>
+<div class="login-container">
+	<div class="login-logo-area">
+		<img class="logo-img" src="${ctxStatic}/screen/imgs/loginLogo.png" alt="logo">
 	</div>
+	<div class="login-box">
 	<div class="login-box-body">
 		<% var defaultSkinName = @Global.getConfig('sys.index.skinName', 'skin-blue-light3');
 		var skinName = cookie('skinName', false, defaultSkinName);
@@ -112,6 +111,7 @@
 			id="loginKey" data-key="${@Global.getConfig('shiro.loginSubmit.secretKey')}"
 			href="#">${@Global.getConfig('companyName')}</a>
 	</div>
+	</div>
 </div>
 <% } %>
 <script src="${ctxStatic}/common/des.js?${_version}"></script>