登录页多设备自适应（多屏幕尺寸）

src/views/Login.vue

@@ -339,4 +339,118 @@ onMounted(() => {
   // background: linear-gradient(to bottom, #78c0ff, #0070f3);
   border: none;
 }
-</style>
+
+// 移动端响应式设计
+@media screen and (max-width: 768px) {
+  .login-content {
+    flex-direction: column;
+  }
+  
+  .bg-image-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .login-wrapper {
+    flex: none;
+    width: 70%;
+    margin: 0 auto;
+    padding: 30px;
+    background: rgba(0, 17, 105, 0.85);
+    border-radius: 15px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-height: 40%;
+    overflow-y: auto;
+  }
+  
+  .login-input {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .login-input span {
+    font-size: rpx(18);
+    padding-bottom: rpx(20);
+  }
+  
+  .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;
+  }
+  
+  .el-input ::v-deep(.el-input__wrapper) {
+    height: rpx(45) !important;
+  }
+  
+  .el-input ::v-deep(.el-input__inner) {
+    height: rpx(45) !important;
+    font-size: rpx(14) !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);
+  }
+  
+  .check-box {
+    width: 100% !important;
+    max-width: none;
+    height: auto;
+    margin: rpx(15) 0 !important;
+  }
+  
+  .check-box .el-checkbox {
+    font-size: rpx(12) !important;
+  }
+  
+  .el-checkbox ::v-deep(.el-checkbox__label) {
+    font-size: rpx(12) !important;
+  }
+  
+  .sms-code-container {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+  }
+  
+  .sms-input {
+    width: calc(100% - rpx(75)) !important;
+    height: rpx(45) !important;
+  }
+  
+  .get-code-btn {
+    width: rpx(75) !important;
+    height: rpx(45) !important;
+    font-size: rpx(10) !important;
+  }
+  
+  .el-form-item ::v-deep(.el-form-item__error) {
+    top: rpx(50) !important;
+    font-size: rpx(10) !important;
+  }
+}
+</style>