it-console/code/web/IT工具综合平台/src/layout/Index.vue

<!--
 * @Author: Kane
 * @Date: 2023-01-04 11:05:44
 * @LastEditors: Kane
 * @LastEditTime: 2023-02-06 09:26:48
 * @FilePath: /IT工具综合平台/src/layout/Index.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
  <el-container id="layout-container" v-loading="ui.ageVisible" element-loading-text="载入应用数据…">
    <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";
import { useStore } from "vuex";
import { onMounted, computed, reactive } from "vue";
// import { query_requirement_status } from "@/utils/api/requirement/requirement.js";

export default {
  name: "layoutPage",
  setup()
  {
    const store = useStore();

    const ui = reactive(
      {
        pageVisible: true,
      });

    const asideWidth = computed(() =>
    {
      const collapse = store.state.app.asideBarCollapse;

      return collapse === true ? "65px" : "180px";
    });

    onMounted(() =>
    {
      //加载数据
      // query_requirement_status()
      //   .then((response) =>
      //   {
      //     // debugger;
      //     const data = response.data;
      //     console.log(data);
      //   })
      //   .catch((error) =>
      //   {
      //     // debugger;
      //     console.log(error);
      //   });
    });

    return {
      ui,
      asideWidth,
    };
  },
  components: {
    LayoutAside,
    LayoutHeader,
    LayoutMain,
  },
};
</script>

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

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

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

#layout-header {
  height: 50px;
  padding: 0px;
  flex-grow: 0;
}

#layout-main {
  padding: 0px;
  height: 100%;
  /* height: calc(100vh - 50px); */
  /* flex-grow: 1; */
  /* overflow: overlay; */
}
</style>