<template>
? <el-container class="home-container">
? ? <el-header>
? ? ? <div><img style="width: 50px;height: 50px;" src="../assets/logo.png" alt=""><span>后臺(tái)管理系統(tǒng)</span></div>
? ? ? <el-button type="info" @click="clear">退出</el-button>
? ? </el-header>
? ? <el-container>
? ? ? <!-- 側(cè)邊欄菜單區(qū) -->
? ? ? <el-aside width="200px">
? ? ? ? <el-menu background-color="#323744" text-color="#fff" active-text-color="#ffd04b">
? ? ? ? ? <!-- 一級(jí) -->
? ? ? ? ? <el-submenu :index="item.id +''" v-for="item in menulist" :key="item.id">
? ? ? ? ? ? <!-- 1級(jí)菜單模板區(qū) -->
? ? ? ? ? ? <template slot="title">
? ? ? ? ? ? ? <i class="el-icon-location"></i>
? ? ? ? ? ? ? <span>{{item.authName}}</span>
? ? ? ? ? ? </template>
? ? ? ? ? ? <el-menu-item v-for="subitem in item.children" :key="subitem.id" :index="subitem.id+''"><template slot="title">
? ? ? ? ? ? ? ? <i class="el-icon-location"></i>
? ? ? ? ? ? ? ? <span>{{subitem.authName}}</span>
? ? ? ? ? ? ? </template></el-menu-item>
? ? ? ? ? </el-submenu>
? ? ? ? </el-menu>
? ? ? </el-aside>
? ? ? <el-main>Main</el-main>
? ? </el-container>
? </el-container>
</template>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? menulist: []
? ? ? }
? ? },
? ? created() {
? ? ? this.getMenu()
? ? },
? ? methods: {
? ? ? async getMenu() {
? ? ? ? const {
? ? ? ? ? data: res
? ? ? ? } = await this.$http.get('menus')
? ? ? ? if (res.meta.status !== 200) return this.$msg.error(res.meta.msg)
? ? ? ? this.menulist = res.data
? ? ? },
? ? ? clear() {
? ? ? ? window.sessionStorage.clear()
? ? ? ? this.$router.push('/login')
? ? ? }
? ? }
? }
</script>
<style lang='less' scoped>
? .el-header {
? ? background-color: #363B40;
? ? display: flex;
? ? justify-content: space-between;
? ? padding-left: 0px;
? ? align-items: center;
? ? color: #FFFFFF;
? ? font-size: 20px;
? ? >div {
? ? ? display: flex;
? ? ? align-items: center;
? ? ? span {
? ? ? ? margin-left: 15px;
? ? ? }
? ? }
? }
? .home-container {
? ? height: 100%;
? }
? .el-aside {
? ? background-color: #323744;
? }
? .el-main {
? ? background-color: #EAEDF2;
? }
</style>
