From 506f7445474ed7fe55bd5beb1327d57a2686c6dd Mon Sep 17 00:00:00 2001 From: smail Date: Fri, 16 Oct 2026 09:39:31 +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=E7=AA=84=E6=A1=8C=E9=9D=A2=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E4=B8=8E=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 按浏览器可用宽度调整安全码标题、说明和操作区布局，避免保存安全码出现后中文说明被挤压变形。 --- .../SecuritySettings/SecuritySettings.css | 172 ++++++++++++++++++ 1 file changed, 172 insertions(+) diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css index 4f392f1..ad6342f 100644 --- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css +++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css @@ -1078,3 +1078,175 @@ line-height: 1 !important; white-space: nowrap !important; } + +@container settings-content (max-width: 719px) { + .security-settings-card .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-settings-card .security-key-header > :first-child { + display: contents !important; + } + + .security-settings-card .security-key-header > :first-child > h3 { + grid-area: title !important; + min-width: 0 !important; + margin: 0 !important; + white-space: nowrap !important; + } + + .security-settings-card .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-settings-card .security-key-header > .security-recovery-actions { + grid-area: actions !important; + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + align-items: center !important; + align-content: center !important; + justify-content: flex-start !important; + justify-self: stretch !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + height: 36px !important; + min-height: 36px !important; + margin: 0 !important; + padding: 0 !important; + gap: 8px !important; + overflow-x: auto !important; + overflow-y: hidden !important; + white-space: nowrap !important; + scrollbar-width: thin; + } +} + +@container settings-content (min-width: 720px) { + .security-settings-card .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-settings-card .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; + } +} + +.security-settings-card .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; + box-sizing: border-box !important; + height: 36px !important; + min-height: 36px !important; + max-height: 36px !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-settings-card .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 (min-width: 768px) and (max-width: 1439px) { + .security-settings-card .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-settings-card .security-key-header > :first-child { + display: contents !important; + } + + .security-settings-card .security-key-header > :first-child > h3 { + grid-area: title !important; + } + + .security-settings-card .security-key-header > :first-child > .settings-desc { + grid-area: description !important; + } + + .security-settings-card .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-settings-card .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-settings-card .security-key-header > :first-child { + display: contents !important; + } + + .security-settings-card .security-key-header > .security-recovery-actions { + grid-area: actions !important; + justify-self: end !important; + justify-content: flex-end !important; + width: max-content !important; + max-width: none !important; + overflow: visible !important; + } +} \ No newline at end of file