shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine Semi UI map controls

Browse Source
This commit is contained in:
lingniu
2026-07-18 07:09:05 +08:00
parent b54d5ba077
commit 45c0d4d9a3
3 changed files with 80 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
vehicle-data-platform/apps/web/src/v2/styles/v2.css
View File

@@ -302,22 +302,52 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-fleet-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e8f0f6; }
.v2-fleet-map-canvas { position: absolute; inset: 0; }
.v2-map-controls { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; align-items: stretch; gap: 8px; }
.v2-map-layer-control { display: grid; height: 44px; grid-template-columns: auto auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 10px; color: #435168; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; }
.v2-map-layer-control > svg { color: var(--v2-blue); font-size: 15px; }
.v2-map-layer-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.v2-map-layer-control strong { font-size: 10px; line-height: 1.2; }
.v2-map-layer-control small { color: #7b8ba0; font-size: 8px; }
.v2-map-layer-control > i { position: relative; width: 24px; height: 14px; border-radius: 8px; background: #cbd5e1; transition: background .16s; }
.v2-map-layer-control > i::after { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); content: ""; transition: transform .16s; }
.v2-map-layer-control > i.is-on { background: var(--v2-blue); }
.v2-map-layer-control > i.is-on::after { transform: translateX(10px); }
.v2-map-follow-control { display: grid; height: 44px; grid-template-columns: auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 11px; color: #607086; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.v2-map-follow-control > svg { font-size: 16px; }
.v2-map-follow-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.v2-map-follow-control strong { font-size: 10px; line-height: 1.2; }
.v2-map-follow-control small { color: #8a98aa; font-size: 8px; }
.v2-map-follow-control.is-active { border-color: #9ec0f7; background: #eef5ff; color: #1268f3; }
.v2-map-follow-control.is-active small { color: #4e82cf; }
.v2-map-control-button.semi-button {
width: auto;
height: 46px;
border: 1px solid rgba(210,220,233,.96);
border-radius: 10px;
background: rgba(255,255,255,.96);
padding: 0 9px 0 11px;
color: #53677f;
box-shadow: 0 9px 26px rgba(21,32,51,.13);
backdrop-filter: blur(14px);
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.v2-map-control-button.semi-button:hover {
border-color: #b9cae0;
background: #fff;
box-shadow: 0 12px 30px rgba(21,32,51,.16);
transform: translateY(-1px);
}
.v2-map-control-button.semi-button:active { transform: translateY(0); }
.v2-map-control-button.semi-button.is-active {
border-color: #aac8f5;
background: rgba(244,248,255,.98);
color: var(--v2-blue);
}
.v2-map-control-button .semi-button-content {
display: grid;
min-width: 0;
grid-template-columns: auto minmax(0,1fr) auto;
align-items: center;
gap: 8px;
}
.v2-map-control-button .semi-icon { color: currentColor; font-size: 16px; }
.v2-map-control-copy { display: grid; min-width: 0; align-items: start; gap: 2px; text-align: left; }
.v2-map-control-copy strong { color: #31445b; font-size: 10px; line-height: 1.15; }
.v2-map-control-copy small { color: #8190a3; font-size: 8px; font-weight: 500; line-height: 1.15; white-space: nowrap; }
.v2-map-control-button.is-active .v2-map-control-copy strong { color: #245f9f; }
.v2-map-control-button.is-active .v2-map-control-copy small { color: #6387b7; }
.v2-map-control-state.semi-tag {
min-width: 44px;
height: 22px;
justify-content: center;
border-radius: 999px;
padding-inline: 7px;
font-size: 8px;
font-weight: 700;
}
.v2-map-selection-marker { --v2-selection-color: #f59e0b; --v2-selection-rgb: 245,158,11; position: relative; width: 48px; height: 48px; pointer-events: none; }
.v2-map-selection-marker.is-driving { --v2-selection-color: #1677ff; --v2-selection-rgb: 22,119,255; }
.v2-map-selection-marker.is-idle { --v2-selection-color: #12a46f; --v2-selection-rgb: 18,164,111; }
@@ -1651,8 +1681,12 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-nav-item { justify-content: center; padding: 0; }
.v2-filterbar > .semi-card-body { grid-template-columns: 1fr 1fr; }
.v2-search-field { grid-column: 1 / -1; }
.v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { position: relative; grid-template-columns: 220px minmax(0, 1fr); }
.v2-vehicle-detail { position: absolute; inset: 10px 10px 10px auto; z-index: 8; display: block; width: min(340px, calc(100% - 240px)); border: 1px solid #d8e2ed; border-radius: 10px; box-shadow: 0 12px 36px rgba(21,32,51,.16); }
.v2-monitor-workspace, .v2-monitor-workspace.is-detail-collapsed { position: relative; grid-template-columns: 220px minmax(0, 1fr); }
.v2-monitor-workspace.is-detail-open { position: relative; grid-template-columns: minmax(0, 1fr); }
.v2-monitor-workspace.is-detail-open > .v2-vehicle-rail { display: none; }
.v2-monitor-workspace.is-detail-open .v2-map-controls { right: auto; left: 12px; }
.v2-monitor-workspace.is-detail-open .v2-map-legend { right: 370px; left: 12px; width: auto; max-width: none; transform: none; }
.v2-vehicle-detail { position: absolute; inset: 10px 10px 10px auto; z-index: 8; display: block; width: min(350px, calc(100% - 20px)); border: 1px solid #d8e2ed; border-radius: 10px; box-shadow: 0 12px 36px rgba(21,32,51,.16); }
.v2-detail-peek { position: absolute; right: 10px; bottom: 10px; z-index: 8; display: block; min-width: 0; min-height: 0; border: 1px solid #cfe0f8; border-radius: 22px; box-shadow: 0 7px 24px rgba(18,104,243,.16); }
.v2-detail-peek .semi-button { width: auto; height: 44px; border-radius: 22px; padding: 0 14px; }
.v2-detail-peek .semi-button-content { flex-direction: row; gap: 7px; }
@@ -1894,9 +1928,10 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-vehicle-row { min-height: 64px; padding: 9px 11px; }
.v2-vehicle-identity strong { font-size: 13px; }
.v2-map-controls { top: 8px; right: 8px; gap: 6px; }
.v2-map-layer-control, .v2-map-follow-control { width: 44px; height: 44px; grid-template-columns: 1fr; justify-items: center; padding: 0; }
.v2-map-layer-control span:not(.semi-icon), .v2-map-layer-control > i, .v2-map-follow-control span:not(.semi-icon) { display: none; }
.v2-map-layer-control .semi-icon, .v2-map-follow-control .semi-icon { display: inline-flex; font-size: 18px; }
.v2-map-control-button.semi-button { width: 44px; height: 44px; padding: 0; }
.v2-map-control-button .semi-button-content { display: flex; width: 100%; justify-content: center; }
.v2-map-control-button .v2-map-control-copy, .v2-map-control-button .v2-map-control-state { display: none; }
.v2-map-control-button .semi-icon { display: inline-flex; font-size: 18px; }
.v2-province-marker.is-compact { width: 68px; min-height: 38px; grid-template-columns: minmax(0,1fr) auto; gap: 4px; border-radius: 8px; padding: 6px 7px; }
.v2-province-marker.is-compact > span { font-size: 11px; }
.v2-province-marker.is-compact > strong { font-size: 17px; }