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

统一优化listpage格式

Browse Source
This commit is contained in:
haiyangcui
2020-10-31 11:51:52 +01:00
parent f6636a7864
commit 3d01fd045f
10 changed files with 314 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -201,80 +201,175 @@
// Page of list using el-table
.listpage{
position: absolute;
left: 80px;
right: 20px;
top: 40px;
bottom: 20px;
width: calc(100% - 100px);
height: calc(100% - 60px);
border-radius: 5px;
.listpage-content{
height: 100%;
position: relative;
font-size: 1rem;
.listpage-header{
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 50px;
padding-right: 50px;
.el-button{
font-size: 1rem;
border: none;
&:hover{
cursor: pointer;
}
}
.is-loading:before {
background-color: none !important;
}
.el-input{
width: 200px;
height: calc(100% - 40px);
width: 100%;
display: flex;
flex-direction: column;
.listpage-header{
height: 30px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
.el-button{
font-size: 1rem;
border: none;
&:hover{
cursor: pointer;
}
}
.listpage-body{
height: calc(100% - 40px);
overflow-y: auto;
.is-loading:before {
background-color: none !important;
}
.el-input{
width: 200px;
}
}
.listpage-body{
margin-top: 20px;
flex: 1;
width: 100%;
border-radius: 0 0 5px 5px;
overflow-y: scroll;
&::-webkit-scrollbar{
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
position: absolute;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
position: absolute;
}
.show-table{
.el-table::before{
height: 0px;
}
.el-table{
height: 100%;
width: 100%;
overflow-y: auto;
font-size: 1rem;
}
.el-table__body-wrapper{
&::-webkit-scrollbar{
width: 10px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
position: absolute;
.el-table{
height: 100%;
width: 100%;
overflow-y: auto;
font-size: 1rem;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
position: absolute;
.el-table__body-wrapper{
&::-webkit-scrollbar{
width: 10px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
position: absolute;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
position: absolute;
}
}
.el-input{
width: 200px;
}
.el-table__body td,.el-table__body th{
border-bottom: 1px solid;
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
transform: scale(1.02);
}
.el-table .highlight{
color: var(--highlight-color) !important;
}
.el-button{
font-size: 1rem;
}
}
.show-picture{
height: 100%;
width: 100%;
padding: 10px;
.card{
border-radius: 6px;
overflow: hidden;
.img{
position: relative;
min-height: 40px;
img{
width: 100%;
height: auto;
cursor: pointer;
}
.rate{
position: absolute;
top: 5%;
right: -40%;
width: 100%;
background-color: #2f90b9;
color: #cdcdcd;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
transform: rotate(45deg);
}
.update{
position: absolute;
top: 5%;
left: -40%;
width: 100%;
background-color: #68b88e;
color: #cdcdcd;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
transform: rotate(-45deg);
}
.operate{
display: none;
position: absolute;
left: 0;
bottom: 0;
background-color: #111111aa;
width: 100%;
font-size: 13px;
.operate-wrap{
display: flex;
justify-content: space-between;
.o-play, .o-star, .o-share{
cursor: pointer;
display: inline-block;
width: 80px;
height: 36px;
text-align: center;
line-height: 36px;
color: #cdcdcd;
&:hover{
background-color: #111;
}
}
}
}
}
.name{
font-size: 16px;
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.info{
display: flex;
justify-content: space-between;
font-size: 12px;
padding: 10px;
}
&:hover{
.operate{
display: block;
}
}
}
.el-input{
width: 200px;
}
.el-table__body td,.el-table__body th{
border-bottom: 1px solid;
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
transform: scale(1.02);
}
.el-table .highlight{
color: var(--highlight-color) !important;
}
.el-button{
font-size: 1rem;
}
}
}

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

@@ -170,23 +170,6 @@
}
}
}
.pictureView{
.body{
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);
.show-img{
color: var(--d-fc-1);
.card{
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--d-bsc-hover);
}
}
}
}
}
.play{
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);
@@ -351,11 +334,10 @@
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);
}
// Page of list using el-table
// Page of list using table and picture
.listpage{
color: var(--d-fc-2);
.listpage-content{
.listpage-header{
.listpage-header{
border-bottom-color: var(--d-c-3);
.btn{
&:hover{
@@ -376,14 +358,27 @@
color: var(--d-fc-2);
}
}
}
.listpage-body{
color: var(--d-fc-1);
background-color: var(--d-bgc-1);
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--d-bsc-scroll);
background: var(--d-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--d-bsc-scroll);
background: var(--d-bgc-1);
}
}
.listpage-body{
/* 设置el-table的样式*/
.show-table{
/* 设置el-table的样式*/
.el-table{
color: var(--d-fc-1);
background-color: var(--d-bgc-1);
}
.el-input{
}
.el-input{
input{
background-color: var(--d-bgc-2);
border: 1px solid var(--d-bgc-2);
@@ -395,18 +390,6 @@
background-color: var(--d-bgc-1);
border-bottom-color: var(--d-c-2);
}
.el-table__body-wrapper{
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--d-bsc-scroll);
background: var(--d-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--d-bsc-scroll);
background: var(--d-bgc-1);
}
}
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: var(--d-bgc-2);
}
@@ -417,6 +400,17 @@
}
}
}
.show-picture{
color: var(--d-fc-1);
.card{
background-color: var(--d-bgc-1);
box-shadow: var(--d-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--d-bsc-hover);
}
}
}
}
}
}

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

@@ -166,23 +166,6 @@
}
}
}
.pictureView{
.body{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
.show-img{
color: var(--g-fc-1);
.card{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--g-bsc-hover);
}
}
}
}
}
.play{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
@@ -347,11 +330,10 @@
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
}
// Page of list using el-table
// Page of list using table and picture
.listpage{
color: var(--g-fc-2);
.listpage-content{
.listpage-header{
.listpage-header{
border-bottom-color: var(--g-c-3);
.btn{
&:hover{
@@ -372,14 +354,27 @@
color: var(--g-fc-2);
}
}
}
.listpage-body{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--g-bsc-scroll);
background: var(--g-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--g-bsc-scroll);
background: var(--g-bgc-1);
}
}
.listpage-body{
/* 设置el-table的样式*/
.show-table{
/* 设置el-table的样式*/
.el-table{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
}
.el-input{
}
.el-input{
input{
background-color: var(--g-bgc-2);
border: 1px solid var(--g-bgc-2);
@@ -391,18 +386,6 @@
background-color: var(--g-bgc-1);
border-bottom-color: var(--g-c-2);
}
.el-table__body-wrapper{
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--g-bsc-scroll);
background: var(--g-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--g-bsc-scroll);
background: var(--g-bgc-1);
}
}
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: var(--g-bgc-2);
}
@@ -413,6 +396,17 @@
}
}
}
.show-picture{
color: var(--g-fc-1);
.card{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--g-bsc-hover);
}
}
}
}
}
}

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

@@ -166,23 +166,6 @@
}
}
}
.pictureView{
.body{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
.show-img{
color: var(--l-fc-1);
.card{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--l-bsc-hover);
}
}
}
}
}
.play{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
@@ -347,11 +330,10 @@
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
}
// Page of list using el-table
// Page of list using table and picture
.listpage{
color: var(--l-fc-2);
.listpage-content{
.listpage-header{
.listpage-header{
border-bottom-color: var(--l-c-3);
.btn{
&:hover{
@@ -372,14 +354,27 @@
color: var(--l-fc-2);
}
}
}
.listpage-body{
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--l-bsc-scroll);
background: var(--l-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--l-bsc-scroll);
background: var(--l-bgc-1);
}
}
.listpage-body{
/* 设置el-table的样式*/
.show-table{
/* 设置el-table的样式*/
.el-table{
color: var(--l-fc-1);
background-color: var(--l-bgc-1);
}
.el-input{
}
.el-input{
input{
background-color: var(--l-bgc-2);
border: 1px solid var(--l-bgc-2);
@@ -391,18 +386,6 @@
background-color: var(--l-bgc-1);
border-bottom-color: var(--l-c-2);
}
.el-table__body-wrapper{
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--l-bsc-scroll);
background: var(--l-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--l-bsc-scroll);
background: var(--l-bgc-1);
}
}
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: var(--l-bgc-2);
}
@@ -413,6 +396,17 @@
}
}
}
.show-picture{
color: var(--l-fc-1);
.card{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--l-bsc-hover);
}
}
}
}
}
}

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

@@ -165,23 +165,6 @@
}
}
}
.pictureView{
.body{
background-color: var(--p-bgc-1);
box-shadow: var(--p-bsc);
.show-img{
color: var(--p-fc-1);
.card{
background-color: var(--p-bgc-1);
box-shadow: var(--p-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--p-bsc-hover);
}
}
}
}
}
.play{
background-color: var(--p-bgc-1);
box-shadow: var(--p-bsc);
@@ -346,11 +329,10 @@
background-color: var(--p-bgc-1);
box-shadow: var(--p-bsc);
}
// Page of list using el-table
// Page of list using table and picture
.listpage{
color: var(--p-fc-2);
.listpage-content{
.listpage-header{
.listpage-header{
border-bottom-color: var(--p-c-3);
.btn{
&:hover{
@@ -371,14 +353,27 @@
color: var(--p-fc-2);
}
}
}
.listpage-body{
color: var(--p-fc-1);
background-color: var(--p-bgc-1);
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--p-bsc-scroll);
background: var(--p-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--p-bsc-scroll);
background: var(--p-bgc-1);
}
}
.listpage-body{
/* 设置el-table的样式*/
.show-table{
/* 设置el-table的样式*/
.el-table{
color: var(--p-fc-1);
background-color: var(--p-bgc-1);
}
.el-input{
}
.el-input{
input{
background-color: var(--p-bgc-2);
border: 1px solid var(--p-bgc-2);
@@ -390,18 +385,6 @@
background-color: var(--p-bgc-1);
border-bottom-color: var(--p-c-2);
}
.el-table__body-wrapper{
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--p-bsc-scroll);
background: var(--p-c-5);
}
&::-webkit-scrollbar-track {
box-shadow: var(--p-bsc-scroll);
background: var(--p-bgc-1);
}
}
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: var(--p-bgc-2);
}
@@ -412,6 +395,17 @@
}
}
}
.show-picture{
color: var(--p-fc-1);
.card{
background-color: var(--p-bgc-1);
box-shadow: var(--p-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--p-bsc-hover);
}
}
}
}
}
}

109
src/components/Film.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="film pictureView">
<div class="header">
<div class="listpage" id="film">
<div class="listpage-header" id="film-header">
<div class="zy-select" @mouseleave="show.site = false">
<div class="vs-placeholder" @click="show.site = true">{{site.name}}</div>
<div class="vs-options" v-show="show.site">
@@ -27,9 +27,9 @@
</div>
</div>
</div>
<div class="body zy-scroll" infinite-wrapper>
<div class="listpage-body" id="film-body" infinite-wrapper>
<div class="body-box" v-show="!show.find">
<div class="show-img" v-if="setting.view === 'picture'">
<div class="show-picture" v-if="setting.view === 'picture'">
<Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
@@ -493,104 +493,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.film{
height: calc(100% - 40px);
width: 100%;
display: flex;
flex-direction: column;
.header{
height: 30px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.body{
margin-top: 20px;
flex: 1;
width: 100%;
border-radius: 0 0 5px 5px;
overflow-y: scroll;
&::-webkit-scrollbar{
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
position: absolute;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
position: absolute;
}
.body-box{
height: 100%;
width: 100%;
}
.show-img{
height: 100%;
width: 100%;
padding: 10px;
.card{
border-radius: 6px;
overflow: hidden;
.img{
position: relative;
min-height: 40px;
img{
width: 100%;
height: auto;
cursor: pointer;
}
.operate{
display: none;
position: absolute;
left: 0;
bottom: 0;
background-color: #111111aa;
width: 100%;
font-size: 13px;
.operate-wrap{
display: flex;
justify-content: space-between;
.o-play, .o-star, .o-share{
cursor: pointer;
display: inline-block;
width: 80px;
height: 36px;
text-align: center;
line-height: 36px;
color: #cdcdcd;
&:hover{
background-color: #111;
}
}
}
}
}
.name{
font-size: 16px;
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.info{
display: flex;
justify-content: space-between;
font-size: 12px;
padding: 10px;
}
&:hover{
.operate{
display: block;
}
}
}
}
}
}
</style>

10
src/components/History.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="listpage" id="history">
<div class="listpage-content">
<div class="listpage-header">
<div class="listpage-header" id="history-header">
<el-button @click.stop="exportHistory" icon="el-icon-upload2">导出</el-button>
<el-button @click.stop="importHistory" icon="el-icon-download">导入</el-button>
<el-button @click.stop="clearAllHistory" icon="el-icon-delete-solid">清空</el-button>
</div>
<div class="listpage-body" id="history-table">
</div>
<div class="listpage-body" id="history-body">
<div class="show-table" id="history-table" >
<el-table size="mini" fit height="100%" :data="history" row-key="id" @row-click="detailEvent">
<el-table-column
prop="name"
@@ -42,7 +42,7 @@
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapMutations } from 'vuex'

14
src/components/IPTV.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="listpage" id="IPTV">
<div class="listpage-content">
<div class="listpage-header" v-show="!enableBatchEdit">
<div class="listpage" id="iptv">
<div class="listpage-header" id="iptv-header" v-show="!enableBatchEdit">
<el-switch v-model="enableBatchEdit" active-text="批处理分组"></el-switch>
<el-button @click.stop="exportChannels" icon="el-icon-upload2" >导出</el-button>
<el-button @click.stop="importChannels" icon="el-icon-download">导入</el-button>
<el-button @click.stop="removeAllChannels" icon="el-icon-delete-solid">清空</el-button>
<el-button @click.stop="resetChannelsEvent" icon="el-icon-refresh-left">重置</el-button>
</div>
<div class="listpage-header" v-show="enableBatchEdit">
</div>
<div class="listpage-header" id="iptv-header" v-show="enableBatchEdit">
<el-switch v-model="enableBatchEdit" active-text="批处理分组"></el-switch>
<el-input placeholder="新组名" v-model="batchGroupName"></el-input>
<el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit">保存</el-button>
</div>
<div class="listpage-body" id="iptv-table">
</div>
<div class="listpage-body" id="iptv-table">
<div class="show-table" id="iptv-table">
<el-table
ref="iptvTable"
size="mini" fit height="100%" row-key="id"

18
src/components/Recommandation.vue
View File

@@ -1,7 +1,6 @@
<template>
<div class="listpage recommandataions pictureView">
<div class="listpage-content">
<div class="listpage-header">
<div class="listpage" id="recommandataions">
<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-select size="mini" v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区">
<el-option
@@ -20,8 +19,9 @@
</el-option>
</el-select>
<el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
</div>
<div class="listpage-body" id="recommandataions-table" v-show="viewMode === 'list'">
</div>
<div class="listpage-body" id="recommandataions-body" >
<div class="show-table" id="star-table" v-show="viewMode === 'list'">
<el-table size="mini" fit height="100%" row-key="id"
ref="recommandataionsTable"
:data="filteredRecommandations"
@@ -69,9 +69,8 @@
</el-table-column>
</el-table>
</div>
<div class="body zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
<div class="show-img">
<Waterfall ref="waterfall" :list="filteredRecommandations" :gutter="20" :width="240"
<div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
<Waterfall ref="waterfall" :list="filteredRecommandations" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
backgroundColor="rgba(0, 0, 0, 0)">
@@ -100,8 +99,7 @@
</div>
</div>
</template>
</Waterfall>
</div>
</Waterfall>
</div>
</div>
</div>

18
src/components/Star.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="listpage star pictureView">
<div class="listpage-content">
<div class="listpage-header">
<div class="listpage" id="star">
<div class="listpage-header" id="star-header">
<el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
<el-button @click.stop="exportFavoritesEvent" icon="el-icon-upload2">导出</el-button>
<el-button @click.stop="importFavoritesEvent" icon="el-icon-download">导入</el-button>
<el-button @click.stop="clearFavoritesEvent" icon="el-icon-delete-solid">清空</el-button>
<el-button @click.stop="updateAllEvent" icon="el-icon-refresh">同步所有收藏</el-button>
</div>
<div class="listpage-body" id="star-table" v-show="viewMode === 'list'">
</div>
<div class="listpage-body" id="star-body">
<div class="show-table" id="star-table" v-show="viewMode === 'list'">
<el-table size="mini" fit height="100%" row-key="id"
ref="starTable"
:data="list"
@@ -76,9 +76,8 @@
</el-table-column>
</el-table>
</div>
<div class="body zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
<div class="show-img">
<Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
<div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
<Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
backgroundColor="rgba(0, 0, 0, 0)">
@@ -109,8 +108,7 @@
</div>
</div>
</template>
</Waterfall>
</div>
</Waterfall>
</div>
</div>
</div>