😡 解决冲突

This commit is contained in:
hunlongyu
2020-05-07 15:13:58 +08:00
5 changed files with 384 additions and 1 deletions

BIN
src/assets/image/green.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

View File

@@ -34,9 +34,28 @@
--d-bsc-2: 0 -4px 23px 0 #38dd7733;
--d-bsc-hover: 0 14px 26px -12px #38dd7733, 0 4px 23px 0 #38dd7722, 0 8px 10px -5px #38dd7711;
--d-bsc-scroll: inset 0 0 5px #38dd7705;
// green
--g-c-0: #EAEF9D;
--g-c-1: #EAEF9D11;
--g-c-2: #EAEF9D22;
--g-c-3: #EAEF9D33;
--g-c-5: #EAEF9D55;
--g-c-8: #EAEF9D88;
--g-c-9: #EAEF9D99;
--g-fc-1: #80B155;
--g-fc-2: #C1D95CAA;
--g-fc-3: #C1D95C;
--g-bgc-1: #336A29;
--g-bgc-2: #498428;
--g-bsc: 0 3px 1px -2px #C1D95C33, 0 2px 2px 0 #C1D95C22, 0 1px 5px 0 #C1D95C11;
--g-bsc-2: 0 -4px 23px 0 #C1D95C33;
--g-bsc-hover: 0 14px 26px -12px #C1D95C33, 0 4px 23px 0 #C1D95C22, 0 8px 10px -5px #C1D95C11;
--g-bsc-scroll: inset 0 0 5px #C1D95C05;
}
@import './theme/light.scss';
@import './theme/dark.scss';
@import './theme/green.scss';
@import './style.scss';

View File

@@ -0,0 +1,349 @@
.theme-green{
background-color: var(--g-bgc-1);
.xgplayer-skin-default video{
background-color: var(--g-bgc-2);
}
.el-pagination{
background-color: var(--g-bgc-1);
color: var(--g-fc-1);
.el-pagination__total, .el-pagination__jump, .el-input__inner{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
}
.el-input__inner{
border-color: var(--g-c-3);
}
.el-pager{
.number{
background-color: var(--g-bgc-1);
}
.number:hover{
color: var(--g-c-8);
}
.active{
color: var(--g-c-9);
}
}
.more, .btn-next, .btn-prev{
background-color: var(--g-bgc-1);
&:hover{
color: var(--g-c-8);
}
}
}
.zy-select{
color: var(--g-fc-1);
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
&:hover{
box-shadow: var(--g-bsc-hover);
}
.vs-options{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
ul{
li{
&:hover{
background-color: var(--g-c-1);
}
&.active{
background-color: var(--g-c-3);
}
}
}
}
}
.zy-table{
color: var(--g-fc-2);
.tHead{
background-color: var(--g-bgc-1);
border-bottom-color: var(--g-c-3);
}
.tBody{
border-bottom-color: var(--g-c-3);
ul{
li{
border-bottom-color: var(--g-c-2);
&:hover{
animation: d-tableHoverAni 0.2s ease both;
@keyframes d-tableHoverAni {
to{
box-shadow: var(--g-bsc-hover);
}
}
}
span{
&.btn:hover{
color: var(--g-fc-3)
}
}
}
}
}
.tFooter{
.tFooter-span{
color: var(--g-fc-1);
}
}
}
.zy-scroll{
&:hover{
&::-webkit-scrollbar-thumb {
box-shadow: var(--g-bsc-scroll);
background: var(--g-c-3);
}
&::-webkit-scrollbar-track {
box-shadow: var(--g-bsc-scroll);
background: var(--bgc);
}
}
}
.zy-loading{
.loader{
color: var(--g-c-3);
}
}
.zy-body{
background-color: var(--g-bgc-2);
}
.aside{
.zy-svg{
svg{
stroke: var(--g-c-0);
}
&:hover{
background-color: var(--g-c-2);
}
&.active{
svg{
stroke: var(--g-c-0);
stroke-width: 2;
fill: var(--g-c-2);
}
}
}
}
.frame{
span{
&.min{
background-color: #ffbe2a;
}
&.close{
background-color: #ff5f56;
}
}
}
.detail{
color: var(--g-fc-1);
background-color:var(--g-bgc-1);
box-shadow: var(--g-bsc-2);
.detail-content{
.detail-close{
svg{
stroke-width: 1;
stroke: var(--g-c-8);
&:hover{
stroke-width: 2px;
stroke: var(--g-c-9);
}
}
}
.detail-body{
.info, .desc, .m3u8_urls, .mp4_urls{
border-color: var(--g-c-2);
}
.m3u8_urls, .mp4_urls{
.box{
span{
border-color: var(--g-c-5);
&:hover{
color: var(--g-fc-2);
background-color: var(--g-c-1);
border-color: var(--g-c-8);
}
}
}
}
}
}
}
.film{
.top{
.search{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
&:hover{
box-shadow: var(--g-bsc-hover);
}
svg{
stroke: var(--g-c-0);
stroke-width: 1;
fill: none;
}
.search-box{
background-color: var(--g-bgc-1);
}
&.active{
box-shadow: var(--g-bsc-hover);
svg{
stroke-width: 1.5;
fill: var(--g-c-2);
}
}
input{
color: var(--g-fc-1);
}
}
}
.middle{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
}
}
.play{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
.title{
color: var(--g-fc-1);
}
.box{
.more{
span{
svg{
stroke: var(--g-c-5);
stroke-width: 1;
fill: none;
}
&:hover{
svg{
stroke: var(--g-c-8);
stroke-width: 1.5;
fill: var(--g-c-2);
}
}
&.active{
svg{
stroke: var(--g-c-9);
stroke-width: 2;
fill: var(--g-c-3);
}
}
}
}
}
.list{
border: 1px solid var(--g-c-3);
background-color: var(--g-bgc-2);
.list-top{
color: var(--g-fc-2);
.list-top-close{
svg{
stroke: var(--g-c-5);
stroke-width: 1;
fill: none;
&:hover{
stroke: var(--g-c-8);
stroke-width: 1.5;
fill: var(--g-c-2);
}
}
}
}
.list-body{
.list-item{
li{
color: var(--g-fc-1);
&.active{
background-color: var(--g-c-2);
color: var(--g-fc-3);
}
}
}
.list-history{
li{
.title{
color: var(--g-fc-1);
}
&.active{
background-color: var(--g-c-2);
.title{
color: var(--g-fc-3);
}
}
&:hover{
background-color: var(--g-c-3);
.detail-delete{
display: inline-block;
color: var(--g-fc-2);
}
}
.detail-delete{
&:hover{
background-color: var(--g-c-2);
}
}
}
}
}
}
.play-mask{
background-color: var(--g-bgc-1);
color: var(--g-fc-1);
}
}
.star{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
}
.setting{
background-color: var(--g-bgc-1);
box-shadow: var(--g-bsc);
.info{
a{
color: var(--g-fc-1);
&:hover{
color: var(--g-fc-2);
}
}
}
.theme{
.title{
color: var(--g-fc-1);
}
.theme-item{
box-shadow: var(--g-bsc);
&:hover{
box-shadow: var(--g-bsc-hover);
.theme-name{
color: var(--g-fc-2)
}
}
.theme-name{
color: var(--g-fc-1);
}
}
}
.qrcode{
.title{
color: var(--g-fc-1);
}
.qrcode-item{
box-shadow: var(--g-bsc);
}
}
}
.share{
background-color: var(--g-bgc-1);
color: var(--g-fc-1);
border: 1px solid var(--g-c-8);
.right{
color: var(--g-fc-1);
.tops{
color: var(--g-fc-2);
}
}
.share-mask{
background-color: var(--g-bgc-1);
}
}
}

View File

@@ -228,6 +228,7 @@ export default {
this.onPlayVideo()
this.xg.once('ended', () => {
if (res.m3u8_urls.length > 1 && (res.m3u8_urls.length - 1 > this.video.index)) {
this.video.currentTime = 0
this.video.index++
}
this.xg.off('ended')

View File

@@ -2,7 +2,10 @@
<div class="setting">
<div class="setting-box zy-scroll" v-if="show.setting">
<div class="logo"><img src="@/assets/image/logo.png"></div>
<div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues/24">{{$t('issues')}}</a></div>
<div class="info">
<a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">{{$t('website')}}</a>
<a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">{{$t('issues')}}</a>
</div>
<div class="change">
<div class="zy-select" @mouseleave="show.language = false">
<div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
@@ -36,6 +39,12 @@
</div>
<div class="theme-name">Dark</div>
</div>
<div @click="changeTheme('green')" class="theme-item green">
<div class="theme-image">
<img src="../assets/image/green.png" alt="">
</div>
<div class="theme-name">Green</div>
</div>
</div>
</div>
<div class="qrcode">
@@ -53,6 +62,7 @@ import { mapMutations } from 'vuex'
import setting from '../lib/dexie/setting'
import { sites } from '../lib/site/sites'
import '../lib/cloud/index.js'
import { shell } from 'electron'
export default {
name: 'setting',
data () {
@@ -104,6 +114,9 @@ export default {
},
methods: {
...mapMutations(['SET_THEME', 'SET_LANGUAGE', 'SET_SITE']),
linkOpen (e) {
shell.openExternal(e)
},
languageClick (e) {
this.language = e
this.show.language = false
@@ -169,6 +182,7 @@ export default {
text-decoration: none;
margin: 0 10px;
font-size: 14px;
cursor: pointer;
}
}
.change{