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>
|
<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="absolute inset-0 overflow-hidden">
|
||||||
<div class="gradient-orb orb-1"></div>
|
<div class="gradient-orb orb-1"></div>
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
</div>
|
</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="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">
|
<div class="w-full max-w-md">
|
||||||
@@ -443,6 +443,19 @@ async function handleSmsLogin() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<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 {
|
.gradient-orb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -718,7 +731,7 @@ async function handleSmsLogin() {
|
|||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-size: 15px;
|
font-size: 16px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
|
|||||||
Reference in New Issue
Block a user