<template>
  <div class="box">
    <el-container>
      <el-aside>
        <NavbarItem></NavbarItem>
      </el-aside>
      <el-container>
        <el-header>
          <Navbar></Navbar>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavbarItem from "@/layout/components/NavbarItem";
import Navbar from "@/layout/components/Navbar";
import Cookies from "js-cookie";
export default {
  name: "Layout",
  components: { NavbarItem, Navbar },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: calc(100vh);
  max-height: 1080px;

  .el-container {
    height: 100%;
  }
  .el-header {
    color: #333;
    text-align: center;
    // width: 1660px;
    padding: 0;
    height: 96px !important;
    background: rgba(255, 255, 255, 1);
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    height: 100%;
    width: 260px !important;
    background: #fff;
  }

  .el-main {
    background: RGBA(235, 238, 246, 1);
    height: calc(100% - 96px);
    // padding: 32px 0 0 25px;
    // height: 90%;
    padding: 0;
  }
}
</style>
