feat: 为排序选择器添加 variant 属性,简化样式并移除多余 CSS

This commit is contained in:
jxxghp
2025-04-11 08:36:24 +08:00
parent 7703d8157c
commit 96a0ce8c5f
2 changed files with 7 additions and 36 deletions

View File

@@ -405,6 +405,7 @@ function loadMore({ done }: { done: any }) {
hide-details
class="sort-select"
prepend-icon="mdi-sort"
variant="plain"
></VSelect>
</div>
@@ -523,6 +524,7 @@ function loadMore({ done }: { done: any }) {
hide-details
class="mobile-sort-select"
prepend-icon="mdi-sort"
variant="plain"
></VSelect>
</div>
@@ -644,18 +646,6 @@ function loadMore({ done }: { done: any }) {
transform: translateY(-2px);
}
.sort-select {
font-size: 0.9rem;
font-weight: 500;
max-inline-size: 160px;
min-inline-size: 120px;
}
.sort-select :deep(.v-field__input) {
min-block-size: 36px;
padding-block: 5px;
}
.selected-filters {
overflow: hidden;
border-radius: 0 0 12px 12px;
@@ -710,11 +700,6 @@ function loadMore({ done }: { done: any }) {
}
@media (width <= 600px) {
.sort-select {
max-inline-size: 120px;
min-inline-size: 100px;
}
.filter-btn {
font-size: 0.75rem;
}
@@ -726,10 +711,6 @@ function loadMore({ done }: { done: any }) {
padding-inline-end: 0;
}
.sort-select {
inline-size: 100%;
}
.filter-bar {
inline-size: 100%;
margin-block-start: 8px;

View File

@@ -380,6 +380,7 @@ onMounted(() => {
hide-details
class="sort-select"
prepend-icon="mdi-sort"
variant="plain"
>
</VSelect>
<div class="filter-divider"></div>
@@ -496,6 +497,7 @@ onMounted(() => {
hide-details
class="mobile-sort-select"
prepend-icon="mdi-sort"
variant="plain"
></VSelect>
</div>
@@ -649,12 +651,6 @@ onMounted(() => {
transform: translateY(-2px);
}
.sort-select {
font-size: 0.875rem;
max-inline-size: 120px;
min-inline-size: 100px;
}
.filter-menu-content {
max-block-size: 50vh;
overflow-y: auto;
@@ -722,11 +718,6 @@ onMounted(() => {
min-block-size: 300px;
}
.mobile-sort-select {
max-inline-size: 130px;
min-inline-size: 110px;
}
.filter-buttons-grid {
display: grid;
gap: 4px;
@@ -757,9 +748,8 @@ onMounted(() => {
text-align: center;
}
@media (width <= 600px) {
.sort-select {
min-inline-size: 100px;
}
.mobile-sort-select {
max-inline-size: 130px;
min-inline-size: 110px;
}
</style>