feat(auth): 优化登录页面移动端键盘适配与输入框样式
Some checks failed
Build and Deploy / deploy (push) Has been cancelled
Some checks failed
Build and Deploy / deploy (push) Has been cancelled
- 将页面容器的高度单位从 vh 改为 dvh 以适配移动端键盘弹出 - 分离登录页面容器样式,提高可维护性 - 调整输入框字体大小为 16px 防止 iOS 自动缩放
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user