登录界面的样式修改

snowy-admin-web/src/views/auth/login/login.vue

@@ -1,17 +1,27 @@
 <template>
 	<div class="login-wrapper">
-		<div class="login-title">{{ sysBaseConfig.SNOWY_SYS_NAME }}</div>
-		<div class="login_form">
-			<div class="form_head">登 录</div>
-			<div class="form_body">
-				<a-form ref="loginForm" :model="ruleForm" :rules="rules">
+		<div class="login_left">
+			<div class="version">
+				<a class="xn-color-a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
+					sysBaseConfig.SNOWY_SYS_COPYRIGHT
+				}}</a>
+			</div>
+		</div>
+		<div class="login_right">
+			<div class="login_head">
+				<img class="login-logo" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
+				<span class="login-title">{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
+			</div>
+			<div class="login_form">
+				<div class="form_head">登 录</div>
+				<a-form ref="loginForm" :model="ruleForm" :rules="rules" layout="vertical">
 					<!-- 用户名 -->
-					<a-form-item name="account">
+					<a-form-item label="用户名" name="account">
 						<a-input v-model:value="ruleForm.account" placeholder="用户名" size="large" @keyup.enter="login"> </a-input>
 					</a-form-item>
 
 					<!-- 密码 -->
-					<a-form-item name="password">
+					<a-form-item label="密码" name="password">
 						<a-input-password
 							v-model:value="ruleForm.password"
 							placeholder="密码"
@@ -23,7 +33,7 @@
 					</a-form-item>
 
 					<!-- 验证码 -->
-					<a-form-item name="validCode" v-if="captchaOpen === 'true'">
+					<a-form-item label="验证码" name="validCode" v-if="captchaOpen === 'true'">
 						<a-row :gutter="8">
 							<a-col :span="17">
 								<a-input v-model:value="ruleForm.validCode" placeholder="验证码" size="large" @keyup.enter="login">
@@ -37,7 +47,7 @@
 
 					<!-- 记住登录状态 -->
 					<a-form-item>
-						<a-checkbox v-model:checked="ruleForm.autologin">记住登录状态</a-checkbox>
+						<a-checkbox v-model:checked="ruleForm.autologin">记住用户名密码</a-checkbox>
 					</a-form-item>
 
 					<!-- 登录按钮 -->
@@ -47,11 +57,11 @@
 						</a-button>
 					</a-form-item>
 				</a-form>
+				<!-- <div class="form_foot">没有账号?点击<router-link to="/findpwd" class="nav-link">注册</router-link></div> -->
+			</div>
+			<div class="login_official">
+				<img src="/src/assets/images/login/official.jpg" class="code" />
 			</div>
-			<!-- <div class="form_foot">没有账号?点击<router-link to="/findpwd" class="nav-link">注册</router-link></div> -->
-		</div>
-		<div class="version">
-			{{ sysBaseConfig.SNOWY_SYS_COPYRIGHT }}
 		</div>
 	</div>
 </template>
@@ -241,69 +251,116 @@
 <style lang="less" scoped>
 	.login-wrapper {
 		width: 100%;
-		min-height: 800px;
+		min-height: 850px;
 		height: 100vh;
 		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: flex-start;
-		padding-top: 10%;
-		background-image: url('/src/assets/images/login/logo_background.png');
+		position: relative;
+		background-image: url('/src/assets/images/login/bg.png'); /* 背景图 */
 		background-size: cover;
 		background-position: center;
-		position: relative;
-		.login-title {
-			font-size: 30px;
-			margin-bottom: 30px;
-			letter-spacing: 5px;
-			font-weight: bold;
 
-			color: #1f3253;
+		.login_left {
+			flex: 7.5;
+			position: relative;
+
+			.version {
+				color: #cdced1;
+				font-size: 13px;
+				position: absolute;
+				bottom: 10px;
+				left: 20px;
+				a {
+					text-decoration: none;
+				}
+			}
 		}
 
-		// 登录
-		.login_form {
-			width: 400px;
-			padding: 0 0 30px;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			border-radius: 5px;
-			background-color: #fbfcfd;
-
-			.form_head {
-				font-size: 20px;
-				height: 70px;
-				line-height: 70px;
+		.login_right {
+			flex: 2.5;
+			padding: 0 50px 50px;
+			padding-top: 5%;
+			background-color: rgba(0, 0, 0, 0.6);
+
+			// 标题logo区域
+			.login_head {
+				display: flex;
+				align-items: center;
+				.login-logo {
+					width: 50px;
+					height: 45px;
+				}
+				.login-title {
+					padding: 0 15px;
+					font-size: 28px;
+					color: #ffffff;
+				}
 			}
 
-			// 表单
-			.form_body {
+			// 登录表单
+			.login_form {
 				width: 100%;
-				padding: 0 30px;
+				padding: 0 5px;
+				display: flex;
+				flex-direction: column;
+
+				// 登录名称
+				.form_head {
+					font-size: 24px;
+					color: #d1d1d1;
+					margin: 60px 0 40px;
+				}
 
+				// 登录按钮
 				.w-full {
-					background-color: #0052cc;
+					background-color: #016de8;
+					margin-top: 10px;
+				}
+				// 注册
+				.form_foot {
+					font-size: 14px;
+					.nav-link {
+						text-decoration: none;
+						color: #0052cc;
+					}
+					.nav-link:hover {
+						text-decoration: underline;
+					}
 				}
 			}
 
-			// 注册
-			.form_foot {
-				font-size: 14px;
-				.nav-link {
-					text-decoration: none;
-					color: #0052cc;
+			:deep(.ant-form-item) {
+				margin-bottom: 35px;
+				label {
+					font-size: 15px;
+					color: #676767;
+				}
+				.ant-input,
+				.ant-input-affix-wrapper,
+				.ant-input-password-icon {
+					background-color: #1a1a1a;
+					color: #a0a0a0;
+					border-color: #1a1a1a;
+				}
+				.ant-input::placeholder {
+					font-size: 13px;
+					color: #a0a0a0;
 				}
-				.nav-link:hover {
-					text-decoration: underline;
+				.ant-input:hover,
+				.ant-input-affix-wrapper:hover {
+					background-color: #1a1a1a;
+					border-color: #1a1a1a;
 				}
 			}
-		}
 
-		.version {
-			position: absolute;
-			bottom: 10px;
-			font-size: 13px;
+			// 公众号
+			.login_official {
+				text-align: center;
+				margin: 80px 0;
+				.code {
+					width: 100px;
+					height: 100px;
+				}
+			}
 		}
 	}
 </style>