<template>
  <div id="app-main">
    <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('user/connect')
       this.$store.dispatch('user/checkDevices')
       this.$store.dispatch('user/customersessionInfo')
       this.$store.dispatch('user/customerConversation')
   }
}
</script>

<style lang="stylus" scoped>
#app-main
  display: flex
  position: fixed;
  top:5%
  left: calc(50% - 630px)
  width: 1260px
  height: 90%
  background-color: #fff
  .sidebar
    width: 60px
    height: 100%
    background: #2b2c2f
  .main
    flex: 1
    height: 100%
    background: #f2f2f2
  .tarbar
    flex: 2
    border-left: 1px solid #e7e7e7;
    width:00px;
    height: 100%
</style>
