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

v0.7.2 完成所有界面布局. 逻辑暂未开始

Browse Source
This commit is contained in:
hunlongyu
2020-01-14 16:19:39 +08:00
parent 2bdaf70be1
commit ec6bc18fbf
12 changed files with 643 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.vue
View File

@@ -27,18 +27,26 @@
<Setting v-show="Main === 'Setting'" />
</el-main>
</el-container>
<el-drawer :visible.sync="drawer" :show-close="true" size="80%" :with-header="false" direction="btt">
<Detail />
</el-drawer>
</el-container>
</template>
<script lang="ts">
import Vue from 'vue'
import Detail from '@/components/detail.vue'
const { ipcRenderer: ipc } = require('electron')
export default Vue.extend({
data () {
return {
Main: 'Film'
Main: 'Setting',
drawer: true
}
},
components: {
Detail
},
methods: {
clickFrameEvent (e:string) {
ipc.send(e)
@@ -58,8 +66,10 @@ export default Vue.extend({
padding: 0;
box-sizing: border-box;
}
html,body,#app{
width: 100%;
html,body{
height: 100%;
}
#app{
height: 100%;
.Header{
display: flex;

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

@@ -2,6 +2,13 @@
.theme-light{
color: var(--l-c);
background-color: var(--l-bgc);
.el-table, .el-tabs__item, .btn-next, input{
color: var(--l-c);
}
.el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
.el-pagination .btn-next, .el-pagination .btn-prev{
color: var(--l-c);
}
.Header, .Aside{
i{
color: var(--l-icon);
@@ -20,4 +27,22 @@
}
}
}
.Main{
.film, .search, .star{
.table-box{
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px var(--l-bdc);
}
&::-webkit-scrollbar-thumb {
background-color: var(--l-icon);
outline: 1px solid var(--l-icon);
}
}
}
.setting{
.el-link, .card{
color: var(--l-c);
}
}
}
}

12
src/components/detail.vue
View File

@@ -1,10 +1,16 @@
<template>
<el-row class="detail"></el-row>
<el-row class="detail">detail</el-row>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
export default Vue.extend({
name: 'detail'
})
</script>
<style lang="scss" scoped>
.detail{
height: 100%;
box-sizing: border-box;
padding: 10px;
}
</style>

69
src/page/film.vue
View File

@@ -1,18 +1,24 @@
<template>
<el-row class="film">
<el-row class="film-tabs">
<el-tabs v-model="activeName" @tab-click="tabClick" tab-position="right">
<el-tab-pane class="film-tabpane" v-for="i in sites[siteNum].type" :key="sites[siteNum].id + i[1]" :label="i[0]" :value="i[1]" :name="i[0]">
<el-row class="tabs-table">
<el-table :data="filmData" stripe style="width: 100%;" class="film-table">
<el-table-column prop="name" label="影片名称"></el-table-column>
<el-table-column prop="type" label="影片类别" width="200"></el-table-column>
<el-table-column prop="time" label="更新时间" width="180"></el-table-column>
</el-table>
</el-row>
</el-tab-pane>
<el-tabs v-model="activeName" @tab-click="tabClick">
<el-tab-pane class="film-tabpane" v-for="i in sites[siteNum].type" :key="sites[siteNum].id + i[1]" :label="i[0]" :value="i[1]" :name="i[0]"></el-tab-pane>
</el-tabs>
</el-row>
<el-row class="film-table-box table-box">
<el-table :data="filmData" stripe class="film-table">
<el-table-column prop="name" label="影片名称"></el-table-column>
<el-table-column prop="type" label="影片类别" width="120"></el-table-column>
<el-table-column prop="time" label="更新时间" width="180"></el-table-column>
<el-table-column label="操作" width="130">
<template slot-scope="scope">
<el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
<el-button type="text" @click="tableBtnClick(scope.row)">收藏</el-button>
<el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row class="film-bottom" type="flex" justify="space-between">
<el-select v-model="siteNum" placeholder="请选择" size="small" @change="selectSite">
<el-option
@@ -40,9 +46,8 @@ export default Vue.extend({
data () {
return {
sites: sites,
activeName: sites[0].type[0][0],
siteNum: 0,
siteName: sites[0].name,
activeName: sites[0].type[0][0],
filmPage: 1,
filmTotal: 0,
filmData: [
@@ -100,25 +105,31 @@ export default Vue.extend({
<style lang="scss" scoped>
.film{
height: 100%;
position: relative;
.film-tabs{
height: calc(100% - 32px);
// overflow: scroll;
border: 1px solid #000;
.film-tabpane{
height: 100%;
border: 1px solid green;
overflow: scroll;
}
.tabs-table{
height: 100%;
border: 1px solid red;
}
.film-table{
border: 1px solid #000;
// height: 100px;
// height: calc(100% - 32px);
overflow: scroll;
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 60px;
}
.film-table-box{
position: absolute;
top: 54px;
width: 100%;
height: calc(100% - 100px);
overflow-y: scroll;
&::-webkit-scrollbar{
width: 6px;
}
}
.film-bottom{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
align-items: center;
}
}
</style>

73
src/page/player.vue
View File

@@ -1,10 +1,77 @@
<template>
<el-row class="player">player</el-row>
<el-row class="player">
<el-row class="player-title" type="flex" justify="space-between">
<span>{{title}}</span>
<span>
<el-button size="mini" icon="el-icon-document" circle></el-button>
<el-button size="mini" icon="el-icon-star-off" circle></el-button>
</span>
</el-row>
<el-row class="player-box">
<div id="xg"></div>
</el-row>
<el-row class="player-films">
<el-button size="mini">第一集</el-button>
</el-row>
</el-row>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
import 'xgplayer'
// @ts-ignore
import Hls from 'xgplayer-hls.js'
export default Vue.extend({
data () {
return {
xg: null,
title: '视频标题',
config: {
id: 'xg',
url: 'https://iqiyi.cdn9-okzy.com/20191214/3344_80c1876a/index.m3u8',
fluid: false,
autoplay: true,
keyShortcut: 'on',
defaultPlaybackRate: 1,
playbackRate: [0.5, 0.75, 1, 1.5, 2]
}
}
},
methods: {
},
created () {},
mounted () {
if (Hls.isSupported()) {
if (this.xg === null) {
this.xg = new Hls(this.config)
}
} else {
console.log('haha')
}
}
})
</script>
<style lang="scss" scoped>
.player{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.player-title{
width: 600px;
height: 40px;
line-height: 40px;
}
.player-box{
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.player-btns, .player-films{
margin-top: 10px;
width: 600px;
}
}
</style>

126
src/page/search.vue
View File

@@ -1,10 +1,130 @@
<template>
<el-row class="search">search</el-row>
<el-row class="search">
<el-row class="search-box">
<el-input class="search-input" size="medium" placeholder="请输入内容" v-model="keywords">
<el-select v-model="siteNum" slot="prepend" placeholder="请选择" @change="selectSite" style="width: 130px;">
<el-option v-for="(i, j) in sites" :key="i.id" :label="i.name" :value="j"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-row>
<el-row class="search-table-box table-box">
<el-table :data="filmData" stripe class="search-table">
<el-table-column prop="name" label="影片名称"></el-table-column>
<el-table-column prop="type" label="影片类别" width="120"></el-table-column>
<el-table-column prop="time" label="更新时间" width="180"></el-table-column>
<el-table-column label="操作" width="130">
<template slot-scope="scope">
<el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
<el-button type="text" @click="tableBtnClick(scope.row)">收藏</el-button>
<el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row class="search-bottom" type="flex" justify="end">
<el-pagination
small
layout="total, prev, pager, next, jumper"
:current-page="filmPage"
:page-size="50"
:total="filmTotal">
</el-pagination>
</el-row>
</el-row>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
import sites from '@/lib/sites'
export default Vue.extend({
data () {
return {
sites: sites,
siteNum: 1,
keywords: '',
filmData: [
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
],
filmPage: 1,
filmTotal: 100
}
},
methods: {
selectSite (e:number) {
this.siteNum = e
}
}
})
</script>
<style lang="scss" scoped>
.search{
height: 100%;
position: relative;
.search-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
.search-table-box{
position: absolute;
top: 40px;
width: 100%;
height: calc(100% - 100px);
overflow-y: scroll;
&::-webkit-scrollbar{
width: 6px;
}
.search-table{
width: 100%;
}
}
.search-bottom{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
</style>

87
src/page/setting.vue
View File

@@ -1,10 +1,91 @@
<template>
<el-row class="setting">setting</el-row>
<el-row class="setting">
<el-row class="item about">
<el-row class="title"><i class="el-icon-view"></i><span>关于</span></el-row>
<el-row class="info">
<ul>
<li><el-link :underline="false" icon="el-icon-user" @click="linkOpen('https://github.com/Hunlongyu')">作者: Hunlongyu</el-link></li>
<li><el-link :underline="false" icon="el-icon-discover" @click="linkOpen('https://zy_player.hunlongyu.fun')">官网: ZY Player</el-link></li>
<li><el-link :underline="false" icon="el-icon-chat-line-round" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">反馈: Issues</el-link></li>
</ul>
</el-row>
</el-row>
<el-row class="item theme">
<el-row class="title"><i class="el-icon-picture-outline-round"></i><span>主题</span></el-row>
<el-row class="card-box">
<el-card shadow="hover" class="card">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<span size="mini">Light</span>
</el-card>
<el-card shadow="hover" class="card">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<span size="mini">Dark</span>
</el-card>
</el-row>
</el-row>
<el-row class="item update">
<el-row class="title"><i class="el-icon-refresh"></i><span>更新</span></el-row>
<el-row class="btns">
<el-button size="small">检查更新</el-button>
</el-row>
</el-row>
</el-row>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
import { shell } from 'electron'
export default Vue.extend({
methods: {
linkOpen (e:string) {
if (e) {
shell.openExternal(e)
}
}
}
})
</script>
<style lang="scss" scoped>
.setting{
.item{
margin-bottom: 30px;
.title{
height: 24px;
line-height: 24px;
margin-bottom: 10px;
display: flex;
align-items: center;
i{
font-size: 24px;
margin-right: 6px;
}
}
}
.about{
ul{
list-style: none;
li{
height: 30px;
}
}
}
.theme{
.card-box{
display: flex;
justify-content: flex-start;
.card{
width: 160px;
margin-right: 20px;
text-align: center;
cursor: pointer;
img{
width: 100%;
}
span{
font-size: 14px;
margin-top: 10px;
}
}
}
}
}
</style>

87
src/page/star.vue
View File

@@ -1,10 +1,91 @@
<template>
<el-row class="star">star</el-row>
<el-row class="star">
<el-row class="star-table-box table-box">
<el-table :data="filmData" stripe class="film-table">
<el-table-column prop="name" label="影片名称"></el-table-column>
<el-table-column prop="type" label="影片类别" width="120"></el-table-column>
<el-table-column prop="time" label="更新时间" width="180"></el-table-column>
<el-table-column label="操作" width="130">
<template slot-scope="scope">
<el-button type="text" @click="tableBtnClick(scope.row)">详情</el-button>
<el-button type="text" @click="tableBtnClick(scope.row)">删除</el-button>
<el-button type="text" @click="tableBtnClick(scope.row)">播放</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row class="star-bottom">
<el-pagination
small
layout="total, prev, pager, next, jumper"
:current-page="filmPage"
:page-size="50"
:total="filmTotal">
</el-pagination>
</el-row>
</el-row>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
export default Vue.extend({
data () {
return {
filmData: [
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' },
{ name: '锁链战记_赫克瑟塔斯之光剧场版 3集全/已完结', type: '动作片', time: '2019-08-08 17:37:48' }
],
filmPage: 1,
filmTotal: 120
}
}
})
</script>
<style lang="scss" scoped>
.star{
height: 100%;
position: relative;
.star-table-box{
position: absolute;
top: 0px;
width: 100%;
height: calc(100% - 40px);
overflow-y: scroll;
&::-webkit-scrollbar{
width: 6px;
}
}
.star-bottom{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
</style>

8
src/plugins/element.ts
View File

@@ -1,8 +1,8 @@
import Vue from 'vue'
import {
Container, Row, Col, Header, Aside, Main,
Container, Row, Col, Header, Aside, Main, Drawer,
Tabs, TabPane, Button, Select, Option, Pagination,
Table, TableColumn
Table, TableColumn, Input, Card, Link
} from 'element-ui'
Vue.use(Container)
@@ -11,6 +11,7 @@ Vue.use(Col)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Drawer)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Button)
@@ -19,3 +20,6 @@ Vue.use(Option)
Vue.use(Pagination)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Input)
Vue.use(Card)
Vue.use(Link)