From a3db2ea2f2109981dba56b1dbe15b8a15daaa064 Mon Sep 17 00:00:00 2001
From: Hunlongyu <hunlongyu@gmail.com>
Date: Tue, 13 Oct 2020 14:14:11 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Aside.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 10 +++++
 src/assets/scss/theme/Light.scss | 19 ++++++++
 src/components/Aside.vue         | 77 ++++++++++++++++++++++++++++++++
 src/components/Film.vue          | 13 ++++++
 src/components/Frame.vue         |  8 ++--
 src/components/register.js       |  8 ++--
 6 files changed, 127 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Aside.vue
 create mode 100644 src/components/Film.vue

diff --git a/src/App.vue b/src/App.vue
index d469812..954759c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,12 @@
 <template>
   <div id="app" class="theme-light">
     <Frame />
+    <div class="main">
+      <Aside />
+      <transition-group name="fade">
+        <Film key="film" />
+      </transition-group>
+    </div>
   </div>
 </template>
 
@@ -21,5 +27,9 @@ html, body, #app{
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;
+  .main{
+    display: flex;
+    height: calc(100% - 50px);
+  }
 }
 </style>
diff --git a/src/assets/scss/theme/Light.scss b/src/assets/scss/theme/Light.scss
index 4f03ff1..635510b 100644
--- a/src/assets/scss/theme/Light.scss
+++ b/src/assets/scss/theme/Light.scss
@@ -57,4 +57,23 @@
       stroke: var(--l-c-0);
     }
   }
+  .zy-aside{
+    span{
+      &:hover{
+        background-color: var(--l-bgc-2);
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      &.active{
+        background-color: var(--l-bgc-2);
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      .icon{
+        stroke: var(--l-c-0);
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
new file mode 100644
index 0000000..dcd0cd8
--- /dev/null
+++ b/src/components/Aside.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="zy-aside">
+    <span :class="view === 'Film' ? 'active' : ''" title="电影" @click="changeView('Film')">
+      <IconFilm class="icon icon-film" />
+    </span>
+    <span :class="view === 'IPTV' ? 'active' : ''" title="TV" @click="changeView('IPTV')">
+      <IconTv class="icon icon-tv" />
+    </span>
+    <span :class="view === 'Play' ? 'active' : ''" title="播放" @click="changeView('Play')">
+      <IconPlay class="icon icon-play" />
+    </span>
+    <span :class="view === 'Star' ? 'active' : ''" title="收藏" @click="changeView('Star')">
+      <IconStar class="icon icon-star" />
+    </span>
+    <span :class="view === 'History' ? 'active' : ''" title="历史" @click="changeView('History')">
+      <IconHistory class="icon icon-history" />
+    </span>
+    <span :class="view === 'Setting' ? 'active' : ''" title="设置" @click="changeView('Setting')">
+      <IconSetting class="icon icon-setting" />
+    </span>
+  </div>
+</template>
+<script>
+import IconFilm from '../assets/img/ikonate/aperture.svg'
+import IconTv from '../assets/img/ikonate/tv.svg'
+import IconPlay from '../assets/img/ikonate/play.svg'
+import IconStar from '../assets/img/ikonate/favourite.svg'
+import IconHistory from '../assets/img/ikonate/time.svg'
+import IconSetting from '../assets/img/ikonate/settings.svg'
+export default {
+  name: 'Aside',
+  components: {
+    IconFilm,
+    IconTv,
+    IconPlay,
+    IconStar,
+    IconHistory,
+    IconSetting
+  },
+  data () {
+    return {
+      view: 'Film'
+    }
+  },
+  methods: {
+    changeView (e) {
+      this.view = e
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.zy-aside{
+  width: 60px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  span{
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover, &.active{
+      .icon{
+        stroke-width: 2;
+      }
+    }
+    .icon{
+      width: 24px;
+      height: auto;
+    }
+  }
+}
+</style>
diff --git a/src/components/Film.vue b/src/components/Film.vue
new file mode 100644
index 0000000..c08ee9c
--- /dev/null
+++ b/src/components/Film.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="zy-film">film</div>
+</template>
+<script>
+export default {
+  name: 'Film'
+}
+</script>
+<style lang="scss" scoped>
+.zy-film{
+  flex: 1;
+}
+</style>
diff --git a/src/components/Frame.vue b/src/components/Frame.vue
index 4ff7c6d..7955f52 100644
--- a/src/components/Frame.vue
+++ b/src/components/Frame.vue
@@ -2,14 +2,14 @@
   <div class="zy-frame">
     <div class="left"></div>
     <div class="middle">
-      <span class="btn lock" @click="frameClickEvent('top')">
+      <span class="btn lock" @click="frameClickEvent('top')" title="置顶">
         <IconLock v-show="isTop" class="icon" />
         <IconLockOpen v-show="!isTop" class="icon" />
       </span>
-      <span class="btn bell">
+      <span class="btn bell" title="消息">
         <IconBell class="icon" />
       </span>
-      <div class="search">
+      <div class="search" title="搜索">
         <span class="btn" @click="searchBtnClick()">
           <IconSearch :class="[search ? 'active ' : ''] + 'icon'" />
         </span>
@@ -134,7 +134,7 @@ export default {
   -webkit-app-region: drag;
   .left{
     height: 100%;
-    width: 80px;
+    width: 60px;
   }
   .middle{
     height: 100%;
diff --git a/src/components/register.js b/src/components/register.js
index 59d80c0..b4f6367 100644
--- a/src/components/register.js
+++ b/src/components/register.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Frame from './Frame'
-// import Aside from './Aside'
-// import Film from './Film'
+import Aside from './Aside'
+import Film from './Film'
 // import Play from './Play'
 // import Star from './Star'
 // import Setting from './Setting'
@@ -14,8 +14,8 @@ import Frame from './Frame'
 export default {
   registerComponents () {
     Vue.component('Frame', Frame)
-    // Vue.component('Aside', Aside)
-    // Vue.component('Film', Film)
+    Vue.component('Aside', Aside)
+    Vue.component('Film', Film)
     // Vue.component('Play', Play)
     // Vue.component('Star', Star)
     // Vue.component('Setting', Setting)