<!--
  @description: 模板页面
  @author: Adrian
-->
<template>
  <div :class="{folds:isCollapse}" class="layout">
    <!-- navbar -->
    <div class="top">
      <headerBar />
    </div>
    <!-- body -->
    <div class="bottom">
      <div class="content">
        <appMain />
      </div>
    </div>
  </div>
</template>
<script>
/* vuex*/
import { mapGetters } from 'vuex'
/* 组件*/
import { headerBar, appMain } from './components'
export default {
  name: 'Layout',
  components: {
    headerBar,
    appMain
  },
  computed: {
    ...mapGetters(['isCollapse'])
  }
}
</script>
<style lang="less" scoped>
  .layout {
    min-width: 1280px;
    background-color: #edf0f5;
    min-height: 100vh;
    .bottom {
      max-width: 1920px;
      padding: 16px 32px;
      margin: 0 auto;
      .content {
        border-radius: 4px;
        min-height: calc(100vh - 56px - 32px);
        background: #ffffff;
        overflow: hidden;
      }
    }
  }
</style>

