<template>
  <div class="layouts">
    <el-container style="height: 100%">
        <el-aside width="" style="background-color: #fff">
          <!-- 左侧 - 栏 -->
          <left-menu></left-menu>
        </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <right-main-top></right-main-top>
        </el-header>
        <el-main style="background-color: #f2f2f2">
          <div class="main-box">
            <right-main></right-main>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LeftMenu from './left-menu.vue'
import rightMainTop from './right-main-top.vue'
import rightMain from './right-main.vue'
export default {
  components: {
    LeftMenu,
    rightMainTop,
    rightMain
  }
}
</script>

<style lang="less" scoped>
.layouts {
  width: 100%;
  height: 100%;
}
.el-main {
  display: flex;
  flex-direction: column;
  padding: 0px;
  box-sizing: border-box;
  .main-box {
    flex: 1;
    margin: 10px;
    border-radius: 6px !important;
  }
}
/* 影藏滚动条的样式  */
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.el-aside {
  height: 100vh;
  background-color: #ffffff;
  overflow-y: auto;
  -ms-overflow-style: none; /* Edge */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* WebKit */
  }
}
</style>
