登陆界面美化

web/src/views/system/login/component/account.vue

@@ -187,8 +187,8 @@ export default defineComponent({
 			// 初始化登录成功时间问候语
 			let currentTimeInfo = currentTime.value;
 			// 登录成功，跳到转首页
-      const pwd_change_count = userInfos.value.pwd_change_count
+      const pwd_change_count = userInfos.value.pwd_change_count ?? 0
-      if(pwd_change_count>0){
+      if(pwd_change_count > 0){
         // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
         if (route.query?.redirect) {
         	router.push({
@@ -234,16 +234,37 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+// 定义error-num动画的关键帧
+@keyframes error-num {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .login-content-form {
 	margin-top: 20px;
 
+	// 为输入框添加圆角和设置字体大小
+	:deep(.el-input__wrapper) {
+		border-radius: 8px !important;
+	}
+	// 设置输入框文字大小
+	:deep(.el-input__inner) {
+		font-size: 12px !important; // Element Plus large尺寸的默认字体大小
+	}
+
 	@for $i from 1 through 4 {
 		.login-animation#{$i} {
 			opacity: 0;
 			animation-name: error-num;
 			animation-duration: 0.5s;
 			animation-fill-mode: forwards;
-			animation-delay: calc($i/10) + s;
+			animation-delay: #{$i/10}s;
 		}
 	}
 
@@ -253,7 +274,7 @@ export default defineComponent({
 		cursor: pointer;
 
 		&:hover {
-			color: #909399;
+			color: #909397;
 		}
 	}
 
@@ -262,6 +283,7 @@ export default defineComponent({
 		padding: 0;
 		font-weight: bold;
 		letter-spacing: 5px;
+    border-radius: 8px !important;
 	}
 
 	.login-content-submit {
@@ -269,6 +291,7 @@ export default defineComponent({
 		letter-spacing: 2px;
 		font-weight: 800;
 		margin-top: 15px;
+    border-radius:8px;
 	}
 }
 </style>

web/src/views/system/login/component/changePwd.vue

@@ -239,6 +239,15 @@ export default defineComponent({
 .login-content-form {
 	margin-top: 20px;
 
+	// 为输入框添加圆角和设置字体大小
+	:deep(.el-input__wrapper) {
+		border-radius: 8px !important;
+	}
+	// 设置输入框文字大小
+	:deep(.el-input__inner) {
+		font-size: 12px !important; // Element Plus large尺寸的默认字体大小
+	}
+
 	@for $i from 1 through 5 {
 		.login-animation#{$i} {
 			opacity: 0;
@@ -264,6 +273,7 @@ export default defineComponent({
 		padding: 0;
 		font-weight: bold;
 		letter-spacing: 5px;
+    border-radius: 8px !important;
 	}
 
 	.login-content-submit {
@@ -271,6 +281,7 @@ export default defineComponent({
 		letter-spacing: 2px;
 		font-weight: 800;
 		margin-top: 15px;
+    border-radius:8px;
 	}
 }
 </style>

web/src/views/system/login/index.vue

@@ -5,8 +5,6 @@
 				<img :src="siteLogo" />
 				<div class="login-left-logo-text">
 					<span>{{ getSystemConfig['login.site_title'] || getThemeConfig.globalViceTitle }}</span>
-					<span class="login-left-logo-text-msg" style="margin-top: 5px;">{{
-						getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg }}</span>
 				</div>
 			</div>
 		</div>
@@ -16,7 +14,9 @@
 <!--				<span class="login-right-warp-two"></span>-->
 				<div class="login-right-warp-mian">
 					<div class="login-right-warp-main-title">
-            {{userInfos.pwd_change_count===0?'初次登录修改密码':'欢迎登录'}}
+            <span>{{getSystemConfig['login.site_name'] || getThemeConfig.globalViceTitleMsg }}</span>
+            <br>
+            <span>{{userInfos.pwd_change_count===0?'初次登录请修改密码':'欢迎登录'}}</span>
           </div>
 					<div class="login-right-warp-main-form">
 						<div v-if="!state.isScan">
@@ -168,14 +168,11 @@ onMounted(() => {
 
 				span {
 					margin-left: 10px;
-					font-size: 16px;
+					font-size: 24px;
 					color: var(--el-color-primary);
 				}
 
-				.login-left-logo-text-msg {
+
-					font-size: 12px;
-					color: var(--el-color-primary);
-				}
 			}
 		}
 
@@ -280,10 +277,10 @@ onMounted(() => {
 				flex-direction: column;
 				height: 100%;
 
+
 				.login-right-warp-main-title {
 					height: 130px;
-					line-height: 130px;
+					font-size: 24px;
-					font-size: 32px;
           font-weight: 600;
 					text-align: center;
 					letter-spacing: 3px;
@@ -347,7 +344,7 @@ onMounted(() => {
 		text-align: center;
 
 		p {
-			font-size: 14px;
+			font-size: 12px;
 			color: rgba(0, 0, 0, 0.5);
 		}