xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

优化密码恢复页面布局
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source
This commit is contained in:
smail 2026-08-27 22:00:48 +08:00
parent 51767b9f5b
commit 6ec462895f
1 changed files with 70 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
fe/src/views/PasswordRecovery/PasswordRecovery.css
View File

@ -16,8 +16,10 @@
max-width: 100%;
padding-bottom: 4px;
color: var(--pm-text-primary);
font-weight: 500;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
white-space: normal;
overflow-wrap: anywhere;
}
@ -42,37 +44,53 @@
}
.method-switcher {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-width: 0;
margin: 2px 0 10px;
padding: 10px 14px;
margin: 8px 0 18px;
padding: 16px 18px;
box-sizing: border-box;
background: rgba(247, 250, 255, 0.88);
border: 1px solid var(--pm-border-color);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(248, 251, 255, 0.94));
border: 1px solid rgba(37, 99, 235, 0.16);
border-radius: 16px;
box-shadow: 0 8px 22px rgba(31, 41, 55, 0.06);
}
.method-copy {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
gap: 6px;
padding-left: 12px;
}
.method-copy::before {
position: absolute;
top: 2px;
bottom: 2px;
left: 0;
width: 4px;
border-radius: 999px;
background: var(--pm-primary-color);
content: '';
}
.method-label {
color: var(--pm-text-secondary);
font-size: 13px;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.04em;
}
.method-copy strong {
color: var(--pm-text-primary);
font-size: 16px;
font-weight: 600;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
@ -85,27 +103,41 @@
.verification-panel {
min-width: 0;
margin-bottom: 10px;
padding: 12px 14px;
margin-bottom: 18px;
padding: 18px 20px 20px;
box-sizing: border-box;
background: rgba(247, 250, 255, 0.88);
background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(245, 249, 255, 0.94));
border: 1px solid var(--pm-border-color);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
border-radius: 16px;
box-shadow: 0 8px 22px rgba(31, 41, 55, 0.06);
}
.verification-panel h2 {
margin: 0 0 6px;
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
color: var(--pm-text-primary);
font-size: 17px;
font-size: 20px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.verification-panel h2::before {
width: 5px;
height: 22px;
flex: 0 0 auto;
border-radius: 999px;
background: var(--pm-primary-color);
content: '';
}
.verification-panel p {
margin: 0 0 8px;
margin: 0 0 16px;
color: var(--pm-text-secondary);
font-size: 13px;
font-size: 14px;
line-height: 1.6;
overflow-wrap: anywhere;
}
@ -146,7 +178,7 @@
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
gap: 16px;
}
.password-grid :deep(.el-form-item) {
@ -159,7 +191,7 @@
justify-content: space-between;
gap: 16px;
min-width: 0;
padding-top: 16px;
padding-top: 22px;
}
.actions {
@ -234,6 +266,7 @@
@media (max-width: 560px) {
.method-switcher {
gap: 8px;
padding: 14px;
}
.switch-button {
@ -241,6 +274,18 @@
font-size: 13px;
}
.verification-panel {
padding: 16px 14px 18px;
}
.verification-panel h2 {
font-size: 18px;
}
.verification-panel p {
font-size: 13px;
}
.verification-code-row {
grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
}
@ -291,7 +336,7 @@
.method-switcher,
.verification-panel {
padding: 9px 10px;
padding: 12px 10px;
}
.method-switcher {
@ -313,11 +358,11 @@
}
.method-copy strong {
font-size: 13px;
font-size: 15px;
}
.verification-panel h2 {
font-size: 14px;
font-size: 16px;
}
.verification-panel p,