Move search input row (#3806)

This commit is contained in:
the1812 2023-07-29 18:23:26 +08:00
parent 46e9d791ac
commit 1869f772bb
2 changed files with 24 additions and 13 deletions

View File

@ -5,12 +5,6 @@
<div class="title-text"> <div class="title-text">
{{ config.title }} {{ config.title }}
</div> </div>
<VIcon icon="search" :size="18" />
<TextBox
v-model="search"
class="list-search"
:placeholder="`在 ${filteredList.length} 个${config.title}中搜索`"
/>
</div> </div>
<div v-if="config.description" class="sub-page-row"> <div v-if="config.description" class="sub-page-row">
<div class="description-text"> <div class="description-text">
@ -77,6 +71,14 @@
<SwitchBox v-model="excludeBuiltIn" /> <SwitchBox v-model="excludeBuiltIn" />
</div> </div>
</div> </div>
<div class="sub-page-row search-item-row">
<VIcon icon="search" :size="18" />
<TextBox
v-model="search"
class="list-search"
:placeholder="`在 ${filteredList.length} 个${config.title}中搜索`"
/>
</div>
<div v-if="!loaded" class="sub-page-row"> <div v-if="!loaded" class="sub-page-row">
<VLoading key="loading" /> <VLoading key="loading" />
</div> </div>
@ -312,14 +314,15 @@ export default Vue.extend({
} }
} }
&-title { &-title {
.be-icon { gap: 6px;
margin-right: 6px;
}
.title-text { .title-text {
font-size: 16px; font-size: 16px;
@include semi-bold(); @include semi-bold();
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
.search-item-row {
gap: 6px;
}
} }
</style> </style>

View File

@ -8,24 +8,32 @@
@mixin h-center($gap: 0) { @mixin h-center($gap: 0) {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $gap; @if ($gap != 0) {
gap: $gap;
}
} }
@mixin v-center($gap: 0) { @mixin v-center($gap: 0) {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: $gap; @if ($gap != 0) {
gap: $gap;
}
} }
@mixin h-stretch($gap: 0) { @mixin h-stretch($gap: 0) {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
gap: $gap; @if ($gap != 0) {
gap: $gap;
}
} }
@mixin v-stretch($gap: 0) { @mixin v-stretch($gap: 0) {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
gap: $gap; @if ($gap != 0) {
gap: $gap;
}
} }
@mixin round-bar($height) { @mixin round-bar($height) {
box-sizing: border-box; box-sizing: border-box;