<template>
    <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>
</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>
@media screen {
    .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: calc(100vh - 50px);
                width: calc(100vw - 200px);
            }
        }
    }
}
</style>
