<template>
  <div class="menu-layout">
    <Header></Header>
    <div class="container">
      <Menu></Menu>
      <Loading />
      <div class="content">
        <SubMenu></SubMenu>
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Menu from "./components/menu";
import SubMenu from "./components/menu/subMenu.vue";
import Loading from "@/components/Loading/Loading.vue";

export default {
  components: {
    Header,
    Menu,
    SubMenu,
    Loading
  },
  data() {
    return {};
  },

  created() {},
  mounted() {},
  methods: {},
};
</script>

<style>
 .icon-class.arrow{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<style lang="less" scoped>
.menu-layout {
  background-color: #f8fafb;
  font-family: "Helvetica" "Microsoft YaHei" "微软雅黑";
  .container {
    display: flex;
    position: relative;
    .pt(68);
    // min-height: calc(100vh - 50px);
    .content {
      position: relative;
      flex: 1;
      .mg-l(242);
      .pa(14, 40, 0, 40);
      min-height: calc(100vh - 68px);
      overflow-x: hidden;
    }
  }
  .menu {
    position: fixed;
    .w(242);
    height: calc(100vh - 68px);
    overflow: auto;
    background-color: #fff;
    li{
      position: relative;
    }
  }
}
</style>