From 2433db193111b8ca079f2386207edfb8f0edec78 Mon Sep 17 00:00:00 2001
From: Hunlongyu <hunlongyu@gmail.com>
Date: Thu, 15 Oct 2020 14:09:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=8F=20IPTV?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 12 +++--
 src/assets/scss/style.scss       | 36 ++++++++++++++
 src/assets/scss/theme/Light.scss | 11 ++++-
 src/components/Film.vue          | 83 +++++++++++++++-----------------
 src/components/IPTV.vue          | 32 ++++++++++++
 src/components/register.js       |  4 +-
 6 files changed, 126 insertions(+), 52 deletions(-)
 create mode 100644 src/components/IPTV.vue

diff --git a/src/App.vue b/src/App.vue
index b5fa94f..8ef736c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
 
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 3c6f01e..00cdce0 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -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;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/scss/theme/Light.scss b/src/assets/scss/theme/Light.scss
index 78e5293..64c1491 100644
--- a/src/assets/scss/theme/Light.scss
+++ b/src/assets/scss/theme/Light.scss
@@ -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);
+  }
 }
\ No newline at end of file
diff --git a/src/components/Film.vue b/src/components/Film.vue
index fd0e5f6..27b7399 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -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>
diff --git a/src/components/IPTV.vue b/src/components/IPTV.vue
new file mode 100644
index 0000000..fd8f573
--- /dev/null
+++ b/src/components/IPTV.vue
@@ -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>
diff --git a/src/components/register.js b/src/components/register.js
index b4f6367..29d1deb 100644
--- a/src/components/register.js
+++ b/src/components/register.js
@@ -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)
   }
 }