refactor(ui): polish semi alert workspace
This commit is contained in:
lingniu
@@ -24827,3 +24827,325 @@
|
||||
box-shadow: inset 2px 0 #c9d2de;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI alert convergence — keep the event queue dominant while making the
|
||||
* navigation, evidence inspector and responsive detail flow share the calmer
|
||||
* hierarchy used by the vehicle, track, history and mileage workspaces.
|
||||
*/
|
||||
.v2-alert-page {
|
||||
gap: 10px;
|
||||
padding: 14px 18px 16px;
|
||||
background: #f4f7fa;
|
||||
}
|
||||
|
||||
.v2-alert-navigation,
|
||||
.v2-alert-filter-card.semi-card,
|
||||
.v2-alert-metric-rail.is-queue.semi-card,
|
||||
.v2-alert-table-card.semi-card,
|
||||
.v2-alert-inspector.semi-card {
|
||||
border-color: #dbe4ee;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 5px 18px rgba(31, 53, 80, .04);
|
||||
}
|
||||
|
||||
.v2-alert-navigation {
|
||||
min-height: 50px;
|
||||
background: rgba(255, 255, 255, .96);
|
||||
}
|
||||
|
||||
.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs {
|
||||
min-height: 40px;
|
||||
grid-auto-columns: minmax(126px, 1fr);
|
||||
gap: 3px;
|
||||
border: 1px solid #e3e9f1;
|
||||
background: #f4f6f9;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button {
|
||||
min-height: 34px;
|
||||
border: 1px solid transparent;
|
||||
color: #617188;
|
||||
font-size: 12px;
|
||||
font-weight: 680;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button:hover {
|
||||
border-color: #e0e7f0;
|
||||
background: #fff;
|
||||
color: #315f98;
|
||||
}
|
||||
|
||||
.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button.is-active,
|
||||
.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button.is-active:hover {
|
||||
border-color: #c7daf7;
|
||||
background: linear-gradient(180deg, #f7faff 0%, #eaf2ff 100%);
|
||||
color: #1268df;
|
||||
box-shadow: 0 2px 8px rgba(18, 104, 223, .08), inset 0 -2px #75a6ed;
|
||||
}
|
||||
|
||||
.v2-alert-navigation .v2-alert-tabs > .semi-button.is-active .v2-segmented-tab-count {
|
||||
background: #fff;
|
||||
color: #d9473f;
|
||||
box-shadow: 0 0 0 1px rgba(217, 71, 63, .12);
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary {
|
||||
min-height: 66px;
|
||||
padding: 9px 13px;
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary label > div,
|
||||
.v2-alert-filter.v2-alert-filter-primary .semi-select,
|
||||
.v2-alert-filter.v2-alert-filter-primary .semi-input-wrapper,
|
||||
.v2-alert-filter.v2-alert-filter-primary > .semi-button {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header {
|
||||
min-height: 56px;
|
||||
padding-inline: 15px;
|
||||
}
|
||||
|
||||
.v2-alert-table-card .v2-workspace-panel-copy > h5.semi-typography {
|
||||
color: #253d58;
|
||||
font-size: 16px;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||
height: 44px;
|
||||
background: #f7f9fc;
|
||||
color: #5d6f86;
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
height: 56px;
|
||||
padding: 8px 10px;
|
||||
color: #405269;
|
||||
font-size: 12.5px;
|
||||
transition: background-color .16s ease;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
|
||||
background: #f6f9fe;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row.is-selected > .semi-table-row-cell {
|
||||
background: #edf5ff;
|
||||
}
|
||||
|
||||
.v2-alert-event-evidence strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-alert-event-evidence small {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.v2-alert-workspace {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.v2-alert-workspace.is-inspector-open {
|
||||
grid-template-columns: minmax(650px, 1fr) 420px;
|
||||
}
|
||||
|
||||
.v2-alert-workspace.is-inspector-open .v2-alert-event-table.is-compact.semi-table-wrapper {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.v2-alert-inspector.semi-card {
|
||||
background: #f4f7fb;
|
||||
}
|
||||
|
||||
.v2-alert-inspector > .semi-card-body > .v2-alert-inspector-heading {
|
||||
border-bottom: 1px solid #e1e8f1;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
}
|
||||
|
||||
.v2-alert-inspector-heading > .v2-workspace-panel-copy > .semi-typography:first-child {
|
||||
color: #253d58;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector-heading > .v2-workspace-panel-copy > .semi-typography:last-child {
|
||||
max-width: 285px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector-content {
|
||||
scrollbar-color: #b7c4d2 transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.v2-alert-inspector-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector-content::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: #b7c4d2;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-inspector-content {
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.v2-alert-detail-card.semi-card,
|
||||
.v2-alert-technical-collapse.semi-collapse {
|
||||
border-color: #dce5ef;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 14px rgba(31, 53, 80, .035);
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-identity {
|
||||
min-height: 76px;
|
||||
padding: 11px 13px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-identity strong {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-identity code {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-facts > span {
|
||||
min-height: 58px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-facts small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-facts strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence {
|
||||
grid-template-columns: .9fr 1.25fr .9fr;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value > .semi-card-body {
|
||||
min-height: 70px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence strong {
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-rule {
|
||||
min-height: 38px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-rule > span {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-disposition-card > .semi-card-header {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-disposition-card > .semi-card-body {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.v2-alert-inspector:not(.is-sheet) .v2-alert-disposition-card .semi-input-textarea {
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector > .semi-card-body > .v2-alert-links {
|
||||
min-height: 52px;
|
||||
gap: 7px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector > .semi-card-body > .v2-alert-links a {
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #edf4fc;
|
||||
color: #155fc5;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) and (min-width: 681px) {
|
||||
.v2-alert-workspace.is-inspector-open > .v2-alert-inspector {
|
||||
width: min(420px, calc(100% - 56px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.v2-alert-page {
|
||||
gap: 8px;
|
||||
padding: 8px 8px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-navigation {
|
||||
min-height: 48px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs {
|
||||
min-height: 40px;
|
||||
grid-auto-columns: minmax(102px, 1fr);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button {
|
||||
min-height: 34px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-discovery {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-discovery > .v2-mobile-filter-toggle.semi-button {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-list > .v2-alert-mobile-card.semi-card {
|
||||
border-color: #dfe6ef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(31, 53, 80, .025);
|
||||
}
|
||||
|
||||
.v2-alert-mobile-card-content {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-card-content header > strong {
|
||||
color: #293f58;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v2-alert-inspector.is-sheet .v2-alert-inspector-content {
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user