<template>
  <div id="app">
    <div class="sidebar">
      <mycard></mycard>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="tarbar">
      <toolbar></toolbar>
    </div>
  </div>
</template>

<script>
import mycard from '@/components/mycard/mycard'
import toolbar from './right-panel'
import { mapActions } from 'vuex'
export default {
   components: {
     mycard,
     toolbar
   },
   created () {
       this.$store.dispatch('connect')
   }
}
</script>

<style lang="stylus" scoped>
#app
  display: flex
  margin: auto
  width: 1260px
  background-color: #fff
  .sidebar
    width: 60px
    height: 800px
    background: #2b2c2f
  .main
    flex: 1
    height: 800px
    background: #f2f2f2
  .tarbar
    flex: 2
    width:00px;
    height: 800px;
</style>
