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

🎋 大部分样式完成

Browse Source
This commit is contained in:
hunlongyu
2020-04-17 00:00:23 +08:00
parent 8e380b6463
commit 5bf514ffcc
12 changed files with 266 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 20 KiB

2
src/assets/scss/theme.scss
View File

@@ -4,6 +4,7 @@
--l-c-1: #823aa011;
--l-c-2: #823aa022;
--l-c-3: #823aa033;
--l-c-5: #823aa055;
--l-c-8: #823aa088;
--l-c-9: #823aa099;
--l-fc-1: #808695;
@@ -12,6 +13,7 @@
--l-bgc-1: #ffffff;
--l-bgc-2: #f2f6f9;
--l-bsc: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
--l-bsc-2: 0 -4px 23px 0 #8e8da233;
--l-bsc-hover: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
--l-bsc-scroll: inset 0 0 5px #823aa005;
}

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

@@ -123,6 +123,40 @@
}
}
}
.detail{
color: var(--l-fc-1);
background-color:var(--l-bgc-1);
box-shadow: var(--l-bsc-2);
.detail-content{
.detail-close{
svg{
stroke-width: 1;
stroke: var(--l-c-8);
&:hover{
stroke-width: 2px;
stroke: var(--l-c-9);
}
}
}
.detail-body{
.info, .desc, .m3u8_urls, .mp4_urls{
border-color: var(--l-c-2);
}
.m3u8_urls, .mp4_urls{
.box{
span{
border-color: var(--l-c-5);
&:hover{
color: var(--l-fc-2);
background-color: var(--l-c-1);
border-color: var(--l-c-8);
}
}
}
}
}
}
}
.film{
.top{
.search{
@@ -151,5 +185,109 @@
}
}
}
.middle{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
}
}
.play{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
.box{
.more{
span{
svg{
stroke: var(--l-c-5);
stroke-width: 1;
fill: none;
}
&:hover{
svg{
stroke: var(--l-c-8);
stroke-width: 1.5;
fill: var(--l-c-2);
}
}
&.active{
svg{
stroke: var(--l-c-9);
stroke-width: 2;
fill: var(--l-c-3);
}
}
}
}
}
.list{
border: 1px solid var(--l-c-3);
background-color: var(--l-bgc-2);
.list-top{
color: var(--l-fc-2);
.list-top-close{
svg{
stroke: var(--l-c-5);
stroke-width: 1;
fill: none;
&:hover{
stroke: var(--l-c-8);
stroke-width: 1.5;
fill: var(--l-c-2);
}
}
}
}
.list-body{
.list-item{
li{
color: var(--l-fc-1);
&.active{
background-color: var(--l-c-2);
color: var(--l-fc-3);
}
}
}
.list-history{
li{
.title{
color: var(--l-fc-1);
}
&.active{
background-color: var(--l-c-2);
.title{
color: var(--l-fc-3);
}
}
&:hover{
background-color: var(--l-c-3);
.detail-delete{
display: inline-block;
color: var(--l-fc-2);
}
}
.detail-delete{
&:hover{
background-color: var(--l-c-2);
}
}
}
}
}
}
}
.star{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
}
.setting{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc);
.info{
a{
color: var(--l-fc-1);
&:hover{
color: var(--l-fc-2);
}
}
}
}
}

8
src/components/Aside.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="aside">
<span :class="[view === 'Film' ? 'active ': ''] + 'film zy-svg'" @click="changeView('Film')">
<span :class="[view === 'Film' ? 'active ': ''] + 'zy-svg'" @click="changeView('Film')">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle">
<title id="apertureIconTitle">{{$t('view')}}</title>
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path>
@@ -14,19 +14,19 @@
</g>
</svg>
</span>
<span :class="[view === 'Play' ? 'active ': ''] + 'play zy-svg'" @click="changeView('Play')">
<span :class="[view === 'Play' ? 'active ': ''] + 'zy-svg'" @click="changeView('Play')">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
<title id="playIconTitle">{{$t('play')}}</title>
<path d="M20 12L5 21V3z"></path>
</svg>
</span>
<span :class="[view === 'Star' ? 'active ': ''] + 'star zy-svg'" @click="changeView('Star')">
<span :class="[view === 'Star' ? 'active ': ''] + 'zy-svg'" @click="changeView('Star')">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
<title id="favouriteIconTitle">{{$t('star')}}</title>
<path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
</svg>
</span>
<span :class="[view === 'Setting' ? 'active ': ''] + 'setting zy-svg'" @click="changeView('Setting')">
<span :class="[view === 'Setting' ? 'active ': ''] + 'zy-svg'" @click="changeView('Setting')">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
<title id="settingsIconTitle">{{$t('setting')}}</title>
<path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>

60
src/components/Detail.vue
View File

@@ -2,32 +2,32 @@
<div class="detail">
<div class="detail-content">
<div class="detail-header">
<span class="detail-title">详情</span>
<span class="detail-close" @click="closeDetail">
<span class="detail-title">{{$t('detail')}}</span>
<span class="detail-close zy-svg" @click="closeDetail">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
<title id="closeIconTitle">关闭</title>
<title id="closeIconTitle">{{$t('close')}}</title>
<path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
</svg>
</span>
</div>
<div class="detail-body" v-show="!loading" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
<div class="detail-body zy-scroll" v-show="!loading" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
<div class="info" v-html="vDetail.info"></div>
<div class="desc" v-html="vDetail.desc" v-if="show.desc"></div>
<div class="m3u8_urls">
<div class="title">播放:</div>
<div class="title">{{$t('play')}}：</div>
<div class="box">
<span v-for="(i, j) in vDetail.m3u8_urls" :key="j" @click="playEvent(i)">{{i | ftName}}</span>
</div>
</div>
<div class="mp4_urls" v-if="show.download">
<div class="title">下载链接:</div>
<div class="title">{{$t('download')}}：</div>
<div class="box">
<span v-for="(i, j) in vDetail.mp4_urls" :key="j" @click="download(i)">{{i | ftName}}</span>
<span @click="allDownload" v-show="vDetail.mp4_urls.length > 1">全集下载</span>
</div>
</div>
</div>
<div class="detail-mask" v-show="loading">
<div class="detail-mask zy-loading" v-show="loading">
<div class="loader"></div>
</div>
</div>
@@ -135,9 +135,6 @@ export default {
bottom: 0;
width: 100%;
height: 680px;
background-color: #fff;
box-shadow:0 -4px 12px 0 #0c0c0e1f;
color: #808695;
z-index: 999;
.detail-content{
height: 680px;
@@ -154,41 +151,12 @@ export default {
font-size: 16px;
}
.detail-close{
svg{
width: 24px;
height: 24px;
stroke: #823aa099;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
&:hover{
stroke-width: 2px;
stroke: #823aa0aa;
}
}
cursor: pointer;
}
}
.detail-body{
height: 630px;
overflow-y: auto;
&::-webkit-scrollbar{
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px #823aa005;
background: #823aa055;
position: absolute;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #823aa005;
border-radius: 10px;
background: #EDEDED;
position: absolute;
}
.info{
display: flex;
justify-content: flex-start;
@@ -196,7 +164,7 @@ export default {
flex-wrap: wrap;
width: 1000px;
padding: 10px;
border: 1px solid #823aa022;
border: 1px solid;
border-radius: 2px;
margin-bottom: 10px;
.vodImg{
@@ -278,14 +246,13 @@ export default {
}
a{
pointer-events: none;
color: #808695;
text-decoration: none;
}
}
}
}
.desc{
border: 1px solid #823aa033;
border: 1px solid;
padding: 10px;
width: 1000px;
margin-bottom: 10px;
@@ -294,7 +261,7 @@ export default {
line-height: 20px;
}
.m3u8_urls, .mp4_urls{
border: 1px solid #823aa033;
border: 1px solid;
padding: 10px;
width: 1000px;
margin-bottom: 10px;
@@ -309,15 +276,11 @@ export default {
flex-wrap: wrap;
span{
font-size: 12px;
border: 1px solid #823aa055;
border: 1px solid;
border-radius: 2px;
cursor: pointer;
margin: 6px 10px 0px 0px;
padding: 8px 22px;
&:hover{
color: #6e7380;
background-color: #823aa011;
}
}
&::after {
content: '';
@@ -338,7 +301,6 @@ export default {
justify-content: center;
align-items: center;
.loader {
color: #823aa055;
font-size: 8px;
width: 1em;
height: 1em;

4
src/components/Film.vue
View File

@@ -324,10 +324,8 @@ export default {
height: 620px;
width: 100%;
margin-top: 10px;
padding-bottom:0px;
background-color: #fff;
padding-bottom: 0px;
border-radius: 5px;
box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
}
}
</style>

135
src/components/Play.vue
View File

@@ -4,15 +4,15 @@
<div class="title">{{name}}</div>
<div id="xg"></div>
<div class="more" v-show="more">
<span @click="nextEvent" v-show="showNext">
<span class="zy-svg" @click="nextEvent" v-show="showNext">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="forwardIconTitle">
<title id="forwardIconTitle">下一集</title>
<title id="forwardIconTitle">{{$t('next')}}</title>
<path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"></path>
</svg>
</span>
<span @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.listData.length > 0">
<span class="zy-svg" @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.listData.length > 0">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="dashboardIconTitle">
<title id="dashboardIconTitle">播放列表</title>
<title id="dashboardIconTitle">{{$t('play_list')}}</title>
<rect width="20" height="20" x="2" y="2"></rect>
<path d="M11 7L17 7M11 12L17 12M11 17L17 17"></path>
<line x1="7" y1="7" x2="7" y2="7"></line>
@@ -20,47 +20,47 @@
<line x1="7" y1="17" x2="7" y2="17"></line>
</svg>
</span>
<span @click="historyEvent" :class="right.type === 'history' ? 'active' : ''">
<span class="zy-svg" @click="historyEvent" :class="right.type === 'history' ? 'active' : ''">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="timeIconTitle">
<title id="timeIconTitle">历史记录</title>
<title id="timeIconTitle">{{$t('history')}}</title>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 5 12 12 16 16"></polyline>
</svg>
</span>
<span @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.listData.length > 0">
<span class="zy-svg" @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.listData.length > 0">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
<title id="favouriteIconTitle">收藏</title>
<title id="favouriteIconTitle">{{$t('star')}}</title>
<path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
</svg>
</span>
<span @click="topEvent" :class="isTop ? 'active' : ''" v-show="right.listData.length > 0">
<span class="zy-svg" @click="topEvent" :class="isTop ? 'active' : ''" v-show="right.listData.length > 0">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="arrowUpIconTitle">
<title id="arrowUpIconTitle">置顶</title>
<title id="arrowUpIconTitle">{{$t('top')}}</title>
<path d="M9 10.5l3-3 3 3"></path>
<path d="M12 16.5V9"></path>
<path stroke-linecap="round" d="M12 7.5V9"></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
</span>
<span @click="detailEvent" v-show="right.listData.length > 0">
<span class="zy-svg" @click="detailEvent" v-show="right.listData.length > 0">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="feedIconTitle">
<title id="feedIconTitle">详情</title>
<title id="feedIconTitle">{{$t('detail')}}</title>
<circle cx="7.5" cy="7.5" r="2.5"></circle>
<path d="M22 13H2"></path>
<path d="M18 6h-5m5 3h-5"></path>
<path d="M5 2h14a3 3 0 0 1 3 3v17H2V5a3 3 0 0 1 3-3z"></path>
</svg>
</span>
<!-- <span @click="smallEvent" v-show="right.listData.length > 0">
<!-- <span class="zy-svg" @click="smallEvent" v-show="right.listData.length > 0">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
<title id="tvIconTitle">精简模式</title>
<polygon points="20 8 20 20 4 20 4 8"></polygon>
<polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
</svg>
</span> -->
<span @click="shareEvent" v-show="right.listData.length > 0">
<span class="zy-svg" @click="shareEvent" v-show="right.listData.length > 0">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle">
<title id="qrIconTitle">分享</title>
<title id="qrIconTitle">{{$t('share')}}</title>
<rect x="10" y="3" width="7" height="7" transform="rotate(90 10 3)"></rect>
<rect width="1" height="1" transform="matrix(-1 0 0 1 7 6)"></rect>
<rect x="10" y="14" width="7" height="7" transform="rotate(90 10 14)"></rect>
@@ -80,23 +80,23 @@
<transition name="slideX">
<div v-if="right.show" class="list">
<div class="list-top">
<span class="list-top-title">{{ right.type === 'list' ? '播放列表' : '历史记录' }}</span>
<span class="list-top-close" @click="closeEvent">
<span class="list-top-title">{{ right.type === 'list' ? $t('play_list') : $t('histroy') }}</span>
<span class="list-top-close zy-svg" @click="closeEvent">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
<title id="closeIconTitle">关闭</title>
<title id="closeIconTitle">{{$t('close')}}</title>
<path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
</svg>
</span>
</div>
<div class="list-body" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
<ul v-show="right.type === 'list'">
<li v-show="right.listData.length === 0">无数据</li>
<div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
<ul v-show="right.type === 'list'" class="list-item">
<li v-show="right.listData.length === 0">{{$t('no_data')}}</li>
<li @click="listItemEvent(j)" :class="video.index === j ? 'active' : ''" v-for="(i, j) in right.listData" :key="j">{{i | ftName}}</li>
</ul>
<ul v-show="right.type === 'history'">
<li v-show="right.historyData.length > 1" @click="clearAll">清空数据</li>
<li v-show="right.historyData.length === 0">无数据</li>
<li @click="historyItemEvent(m)" v-for="(m, n) in right.historyData" :key="n"><span class="title">{{m.name}}</span><span @click.stop="removeItem(m)" class="delete">删除</span></li>
<ul v-show="right.type === 'history'" class="list-history">
<li v-show="right.historyData.length > 1" @click="clearAll">{{$t('clear_data')}}</li>
<li v-show="right.historyData.length === 0">{{$t('no_data')}}</li>
<li @click="historyItemEvent(m)" :class="video.detail === m.detail ? 'active' : ''" v-for="(m, n) in right.historyData" :key="n"><span class="title">{{m.name}}</span><span @click.stop="removeItem(m)" class="detail-delete">{{$t('delete')}}</span></li>
</ul>
</div>
</div>
@@ -110,7 +110,7 @@ import history from '../lib/dexie/history'
import video from '../lib/dexie/video'
import 'xgplayer'
import Hls from 'xgplayer-hls.js'
// const { ipcRenderer: ipc } = require('electron')
const { ipcRenderer: ipc } = require('electron')
export default {
name: 'play',
data () {
@@ -252,12 +252,12 @@ export default {
}
})
},
// checkTop () {
// ipc.send('checkTop')
// ipc.on('isTop', (e, flag) => {
// this.isTop = flag
// })
// },
checkTop () {
ipc.send('checkTop')
ipc.on('isTop', (e, flag) => {
this.isTop = flag
})
},
onPlayVideo () {
this.more = true
const h = { ...this.video }
@@ -338,8 +338,8 @@ export default {
})
},
topEvent () {
// ipc.send('top')
// this.checkTop()
ipc.send('top')
this.checkTop()
},
detailEvent () {
this.detail = {
@@ -386,9 +386,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
.box{
width: 92%;
height: 100%;
@@ -413,29 +411,6 @@ export default {
display: flex;
margin-right: 10px;
cursor: pointer;
&:hover{
svg{
stroke: #823aa0ee;
stroke-width: 1.5;
fill: #823aa022;
}
}
&.active{
svg{
stroke: #823aa0;
stroke-width: 2;
fill: #823aa033;
}
}
}
svg{
width: 24px;
height: 24px;
stroke: #823aa099;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
}
}
@@ -445,22 +420,11 @@ export default {
right: 0;
width: 300px;
height: 100%;
border: 1px solid #00000022;
background-color: #fff;
z-index: 555;
border-radius: 3px;
padding: 6px;
display: flex;
flex-direction: column;
svg{
width: 24px;
height: 24px;
stroke: #823aa099;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.list-top{
display: flex;
justify-content: space-between;
@@ -477,22 +441,6 @@ export default {
.list-body{
flex: 1;
overflow-y: auto;
&::-webkit-scrollbar{
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px #823aa005;
background: #823aa055;
position: absolute;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #823aa005;
border-radius: 10px;
background: #EDEDED;
position: absolute;
}
ul{
margin: 0;
padding: 0;
@@ -505,16 +453,6 @@ export default {
padding-left: 10px;
font-size: 14px;
cursor: pointer;
color: #808695;
&.active{
background-color: #823aa011;
}
&:hover{
background-color: #823aa011;
.delete{
display: inline-block;
}
}
.title{
display: inline-block;
overflow: hidden;
@@ -522,16 +460,13 @@ export default {
white-space: nowrap;
width: 231px;
}
.delete{
.detail-delete{
display: none;
position: absolute;
right: 0;
height: 28px;
width: 50px;
text-align: center;
&:hover{
background-color: #823aa022;
}
}
}
}

16
src/components/Setting.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="setting" 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">官网</a><a href="https://github.com/Hunlongyu/ZY-Player/issues">反馈</a></div>
<div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues">{{$t('issues')}}</a></div>
<div class="change">
<div class="vue-select" @mouseleave="show.language = false">
<div class="zy-select" @mouseleave="show.language = false">
<div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
<div class="vs-options" v-show="show.language">
<ul>
@@ -11,7 +11,7 @@
</ul>
</div>
</div>
<div class="vue-select" @mouseleave="show.site = false">
<div class="zy-select" @mouseleave="show.site = false">
<div class="vs-placeholder" @click="show.site = true">{{$t('default_site')}}</div>
<div class="vs-options" v-show="show.site">
<ul>
@@ -112,10 +112,8 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
.logo{
.logo{
margin-top: 40px;
width: 100%;
text-align: center;
@@ -132,10 +130,6 @@ export default {
text-decoration: none;
margin: 0 10px;
font-size: 14px;
color: #808695;
&:hover{
color: #4c4f57;
}
}
}
.change{
@@ -144,7 +138,7 @@ export default {
justify-content: flex-start;
padding-left: 20px;
margin-top: 40px;
.vue-select{
.zy-select{
margin-right: 20px;
}
}

50
src/components/Share.vue
View File

@@ -19,10 +19,10 @@
</template>
<script>
import { mapMutations } from 'vuex'
// import tools from '../lib/site/tools'
import tools from '../lib/site/tools'
import QrcodeVue from 'qrcode.vue'
// import html2canvas from 'html2canvas'
// const { clipboard, nativeImage } = require('electron')
import html2canvas from 'html2canvas'
const { clipboard, nativeImage } = require('electron')
export default {
name: 'share',
data () {
@@ -59,28 +59,28 @@ export default {
},
methods: {
...mapMutations(['SET_SHARE']),
// getDetail () {
// this.loading = true
// tools.detail_get(this.share.v.site, this.share.v.detail).then(res => {
// const info = res.info
// const parser = new DOMParser()
// const html = parser.parseFromString(info, 'text/html')
// const img = html.querySelector('img').src
// this.card.img = img
// this.card.name = this.share.v.name
// this.loading = false
// this.$nextTick(() => {
// const dom = document.getElementById('share')
// html2canvas(dom, { allowTaint: true, useCORS: true }).then(res => {
// const png = res.toDataURL('image/png')
// const p = nativeImage.createFromDataURL(png)
// clipboard.writeImage(p)
// this.$message.success('已复制到剪贴板中, 快去分享吧~')
// this.share.show = true
// })
// })
// })
// },
getDetail () {
this.loading = true
tools.detail_get(this.share.v.site, this.share.v.detail).then(res => {
const info = res.info
const parser = new DOMParser()
const html = parser.parseFromString(info, 'text/html')
const img = html.querySelector('img').src
this.card.img = img
this.card.name = this.share.v.name
this.loading = false
this.$nextTick(() => {
const dom = document.getElementById('share')
html2canvas(dom, { allowTaint: true, useCORS: true }).then(res => {
const png = res.toDataURL('image/png')
const p = nativeImage.createFromDataURL(png)
clipboard.writeImage(p)
this.$message.success('已复制到剪贴板中, 快去分享吧~')
this.share.show = true
})
})
})
},
shareClickEvent () {
this.share = {
show: false,

28
src/components/Star.vue
View File

@@ -1,25 +1,25 @@
<template>
<div class="star">
<div class="vue-table">
<div class="zy-table">
<div class="tHead">
<span class="name">影片名称</span>
<span class="type">类型</span>
<span class="time">时间</span>
<span class="from">来源</span>
<span class="operate" style="width: 160px">操作</span>
<span class="name">{{$t('videoName')}}</span>
<span class="type">{{$t('type')}}</span>
<span class="time">{{$t('time')}}</span>
<span class="from">{{$t('from')}}</span>
<span class="operate" style="width: 170px">{{$t('operate')}}</span>
</div>
<div class="tBody">
<div class="tBody zy-scroll">
<ul v-show="!loading">
<li v-for="(i, j) in data" :key="j" @click="detailEvent(i)">
<span class="name">{{i.name}}</span>
<span class="type">{{i.type}}</span>
<span class="time">{{i.time}}</span>
<span class="from">{{i.site | ftSite}}</span>
<span class="operate" style="width: 160px">
<span class="btn" @click.stop="playEvent(i)">播放</span>
<span class="btn" @click.stop="deleteEvent(i)">删除</span>
<span class="btn" @click.stop="shareEvent(i)">分享</span>
<span class="btn" @click.stop="updateEvent(i)">同步</span>
<span class="operate" style="width: 170px">
<span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
<span class="btn" @click.stop="deleteEvent(i)">{{$t('delete')}}</span>
<span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
<span class="btn" @click.stop="updateEvent(i)">{{$t('sync')}}</span>
</span>
</li>
</ul>
@@ -28,7 +28,7 @@
</div>
</div>
<div class="tFooter">
<span class="tFooter-span">共 {{data.length}} 条数据</span>
<span class="tFooter-span">{{data.length}} {{$t('total')}}</span>
</div>
</div>
</div>
@@ -153,8 +153,6 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
}
</style>

17
src/locales/en.json
View File

@@ -11,5 +11,20 @@
"type": "Type",
"time": "Time",
"operate": "Operate",
"share": "Share"
"share": "Share",
"detail": "Detail",
"close": "Close",
"download": "Download",
"next": "Next",
"play_list": "Play List",
"history": "History",
"top": "Top",
"no_data": "No Data",
"clear_data": "Clear Data",
"delete": "Delete",
"from": "From",
"sync": "Sync",
"total": "Items",
"website": "Official Website",
"issues": "Issues"
}

17
src/locales/zh-cn.json
View File

@@ -11,5 +11,20 @@
"type": "类型",
"time": "时间",
"operate": "操作",
"share": "分享"
"share": "分享",
"detail": "详情",
"close": "关闭",
"download": "下载",
"next": "下一集",
"play_list": "播放列表",
"history": "历史记录",
"top": "置顶",
"no_data": "无数据",
"clear_data": "清空数据",
"delete": "删除",
"from": "来源",
"sync": "同步",
"total": "条数据",
"website": "官网",
"issues": "反馈"
}