<template>
  <div id="app">
    <div>
      <mainHeader></mainHeader>
      <div class="container" v-if="!isIndex">
        <y-scrollbar class="nav">
          <side-nav></side-nav>
        </y-scrollbar>
        <router-view class="view"></router-view>
      </div>
      <router-view class="page" v-else></router-view>
      <!-- <mainFooter v-if="!isIndex"></mainFooter> -->
    </div>
  </div>
</template>

<script>
  import mainHeader from './components/header.vue'
  import mainFooter from './components/footer.vue'
  import sideNav from './components/sidebar.vue'
  export default {
    name: 'app',
    data () {
      return {
        isIndex: true
      }
    },
    watch: {
      $route () {
        this.isIndex = this.$route.name === 'index'
      }
    },
    components: {
      mainHeader,
      sideNav,
      mainFooter
    }
  }
</script>

<style lang="less" type="text/less">
  @import "./assets/less/index";
  #app{
    background:#eee;
  }

  .container {
    margin-top:50px;
    width: 100%;
    background-color: #fff;
    .nav {
      float: left;
      width: 250px;
      border-right:1px solid #dddee1;
      position: fixed;
      top: 0;
      bottom: 0;
      margin-top: 50px;
    }
    .view {
      float: left;
      width: calc(~'100% - 250px');
      padding: 20px 48px 48px;
      box-sizing: border-box;
      margin-left:250px;
    }
  }

  .container:after {
    content: "";
    clear: both;
    display: block;
  }
</style>
