Prechádzať zdrojové kódy

Update 优化登录页面,响应式设计

Yue 6 mesiacov pred
rodič
commit
75b78d5716
1 zmenil súbory, kde vykonal 36 pridanie a 4 odobranie
  1. 36 4
      UI/VAP_V3.VUE/src/views/account/login.vue

+ 36 - 4
UI/VAP_V3.VUE/src/views/account/login.vue

@@ -19,7 +19,7 @@ const tenantOptions = ref<TenantVO[]>([])
 const loginForm = ref<LoginData>({
 	tenantId: "000000",
 	username: "admin",
-	password: "123iwb",
+	password: "",
 	rememberMe: false,
 	code: "",
 	uuid: ""
@@ -136,6 +136,8 @@ const initTenant = async () => {
 		})
 }
 function init() {
+	// 移除设备检测跳转逻辑,使用响应式设计适配所有设备
+	
 	appStore.appConfigStore
 		.loadConfig()
 		.then(() => {
@@ -282,9 +284,11 @@ watch(
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	height: 100%;
+	height: 100vh;
 	background-image: url("/media/auth/bg5.jpg");
 	background-size: cover;
+	padding: 20px;
+	box-sizing: border-box;
 }
 
 .title {
@@ -296,7 +300,8 @@ watch(
 .login-form {
 	border-radius: 6px;
 	background: rgba(255, 255, 255, 0.9);
-	width: 400px;
+	width: 100%;
+	max-width: 400px;
 	padding: 25px 25px 5px 25px;
 
 	.el-input {
@@ -348,4 +353,31 @@ watch(
 	height: 40px;
 	padding-left: 12px;
 }
-</style>
+
+.link-type {
+	text-decoration: none;
+	color: #337ab7;
+}
+
+// 响应式设计,适配移动端
+@media (max-width: 768px) {
+	.login-form {
+		max-width: 350px;
+		padding: 25px 25px 5px 25px;
+	}
+}
+
+@media (max-width: 480px) {
+	.login {
+		padding: 10px;
+	}
+	
+	.login-form {
+		padding: 20px 20px 5px 20px;
+	}
+	
+	.el-login-footer {
+		font-size: 10px;
+	}
+}
+</style>