<template>
    <header class="flex v-center between">
        <div>
            <div class="title"><a href="">局长信箱</a></div>
        </div>
        <div>
            <el-button type="primary">退出</el-button>
        </div>
    </header>
    <div class="flex">
        <aside>
            <nav>
                <a class="flex v-center center wrap pointer" @click="router.push('/')">
                    <el-icon><HomeFilled /></el-icon>
                    <span>首页</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="router.push('/')">
                    <el-icon><Platform /></el-icon>
                    <span>我的大屏</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="router.push('/')">
                    <el-icon><Menu /></el-icon>
                    <span>我的工作</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="router.push('/')">
                    <el-icon><HomeFilled /></el-icon>
                    <span>来信初筛</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="router.push('/')">
                    <el-icon><HomeFilled /></el-icon>
                    <span>数据分析</span>
                </a>
                <a class="flex v-center center wrap pointer" @click="router.push('/')">
                    <el-icon><Setting /></el-icon>
                    <span>系统管理</span>
                </a>
            </nav>
        </aside>
        <main><router-view /></main>
    </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
:root {
    --header-height: 80px;
}
header {
    background-color: #162582;
    color: #fff;
    height: var(--header-height);
    padding: 0 20px;
    .title {
        font-size: 28px;
        a {
            text-decoration: none;
            color: inherit;
        }
    }
}
aside {
    background-color: #071254;
    color: #fff;
    width: 100px;
    height: calc(100vh - var(--header-height));
    nav {
        a {
            height: 100px;
            color: #707ab6;
            &:hover {
                color: #fff;
            }
            .el-icon {
                font-size: 50px;
                
            }
            span {
                width: 100%;
                text-align: center;
            }
        }
    }
}
</style>