<template>
  <div class="ed-app">
    <!--  菜单栏  -->
    <div class="ed-app-left">
      <SideBar :data="routes"></SideBar>
    </div>
    <!--  内容层  -->
    <el-scrollbar class="ed-app--right">
      <Navbar></Navbar>

      <div class="ed-app--right-main">
        <AppMain></AppMain>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>

import {AppMain, Navbar, SideBar} from "./components"
import {routes}                   from "@/router/index.js";

export default {
  name: "index",
  components: {AppMain, SideBar, Navbar},
  data() {
    return {
      routes
    };
  },
  methods: {},
};
</script>
<style lang="scss">
.ed-app {
  display: flex;
  align-items: center;
  overflow: hidden;

  .ed-app-left {
    height: 100vh;
    background: #304156 !important;
    padding: 0;
    border: none !important;
  }

  .ed-app--right {
    height: 100vh;
    width: 100%;

    .ed-app--right-main {
      padding: 10px 10px 0 10px;
    }
  }
}


</style>
