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

View File

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