fix(miniprogram): 登录页尺寸过大 + 排除关怀模式
- 正常模式大幅缩减:标题 48→32px、按钮高 96→56px、按钮字 32→28px logo 128→96px、副标题 26→16px、顶部留白 160→100px - 登录页不应用 elder-mode class(正常模式已足够大) - 关怀模式覆写值同步调整:标题 38px、按钮高 64px、副标题 21px Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -11,7 +11,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 160px 56px 80px;
|
padding: 100px 40px 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 品牌区 ─── */
|
/* ─── 品牌区 ─── */
|
||||||
@@ -19,22 +19,22 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 80px;
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-logo {
|
.login-logo {
|
||||||
width: 128px;
|
width: 96px;
|
||||||
height: 128px;
|
height: 96px;
|
||||||
border-radius: $r-lg;
|
border-radius: $r-lg;
|
||||||
background: $pri;
|
background: $pri;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
margin-bottom: 36px;
|
margin-bottom: 24px;
|
||||||
box-shadow: 0 8px 24px rgba($pri, 0.3);
|
box-shadow: 0 8px 24px rgba($pri, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-logo-mark {
|
.login-logo-mark {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 64px;
|
font-size: 48px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@@ -42,14 +42,14 @@
|
|||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 48px;
|
font-size: 32px;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-subtitle {
|
.login-subtitle {
|
||||||
font-size: 26px;
|
font-size: 16px;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
@@ -57,7 +57,7 @@
|
|||||||
/* ─── 装饰线 ─── */
|
/* ─── 装饰线 ─── */
|
||||||
.login-divider {
|
.login-divider {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
margin-bottom: 64px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-divider-line {
|
.login-divider-line {
|
||||||
@@ -74,16 +74,18 @@
|
|||||||
|
|
||||||
.login-btn {
|
.login-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 96px;
|
height: $btn-primary-h;
|
||||||
background: $pri;
|
background: $pri;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
border: none;
|
border: none;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
box-shadow: 0 4px 16px rgba($pri, 0.25);
|
box-shadow: 0 4px 16px rgba($pri, 0.25);
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border: none;
|
border: none;
|
||||||
@@ -98,14 +100,14 @@
|
|||||||
.agreement-row {
|
.agreement-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-top: 40px;
|
margin-top: 28px;
|
||||||
gap: 12px;
|
gap: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agreement-check {
|
.agreement-check {
|
||||||
width: 32px;
|
width: 28px;
|
||||||
height: 32px;
|
height: 28px;
|
||||||
border: 2px solid $bd;
|
border: 2px solid $bd;
|
||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
@@ -120,14 +122,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.agreement-check-mark {
|
.agreement-check-mark {
|
||||||
font-size: 22px;
|
font-size: 18px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agreement-text {
|
.agreement-text {
|
||||||
font-size: 22px;
|
font-size: 14px;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
@@ -141,11 +143,11 @@
|
|||||||
.skip-row {
|
.skip-row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 32px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skip-btn {
|
.skip-btn {
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,6 +11,9 @@ export default function Login() {
|
|||||||
const [agreed, setAgreed] = useState(false);
|
const [agreed, setAgreed] = useState(false);
|
||||||
const { login, bindPhone, loading, isMedicalStaff } = useAuthStore();
|
const { login, bindPhone, loading, isMedicalStaff } = useAuthStore();
|
||||||
|
|
||||||
|
// 登录页不应用关怀模式(正常模式尺寸已足够大)
|
||||||
|
const loginClass = '';
|
||||||
|
|
||||||
const navigateAfterLogin = () => {
|
const navigateAfterLogin = () => {
|
||||||
if (isMedicalStaff()) {
|
if (isMedicalStaff()) {
|
||||||
Taro.redirectTo({ url: '/pages/doctor/index' });
|
Taro.redirectTo({ url: '/pages/doctor/index' });
|
||||||
@@ -58,7 +61,7 @@ export default function Login() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScrollView scrollY className={`login-scroll ${modeClass}`}>
|
<ScrollView scrollY className={`login-scroll ${loginClass}`}>
|
||||||
<View className='login-page'>
|
<View className='login-page'>
|
||||||
{/* 品牌区 */}
|
{/* 品牌区 */}
|
||||||
<View className='login-brand'>
|
<View className='login-brand'>
|
||||||
|
|||||||
@@ -305,22 +305,48 @@
|
|||||||
// 登录页
|
// 登录页
|
||||||
// ═══════════════════════════════════════
|
// ═══════════════════════════════════════
|
||||||
|
|
||||||
|
.login-page {
|
||||||
|
padding: 80px 48px 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand {
|
||||||
|
margin-bottom: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo {
|
||||||
|
width: 112px;
|
||||||
|
height: 112px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo-mark {
|
||||||
|
font-size: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
font-size: 56px; // 48 × 1.17 标题微增
|
font-size: 38px; // 32 × 1.19 标题微增
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-subtitle {
|
.login-subtitle {
|
||||||
font-size: 30px; // 26 × 1.15
|
font-size: 21px; // 16 × 1.31
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-btn {
|
.login-btn {
|
||||||
height: 96px;
|
height: 64px;
|
||||||
font-size: 34px; // 32 × 1.06
|
font-size: 30px; // 28 × 1.07
|
||||||
|
}
|
||||||
|
|
||||||
|
.agreement-text {
|
||||||
|
font-size: 18px; // 14 × 1.29
|
||||||
|
}
|
||||||
|
|
||||||
|
.agreement-check {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skip-btn {
|
.skip-btn {
|
||||||
font-size: 24px; // 20 × 1.2
|
font-size: 20px; // 16 × 1.25
|
||||||
height: 60px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ═══════════════════════════════════════
|
// ═══════════════════════════════════════
|
||||||
|
|||||||
Reference in New Issue
Block a user