保存进度！

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

@@ -0,0 +1,85 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-01-04 11:05:44
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-01-28 23:35:47
+ * @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;
+}
+
+#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); */
+  height: 100%;
+}
+
+#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>