refactor(ui): polish semi mileage discovery

This commit is contained in:
lingniu
2026-07-19 16:25:48 +08:00
parent fa60bbb2c8
commit 40c210a192
3 changed files with 116 additions and 6 deletions

View File

@@ -14551,6 +14551,8 @@
flex: 0 0 auto;
gap: 0;
overflow: visible;
container-name: mileage-discovery;
container-type: inline-size;
border: 1px solid #d8e3ef;
border-radius: 12px;
background: #fff;
@@ -14702,6 +14704,27 @@
font-size: 12px;
}
.v2-mileage-source-trigger.semi-button .semi-button-content {
display: flex;
width: 100%;
min-width: 0;
flex: 1 1 auto;
align-items: center;
gap: 6px;
}
.v2-mileage-source-trigger.semi-button .semi-button-content > span,
.v2-mileage-source-trigger.semi-button .semi-button-content > em {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-mileage-source-trigger.semi-button .semi-button-content > b {
flex: 0 0 auto;
margin-left: auto;
}
.v2-mileage-source-trigger.semi-button:hover,
.v2-mileage-source-trigger.semi-button[aria-expanded="true"] {
border-color: #aec6e4;
@@ -14715,7 +14738,10 @@
}
.v2-mileage-ranges {
display: flex;
min-height: 38px;
min-width: 0;
align-items: center;
gap: 2px;
border: 1px solid #e2e8f0;
border-radius: 9px;
@@ -14723,14 +14749,22 @@
padding: 3px;
}
.v2-mileage-ranges > span {
flex: 0 0 auto;
}
.v2-mileage-ranges > .semi-button-group {
display: flex;
width: 100%;
min-width: 0;
flex: 1 1 auto;
gap: 2px;
}
.v2-mileage-ranges .semi-button {
min-height: 30px;
min-width: 52px;
flex: 1 1 0;
border-radius: 6px;
font-size: 11px;
font-weight: 650;
@@ -15003,9 +15037,9 @@
transform: translateY(-50%);
}
@media (min-width: 681px) and (max-width: 1050px) {
@container mileage-discovery (min-width: 681px) and (max-width: 1100px) {
.v2-mileage-query-panel .v2-mileage-filter {
grid-template-columns: minmax(200px, 1.25fr) minmax(220px, 1fr) auto;
grid-template-columns: minmax(260px, 1.25fr) minmax(242px, .95fr) auto;
grid-template-areas:
"vehicle date submit"
"source ranges ranges";
@@ -15028,8 +15062,35 @@
grid-area: source;
}
.v2-mileage-query-panel .v2-mileage-source-trigger.semi-button {
width: 100%;
min-width: 190px;
justify-content: flex-start;
}
.v2-mileage-query-panel .v2-mileage-ranges {
display: flex;
grid-area: ranges;
width: 100%;
min-width: 0;
align-items: center;
justify-self: stretch;
}
.v2-mileage-query-panel .v2-mileage-ranges > span {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
padding-inline: 7px 5px;
color: #718196;
font-size: 10px;
font-weight: 650;
white-space: nowrap;
}
.v2-mileage-query-panel .v2-mileage-ranges .semi-button {
min-width: 52px;
flex: 1 1 0;
}
}