Răsfoiți Sursa

调增登录页手机端适配样式

liyanbo 1 lună în urmă
părinte
comite
5246fbbbca
1 a modificat fișierele cu 65 adăugiri și 55 ștergeri
  1. 65 55
      src/views/Login.vue

+ 65 - 55
src/views/Login.vue

@@ -180,7 +180,7 @@ const handleLogin = async () => {
       // 优先使用查询参数,如果没有则使用路由元数据中的默认值
       const currentRoute = router.currentRoute.value;
       const loginPath = currentRoute.query.loginPath || currentRoute.meta.defaultQuery?.loginPath || null
-      
+
       // 调用登录逻辑
       await loginLogic(loginData.value.loginForm, tenantId, isAuthorized, router, loginPath)
     }
@@ -395,7 +395,7 @@ onMounted(() => {
   .login-content {
     flex-direction: column;
   }
-  
+
   .bg-image-container {
     position: fixed;
     top: 0;
@@ -406,22 +406,22 @@ onMounted(() => {
     background-size: cover;
     background-position: center;
   }
-  
+
   .login-wrapper {
     flex: none;
-    width: 70%;
+    width: 85%;
     margin: 0 auto;
-    padding: 30px;
+    padding: 40px 35px;
     background: rgba(0, 17, 105, 0.85);
-    border-radius: 15px;
+    border-radius: 20px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    min-height: 40%;
+    min-height: 45%;
     overflow-y: auto;
   }
-  
+
   .login-input {
     width: 100%;
     height: 100%;
@@ -429,97 +429,107 @@ onMounted(() => {
     flex-direction: column;
     justify-content: center;
   }
-  
+
   .app-header {
-    height: rpx(50);
-    gap: rpx(10);
+    height: rpx(70);
+    gap: rpx(15);
+    margin-bottom: rpx(50) !important;
   }
-  
+
   .app-logo {
-    width: rpx(40);
-    height: rpx(40);
+    width: rpx(55);
+    height: rpx(55);
   }
-  
+
   .app-header span {
-    font-size: rpx(25);
-    letter-spacing: rpx(2);
+    font-size: rpx(40);
+    letter-spacing: rpx(4);
     display: flex;
     align-items: center;
     height: 100%;
+    font-weight: 600;
   }
-  
-  
+
   .input-item {
     width: 100%;
     align-items: stretch;
   }
-  
+
   .input-item .el-input {
     width: 100% !important;
     max-width: none;
-    height: rpx(45) !important;
-    font-size: rpx(14) !important;
-    margin-bottom: rpx(25) !important;
+    height: rpx(75) !important;
+    font-size: rpx(26) !important;
+    margin-bottom: rpx(45) !important;
   }
-  
+
   .el-input ::v-deep(.el-input__wrapper) {
-    height: rpx(45) !important;
+    height: rpx(75) !important;
   }
-  
+
   .el-input ::v-deep(.el-input__inner) {
-    height: rpx(45) !important;
-    font-size: rpx(14) !important;
+    height: rpx(75) !important;
+    font-size: rpx(26) !important;
   }
-  
+
+  .el-input ::v-deep(.el-input__prefix) {
+    font-size: rpx(32) !important;
+  }
+
   .login-btn {
     width: 100% !important;
     max-width: none;
-    height: rpx(45) !important;
-    font-size: rpx(16) !important;
-    margin: rpx(25) 0 !important;
-    letter-spacing: rpx(15);
+    height: rpx(70) !important;
+    font-size: rpx(22) !important;
+    margin: rpx(30) 0 !important;
+    letter-spacing: rpx(20);
   }
-  
+
   .check-box {
     width: 100% !important;
     max-width: none;
     height: auto;
-    margin: rpx(15) 0 !important;
+    margin: rpx(20) 0 !important;
   }
-  
+
   .check-box .el-checkbox {
-    font-size: rpx(12) !important;
+    font-size: rpx(18) !important;
   }
-  
+
   .check-box .register-link {
-    font-size: rpx(16) !important;
-    margin-right: rpx(15) !important;
+    font-size: rpx(18) !important;
+    margin-right: rpx(20) !important;
   }
-  
+
   .el-checkbox ::v-deep(.el-checkbox__label) {
-    font-size: rpx(16) !important;
+    font-size: rpx(18) !important;
   }
-  
+
+  .el-checkbox ::v-deep(.el-checkbox__inner) {
+    width: rpx(22) !important;
+    height: rpx(22) !important;
+  }
+
   .sms-code-container {
     width: 100% !important;
     max-width: none;
-    height: rpx(45) !important;
+    height: rpx(75) !important;
   }
-  
+
   .sms-input {
-    width: calc(100% - rpx(75)) !important;
-    height: rpx(45) !important;
+    width: calc(100% - rpx(95)) !important;
+    height: rpx(75) !important;
   }
-  
+
   .get-code-btn {
-    width: rpx(75) !important;
-    height: rpx(45) !important;
-    font-size: rpx(10) !important;
+    width: rpx(95) !important;
+    height: rpx(75) !important;
+    font-size: rpx(18) !important;
   }
-  
+
   .el-form-item ::v-deep(.el-form-item__error) {
-    top: rpx(50) !important;
-    font-size: rpx(10) !important;
+    top: rpx(80) !important;
+    font-size: rpx(14) !important;
   }
 }
-</style>
+</style>