sider and frame done

src/components/zy_header.vue

@@ -1,18 +1,19 @@
 <template>
   <Row class="header-box">
-    <div class="left">
-      <Icon type="md-return-left" />
-    </div>
-    <div class="right">
-      <Icon type="md-remove" />
-      <Icon type="md-add" />
-      <Icon type="md-close" />
-    </div>
+    <Icon type="md-remove" @click="clickFrameEvent('min')" />
+    <Icon type="md-add" @click="clickFrameEvent('max')" />
+    <Icon type="md-close" @click="clickFrameEvent('close')" />
   </Row>
 </template>
 <script>
+const { ipcRenderer: ipc } = require('electron')
 export default {
-  name: 'zy_header'
+  name: 'zy_header',
+  methods: {
+    clickFrameEvent (e) {
+      ipc.send(e)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -21,23 +22,14 @@ export default {
   -webkit-app-region: drag;
   -webkit-user-select: none;
   display: flex;
-  justify-content: space-between;
-  .left,.right{
-    display: flex;
-    align-items: center;
-    height: 50px;
-    width: 50%;
-    i{
-      font-size: 20px;
-      width:50px;
-      height:50px;
-      line-height:50px;
-      cursor: pointer;
-      -webkit-app-region: no-drag;
-    }
-  }
-  .right{
-    justify-content: flex-end;
+  justify-content: flex-end;
+  i{
+    font-size: 20px;
+    width:50px;
+    height:50px;
+    line-height:50px;
+    cursor: pointer;
+    -webkit-app-region: no-drag;
   }
 }
 </style>

src/components/zy_sider.vue

@@ -1,19 +1,30 @@
 <template>
   <Row class="sider-box">
     <div class="top">
-      <Icon class="active" type="md-list" />
-      <Icon type="md-search" />
-      <Icon type="md-play" />
-      <Icon type="md-star" />
+      <Icon :class="iconActive === 'list' ? 'active': ''" type="md-list" @click="iconClickEvent('list')"/>
+      <Icon :class="iconActive === 'search' ? 'active': ''" type="md-search" @click="iconClickEvent('search')"/>
+      <Icon :class="iconActive === 'play' ? 'active': ''" type="md-play" @click="iconClickEvent('play')"/>
+      <Icon :class="iconActive === 'collection' ? 'active': ''" type="md-star" @click="iconClickEvent('collection')"/>
     </div>
     <div class="bottom">
-      <Icon type="md-settings" />
+      <Icon :class="iconActive === 'settings' ? 'active': ''" type="md-settings" @click="iconClickEvent('settings')"/>
     </div>
   </Row>
 </template>
 <script>
 export default {
-  name: 'zy-sider'
+  name: 'zy-sider',
+  computed: {
+    iconActive () {
+      return this.$store.getters.getIconActive
+    }
+  },
+  methods: {
+    iconClickEvent (e) {
+      this.$router.push({ name: e })
+      this.$store.commit('SET_ICON_ACTIVE', e)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>