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

film搜索框样式优化终结版，弹框样式统一为popper

Browse Source
This commit is contained in:
buvta
2020-11-12 08:27:19 +08:00
parent 9306adb60e
commit a1c9c657e3
6 changed files with 62 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -146,6 +146,24 @@
cursor: pointer;
}
}
.el-autocomplete{
.el-input-group__prepend{
border: none;
.el-select{
width: 100px;
.el-input, .el-input__inner{
width: 100%;
border: none;
}
}
}
.el-input .el-input__inner{
width: 200px;
}
.el-input-group__append{
border: none;
}
}
.is-loading:before {
background-color: none !important;
}
@@ -153,11 +171,7 @@
font-size: 1rem;
width: 200px;
}
.el-select-dropdown__item{
font-size: 1rem;
border: none;
}
.zy-autocomplete {
.popper {
font-size: 1rem;;
border: none;
li {
@@ -211,11 +225,6 @@
position: absolute;
}
}
.width100{
.el-input{
width: 100px;
}
}
.el-input{
width: 200px;
}

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

@@ -325,22 +325,10 @@
color: var(--d-fc-2);
}
}
.el-select-dropdown{
color: var(--d-fc-1);
border: none;
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);
}
.el-select-dropdown__item{
color: var(--d-fc-1);
border: none;
.el-input-group__prepend{
background-color: var(--d-bgc-1);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected{
color: var(--d-fc-1);
background-color: var(--d-bgc-2);
}
.zy-autocomplete {
.popper {
color: var(--d-fc-1);
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);

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

@@ -24,6 +24,8 @@
}
}
.vs-input{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
input{
color: var(--g-fc-1);
&::-webkit-input-placeholder{
@@ -37,10 +39,8 @@
background-color: var(--g-bgc-1);
input{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
}
}
.zy-scroll{
&:hover{
&::-webkit-scrollbar-thumb {
@@ -300,6 +300,7 @@
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
}
// Page of list using table and picture
.listpage{
color: var(--g-fc-2);
@@ -324,23 +325,10 @@
color: var(--g-fc-2);
}
}
.el-select-dropdown{
color: var(--g-fc-1);
border: none;
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
}
.el-select-dropdown__item{
color: var(--g-fc-1);
border: none;
.el-input-group__prepend{
background-color: var(--g-bgc-1);
}
.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 {
.popper {
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
@@ -369,8 +357,8 @@
background: var(--g-bgc-1);
}
}
/* 设置el-table的样式*/
.show-table{
/* 设置el-table的样式*/
.el-table{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);

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

@@ -24,6 +24,8 @@
}
}
.vs-input{
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
input{
color: var(--l-fc-1);
&::-webkit-input-placeholder{
@@ -37,7 +39,6 @@
background-color: var(--l-bgc-1);
input{
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
}
}
.zy-scroll{
@@ -299,6 +300,7 @@
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
}
// Page of list using table and picture
.listpage{
color: var(--l-fc-2);
@@ -323,23 +325,10 @@
color: var(--l-fc-2);
}
}
.el-select-dropdown{
color: var(--l-fc-1);
border: none;
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
}
.el-select-dropdown__item{
color: var(--l-fc-1);
border: none;
.el-input-group__prepend{
background-color: var(--l-bgc-1);
}
.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 {
.popper {
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
@@ -368,8 +357,8 @@
background: var(--l-bgc-1);
}
}
/* 设置el-table的样式*/
.show-table{
/* 设置el-table的样式*/
.el-table{
color: var(--l-fc-1);
background-color: var(--l-bgc-1);

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

@@ -24,6 +24,8 @@
}
}
.vs-input{
color: var(--p-fc-1);
background-color: var(--p-bgc-1);
input{
color: var(--p-fc-1);
&::-webkit-input-placeholder{
@@ -298,6 +300,7 @@
background-color: var(--p-bgc-1);
box-shadow: var(--p-bsc);
}
// Page of list using table and picture
.listpage{
color: var(--p-fc-2);
@@ -322,31 +325,18 @@
color: var(--p-fc-2);
}
}
.el-select-dropdown{
color: var(--p-fc-1);
border: none;
background-color: var(--p-bgc-1);
box-shadow: var(--p-bsc);
}
.el-select-dropdown__item{
color: var(--p-fc-1);
border: none;
.el-input-group__prepend{
background-color: var(--p-bgc-1);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item.selected{
.popper {
color: var(--p-fc-1);
background-color: var(--p-bgc-2);
background-color: var(--p-bgc-1);
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);
color: var(--p-fc-1);
background-color: var(--p-bgc-1);
&:hover{
background-color: var(--g-bgc-2);
background-color: var(--p-bgc-2);
}
}
}
@@ -367,8 +357,8 @@
background: var(--p-bgc-1);
}
}
/* 设置el-table的样式*/
.show-table{
/* 设置el-table的样式*/
.el-table{
color: var(--p-fc-1);
background-color: var(--p-bgc-1);

40
src/components/Film.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="listpage" id="film">
<div class="listpage-header" id="film-header">
<el-select v-model="selectedSiteName" size="small" placeholder="源站" :popper-append-to-body="false" @change="siteClick">
<el-select v-model="selectedSiteName" size="small" placeholder="源站" :popper-append-to-body="false" popper-class="popper" @change="siteClick">
<el-option
v-for="item in sites"
:key="item.key"
@@ -9,7 +9,7 @@
:value="item.name">
</el-option>
</el-select>
<el-select v-model="selectedClassName" size="small" placeholder="类型" :popper-append-to-body="false" @change="classClick" v-show="show.class">
<el-select v-model="selectedClassName" size="small" placeholder="类型" :popper-append-to-body="false" popper-class="popper" @change="classClick" v-show="show.class">
<el-option
v-for="item in classList"
:key="item.tid"
@@ -17,10 +17,21 @@
:value="item.name">
</el-option>
</el-select>
<div style="display:flex;align-items: center">
<el-select v-model="searchGroup" size="small"
style="width:50px;"
:popper-append-to-body="false"
<el-autocomplete
clearable
size="small"
v-model.trim="searchTxt"
value-key="keywords"
:fetch-suggestions="querySearch"
:popper-append-to-body="false"
popper-class="popper"
placeholder="搜索"
@keyup.enter.native="searchAndRecord"
@select="searchEvent"
@change="searchChangeEvent">
<el-select v-model="searchGroup" size="small" slot="prepend"
:popper-append-to-body="false"
popper-class="popper"
default-first-option placeholder="请选择"
@change="searchEvent">
<el-option
@@ -30,22 +41,9 @@
: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 icon="el-icon-search" @click.stop="searchEvent" />
</div>
<el-button icon="el-icon-search" @click.stop="searchEvent" slot="append" />
</el-autocomplete>
</div>
<div class="listpage-body" id="film-body" infinite-wrapper>
<div class="show-picture" v-if="setting.view === 'picture' && !show.find">