<!--
 * @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>
