mirror of
https://github.com/cuiocean/ZY-Player.git
synced 2026-05-08 15:02:17 +08:00
cuiocean
@@ -65,7 +65,7 @@
|
||||
--p-c-9: #f4f7f799;
|
||||
--p-fc-1: #ffffff;
|
||||
--p-fc-2: #FFFFF3;
|
||||
--p-fc-3: #f15c5c;
|
||||
--p-fc-3: #177ea7;
|
||||
--p-bgc-1: #ff8499;
|
||||
--p-bgc-2: #fea1b2;
|
||||
--p-bsc: 0 1px 3px #ef528533, 0 1px 2px #ef528544;
|
||||
|
||||
@@ -71,6 +71,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
|
||||
color: var(--d-fc-1);
|
||||
background-color: var(--d-bgc-1);
|
||||
border-bottom-color: var(--d-c-2);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
&:hover{
|
||||
box-shadow: var(--d-bsc-hover);
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
color: var(--d-fc-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-scroll{
|
||||
|
||||
@@ -69,6 +69,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
|
||||
color: var(--g-fc-1);
|
||||
background-color: var(--g-bgc-1);
|
||||
border-bottom-color: var(--g-c-2);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
&:hover{
|
||||
box-shadow: var(--g-bsc-hover);
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
color: var(--g-fc-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-scroll{
|
||||
|
||||
@@ -69,6 +69,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table__header th, .el-table__header tr， .el-table__body td,.el-table__body th{
|
||||
color: var(--l-fc-1);
|
||||
background-color: var(--l-bgc-1);
|
||||
border-bottom-color: var(--l-c-2);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
&:hover{
|
||||
box-shadow: var(--l-bsc-hover);
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
color: var(--l-fc-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-scroll{
|
||||
|
||||
@@ -68,6 +68,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 设置el-table的样式*/
|
||||
.el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
|
||||
color: var(--p-fc-1);
|
||||
background-color:var(--p-bgc-1);
|
||||
border-bottom-color: var(--p-c-2);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
&:hover{
|
||||
box-shadow: var(--p-bsc-hover);
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
color: var(--p-fc-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-scroll{
|
||||
|
||||
@@ -1,53 +1,74 @@
|
||||
<template>
|
||||
<div class="history">
|
||||
<div class="body zy-scroll">
|
||||
<div class="zy-table">
|
||||
<div class="detail" id="history">
|
||||
<div class="detail-content">
|
||||
<div class="detail-body zy-scroll">
|
||||
<div class="zy-table" id="history-table">
|
||||
<div class="tHeader">
|
||||
<span class="btn"></span>
|
||||
<span class="btn" @click="clearAllHistory">清空</span>
|
||||
</div>
|
||||
<div class="tBody zy-scroll">
|
||||
<ul>
|
||||
<li v-show="this.history.length === 0">无数据</li>
|
||||
<li v-show="this.history.length > 0">
|
||||
<span class="name">名字</span>
|
||||
<span class="site">片源</span>
|
||||
<span class="note">观看至</span>
|
||||
<span class="operate">
|
||||
<span class="btn"></span>
|
||||
<span class="btn"></span>
|
||||
<span class="btn"></span>
|
||||
<span class="btn"></span>
|
||||
</span>
|
||||
</li>
|
||||
<li v-for="(i, j) in history" :key="j" @click="historyItemEvent(i)">
|
||||
<span class="name" @click.stop="detailEvent(i)">{{i.name}}</span>
|
||||
<span class="site">{{getSiteName(i.site)}}</span>
|
||||
<span class="note">第{{i.index+1}}集</span>
|
||||
<span class="operate">
|
||||
<span class="btn" @click.stop="playEvent(i)">播放</span>
|
||||
<span class="btn" @click.stop="shareEvent(i)">分享</span>
|
||||
<span class="btn" @click.stop="downloadEvent(i)">下载</span>
|
||||
<span class="btn" @click.stop="removeHistoryItem(i)">删除</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<el-table
|
||||
:data="history"
|
||||
height="100%"
|
||||
row-key="id"
|
||||
:border="tableBorder"
|
||||
@header-click="tableBorder = !tableBorder"
|
||||
@row-click="detailEvent"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="片名"
|
||||
min-width="200">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="site"
|
||||
label="片源"
|
||||
width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getSiteName(scope.row.site) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="index"
|
||||
label="观看至">
|
||||
<template slot-scope="scope">
|
||||
<span>第{{ scope.row.index + 1 }}集</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
header-align="center"
|
||||
align="right"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
|
||||
<el-button @click.stop="shareEvent(scope.row)" type="text">分享</el-button>
|
||||
<el-button @click.stop="downloadEvent(scope.row)" type="text">下载</el-button>
|
||||
<el-button @click.stop="removeHistoryItem(scope.row)" type="text">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
import { history, sites } from '../lib/dexie'
|
||||
import zy from '../lib/site/tools'
|
||||
import Sortable from 'sortablejs'
|
||||
const { clipboard } = require('electron')
|
||||
|
||||
export default {
|
||||
name: 'history',
|
||||
data () {
|
||||
return {
|
||||
history: history,
|
||||
sites: []
|
||||
history: [],
|
||||
sites: [],
|
||||
tableBorder: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -182,44 +203,70 @@ export default {
|
||||
return site.name
|
||||
}
|
||||
},
|
||||
historyItemEvent (e) {
|
||||
this.video = {
|
||||
key: e.site,
|
||||
info: {
|
||||
id: e.ids,
|
||||
name: e.name,
|
||||
type: e.type,
|
||||
year: e.year,
|
||||
index: e.index,
|
||||
time: e.time
|
||||
}
|
||||
}
|
||||
},
|
||||
removeHistoryItem (e) {
|
||||
history.remove(e.id).then(res => {
|
||||
this.getAllhistory()
|
||||
}).catch(err => {
|
||||
this.$message.warning('删除历史记录失败, 错误信息: ' + err)
|
||||
})
|
||||
},
|
||||
rowDrop () {
|
||||
const tbody = document.getElementById('history-table').querySelector('.el-table__body-wrapper tbody')
|
||||
const _this = this
|
||||
Sortable.create(tbody, {
|
||||
onEnd ({ newIndex, oldIndex }) {
|
||||
const currRow = _this.history.splice(oldIndex, 1)[0]
|
||||
_this.history.splice(newIndex, 0, currRow)
|
||||
history.clear().then(res => {
|
||||
var id = _this.history.length
|
||||
_this.history.forEach(element => {
|
||||
element.id = id
|
||||
history.add(element)
|
||||
id -= 1
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.rowDrop()
|
||||
},
|
||||
created () {
|
||||
this.getAllhistory()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.history{
|
||||
position: relative;
|
||||
.detail{
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
width: calc(100% - 100px);
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
.body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 888;
|
||||
.detail-content{
|
||||
height: calc(100% - 10px);
|
||||
padding: 0 60px;
|
||||
position: relative;
|
||||
.detail-header{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.detail-title{
|
||||
font-size: 16px;
|
||||
}
|
||||
.detail-close{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-body{
|
||||
height: calc(100% - 50px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,9 @@ import store from './store'
|
||||
import 'modern-normalize'
|
||||
import Register from './components/register'
|
||||
import './lib/element/index'
|
||||
import ElementUI from 'element-ui'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
Register.registerComponents()
|
||||
Vue.config.productionTip = false
|
||||
new Vue({
|
||||
|
||||
Reference in New Issue
Block a user