<template>
  <el-container
    style="background-color: #e8e8e8; margin: 0; padding-bottom: 8px"
  >
    <el-header style="padding: 0">
      <headerCom></headerCom>
    </el-header>
    <!-- <div style="height: 8px"></div> -->
    <el-container>
      <el-aside width="240px" style="background-color: white">
        <sideMenu></sideMenu>
      </el-aside>
      <div style="width: 8px"></div>
      <el-main class="m-app-main">
        <tagViews></tagViews>
        <!-- <div style="height: 10px"></div> -->
        <business style="background-color: var(--bgcolor)"></business>
        <toolbars></toolbars>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import headerCom from "./Header";
import sideMenu from "./SideMenu";
import tagViews from "./components/TagsView"
import business from "../Business";
import toolbars from "~/components/Toolbars"

export default {
  components: { headerCom, sideMenu, tagViews, business, toolbars }
};
</script>

<style>
.m-app-main {
  padding: 0;
  position: relative;
  height: 100%;
  /* padding-bottom: 68px; */
  box-sizing: border-box;
  margin-right: 10px;
}
.el-aside {
  height: 100%;
  transition: width 300ms;
  /* overflow: hidden; */
  overflow: unset;
  padding-bottom: 68px;
  box-sizing: border-box;
}
</style>
