refine Semi UI vehicle workspace
This commit is contained in:
lingniu
@@ -79,6 +79,7 @@ test('polls lightweight single-vehicle realtime data and passes its report inter
|
||||
]));
|
||||
const commandCard = view.container.querySelector('.v2-identity-band');
|
||||
expect(commandCard).toHaveClass('semi-card', 'v2-vehicle-command-card', 'v2-live-overview');
|
||||
expect(screen.getByLabelText('粤A12345 车辆档案')).toHaveClass('v2-vehicle-record-v3');
|
||||
expect(screen.getByLabelText('单车任务栏')).toHaveClass('v2-workspace-command-bar', 'v2-vehicle-record-command');
|
||||
expect(screen.getByLabelText('单车任务栏')).toHaveTextContent('粤A12345');
|
||||
expect(screen.getByLabelText('单车任务栏')).toHaveTextContent('LTEST000000000001');
|
||||
@@ -181,6 +182,7 @@ test('shows deduplicated Semi vehicle candidates and opens the selected VIN', as
|
||||
expect(screen.getByText('本页在线 1')).toBeInTheDocument();
|
||||
expect(screen.getByText('多源车辆 0')).toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-vehicle-directory-table.semi-table-wrapper')).toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-vehicle-search-page')).toHaveClass('v2-vehicle-directory-v3');
|
||||
expect(view.container.querySelector('.v2-vehicle-directory-profile')).toHaveTextContent('测试品牌13800000000');
|
||||
expect(view.container.querySelector('.v2-vehicle-discovery-shell')).toContainElement(screen.getByLabelText('查车操作'));
|
||||
expect(screen.getByRole('button', { name: `打开 ${initialRealtime.vin} 车辆档案` })).toBeInTheDocument();
|
||||
@@ -485,11 +487,14 @@ test('uses compact Semi telemetry evidence cards on mobile', async () => {
|
||||
expect(document.querySelector('.v2-telemetry-table')).not.toBeInTheDocument();
|
||||
expect(document.querySelector('.v2-telemetry-mobile-list.semi-list')).toBeInTheDocument();
|
||||
expect(document.querySelector('.v2-telemetry-mobile-item.semi-list-item')).toHaveTextContent('36km/h正常');
|
||||
expect(document.querySelector('.v2-vehicle-record-page')).toHaveClass('is-mobile-layout');
|
||||
expect(document.querySelector('.v2-vehicle-record-page')).toHaveClass('v2-vehicle-record-v3', 'is-mobile-layout');
|
||||
expect(screen.getByRole('group', { name: '车辆快捷操作' }).querySelectorAll('.semi-button')).toHaveLength(5);
|
||||
expect(screen.getByRole('group', { name: '车辆快捷操作' })).toHaveTextContent('切换车辆轨迹回放历史数据里程查询告警事件');
|
||||
expect(document.querySelectorAll('.v2-identity-sources .semi-tag')).toHaveLength(3);
|
||||
expect(document.querySelector('.v2-identity-sources')).toHaveTextContent('GB/T 32960JT/T 808宇通 MQTT');
|
||||
expect(document.querySelector('.v2-vehicle-command-card .v2-live-grid')).toHaveAttribute('aria-label', '车辆实时指标');
|
||||
expect(document.querySelectorAll('.v2-vehicle-command-card .v2-live-grid > [role="listitem"]')).toHaveLength(6);
|
||||
expect(document.querySelector('.v2-live-metric.is-speed')).toHaveTextContent('速度');
|
||||
expect(document.querySelector('.v2-live-metric.is-today-mileage')).toHaveTextContent('当日里程');
|
||||
expect(document.querySelector('.v2-live-metric.is-source-status')).toHaveTextContent('来源状态');
|
||||
});
|
||||
|
||||
@@ -454,7 +454,7 @@ function VehicleRecord({ detail, liveRealtime, telemetry, telemetryPending, tele
|
||||
for (const eventName of interactionEvents) window.removeEventListener(eventName, cancelEntryReset, true);
|
||||
};
|
||||
}, [detail.vin]);
|
||||
return <div ref={recordRootRef} className={`v2-vehicle-record-page${mobileLayout ? ' is-mobile-layout' : ''}`} tabIndex={-1} aria-label={`${fmt(identity?.plate || realtime?.plate)} 车辆档案`}>
|
||||
return <div ref={recordRootRef} className={`v2-vehicle-record-page v2-vehicle-record-v3${mobileLayout ? ' is-mobile-layout' : ''}`} tabIndex={-1} aria-label={`${fmt(identity?.plate || realtime?.plate)} 车辆档案`}>
|
||||
<MonitorReturnBar />
|
||||
<Card className="v2-identity-band v2-record-card v2-live-card v2-live-overview v2-vehicle-command-card" bodyStyle={{ padding: 0 }}>
|
||||
<WorkspaceCommandBar
|
||||
@@ -480,12 +480,12 @@ function VehicleRecord({ detail, liveRealtime, telemetry, telemetryPending, tele
|
||||
meta={<span className="v2-live-report-meta"><i className={realtime?.online ? 'is-online' : ''} />{realtime?.online ? '实时在线' : '当前离线'} · <IconClock /><PlatformTime value={realtime?.lastSeen || identity?.lastSeen} /></span>}
|
||||
/>
|
||||
<div className="v2-live-grid" role="list" aria-label="车辆实时指标">
|
||||
<div role="listitem"><small>速度</small><strong>{availableMetric(realtime?.speedKmh, realtime?.speedAvailable)}<em>km/h</em></strong><span>实时车速</span></div>
|
||||
<div role="listitem"><small>SOC</small><strong>{availableMetric(realtime?.socPercent, realtime?.socAvailable)}<em>%</em></strong><span>剩余电量</span></div>
|
||||
<div role="listitem"><small>总里程</small><Button theme="borderless" type="tertiary" className="v2-live-source-link" title="展开全部里程来源" aria-label="查看总里程全部来源" onClick={() => setSourceEvidenceOpen(true)}><span>{availableMetric(realtime?.totalMileageKm, realtime?.mileageAvailable)}<em>km</em></span><IconChevronRight /></Button><span>推荐口径</span></div>
|
||||
<div role="listitem"><small>当日里程</small><Button theme="borderless" type="tertiary" className="v2-live-source-link" title="展开全部里程来源" aria-label="查看当日里程全部来源" onClick={() => setSourceEvidenceOpen(true)}><span>{availableMetric(realtime?.todayMileageKm, realtime?.todayMileageAvailable)}<em>km</em></span><IconChevronRight /></Button><span>今日累计</span></div>
|
||||
<div role="listitem"><small>推荐来源</small><strong className="is-text" title={realtime?.primaryProtocol}>{protocolDisplayLabel(realtime?.primaryProtocol)}</strong><span title={realtime?.locationSource}>{protocolSourceLabel(realtime?.locationSource) || '当前最优来源'}</span></div>
|
||||
<div role="listitem"><small>来源状态</small><strong>{realtime?.onlineSourceCount ?? 0}<em> / {detail.sourceStatus.length}</em></strong><span>在线来源 / 全部</span></div>
|
||||
<div className="v2-live-metric is-speed" role="listitem"><small>速度</small><strong>{availableMetric(realtime?.speedKmh, realtime?.speedAvailable)}<em>km/h</em></strong><span>实时车速</span></div>
|
||||
<div className="v2-live-metric is-soc" role="listitem"><small>SOC</small><strong>{availableMetric(realtime?.socPercent, realtime?.socAvailable)}<em>%</em></strong><span>剩余电量</span></div>
|
||||
<div className="v2-live-metric is-mileage" role="listitem"><small>总里程</small><Button theme="borderless" type="tertiary" className="v2-live-source-link" title="展开全部里程来源" aria-label="查看总里程全部来源" onClick={() => setSourceEvidenceOpen(true)}><span>{availableMetric(realtime?.totalMileageKm, realtime?.mileageAvailable)}<em>km</em></span><IconChevronRight /></Button><span>推荐口径</span></div>
|
||||
<div className="v2-live-metric is-today-mileage" role="listitem"><small>当日里程</small><Button theme="borderless" type="tertiary" className="v2-live-source-link" title="展开全部里程来源" aria-label="查看当日里程全部来源" onClick={() => setSourceEvidenceOpen(true)}><span>{availableMetric(realtime?.todayMileageKm, realtime?.todayMileageAvailable)}<em>km</em></span><IconChevronRight /></Button><span>今日累计</span></div>
|
||||
<div className="v2-live-metric is-source" role="listitem"><small>推荐来源</small><strong className="is-text" title={realtime?.primaryProtocol}>{protocolDisplayLabel(realtime?.primaryProtocol)}</strong><span title={realtime?.locationSource}>{protocolSourceLabel(realtime?.locationSource) || '当前最优来源'}</span></div>
|
||||
<div className="v2-live-metric is-source-status" role="listitem"><small>来源状态</small><strong>{realtime?.onlineSourceCount ?? 0}<em> / {detail.sourceStatus.length}</em></strong><span>在线来源 / 全部</span></div>
|
||||
</div>
|
||||
<CurrentVehicleAddress vehicle={realtime} fallback={identity?.locationText} />
|
||||
</section>
|
||||
|
||||
@@ -105,7 +105,7 @@ export default function VehicleSearchWorkspace() {
|
||||
if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
|
||||
};
|
||||
const vehicleScope = candidates.data ? `${candidates.data.total.toLocaleString('zh-CN')} 辆授权` : '授权范围';
|
||||
return <section className={`v2-vehicle-search-page${syncOpen ? ' has-sync-panel' : ''}${candidatesOpen ? ' has-candidates' : ''}`}>
|
||||
return <section className={`v2-vehicle-search-page v2-vehicle-directory-v3${syncOpen ? ' has-sync-panel' : ''}${candidatesOpen ? ' has-candidates' : ''}`}>
|
||||
<div className="v2-vehicle-discovery-shell">
|
||||
{!mobileLayout || administrator ? <WorkspaceCommandBar
|
||||
className={`v2-vehicle-command-bar${mobileLayout ? ' is-mobile-admin' : ''}`}
|
||||
|
||||
@@ -15688,3 +15688,577 @@
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI vehicle workspace v3.
|
||||
* The directory owns one scroll region, while the single-vehicle header keeps
|
||||
* identity, actions and live evidence readable without horizontal overflow.
|
||||
*/
|
||||
.v2-vehicle-directory-v3.v2-vehicle-search-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
padding: 12px var(--v2-page-gutter) 16px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 > .v2-vehicle-discovery-shell {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 > .v2-vehicle-recent-card.semi-card {
|
||||
width: min(1280px, 100%);
|
||||
min-height: 0;
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 > .v2-vehicle-recent-card > .semi-card-body {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-directory-table.semi-table-wrapper,
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-grid {
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-directory-table.semi-table-wrapper {
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-directory-table .semi-table {
|
||||
width: 100%;
|
||||
min-width: 720px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-search-options.v2-vehicle-candidate-list {
|
||||
width: min(760px, calc(100% - 20px));
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-search-options.is-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-search-options .v2-vehicle-option.semi-button,
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-search-options .semi-button-content {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-directory-pagination {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3.v2-vehicle-record-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1540px;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-inline: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 12px var(--v2-page-gutter) 24px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card.semi-card {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card > .semi-card-body {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-record-command.v2-workspace-command-bar {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
min-height: 94px;
|
||||
grid-template-columns: minmax(270px, .72fr) minmax(0, 1.88fr);
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-copy {
|
||||
min-width: 0;
|
||||
min-height: 94px;
|
||||
align-content: center;
|
||||
gap: 5px;
|
||||
border-right: 1px solid #e4eaf2;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-actions {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(285px, .82fr) minmax(420px, 1.18fr);
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-meta {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: stretch;
|
||||
border-right: 1px solid #e4eaf2;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(145px, 1.05fr) minmax(130px, .95fr);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta > span {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 13px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta > span + span {
|
||||
border-left: 1px solid #e7edf4;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta strong {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
align-content: center;
|
||||
gap: 5px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 36px;
|
||||
padding-inline: 5px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button .semi-button-content {
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button .semi-button-content-right {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-live-section > .v2-workspace-panel-header {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: .78fr .72fr 1.16fr 1.04fr 1.02fr .78fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid > .v2-live-metric {
|
||||
min-width: 0;
|
||||
min-height: 88px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid strong,
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-source-link {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
font-size: clamp(16px, 1.45vw, 21px);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid strong.is-text {
|
||||
font-size: clamp(12px, 1.05vw, 15px);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-source-link.semi-button {
|
||||
display: flex;
|
||||
height: 26px;
|
||||
justify-content: stretch;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-source-link .semi-button-content {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-source-link .semi-button-content > span:not(.semi-icon) {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-source-link .semi-button-content > .semi-icon {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-current-location {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(280px, .78fr) minmax(360px, 1.22fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-current-location > span,
|
||||
.v2-vehicle-record-v3 .v2-current-location strong {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-record-grid,
|
||||
.v2-vehicle-record-v3 .v2-record-grid > *,
|
||||
.v2-vehicle-record-v3 .v2-record-card,
|
||||
.v2-vehicle-record-v3 .v2-single-map-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.v2-vehicle-record-v3 .v2-vehicle-record-command.v2-workspace-command-bar {
|
||||
grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-actions {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-meta {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e7edf4;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions {
|
||||
min-height: 52px;
|
||||
padding-block: 7px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid > .v2-live-metric:nth-child(3n + 1) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid > .v2-live-metric:nth-child(n + 4) {
|
||||
border-top: 1px solid #e7edf4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.v2-vehicle-record-v3.v2-vehicle-record-page {
|
||||
padding: 10px 11px 18px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-record-command.v2-workspace-command-bar {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-copy {
|
||||
min-height: 72px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e4eaf2;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-actions {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-current-location {
|
||||
grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.v2-vehicle-directory-v3.v2-vehicle-search-page {
|
||||
gap: 7px;
|
||||
overflow: hidden;
|
||||
padding: 8px 8px 82px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3.has-candidates.v2-vehicle-search-page,
|
||||
.v2-vehicle-directory-v3.has-sync-panel.v2-vehicle-search-page {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 > .v2-vehicle-discovery-shell {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-command-bar.is-mobile-admin {
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-command-bar.is-mobile-admin .v2-workspace-command-copy > .semi-typography:first-child {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-command-bar.is-mobile-admin .v2-workspace-command-actions > .semi-button {
|
||||
min-height: 32px;
|
||||
padding-inline: 9px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-mobile-filter-toggle.semi-button {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 > .v2-vehicle-recent-card.semi-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-grid {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 2px 9px 6px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item.semi-button {
|
||||
min-height: 68px;
|
||||
padding: 6px 27px 6px 2px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item .semi-button-content {
|
||||
gap: 4px 7px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-identity,
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-status {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-protocols .semi-tag,
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-status .semi-tag {
|
||||
min-height: 20px;
|
||||
padding-inline: 6px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-search-options.v2-vehicle-candidate-list {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-search-options.is-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3.v2-vehicle-record-page {
|
||||
gap: 7px;
|
||||
padding: 7px 7px 88px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card.semi-card {
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-copy {
|
||||
min-height: 66px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-primary {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-plate {
|
||||
min-height: 34px;
|
||||
padding-inline: 9px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-online-label.semi-tag {
|
||||
min-height: 22px;
|
||||
padding-inline: 7px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-actions {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta > span {
|
||||
min-height: 56px;
|
||||
padding: 7px 9px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta > span + span {
|
||||
border-top: 0;
|
||||
border-left: 1px solid #e7edf4;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta strong {
|
||||
margin-top: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-sources {
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-sources .semi-tag {
|
||||
min-height: 18px;
|
||||
padding-inline: 4px;
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 3px;
|
||||
overflow: hidden;
|
||||
padding: 5px 6px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button {
|
||||
min-height: 48px;
|
||||
padding: 2px 1px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button .semi-button-content {
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button .semi-button-content-left {
|
||||
margin-right: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button .semi-button-content-right {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-live-section > .v2-workspace-panel-header {
|
||||
min-height: 44px;
|
||||
padding: 6px 9px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-live-section .v2-workspace-panel-copy > h5.semi-typography {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-live-section .v2-workspace-panel-copy > .semi-typography:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-live-section .v2-live-report-meta {
|
||||
max-width: 58vw;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid > .v2-live-metric {
|
||||
min-height: 82px;
|
||||
border-top: 0;
|
||||
border-left: 1px solid #e7edf4;
|
||||
padding: 10px 11px 9px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid > .v2-live-metric:nth-child(odd) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid > .v2-live-metric:nth-child(n + 3) {
|
||||
border-top: 1px solid #e7edf4;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid strong,
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-source-link {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-live-grid strong.is-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-current-location {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-command-card .v2-current-location > span + span {
|
||||
border-top: 1px solid #e4eaf2;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-record-nav .v2-workspace-panel-header {
|
||||
min-height: 48px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-record-nav .v2-workspace-panel-copy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-record-nav .v2-workspace-panel-actions,
|
||||
.v2-vehicle-record-v3 .v2-vehicle-section-nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-section-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-vehicle-record-v3 .v2-vehicle-section-nav > .semi-button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding-inline: 2px;
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user