feat(auth): 优化登录页面移动端键盘适配与输入框样式
Some checks failed
Build and Deploy / deploy (push) Has been cancelled

- 将页面容器的高度单位从 vh 改为 dvh 以适配移动端键盘弹出
- 分离登录页面容器样式,提高可维护性
- 调整输入框字体大小为 16px 防止 iOS 自动缩放
This commit is contained in:
2026-05-30 20:39:27 +08:00
parent 98fb35f0b9
commit 027db6efc9

View File

@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen bg-background relative overflow-hidden">
<div class="login-page bg-background relative">
<!-- 动态背景层 -->
<div class="absolute inset-0 overflow-hidden">
<div class="gradient-orb orb-1"></div>
@@ -22,7 +22,7 @@
</div>
<!-- 主内容区 -->
<div class="min-h-screen flex flex-col lg:flex-row relative z-20">
<div class="login-content flex flex-col lg:flex-row relative z-20">
<!-- 左侧品牌区 -->
<div class="flex-1 flex items-center justify-center p-6 sm:p-10 lg:p-16 animate-fade-in">
<div class="w-full max-w-md">
@@ -443,6 +443,19 @@ async function handleSmsLogin() {
</script>
<style scoped lang="less">
// ========== 页面容器dvh 适配移动端键盘)==========
.login-page {
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
}
.login-content {
min-height: 100vh;
min-height: 100dvh;
}
// ========== 背景层 ==========
.gradient-orb {
position: absolute;
@@ -718,7 +731,7 @@ async function handleSmsLogin() {
border: none;
background: transparent;
color: var(--foreground);
font-size: 15px;
font-size: 16px;
outline: none;
&::placeholder {