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

优化验证码响应式布局：电脑端单行、手机端两行

Browse Source
This commit is contained in:
smail 2026-10-16 12:01:00 +08:00
parent 0e6583e27d
commit 082badb67a
7 changed files with 220 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/views/LoginVerification/LoginVerification.css
View File

@ -203,22 +203,37 @@
}
}
.verification-form :deep(.el-form-item:has(.verification-input)) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
@media (min-width: 761px) {
.verification-form :deep(.el-form-item:has(.verification-input)) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
.verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
}
}
.verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
@media (max-width: 760px) {
.verification-form :deep(.el-form-item:has(.verification-input)) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
.verification-form :deep(.el-form-item:has(.verification-input) .el-form-item__label) {
margin-bottom: 6px !important;
line-height: 1.4;
}
}

70
frontend/src/views/PasswordRecovery/PasswordRecovery.css
View File

@ -539,42 +539,42 @@
}
}
.recovery-form :deep(.el-form-item:has(.verification-code-row)) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
@media (min-width: 761px) {
.recovery-form :deep(.el-form-item:has(.verification-code-row)),
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__label),
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
.recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__content),
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
}
}
.recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
@media (max-width: 760px) {
.recovery-form :deep(.el-form-item:has(.verification-code-row)),
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
}
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
.recovery-form :deep(.el-form-item:has(.verification-code-row) .el-form-item__label),
.recovery-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
margin-bottom: 6px !important;
line-height: 1.4;
}
}

47
frontend/src/views/PublicPasswordReset/PublicPasswordReset.css
View File

@ -256,24 +256,37 @@ button:not(:disabled):hover {
}
}
.public-recovery-form:has(.recovery-code-row) {
grid-template-columns: auto minmax(0, 1fr);
@media (min-width: 761px) {
.public-recovery-form:has(.recovery-code-row) {
grid-template-columns: auto minmax(0, 1fr);
}
.public-recovery-form:has(.recovery-code-row) > strong,
.public-recovery-form:has(.recovery-code-row) > .public-recovery-copy,
.public-recovery-form:has(.recovery-code-row) > .recovery-methods,
.public-recovery-form:has(.recovery-code-row) > .public-recovery-status,
.public-recovery-form:has(.recovery-code-row) > .public-recovery-actions {
grid-column: 1 / -1;
}
.public-recovery-form:has(.recovery-code-row) > label[for="public-recovery-code"] {
align-self: center;
margin-top: 0;
white-space: nowrap;
}
.public-recovery-form:has(.recovery-code-row) > .recovery-code-row {
min-width: 0;
}
}
.public-recovery-form:has(.recovery-code-row) > strong,
.public-recovery-form:has(.recovery-code-row) > .public-recovery-copy,
.public-recovery-form:has(.recovery-code-row) > .recovery-methods,
.public-recovery-form:has(.recovery-code-row) > .public-recovery-status,
.public-recovery-form:has(.recovery-code-row) > .public-recovery-actions {
grid-column: 1 / -1;
}
@media (max-width: 760px) {
.public-recovery-form:has(.recovery-code-row) {
grid-template-columns: minmax(0, 1fr) !important;
}
.public-recovery-form:has(.recovery-code-row) > label[for="public-recovery-code"] {
align-self: center;
margin-top: 0;
white-space: nowrap;
}
.public-recovery-form:has(.recovery-code-row) > .recovery-code-row {
min-width: 0;
.public-recovery-form:has(.recovery-code-row) > label[for="public-recovery-code"] {
margin-top: 6px;
margin-bottom: 2px;
}
}

45
frontend/src/views/components/SecuritySettings/ExternalEmailBindingDialog/ExternalEmailBindingDialog.css
View File

@ -77,22 +77,37 @@
}
}
.external-email-verification :deep(.el-form-item) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
@media (min-width: 761px) {
.external-email-verification :deep(.el-form-item) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.external-email-verification :deep(.el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
.external-email-verification :deep(.el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
}
}
.external-email-verification :deep(.el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
@media (max-width: 760px) {
.external-email-verification :deep(.el-form-item) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.external-email-verification :deep(.el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
.external-email-verification :deep(.el-form-item__label) {
margin-bottom: 6px !important;
line-height: 1.4;
}
}

45
frontend/src/views/components/SecuritySettings/SecuritySettings.css
View File

@ -231,24 +231,39 @@
}
}
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
@media (min-width: 761px) {
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
}
}
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
@media (max-width: 760px) {
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"])) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
.security-settings-card .settings-form :deep(.el-form-item:has(input[autocomplete="one-time-code"]) .el-form-item__label) {
margin-bottom: 6px !important;
line-height: 1.4;
}
}
.security-settings-card .security-key-header {

53
frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
View File

@ -70,25 +70,42 @@
max-width: 360px;
}
.totp-enrollment :deep(.el-form-item),
.totp-disable :deep(.el-form-item) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
@media (min-width: 761px) {
.totp-enrollment :deep(.el-form-item),
.totp-disable :deep(.el-form-item) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.totp-enrollment :deep(.el-form-item__label),
.totp-disable :deep(.el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
.totp-enrollment :deep(.el-form-item__content),
.totp-disable :deep(.el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
}
}
.totp-enrollment :deep(.el-form-item__label),
.totp-disable :deep(.el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
@media (max-width: 760px) {
.totp-enrollment :deep(.el-form-item),
.totp-disable :deep(.el-form-item) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.totp-enrollment :deep(.el-form-item__content),
.totp-disable :deep(.el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
.totp-enrollment :deep(.el-form-item__label),
.totp-disable :deep(.el-form-item__label) {
margin-bottom: 6px !important;
line-height: 1.4;
}
}

45
frontend/src/views/components/UserManagement/UserExternalEmailDialog/UserExternalEmailDialog.css
View File

@ -99,22 +99,37 @@
}
}
.external-email-verification :deep(.el-form-item) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
@media (min-width: 761px) {
.external-email-verification :deep(.el-form-item) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.external-email-verification :deep(.el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
.external-email-verification :deep(.el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
}
}
.external-email-verification :deep(.el-form-item__label) {
width: auto !important;
margin: 0;
padding: 0;
line-height: 1.4;
white-space: nowrap;
}
@media (max-width: 760px) {
.external-email-verification :deep(.el-form-item) {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.external-email-verification :deep(.el-form-item__content) {
min-width: 0;
margin-left: 0 !important;
.external-email-verification :deep(.el-form-item__label) {
margin-bottom: 6px !important;
line-height: 1.4;
}
}