🎉 Aside.vue

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>

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);
+      }
+    }
+  }
 }

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>

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>

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%;

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)