2.头部

a_1.png a_2.png a_3.png

<template>
    <div class="header">
        <!-- 左侧菜单折叠按钮 -->
        <div class="menuIcon" @click="foldChange">
            <i class="el-icon-menu"></i>
        </div>
        <!-- 文字logo -->
        <div class="logo">NCIT在线教育管理平台</div>
        <!-- 右侧头像等菜单 -->
        <div class="menuRight">
            <div class="rightView">
                <!-- 全屏按钮 -->
                <div class="btn-fullscreen" @click="handleFullScreen">
                    <!-- 黑色调 显示文字 显示位置 -->
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
                </div>
                <!-- 消息按钮 -->
                <div class="btn-msg">
                    <el-tooltip effect="dark" :content="msgNum?`有${msgNum}条未读消息`:`消息中心`" placement="bottom">
                        <!-- 点击图标 路由跳转到 目标 -->
                        <router-link to="/home">
                            <i class="el-icon-bell"></i>
                        </router-link>
                    </el-tooltip>
                    <!-- 上面的消息数量提示: msgNum有值时显示 -->
                    <span class="msgNumBadge" v-if="msgNum"></span>
                </div>
                <!-- 用户头像 -->
                <div class="userIcon">
                    <img src="../../assets/img/test.png">
                </div>
                <!-- 用户名下拉菜单 trigger    触发下拉的行为 hover默认，指到时 , click点击时 -->
                <el-dropdown class="userName" trigger="hover" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item> -->
                        <!-- 在新标签页打开 自身 -->
                        <a href="#" target="_blank">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                        </a>
                        <!-- 显示分割线 -->
                        <el-dropdown-item divided=true command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
import storage from "../Tools/storage.js";
export default {
    data(){
        return{
            fullscreen:false, //是否全屏
            msgNum:'2',//消息数量
            username:'admin'//登录名
        }
    },
    methods:{
        foldChange(){
            console.log("菜单折叠按钮")
        },
        handleFullScreen(){
            console.log("全屏按钮")
        },
        handleCommand(command){//下拉菜单的点击事件
            console.log("下拉菜单被点击了")
            if(command == "loginout"){
                console.log("退出登录");
                let flag = false;
                storage.set('login',flag);//存储登录状态
                this.$router.push('/login');//按路由规则跳转
            }
        }
    },
    mounted(){//模板已经编译
        if(document.body.clientWidth < 1500){
            this.foldChange();
        }
    }
}
</script>
<style>
.header{
    background-color: #242f42;
    position: relative;
    box-sizing: border-box;
    width:100%;
    height: 70px;
    font-size: 22px;/* 其内图标、文字为22px */
    color: white; /* 其内图标文字为白色 */
}
.menuIcon{
    float: left; /* 向左浮动 */
    line-height: 70px; /* 行高70px */
    padding: 0 24px; /* 内边距 左右都为24px */
    cursor: pointer; /* 鼠标指上去后 指针变成一个小手的样子 */
}
.header .logo{
    float: left;
    line-height: 70px;
    width: 250px;
}
.menuRight{
    /* background-color: rgb(127, 255, 133); */
    float: right;
    padding-right: 50px;
    /* width: 250px; */
}
.rightView{
    /* background-color: red; */
    display: flex;  /* 弹性排列布局 */
    height: 70px;
    align-items: center;  /* 元素在主轴上的对齐方式  */
}
.btn-fullscreen{
    transform: rotate(45deg); /* 旋转45度 */
    font-size: 24px;
    margin-right: 5px;
}
.btn-msg .el-icon-bell{     /*  */
    color: white;
    font-size: 22px;
}
.btn-msg, .btn-fullscreen{
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.msgNumBadge{
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: white;
}
.userIcon{
    margin-left: 20px;
}
.userIcon img{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.userName{
    margin-left: 10px;
}
.el-dropdown-link{
    color: white;
    cursor: pointer; /* 鼠标指针变小手指 */
}
.el-dropdown-menu__item{
     text-align: center;
}




</style>