vue后台管理系统布局

elementUI布局容器container

<template>
    <div class="home-view">
        <el-container>
            <el-header>
                    <img src="../../public/imgs/logo.png" alt="学校logo">
                    <div class="status">欢迎您的使用
                        <strong>admin，</strong>
                        <a href="/logout">退出登录</a>
                    </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
                    <el-menu active-text-color="skyblue" unique-opened router>
                        <!-- 一级菜单 -->
                        <el-submenu :index="String(index)" v-for="(item, index) in menuList" :key="item.text">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                {{item.text}}
                            </template>
                            <!-- 二级菜单 -->
                            <el-menu-item :index="childItem.link" v-for="childItem in item.children" :key="childItem.link">
                                <i class="el-icon-setting"></i>
                                {{childItem.text}}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 路由占位符 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import '../../public/css/reset.css';
export default {
      // 定义数据
    data() {
        return {
            menuList: [
                  {
                    text: '班级活动',
                    children: [
                        { text:  '上课签到', link: '/classact/sign' },
                        { text:  '随堂练习', link: '/classact/test' },
                        { text:  '更多活动', link: '/classact/more' },
                    ]
                },
                {
                    text: '班级管理',
                    children: [
                        { text:  '创建班级', link: '/classmgm/create' },
                        { text:  '班级列表', link: '/classmgm/list/1' },
                        { text:  '学生管理', link: '/classmgm/student' },
                        { text:  '教师管理', link: '/classmgm/Teacher' },
                    ]
                },
                 {
                    text: '课程管理',
                    children: [
                        { text:  '创建课程', link: '/course/create' },
                        { text:  '管理课程', link: '/course/list/1' },
                    ]
                },
                  {
                    text: '题库管理',
                    children: [
                        { text:  '题库', link: '/question/qust' },
                    ]
                },
                {
                    text: '资料管理',
                    children: [
                        { text:  '课堂课件', link: '/datamsg/ware' },
                        { text:  '课堂任务', link: '/datamsg/task' },
                        { text:  '课程表', link: '/datamsg/surface' },
                    ]
                },
              
                {
                    text: '设置',
                    children: [
                        { text:  '修改密码', link: '/setting/update' },
                        { text:  '退出登录', link: '/' }
                    ]
                }
            ]
        }
    },
   created(){
   },
   computed:{
   },
   methods:{
   },
}
</script>
<style lang="scss" scoped>
   .home-view {
    height: 100%;
    background-color: #efefef;
    .el-container {
        height: 100%;
        .el-header {
            display: flex;
            margin-bottom: 10px;
            background-color: #fff;
            justify-content: space-between;
            align-items: center;
            background: rgba(0, 128, 255, .85);
            border-radius: 20px;
            img{
                height: 100%;
            }
            div{
                color: #fff;
                a{
                    color: #eee;
                    text-decoration: none;
                }
            }
        }
        .el-aside {
            background-color: #fff;
            margin-right: 10px;
        }
        .el-main {
            background-color: #fff;
           
        }
    }
}
</style>