From ad1012121d933caff5df1fc199768f5134c3c1fc Mon Sep 17 00:00:00 2001 From: smail Date: Sun, 27 Sep 2026 11:27:04 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=B3=BB=E7=BB=9F=E5=8F=91?= =?UTF-8?q?=E4=BF=A1=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E6=A3=80=E6=9F=A5?= =?UTF-8?q?=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SystemNotification/SystemNotification.css | 127 ++++++++++++++++++ 1 file changed, 127 insertions(+) diff --git a/frontend/src/views/components/SystemNotification/SystemNotification.css b/frontend/src/views/components/SystemNotification/SystemNotification.css index 15aa5f5..002e6a7 100644 --- a/frontend/src/views/components/SystemNotification/SystemNotification.css +++ b/frontend/src/views/components/SystemNotification/SystemNotification.css @@ -219,3 +219,130 @@ box-sizing: border-box; } } + +/* Desktop manager layout: keep the authorization list and selected account settings visible together. */ +.notification-settings:has(> .notification-panel .el-table) { + display: grid; + grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr); + align-items: start; + gap: 12px; + min-width: 0; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-header, +.notification-settings:has(> .notification-panel .el-table) > .el-alert { + grid-column: 1 / -1; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type { + grid-column: 1; + min-width: 0; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) { + grid-column: 2; + min-width: 0; + padding: 14px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type h3 { + margin-bottom: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) :deep(.el-table .cell) { + padding-inline: 8px; + line-height: 1.35; +} + +.notification-settings:has(> .notification-panel .el-table) :deep(.el-table__cell) { + padding-block: 7px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type .el-pagination { + margin-top: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-heading { + margin-bottom: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-credential { + margin: 8px 0; + padding: 8px 10px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns { + display: grid; + grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); + gap: 10px 14px; + align-items: start; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-form) { + grid-column: 1; + grid-row: 1; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions) { + grid-column: 1; + grid-row: 2; + min-width: 0; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions ~ .el-descriptions) { + grid-column: 2; + grid-row: 1 / span 2; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.notification-hint) { + grid-column: 1; + grid-row: 3; + margin: 0; + font-size: 12px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions ~ .el-descriptions + .notification-hint) { + grid-column: 2; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-alert) { + grid-column: 1 / -1; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-form-item) { + margin-bottom: 10px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-limits { + gap: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-descriptions__header) { + margin-bottom: 6px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-descriptions__cell) { + padding: 7px 10px; +} + +@media (max-width: 920px) { + .notification-settings:has(> .notification-panel .el-table) { + display: flex; + flex-direction: column; + } + + .notification-settings:has(> .notification-panel .el-table) > .notification-panel { + width: 100%; + box-sizing: border-box; + } + + .notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns { + display: flex; + flex-direction: column; + } + + .notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > * { + width: 100%; + box-sizing: border-box; + } +}