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

🎏 IPTV

Browse Source
This commit is contained in:
Hunlongyu
2020-10-15 14:09:57 +08:00
parent 206a16160b
commit 2433db1931
6 changed files with 126 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@@ -3,16 +3,20 @@
<Frame />
<div class="main">
<Aside />
<transition>
<Film key="film" />
</transition>
<Film v-show="view === 'Film'" />
<IPTV v-show="view === 'IPTV'" />
</div>
</div>
</template>
<script>
export default {
name: 'App'
name: 'App',
data () {
return {
view: 'IPTV'
}
}
}
</script>

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

@@ -6,4 +6,40 @@
&::-webkit-scrollbar-thumb {
border-radius: 2px;
}
}
.zy-select{
width: 180px;
height: 34px;
cursor: pointer;
position: relative;
font-size: 14px;
margin-left: 10px;
.select-placeholder{
width: 180px;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.select-list{
width: 180px;
position: absolute;
top: 34px;
left: 0;
z-index: 2;
max-height: 340px;
overflow: hidden;
&:hover{
overflow: auto;
}
ul{
margin: 0;
padding: 0;
list-style: none;
li{
height: 34px;
line-height: 34px;
padding-left: 10px;
}
}
}
}

11
src/assets/scss/theme/Light.scss
View File

@@ -79,19 +79,26 @@
.zy-film{
box-shadow: var(--l-bsc-3);
color: var(--l-f-1);
.btn-placeholder{
.select-placeholder{
box-shadow: var(--l-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--l-bsc-hover);
}
}
.btn-list{
.select-list{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc-hover);
li:hover{
background-color: var(--l-bgc-2);
}
.active{
background-color: var(--l-bgc-2);
}
}
}
.zy-iptv{
box-shadow: var(--l-bsc-3);
color: var(--l-f-1);
}
}

83
src/components/Film.vue
View File

@@ -1,20 +1,36 @@
<template>
<div class="zy-film">
<div class="header">
<div class="btn-select" @mouseleave="show.site = false">
<div class="btn-placeholder" @click="show.site = true">OK资源网</div>
<div class="zy-select film-site" @mouseleave="show.site = false">
<div class="select-placeholder" @click="show.site = !show.site">OK资源网</div>
<transition name="AniSlideUp">
<div class="btn-list zy-scrollbar" v-show="show.site">
<div class="select-list zy-scrollbar" v-show="show.site">
<ul>
<li>OK资源网</li>
<li class="active" @click="filmSiteClick()">OK资源网</li>
<li>最大资源网</li>
<li>卧龙资源网</li>
</ul>
</div>
</transition>
</div>
<div class="zy-select film-class" @mouseleave="show.class = false">
<div class="select-placeholder" @click="show.class = !show.class">最新</div>
<transition name="AniSlideUp">
<div class="select-list zy-scrollbar" v-show="show.class">
<ul>
<li class="active" @click="filmClassClick()">最新</li>
<li>动作片</li>
<li>卧龙资源网</li>
</ul>
</div>
</transition>
</div>
</div>
<div class="body zy-scrollbar">
<div class="wrapper">
<div v-for="i in 50" :key="i">laaldfa</div>
</div>
</div>
<div class="body"></div>
</div>
</template>
<script>
@@ -23,16 +39,21 @@ export default {
data () {
return {
show: {
site: false
site: false,
class: false
}
}
},
methods: {
filmSiteClick () {},
filmClassClick () {}
}
}
</script>
<style lang="scss" scoped>
.zy-film{
flex: 1;
margin: 0 10px 10px 0;
margin: 0 10px 20px 0;
border-radius: 6px;
padding: 10px;
display: flex;
@@ -42,47 +63,21 @@ export default {
display: flex;
align-items: center;
justify-content: flex-start;
.btn-select{
width: 180px;
height: 34px;
cursor: pointer;
position: relative;
font-size: 14px;
margin-left: 10px;
.btn-placeholder{
width: 180px;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.btn-list{
width: 180px;
position: absolute;
top: 34px;
left: 0;
z-index: 2;
max-height: 340px;
overflow: hidden;
&:hover{
overflow: auto;
}
ul{
margin: 0;
padding: 0;
list-style: none;
li{
height: 34px;
line-height: 34px;
padding-left: 10px;
&.active{}
}
}
}
.film-class{
margin-left: 20px;
}
}
.body{
flex: 1;
// border: 1px solid #000;
position: relative;
overflow: hidden;
margin: 10px 10px 0;
&:hover{
overflow: auto;
}
.wrapper{
position: absolute;
}
}
}
</style>

32
src/components/IPTV.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="zy-iptv">
<div class="box">
<div class="body">body</div>
<div class="footer">footer</div>
</div>
<div class="box"></div>
</div>
</template>
<script>
export default {
name: 'IPTV'
}
</script>
<style lang="scss" scoped>
.zy-iptv{
flex: 1;
margin: 0 10px 20px 0;
border-radius: 6px;
padding: 10px;
display: flex;
flex-direction: column;
.body{
flex: 1;
border: 1px solid #000;
}
.footer{
height: 50px;
border: 1px solid #000;
}
}
</style>

4
src/components/register.js
View File

@@ -2,6 +2,7 @@ import Vue from 'vue'
import Frame from './Frame'
import Aside from './Aside'
import Film from './Film'
import IPTV from './IPTV'
// import Play from './Play'
// import Star from './Star'
// import Setting from './Setting'
@@ -9,13 +10,13 @@ import Film from './Film'
// import Share from './Share'
// import History from './History'
// import EditSites from './EditSites'
// import IPTV from './IPTV'
export default {
registerComponents () {
Vue.component('Frame', Frame)
Vue.component('Aside', Aside)
Vue.component('Film', Film)
Vue.component('IPTV', IPTV)
// Vue.component('Play', Play)
// Vue.component('Star', Star)
// Vue.component('Setting', Setting)
@@ -23,6 +24,5 @@ export default {
// Vue.component('Share', Share)
// Vue.component('History', History)
// Vue.component('EditSites', EditSites)
// Vue.component('IPTV', IPTV)
}
}