From e4bd3d19893a328dc19636ca6ed4bd5a94c5bd96 Mon Sep 17 00:00:00 2001 From: smail Date: Fri, 16 Oct 2026 10:26:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=89=E5=85=A8=E7=A0=81?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=AE=9E=E9=99=85=E5=B8=83=E5=B1=80=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 让安全码操作按钮在已渲染的实际容器中保持水平排列、等高并垂直居中，覆盖不同桌面窗口宽度。 --- .../SecuritySettings/SecuritySettings.css | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css index ad6342f..c1088db 100644 --- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css +++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css @@ -1249,4 +1249,177 @@ max-width: none !important; overflow: visible !important; } +} +/* Security recovery actions use the real rendered container class. */ +.security-main .security-key-header > .security-recovery-actions { + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + align-content: center !important; + gap: 8px !important; + min-height: 36px !important; + margin: 0 !important; + white-space: nowrap !important; + box-sizing: border-box !important; +} + +.security-main .security-key-header > .security-recovery-actions > .el-button { + display: inline-flex !important; + flex: 0 0 auto !important; + align-items: center !important; + justify-content: center !important; + height: 36px !important; + min-height: 36px !important; + max-height: 36px !important; + box-sizing: border-box !important; + margin: 0 !important; + padding: 0 14px !important; + line-height: 1 !important; + white-space: nowrap !important; + word-break: keep-all !important; + overflow-wrap: normal !important; + writing-mode: horizontal-tb !important; + vertical-align: middle !important; +} + +.security-main .security-key-header > .security-recovery-actions > .el-button > span { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + height: 100% !important; + max-width: none !important; + overflow: visible !important; + line-height: 1 !important; + white-space: nowrap !important; +} + +@media (max-width: 767px) { + .security-main .security-key-header { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: auto auto auto !important; + grid-template-areas: + "title" + "description" + "actions" !important; + align-items: center !important; + gap: 8px !important; + } + + .security-main .security-key-header > :first-child { + display: contents !important; + } + + .security-main .security-key-header > :first-child > h3 { + grid-area: title !important; + min-width: 0 !important; + margin: 0 !important; + white-space: nowrap !important; + } + + .security-main .security-key-header > :first-child > .settings-desc { + grid-area: description !important; + min-width: 0 !important; + margin: 0 !important; + white-space: normal !important; + overflow-wrap: anywhere !important; + } + + .security-main .security-key-header > .security-recovery-actions { + grid-area: actions !important; + justify-self: stretch !important; + justify-content: flex-start !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + overflow-x: auto !important; + overflow-y: hidden !important; + } +} + +@media (min-width: 768px) and (max-width: 1439px) { + .security-main .security-key-header { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: auto auto auto !important; + grid-template-areas: + "title" + "description" + "actions" !important; + align-items: center !important; + gap: 8px !important; + } + + .security-main .security-key-header > :first-child { + display: contents !important; + } + + .security-main .security-key-header > :first-child > h3 { + grid-area: title !important; + min-width: 0 !important; + margin: 0 !important; + white-space: nowrap !important; + } + + .security-main .security-key-header > :first-child > .settings-desc { + grid-area: description !important; + min-width: 0 !important; + margin: 0 !important; + white-space: normal !important; + overflow-wrap: anywhere !important; + } + + .security-main .security-key-header > .security-recovery-actions { + grid-area: actions !important; + justify-self: stretch !important; + justify-content: flex-start !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + overflow-x: auto !important; + overflow-y: hidden !important; + } +} + +@media (min-width: 1440px) { + .security-main .security-key-header { + display: grid !important; + grid-template-columns: minmax(0, 1fr) max-content !important; + grid-template-rows: auto auto !important; + grid-template-areas: + "title actions" + "description description" !important; + align-items: center !important; + column-gap: 16px !important; + row-gap: 8px !important; + } + + .security-main .security-key-header > :first-child { + display: contents !important; + } + + .security-main .security-key-header > :first-child > h3 { + grid-area: title !important; + min-width: 0 !important; + margin: 0 !important; + white-space: nowrap !important; + } + + .security-main .security-key-header > :first-child > .settings-desc { + grid-area: description !important; + min-width: 0 !important; + margin: 0 !important; + white-space: normal !important; + overflow-wrap: anywhere !important; + } + + .security-main .security-key-header > .security-recovery-actions { + grid-area: actions !important; + justify-self: end !important; + align-self: center !important; + width: max-content !important; + max-width: none !important; + overflow: visible !important; + } } \ No newline at end of file