From fa6a8692e826dadfb928bcbb69ade6633a8ef856 Mon Sep 17 00:00:00 2001 From: xiaosi <2652281683@qq.com> Date: Mon, 31 Aug 2026 10:30:32 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B8=85=E7=90=86=20TDesign=20?= =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=90=8E=E6=97=A0=E7=94=A8=E7=9A=84=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E4=B8=8E=E8=A1=A8=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/prototype.css | 43 +++++++++++++++------------------------- 1 file changed, 16 insertions(+), 27 deletions(-) diff --git a/src/styles/prototype.css b/src/styles/prototype.css index ece648f..197f39e 100644 --- a/src/styles/prototype.css +++ b/src/styles/prototype.css @@ -113,7 +113,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .multi-dock-bar { min-height: 34px; margin-top: 10px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #c9dff2; border-radius: 4px; color: #486575; background: #f3f8fc; font-size: 11px; } .multi-dock-bar strong { color: var(--blue); font-size: 12px; } .multi-dock-bar select { height: 25px; max-width: 90px; padding: 0 4px; border: 1px solid #cbd9e4; border-radius: 3px; color: #526574; background: #fff; font-size: 10px; } -.multi-dock-bar .primary-command { min-height: 25px; padding: 0 8px; font-size: 10px; } + .multi-select-bar { min-height: 34px; margin-top: 10px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: #fafcfd; font-size: 10px; } .multi-select-bar span { margin-right: auto; color: #607481; } .multi-select-bar button { min-height: 24px; padding: 0 8px; border: 1px solid #d7e2e9; border-radius: 3px; color: #526875; background: #fff; font-size: 10px; } @@ -261,8 +261,8 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .device-page { position: relative; height: 100%; flex: 1; min-height: 0; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; overflow: auto; background: #f2f5f7; pointer-events: auto; } .device-page-header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .device-page-header > div:first-child { display: flex; align-items: baseline; gap: 12px; }.device-page-header h1 { margin: 0; font-size: 24px; }.device-page-header span { color: var(--muted); font-size: 12px; } -.page-actions { display: flex; align-items: center; gap: 8px; }.icon-command, .primary-command, .plain-command { height: 34px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; } -.icon-command { width: 34px; border: 1px solid var(--line); color: #5d6c79; background: #fff; }.icon-command:hover { color: var(--ink); border-color: #aebbc6; }.primary-command { padding: 0 13px; color: #fff; background: var(--blue); }.primary-command:hover { background: var(--blue-dark); }.plain-command { padding: 0 13px; border: 1px solid var(--line); color: #536270; background: #fff; }.plain-command:hover { border-color: #aebbc6; color: var(--ink); }.page-actions svg, .primary-command svg { width: 14px; } +.page-actions { display: flex; align-items: center; gap: 8px; } +.page-actions svg { width: 14px; } .asset-overview { min-height: 74px; padding: 0 4px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; } .asset-overview > div { min-width: 0; height: 42px; padding: 0 20px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 18px 24px; align-items: end; border-right: 1px solid var(--line); }.asset-overview > div:last-child { border-right: 0; }.asset-overview span { grid-column: 1 / 3; color: var(--muted); font-size: 11px; }.asset-overview strong { font-size: 26px; line-height: 24px; font-weight: 650; }.asset-overview small { align-self: end; padding: 0 0 2px 4px; color: var(--muted); font-size: 11px; }.green-text { color: var(--green); }.blue-text { color: var(--blue); }.red-text { color: var(--red); }.orange-text { color: var(--orange); } .asset-workspace { min-height: 500px; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; } @@ -271,7 +271,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .asset-toolbar { min-height: 58px; padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); } .asset-search { width: min(320px, 34%); height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 5px; color: #7c8995; }.asset-search svg { width: 14px; }.asset-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; } .toolbar-group { display: flex; align-items: center; gap: 7px; }.toolbar-group select { width: 126px; height: 34px; padding: 0 26px 0 10px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: #536270; background: #fff; font-size: 12px; } -.asset-table-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }.asset-table { width: 100%; border-collapse: collapse; table-layout: fixed; }.asset-table th { height: 40px; padding: 0 14px; color: #7b8792; background: #f7f8fa; font-size: 11px; font-weight: 500; text-align: left; }.asset-table td { height: 62px; padding: 8px 14px; border-bottom: 1px solid #edf0f2; color: #455461; font-size: 12px; vertical-align: middle; }.asset-table tbody tr { cursor: pointer; transition: background .14s ease; }.asset-table tbody tr:hover { background: #f7faff; }.asset-table .asset-name-cell { display: flex; align-items: center; gap: 9px; }.table-asset-icon { width: 30px; height: 30px; min-width: 30px; display: grid; place-items: center; border-radius: 4px; color: #256e56; background: #e6f3ee; }.table-asset-icon.drone { color: #286aa9; background: #e7f0fa; }.table-asset-icon.pending { color: #93611d; background: #fff2dc; }.table-asset-icon svg { width: 15px; }.asset-name-cell > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.asset-name-cell strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.asset-name-cell small { color: var(--muted); font-size: 10px; }.table-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.table-status i { width: 6px; height: 6px; border-radius: 50%; }.table-status.online i { background: var(--green); }.table-status.mission i { background: var(--blue); }.table-status.alarm i { background: var(--red); }.table-status.offline i { background: #8b969f; }.table-status.pending i { background: var(--orange); }.binding-cell { display: flex; align-items: center; gap: 5px; }.binding-cell svg { width: 12px; color: #72808d; }.binding-cell.unbound { color: #8a959f; }.row-actions { display: flex; align-items: center; gap: 2px; }.row-actions button { height: 28px; padding: 0 7px; border-radius: 4px; color: var(--blue); background: transparent; font-size: 11px; }.row-actions button:hover { background: #eaf2fc; }.row-actions .more-action { width: 28px; padding: 0; color: #687684; }.row-actions svg { width: 14px; } +.asset-table-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }.asset-name-cell { display: flex; align-items: center; gap: 9px; }.table-asset-icon { width: 30px; height: 30px; min-width: 30px; display: grid; place-items: center; border-radius: 4px; color: #256e56; background: #e6f3ee; }.table-asset-icon.drone { color: #286aa9; background: #e7f0fa; }.table-asset-icon.pending { color: #93611d; background: #fff2dc; }.table-asset-icon svg { width: 15px; }.asset-name-cell > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.asset-name-cell strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.asset-name-cell small { color: var(--muted); font-size: 10px; }.table-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.table-status i { width: 6px; height: 6px; border-radius: 50%; }.table-status.online i { background: var(--green); }.table-status.mission i { background: var(--blue); }.table-status.alarm i { background: var(--red); }.table-status.offline i { background: #8b969f; }.table-status.pending i { background: var(--orange); }.binding-cell { display: flex; align-items: center; gap: 5px; }.binding-cell svg { width: 12px; color: #72808d; }.binding-cell.unbound { color: #8a959f; }.row-actions { display: flex; align-items: center; gap: 2px; }.row-actions button { height: 28px; padding: 0 7px; border-radius: 4px; color: var(--blue); background: transparent; font-size: 11px; }.row-actions button:hover { background: #eaf2fc; }.row-actions .more-action { width: 28px; padding: 0; color: #687684; }.row-actions svg { width: 14px; } .table-empty { height: 240px !important; color: var(--muted) !important; text-align: center; }.table-footer { min-height: 48px; margin-top: auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }.table-footer > div { display: flex; align-items: center; gap: 6px; }.table-footer button, .table-footer b { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: #84909b; background: #fff; }.table-footer button:first-child svg { transform: rotate(180deg); }.table-footer button svg { width: 12px; }.table-footer b { border-color: var(--blue); color: #fff; background: var(--blue); font-size: 11px; font-weight: 500; } .drawer-scrim { position: absolute; z-index: 39; inset: 0; background: rgba(22,34,43,.18); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .25s; }.drawer-scrim.open { opacity: 1; visibility: visible; transition-delay: 0s; } .device-drawer { position: absolute; z-index: 40; top: 0; right: 0; bottom: 0; width: 408px; display: flex; flex-direction: column; overflow: auto; color: var(--ink); background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(19,33,45,.14); transform: translateX(102%); visibility: hidden; transition: transform .3s cubic-bezier(.22,.8,.25,1), visibility 0s linear .3s; }.device-drawer.open { transform: translateX(0); visibility: visible; transition-delay: 0s; } @@ -280,14 +280,14 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .drawer-section { padding: 17px 18px; border-bottom: 1px solid var(--line); }.drawer-section[hidden] { display: none; }.drawer-section h3 { margin: 0 0 13px; font-size: 13px; }.drawer-section-title { display: flex; align-items: center; justify-content: space-between; }.drawer-section-title button { color: var(--blue); background: transparent; font-size: 11px; }.property-list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 12px; }.property-list div { min-width: 0; }.property-list dt { margin-bottom: 4px; color: var(--muted); font-size: 10px; }.property-list dd { margin: 0; overflow: hidden; color: #34434f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .binding-device { width: 100%; min-height: 50px; padding: 8px 10px; display: grid; grid-template-columns: 30px 1fr 14px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; color: #43525f; background: #fff; text-align: left; }.binding-device:hover { border-color: #9eb2c3; }.binding-device > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: #286aa9; background: #e7f0fa; }.binding-device > span svg { width: 14px; }.binding-device div { display: flex; flex-direction: column; gap: 3px; }.binding-device strong { font-size: 12px; }.binding-device small { color: var(--muted); font-size: 10px; }.binding-device > svg { width: 12px; color: #8a96a0; } .device-drawer > footer { position: sticky; bottom: 0; min-height: 62px; margin-top: auto; padding: 12px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); background: #fff; } -.firmware-current { color: var(--muted); font-size: 11px; }.firmware-upgrade { display: flex; align-items: center; gap: 8px; }.firmware-upgrade select { flex: 1; min-width: 0; height: 34px; padding: 0 26px 0 10px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: #536270; background: #fff; font-size: 12px; }.firmware-upgrade .primary-command { height: 34px; padding: 0 16px; white-space: nowrap; }.firmware-upgrade .primary-command:disabled { opacity: .5; cursor: not-allowed; } +.firmware-current { color: var(--muted); font-size: 11px; }.firmware-upgrade { display: flex; align-items: center; gap: 8px; }.firmware-upgrade select { flex: 1; min-width: 0; height: 34px; padding: 0 26px 0 10px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: #536270; background: #fff; font-size: 12px; } .operation-page { height: 100%; flex: 1; min-height: 0; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; overflow: auto; background: #f2f5f7; pointer-events: auto; } .operation-page-header { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .operation-page-header > div { min-width: 0; } .operation-page-header h1 { margin: 0 0 5px; font-size: 23px; } .operation-page-header span { color: var(--muted); font-size: 11px; } -.operation-page-header .primary-command svg { width: 14px; } + .business-metric-band { min-height: 82px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 6px; background: #fff; } .task-metrics { grid-template-columns: repeat(4, 1fr); } .business-metric-band > div { min-width: 0; padding: 15px 18px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 5px 8px; border-right: 1px solid var(--line); } @@ -296,11 +296,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .business-metric-band strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #30414e; font-size: 25px; } .business-metric-band small { overflow: hidden; color: #83909a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .business-workspace { flex: 1; min-height: 440px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; } -.business-tabs { height: 50px; min-height: 50px; padding: 0 18px; display: flex; align-items: end; gap: 27px; border-bottom: 1px solid var(--line); } -.business-tabs button { position: relative; height: 49px; padding: 0 2px; color: var(--muted); background: transparent; font-size: 12px; } -.business-tabs button b { margin-left: 3px; color: #81909b; font-size: 10px; font-weight: 500; } -.business-tabs button.active { color: var(--blue); font-weight: 600; } -.business-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); } + .business-panel { display: none; flex: 1; min-height: 0; overflow: auto; } .business-panel.active { display: block; } .business-toolbar { min-height: 58px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); } @@ -329,7 +325,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .table-footer { height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; } .execution-record-table { min-width: 1050px; }.execution-record-table th:first-child { width: 15%; }.execution-record-table th:last-child { width: 8%; } .table-text-action { height: 27px; padding: 0 6px; border-radius: 3px; color: var(--blue); background: transparent; font-size: 11px; }.table-text-action:hover { background: #eaf2fc; }.table-text-action:disabled { color: #9aa4ac; background: transparent; cursor: not-allowed; } -.route-library .business-toolbar .plain-command { display: flex; align-items: center; gap: 5px; } + .route-library .business-toolbar svg { width: 13px; } .route-grid { padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 12px; } .route-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; } @@ -427,22 +423,15 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .download-quota { min-width: 190px; height: 34px; padding: 0 8px 0 10px; display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 8px !important; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .download-quota span { align-self: end; color: #53626e; font-size: 10px; }.download-quota span b { color: #344651; font-weight: 600; }.download-quota small { align-self: start; color: #a05e24; font-size: 8px; }.download-quota button { grid-row: 1 / 3; grid-column: 2; height: 26px; padding: 0 7px; border-radius: 3px; color: var(--blue); background: #eaf2fc; font-size: 10px; } .task-dialog select { width: 100%; height: 38px; } -.mode-segment { height: 36px; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 4px; background: #edf1f4; } -.mode-segment button { border-radius: 3px; color: #64727e; background: transparent; font-size: 11px; }.mode-segment button.active { color: #245f9e; background: #fff; box-shadow: 0 1px 4px rgba(23,39,50,.12); } + .task-schedule-fields[hidden] { display: none; }.task-schedule-fields { margin-top: 2px; } .weekday-picker { height: 38px; padding: 3px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; border-radius: 4px; background: #edf1f4; } .weekday-picker button { min-width: 0; border-radius: 3px; color: #65737f; background: transparent; font-size: 11px; }.weekday-picker button:hover { color: #2869aa; }.weekday-picker button.active { color: #fff; background: #2c72bd; box-shadow: 0 1px 4px rgba(23,66,108,.18); } -.task-dialog .mode-segment { grid-template-columns: repeat(4, minmax(0, 1fr)); } -.task-dialog .mode-segment button { min-width: 0; padding: 0 4px; white-space: nowrap; } + .task-dialog .task-schedule-settings { margin-bottom: 3px; } .task-dialog .task-schedule-settings > label:last-child { margin-bottom: 12px; } .task-dialog .task-schedule-settings label small { color: var(--muted); font-size: 10px; line-height: 1.4; } .task-dialog .task-schedule-settings input[type='text'] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } -@media (max-width: 560px) { - .task-dialog .mode-segment { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; min-height: 72px; } - .task-dialog .mode-segment button { min-height: 30px; } -} - .task-video-settings { margin: 3px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .task-video-title { height: 35px; display: flex; align-items: center; justify-content: space-between; }.task-video-title strong { font-size: 12px; }.task-video-title span { color: var(--muted); font-size: 10px; } .add-dock-dialog .task-video-option { min-height: 48px; margin: 0; padding: 7px 2px; display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 10px; border-top: 1px solid #edf0f2; cursor: pointer; } @@ -452,7 +441,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .add-dock-dialog .task-video-note { margin: 7px 2px 10px; color: #a87527; font-size: 10px; line-height: 1.5; } .raw-download-dialog { width: min(500px, 100%); }.raw-download-content { padding: 18px 20px 4px; }.raw-download-file { min-height: 58px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 4px; }.raw-download-file > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; color: #286aa9; background: #e7f0fa; }.raw-download-file svg { width: 15px; }.raw-download-file > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.raw-download-file strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.raw-download-file small { color: var(--muted); font-size: 10px; } .raw-download-quota { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 4px; }.raw-download-quota > div { min-height: 55px; padding: 9px 11px; display: flex; flex-direction: column; justify-content: center; gap: 5px; border-right: 1px solid var(--line); }.raw-download-quota > div:last-child { border-right: 0; }.raw-download-quota span { color: var(--muted); font-size: 10px; }.raw-download-quota strong { font-size: 12px; }.raw-download-content p { margin: 12px 0 0; color: #9a5d25; font-size: 10px; line-height: 1.6; } -.raw-download-dialog > footer { height: 62px; margin-top: 14px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.raw-download-dialog > footer button { min-width: 88px; }.raw-download-dialog > footer .primary-command { display: flex; align-items: center; justify-content: center; gap: 5px; }.raw-download-dialog > footer svg { width: 13px; } +.raw-download-dialog > footer { height: 62px; margin-top: 14px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.raw-download-dialog > footer button { min-width: 88px; }.raw-download-dialog > footer svg { width: 13px; } .device-detail-page { height: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #f1f4f6; pointer-events: auto; } .full-detail-header { min-height: 108px; padding: 12px 24px 16px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px 16px; background: #fff; border-bottom: 1px solid var(--line); }.back-command { grid-column: 1 / 3; width: fit-content; height: 24px; padding: 0; display: flex; align-items: center; gap: 4px; color: var(--muted); background: transparent; font-size: 11px; }.back-command:hover { color: var(--blue); }.back-command svg { width: 12px; transform: rotate(180deg); }.full-detail-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }.full-detail-identity > span { width: 40px; height: 40px; min-width: 40px; display: grid; place-items: center; border-radius: 5px; color: #226e55; background: #e5f3ed; }.full-detail-identity > span.drone { color: #246aa9; background: #e6eff9; }.full-detail-identity > span svg { width: 19px; }.full-detail-identity > div { min-width: 0; }.full-detail-identity small { color: var(--muted); font-size: 10px; }.full-detail-identity h1 { margin: 2px 0; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }.full-detail-identity p { margin: 0; color: var(--muted); font-size: 11px; }.full-detail-identity > i { margin-left: 4px; }.full-detail-actions { display: flex; align-items: center; gap: 8px; }.full-detail-actions svg { width: 14px; } @@ -541,7 +530,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .asset-toolbar { align-items: stretch; flex-direction: column; } .asset-search { width: 100%; } .toolbar-group { justify-content: flex-end; } - .asset-table { min-width: 920px; } + .operation-page { padding: 18px; } .business-metric-band { min-width: 760px; } .task-metrics { overflow-x: auto; } @@ -578,11 +567,11 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .operation-page-header h1 { font-size: 20px; } .operation-page-header > div span { display: none; } .business-workspace { min-width: 680px; } - .business-tabs { gap: 22px; } + .route-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); } .live-media-grid, .media-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } .full-detail-header { padding: 10px 14px 14px; grid-template-columns: minmax(0, 1fr) auto; } - .full-detail-actions .plain-command { display: none; } + .full-detail-tabs { padding: 0 14px; gap: 22px; overflow-x: auto; align-items: end; } .full-detail-tabs button { flex: 0 0 auto; } .full-detail-content { margin: 10px; } @@ -697,7 +686,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .control-alert-content strong { color: #49545d; font-size: 12px; } .control-alert-content small { color: var(--muted); font-size: 10px; } .control-alert-content.alarm strong { color: #a53e45; } -.control-alert-content .plain-command { margin-left: auto; white-space: nowrap; } + .control-section { padding: 18px 20px; border-bottom: 1px solid var(--line); } .control-section .data-section-title { margin-bottom: 14px; } .control-section .data-section-title span { color: var(--muted); font-size: 10px; } @@ -855,7 +844,7 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: .traffic-order-summary > strong { margin: 5px 0 14px; font-size: 13px; } .traffic-order-summary > b { margin: 6px 0; color: #246fae; font-size: 29px; } .traffic-order-summary > small { color: var(--muted); font-size: 10px; } -.traffic-order-summary .primary-command { margin-top: auto; justify-content: center; } + .traffic-scope { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 5px; } .traffic-scope span { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #526570; border-right: 1px solid var(--line); font-size: 11px; } .traffic-scope span:last-child { border-right: 0; }