<template>
    <section id="layoutSectionIndex" class="h-full w-full flex">
        <el-container>
            <el-aside class="flex">
                <LayoutLeftMenu />
            </el-aside>
            <el-container>
                <el-header class="el-header">
                    <LayoutHeader />
                </el-header>
                <el-main class="container-main">
                    <div class="p-2 h-full flex flex-col mainSectionsContainer">
                        <RouterView class="" />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </section>
</template>
<script setup>
import LayoutHeader from './component/header.vue';
import LayoutLeftMenu from './component/left-menu.vue';
</script>
<style scoped>
.el-container {
    background: #f5f6fa;
}

.el-header {
    @apply shadow-2xl;
    background: #fff;
}

.container-main {
    height: 100%;
    background: #f5f6fa;
    color: #333333;
    // 看一下吧
}

div.mainSectionsContainer {
    > section {
        @apply flex flex-col h-full;

        ::v-deep(div.global-search-container) {
            height: auto;
        }

        ::v-deep(div.main-container) {
            @apply flex flex-col;
            flex: 1;

            ::v-deep(div) {
                flex: 1;
            }
        }
    }
}
</style>
