backup/ZY-Player
1
0
Fork 0
mirror of https://github.com/cuiocean/ZY-Player.git synced 2026-05-08 15:02:17 +08:00
Code Issues Projects Releases Wiki Activity

再次改进搜索框的样式

Browse Source
This commit is contained in:
haiyangcui
2020-11-11 17:09:17 +01:00
parent 17c78522bb
commit 02c04c3d46
6 changed files with 84 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/assets/scss/style.scss
View File

@@ -146,23 +146,6 @@
cursor: pointer;
}
}
.el-autocomplete{
.el-input-group__prepend{
border: none;
.el-select{
width: 100px;
.el-input, .el-input__inner{
width: 100%;
}
}
}
.el-input .el-input__inner{
width: 200px;
}
.el-input-group__append{
border: none;
}
}
.is-loading:before {
background-color: none !important;
}
@@ -172,6 +155,15 @@
}
.el-select-dropdown__item{
font-size: 1rem;
border: none;
}
.zy-autocomplete {
font-size: 1rem;;
border: none;
li {
font-size: 1rem;
border: none;
}
}
}
.listpage-body{

13
src/assets/scss/theme/dark.scss
View File

@@ -336,10 +336,21 @@
border: none;
background-color: var(--d-bgc-1);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected, .el-select-dropdown__item.selected.hover{
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected{
color: var(--d-fc-1);
background-color: var(--d-bgc-2);
}
.zy-autocomplete {
color: var(--d-fc-1);
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);
li {
color: var(--d-fc-1);
background-color: var(--d-bgc-1);
&:hover{
background-color: var(--d-bgc-2);
}
}
}
.popper__arrow, .popper__arrow::after{
border-bottom-color: var(--d-bgc-1);

16
src/assets/scss/theme/green.scss
View File

@@ -335,11 +335,23 @@
border: none;
background-color: var(--g-bgc-1);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected, .el-select-dropdown__item.selected.hover{
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected{
color: var(--g-fc-1);
background-color: var(--g-bgc-2);
box-shadow: var(--g-bsc);
}
.zy-autocomplete {
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
li {
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
&:hover{
background-color: var(--g-bgc-2);
}
}
}
.popper__arrow, .popper__arrow::after{
border-bottom-color: var(--g-bgc-1);
}
@@ -358,7 +370,7 @@
}
}
.show-table{
/* 设置el-table的样式*/
/* 设置el-table的样式*/
.el-table{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);

16
src/assets/scss/theme/light.scss
View File

@@ -334,11 +334,23 @@
border: none;
background-color: var(--l-bgc-1);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected, .el-select-dropdown__item.selected.hover{
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected{
color: var(--l-fc-1);
background-color: var(--l-bgc-2);
box-shadow: var(--l-bsc);
}
.zy-autocomplete {
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
li {
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
&:hover{
background-color: var(--l-bgc-2);
}
}
}
.popper__arrow, .popper__arrow::after{
border-bottom-color: var(--l-bgc-1);
}
@@ -357,7 +369,7 @@
}
}
.show-table{
/* 设置el-table的样式*/
/* 设置el-table的样式*/
.el-table{
color: var(--l-fc-1);
background-color: var(--l-bgc-1);

16
src/assets/scss/theme/pink.scss
View File

@@ -333,11 +333,23 @@
border: none;
background-color: var(--p-bgc-1);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected, .el-select-dropdown__item.selected.hover{
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected{
color: var(--p-fc-1);
background-color: var(--p-bgc-2);
box-shadow: var(--p-bsc);
}
.zy-autocomplete {
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
li {
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
&:hover{
background-color: var(--g-bgc-2);
}
}
}
.popper__arrow, .popper__arrow::after{
border-bottom-color: var(--p-bgc-1);
}
@@ -356,7 +368,7 @@
}
}
.show-table{
/* 设置el-table的样式*/
/* 设置el-table的样式*/
.el-table{
color: var(--p-fc-1);
background-color: var(--p-bgc-1);

34
src/components/Film.vue
View File

@@ -17,17 +17,12 @@
:value="item.name">
</el-option>
</el-select>
<el-autocomplete
clearable
size="small"
v-model.trim="searchTxt"
value-key="keywords"
:fetch-suggestions="querySearch"
placeholder="搜索"
@keyup.enter.native="searchAndRecord"
@select="searchEvent"
@change="searchChangeEvent">
<el-select v-model="searchGroup" slot="prepend" default-first-option placeholder="请选择" @change="searchEvent">
<div style="display:flex;align-items: center">
<el-select v-model="searchGroup" size="small"
style="width:50px;"
:popper-append-to-body="false"
default-first-option placeholder="请选择"
@change="searchEvent">
<el-option
v-for="item in searchGroups"
:key="item"
@@ -35,9 +30,22 @@
:value="item">
</el-option>
</el-select>
<el-autocomplete
clearable
size="small"
v-model.trim="searchTxt"
value-key="keywords"
:fetch-suggestions="querySearch"
:popper-append-to-body="false"
popper-class="zy-autocomplete"
placeholder="搜索"
@keyup.enter.native="searchAndRecord"
@select="searchEvent"
@change="searchChangeEvent">
</el-autocomplete>
<!--方便触屏-->
<el-button slot="append" icon="el-icon-search" @click.stop="searchEvent" />
</el-autocomplete>
<el-button icon="el-icon-search" @click.stop="searchEvent" />
</div>
</div>
<div class="listpage-body" id="film-body" infinite-wrapper>
<div class="show-picture" v-if="setting.view === 'picture' && !show.find">