<template>
  <div class="main">
    <!-- 左侧导航 -->
    <main-menu class="col_left" />
    <div class="col_right">
      <main-header />
      <div class="main_wrapper">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MainHeader from "./MainHeader.vue";
import MainMenu from "./MainMenu.vue";
@Component({
  components: {
    MainMenu,
    MainHeader,
  },
})
export default class Main extends Vue {}
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}

.col_left {
  flex-shrink: 0;
}

.col_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main_wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  background: white;
  height: 100%;
}
</style>
