86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<!--
|
|
* @Author: Kane
|
|
* @Date: 2023-03-23 15:07:31
|
|
* @LastEditors: Kane
|
|
* @FilePath: /task_schedule/src/layout/index.vue
|
|
* @Description:
|
|
*
|
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
|
-->
|
|
<template>
|
|
<div class="view-wrapper">
|
|
<el-container class="layout-container">
|
|
<el-header class="layout-header">
|
|
<LayoutHeader />
|
|
</el-header>
|
|
<el-container class="layout-container-down">
|
|
<el-aside class="layout-aside">
|
|
<LayoutAside />
|
|
</el-aside>
|
|
<el-main class="layout-main">
|
|
<LayoutMain />
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
// 组件
|
|
import LayoutHeader from "./components/Header.vue";
|
|
import LayoutAside from "./components/Aside.vue";
|
|
import LayoutMain from "./components/Main.vue";
|
|
|
|
export default {
|
|
name: "MainFrame",
|
|
components: {
|
|
LayoutHeader,
|
|
LayoutAside,
|
|
LayoutMain,
|
|
},
|
|
setup()
|
|
{
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.layout-container {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
max-height: 100vh;
|
|
max-width: 100vw;
|
|
|
|
.layout-header {
|
|
height: 50px;
|
|
width: 100vw;
|
|
max-height: 50px;
|
|
max-width: 100vw;
|
|
|
|
padding: 0px;
|
|
}
|
|
|
|
.layout-container-down {
|
|
height: calc(100vh - 50px);
|
|
max-height: calc(100vh - 50px);
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
|
|
.layout-aside {
|
|
height: calc(100vh - 50px);
|
|
max-height: calc(100vh - 50px);
|
|
min-height: calc(100vh - 50px);
|
|
width: 200px;
|
|
|
|
overflow-x: hidden;
|
|
|
|
background-color: #2f4156;
|
|
}
|
|
|
|
.layout-main {
|
|
padding: 0px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|