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

feat: unify mobile filter sheets

Browse Source
This commit is contained in:
lingniu
2026-07-19 04:44:21 +08:00
parent d3eb77e2c7
commit 9a87d14d6d
11 changed files with 417 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,208 @@
padding: 8px 14px;
}
/*
* Shared Semi UI mobile filter sheet.
* Keep the same title hierarchy, scroll surface, condition card and action
* boundary across vehicle, mileage, history, alerts, accounts and access.
*/
@media (max-width: 680px) {
.v2-mobile-filter-sheet .semi-sidesheet-inner {
width: 100vw !important;
max-width: 100%;
overflow: hidden;
border-radius: 18px 18px 0 0;
background: #f4f7fb;
box-shadow: 0 -20px 56px rgba(25, 45, 72, .2);
padding-bottom: env(safe-area-inset-bottom);
}
.v2-mobile-filter-sheet.semi-sidesheet-bottom .semi-sidesheet-header {
min-height: 68px;
border-bottom: 1px solid #dfe7f0;
background: rgba(255, 255, 255, .98);
padding: 11px 14px;
}
.v2-mobile-filter-sheet.semi-sidesheet-bottom .semi-sidesheet-body {
min-height: 0;
overflow-y: auto;
background: #f4f7fb;
padding: 12px;
overscroll-behavior: contain;
}
.v2-mobile-filter-sheet.semi-sidesheet-bottom .semi-sidesheet-footer {
border-top: 1px solid #dfe7f0;
background: rgba(255, 255, 255, .98);
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.v2-mobile-filter-sheet-title {
display: grid;
min-width: 0;
gap: 3px;
}
.v2-mobile-filter-sheet-title > strong {
color: #253a52;
font-size: 15px;
line-height: 1.3;
}
.v2-mobile-filter-sheet-title > span {
color: #8090a3;
font-size: 10px;
font-weight: 500;
line-height: 1.4;
}
.v2-mobile-filter-sheet-footer {
display: grid;
width: 100%;
min-width: 0;
grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
gap: 9px;
}
.v2-mobile-filter-sheet-footer > .semi-button {
width: 100%;
min-height: 42px;
justify-content: center;
border-radius: 9px;
font-weight: 700;
}
.v2-mobile-filter-sheet-section {
display: grid;
min-width: 0;
gap: 12px;
border: 1px solid #dfe7f0;
border-radius: 12px;
background: #fff;
padding: 12px;
box-shadow: 0 8px 24px rgba(31, 53, 80, .055);
}
.v2-mobile-filter-sheet-section > header {
display: grid;
min-width: 0;
gap: 3px;
}
.v2-mobile-filter-sheet-section > header > strong {
color: #2b4058;
font-size: 13px;
line-height: 1.3;
}
.v2-mobile-filter-sheet-section > header > span {
color: #7c8b9e;
font-size: 10px;
line-height: 1.45;
}
.v2-mobile-filter-sheet-section > .v2-mileage-filter {
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
box-shadow: none;
}
.v2-mobile-filter-sheet .v2-access-mobile-filter-form {
gap: 0;
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
box-shadow: none;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px 9px;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label.is-search,
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label:last-child {
grid-column: 1 / -1;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label {
display: grid;
min-width: 0;
gap: 6px;
color: #5f7188;
font-size: 11px;
font-weight: 650;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label > .semi-input-wrapper,
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label > .semi-select {
width: 100%;
min-height: 44px;
border-radius: 9px;
background: #fff;
}
}
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
.v2-mobile-filter-sheet.semi-sidesheet-bottom .semi-sidesheet-inner {
height: 100dvh !important;
max-height: 100dvh;
border-radius: 0;
}
.v2-mobile-filter-sheet.semi-sidesheet-bottom .semi-sidesheet-header {
min-height: 54px;
padding: 7px 12px;
}
.v2-mobile-filter-sheet.semi-sidesheet-bottom .semi-sidesheet-body {
padding: 8px;
}
.v2-mobile-filter-sheet.semi-sidesheet-bottom .semi-sidesheet-footer {
padding: 7px 10px;
}
.v2-mobile-filter-sheet-title > span,
.v2-mobile-filter-sheet-section > header {
display: none;
}
.v2-mobile-filter-sheet-section {
gap: 8px;
padding: 9px;
}
.v2-mobile-filter-sheet-footer > .semi-button {
min-height: 36px;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label.is-search,
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label:last-child {
grid-column: auto;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label {
gap: 4px;
font-size: 9px;
}
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label > .semi-input-wrapper,
.v2-access-mobile-filter-form > .v2-mobile-filter-sheet-section > div > label > .semi-select {
min-height: 38px;
}
}
/*
* Global short-landscape entry and navigation.
* Keep every authentication action in the first viewport, preserve practical