vue-learning/企业级管理系统/web/admin_system/src/layout/Index.vue

<!--
 * @Author: Kane
 * @Date: 2023-01-04 11:05:44
 * @LastEditors: Kane
 * @LastEditTime: 2023-01-25 14:55:14
 * @FilePath: \admin_system\src\layout\Index.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
  <el-container id="layout-container">
    <el-header id="layout-header">
      <LayoutHeader />
    </el-header>
    <el-container id="layout-container-down">
      <el-aside :width="asideWidth" id="layout-aside">
        <LayoutAside />
      </el-aside>
      <el-main id="layout-main">
        <LayoutMain />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import LayoutAside from "./components/Aside.vue";
import LayoutHeader from "./components/Header.vue";
import LayoutMain from "./components/Main.vue";

export default {
  name: "layoutPage",
  components: {
    LayoutAside,
    LayoutHeader,
    LayoutMain,
  },
  computed: {
    asideWidth()
    {
      const collapse = this.$store.state.app.asideBarCollapse;

      return collapse === true ? "65px" : "180px";
    },
  },
};
</script>

<style scoped>
#layout-container {
  height: 100vh;
  max-height: 100vh;
  /* overflow: hiddens; */
}

#layout-aside {
  /* width: 175px; */
  background-color: #223142;
  overflow-x: hidden;
  height: calc(100vh - 50px);
  max-height: calc(100vh - 50px);
  min-height: calc(100vh - 50px);
}

#layout-header {
  height: 50px;
  /* background-color: #77bc99; */
  padding: 0px;
  flex-grow: 0;
}

#layout-main {
  background-color: #ecf2f9;
  /* height: 0; */
  /* flex-grow: 1; */
  overflow: overlay;
}

#layout-container-down {
  height: calc(100vh - 50px);
  max-height: calc(100vh - 50px);
  min-height: calc(100vh - 50px);
}
</style>