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

改进el-select样式,设置不同主题下的背景色等

Browse Source
This commit is contained in:
haiyangcui
2020-11-02 11:16:54 +01:00
parent adc8fd4329
commit 99592e3fcb
6 changed files with 140 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -235,8 +235,12 @@
background-color: none !important;
}
.el-input{
font-size: 1rem;
width: 200px;
}
.el-select-dropdown__item{
font-size: 1rem;
}
}
.listpage-body{
height: calc(100% - 60px);

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

@@ -359,6 +359,31 @@
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;
background-color: var(--d-bgc-1);
}
.el-select-dropdown__item.hover{
background-color: var(--d-c-1);
box-shadow: var(--d-bsc);
}
.el-select-dropdown__item.selected{
color: var(--d-fc-1);
background-color: var(--d-c-1);
box-shadow: var(--d-bsc);
}
.el-select-dropdown__item.selected.hover{
color: var(--d-fc-1);
background-color: var(--d-c-1);
box-shadow: var(--d-bsc);
}
}
.listpage-body{
color: var(--d-fc-1);

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

@@ -354,6 +354,31 @@
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;
background-color: var(--g-bgc-1);
}
.el-select-dropdown__item.hover{
background-color: var(--g-c-1);
box-shadow: var(--g-bsc);
}
.el-select-dropdown__item.selected{
color: var(--g-fc-1);
background-color: var(--g-c-1);
box-shadow: var(--g-bsc);
}
.el-select-dropdown__item.selected.hover{
color: var(--g-fc-1);
background-color: var(--g-c-1);
box-shadow: var(--g-bsc);
}
}
.listpage-body{
color: var(--g-fc-1);

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

@@ -334,26 +334,51 @@
.listpage{
color: var(--l-fc-2);
.listpage-header{
border-bottom-color: var(--l-c-3);
.btn{
&:hover{
color: var(--l-fc-3)
}
border-bottom-color: var(--l-c-3);
.btn{
&:hover{
color: var(--l-fc-3)
}
.el-button{
background-color: var(--l-bgc-2);
}
.el-button{
background-color: var(--l-bgc-2);
color: var(--l-fc-2);
&:hover{
color: var(--l-fc-3)
}
}
.el-input{
input{
background-color: var(--l-bgc-1);
border: 1px solid var(--l-bgc-1);
color: var(--l-fc-2);
&:hover{
color: var(--l-fc-3)
}
}
.el-input{
input{
background-color: var(--l-bgc-1);
border: 1px solid var(--l-bgc-1);
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;
background-color: var(--l-bgc-1);
}
.el-select-dropdown__item.hover{
background-color: var(--l-c-1);
box-shadow: var(--l-bsc);
}
.el-select-dropdown__item.selected{
color: var(--l-fc-1);
background-color: var(--l-c-1);
box-shadow: var(--l-bsc);
}
.el-select-dropdown__item.selected.hover{
color: var(--l-fc-1);
background-color: var(--l-c-1);
box-shadow: var(--l-bsc);
}
}
.listpage-body{
color: var(--l-fc-1);

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

@@ -333,26 +333,51 @@
.listpage{
color: var(--p-fc-2);
.listpage-header{
border-bottom-color: var(--p-c-3);
.btn{
&:hover{
color: var(--p-fc-3)
}
border-bottom-color: var(--p-c-3);
.btn{
&:hover{
color: var(--p-fc-3)
}
.el-button{
background-color: var(--p-bgc-2);
}
.el-button{
background-color: var(--p-bgc-2);
color: var(--p-fc-2);
&:hover{
color: var(--p-fc-3)
}
}
.el-input{
input{
background-color: var(--p-bgc-1);
border: 1px solid var(--p-bgc-1);
color: var(--p-fc-2);
&:hover{
color: var(--p-fc-3)
}
}
.el-input{
input{
background-color: var(--p-bgc-1);
border: 1px solid var(--p-bgc-1);
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;
background-color: var(--p-bgc-1);
}
.el-select-dropdown__item.hover{
background-color: var(--p-c-1);
box-shadow: var(--p-bsc);
}
.el-select-dropdown__item.selected{
color: var(--p-fc-1);
background-color: var(--p-c-1);
box-shadow: var(--p-bsc);
}
.el-select-dropdown__item.selected.hover{
color: var(--p-fc-1);
background-color: var(--p-c-1);
box-shadow: var(--p-bsc);
}
}
.listpage-body{
color: var(--p-fc-1);

4
src/components/Recommandation.vue
View File

@@ -3,7 +3,7 @@
<div class="listpage-header" id="recommandataions-header">
<el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
<el-button type="text">视频数：{{ recommandations.length }}</el-button>
<el-select size="mini" v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区">
<el-select v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区" :popper-append-to-body="false">
<el-option
v-for="item in areas"
:key="item"
@@ -11,7 +11,7 @@
:value="item">
</el-option>
</el-select>
<el-select size="mini" v-model="selectedTypes" multiple collapse-tags style="margin-left: 20px;" placeholder="类型">
<el-select v-model="selectedTypes" multiple collapse-tags style="margin-left: 20px;" placeholder="类型" :popper-append-to-body="false">
<el-option
v-for="item in types"
:key="item"