refactor(ui): converge semi monitor list
This commit is contained in:
lingniu
@@ -25489,3 +25489,400 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI monitor list convergence.
|
||||
* Realtime evidence stays dense and stable during polling: desktop rows read
|
||||
* as one continuous data surface, while phone cards keep four vehicles within
|
||||
* a typical viewport without clipping the supporting fleet metrics.
|
||||
*/
|
||||
.v2-monitor-table-panel.semi-card {
|
||||
border-color: #dce5ef;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 22px rgba(31, 53, 80, .045);
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header {
|
||||
min-height: 58px;
|
||||
border-bottom: 1px solid #e3e9f1;
|
||||
padding: 9px 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > h5 {
|
||||
color: #263b52;
|
||||
font-size: 15px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-meta {
|
||||
border-radius: 999px;
|
||||
background: #eef4fb;
|
||||
padding: 4px 8px;
|
||||
color: #56718f;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
height: 58px;
|
||||
border-bottom-color: #e8edf3;
|
||||
}
|
||||
|
||||
.v2-monitor-table .semi-table-tbody > .semi-table-row:hover {
|
||||
background: #f6f9fd;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle strong {
|
||||
color: #253a51;
|
||||
font-size: 13px;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.v2-monitor-table-vehicle span {
|
||||
color: #8290a2;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.v2-monitor-summary-rail.is-queue.has-context > .semi-card-body {
|
||||
min-height: 130px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span {
|
||||
box-sizing: border-box;
|
||||
min-height: 49px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 11px 20px 10px;
|
||||
align-content: center;
|
||||
gap: 0;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(3),
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(6) {
|
||||
border-top: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(3) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > :is(small, strong, em) {
|
||||
min-width: 0;
|
||||
grid-column: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > small {
|
||||
grid-row: 1;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > strong,
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary > strong {
|
||||
grid-row: 2;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-list > span > em {
|
||||
display: block;
|
||||
max-width: none;
|
||||
grid-row: 3;
|
||||
font-size: 8px;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-rail .v2-workspace-metric-context {
|
||||
display: flex;
|
||||
min-height: 38px;
|
||||
border-top: 1px solid #e5ebf2;
|
||||
border-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support {
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support > span {
|
||||
min-height: 38px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: 16px;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support small {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 9px;
|
||||
line-height: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support strong {
|
||||
min-width: max-content;
|
||||
overflow: visible;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support strong > i {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-summary-support em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header {
|
||||
min-height: 50px;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy {
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > h5 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-copy > .semi-typography:not(h5) {
|
||||
max-width: 210px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-table-panel > .semi-card-body > .v2-monitor-list-header .v2-workspace-panel-meta {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards {
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
scrollbar-color: #b5c2d0 transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card {
|
||||
min-height: 109px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border-color: #dfe6ef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(31, 53, 80, .025);
|
||||
contain-intrinsic-size: auto 109px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card > .semi-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-card-header {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 4px 8px 3px 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-identity > strong {
|
||||
overflow: hidden;
|
||||
color: #283d54;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-card .v2-monitor-mobile-identity > span {
|
||||
overflow: hidden;
|
||||
color: #8795a6;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 9px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions {
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions > b {
|
||||
font-size: 15px;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions > b small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-card-heading-actions > .v2-monitor-card-locate.semi-button {
|
||||
width: 46px;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
border-radius: 7px;
|
||||
padding: 0 5px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary {
|
||||
display: grid;
|
||||
grid-template-columns: .9fr 1.08fr 1.12fr;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
border-top: 1px solid #edf1f5;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 27px;
|
||||
align-content: center;
|
||||
gap: 1px;
|
||||
border-right: 1px solid #edf1f5;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary > div:first-child {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary > div:last-child {
|
||||
border-right: 0;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dt {
|
||||
color: #8996a7;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: #34485f;
|
||||
font-size: 10px;
|
||||
font-weight: 680;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary dd.is-today {
|
||||
color: #1268df;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary .v2-monitor-mobile-protocol {
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-cards .v2-monitor-mobile-primary .v2-protocol-tag.semi-tag {
|
||||
max-width: 82px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location {
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f5;
|
||||
background: #f8fafc;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-coordinate {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #77889b;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-coordinate > svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex: 0 0 auto;
|
||||
color: #6f87a3;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-coordinate > :is(code, small) {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #6c7d91;
|
||||
font-size: 9px;
|
||||
line-height: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-action.semi-button,
|
||||
.v2-monitor-mobile-location .v2-monitor-address-update.semi-button {
|
||||
min-width: 68px;
|
||||
height: 25px;
|
||||
min-height: 25px;
|
||||
border-radius: 7px;
|
||||
padding: 0 7px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-loading {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-result {
|
||||
display: grid;
|
||||
max-width: 150px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-monitor-mobile-location .v2-monitor-address-result > :is(span, small) {
|
||||
overflow: hidden;
|
||||
font-size: 9px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user