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

改进搜索框的样式

Browse Source
This commit is contained in:
haiyangcui
2020-11-10 20:14:15 +01:00
parent 75bac6582c
commit b72886fbe6
6 changed files with 83 additions and 36 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);
}
}
}
}
.listpage-body{

14
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);
}
}
}
}
.listpage-body{
color: var(--g-fc-1);

14
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);
}
}
}
}
.listpage-body{
color: var(--l-fc-1);

14
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);
}
}
}
}
.listpage-body{
color: var(--p-fc-1);

38
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">
<b-button-group>
<el-select v-model="searchGroup" size="small"
style="width:100px;padding-right: 25px;"
: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" />
</b-button-group>
</div>
<div class="listpage-body" id="film-body" infinite-wrapper>
<div class="show-picture" v-if="setting.view === 'picture' && !show.find">
@@ -250,7 +258,7 @@ export default {
searchTxt: '',
searchContents: [],
currentColumn: '',
searchGroup: '',
searchGroup: '全部',
searchGroups: [],
// 福利片关键词
r18KeyWords: ['伦理', '论理', '倫理', '福利', '激情', '理论', '写真', '情色', '美女', '街拍', '赤足', '性感', '里番']
@@ -681,8 +689,8 @@ export default {
}
this.searchGroups = [...new Set(this.sites.map(site => site.group))]
if (this.searchGroups.length === 1) this.searchGroups = []
this.searchGroups.unshift('站内')
this.searchGroups.push('全部')
this.searchGroups.push('站内')
this.searchGroup = this.setting.searchGroup
if (this.searchGroup === undefined) setting.find().then(res => { this.searchGroup = res.searchGroup })
})