02 主页-美化主页的header区域

先准备好素材 icon 64×64 以下

• 单独修改el-header

<el-header class="home-header">
            <div>
                <img src="../assets/64.gif" alt=""/>
                <span>电商管理系统</span>
            </div>
            <el-button @click="logout">退出</el-button>
        </el-header>

• style

.home-header{
        background-color: #242424;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #ffffff;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }

• 完整代码

<template>
    <el-container class="home-container">
        <el-header class="home-header">
            <div>
                <img src="../assets/64.gif" alt=""/>
                <span>电商管理系统</span>
            </div>
            <el-button @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px" class="home-aside">Aside</el-aside>
            <el-main class="home-main">Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Home",
        methods: {
            logout() {
                // 删除本地的token
                window.sessionStorage.clear();
                // 用编程式路由跳转到登录页面
                this.$router.push('/login')
            }
        }
    }
</script>

<style lang="less" scoped>
    // header 的背景色
    .home-header{
        background-color: #242424;
        display: flex;
        // 左右两边对齐
        justify-content: space-between;
        //左边icon 到左边不留空
        padding-left: 0;
        //退出按钮上下居中对齐
        align-items: center;
        // 字体的颜色
        color: #ffffff;
        // 这里的> 表示控制的是el-header 下的子标签，孙标签不起作用
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    // 左边栏的背景色
    .home-aside{
        background-color: #262626;
    }
    // 主区域的背景色
    .home-main{
        background-color: #d8d8d8;
    }
    // 布局撑满全屏
    .home-container{
        height: 100%;
    }
</style>