a_1.png

a_2.png

a_3.png

<template>
    <div class="header">
        <!-- 左側(cè)菜單折疊按鈕 -->
        <div class="menuIcon" @click="foldChange">
            <i class="el-icon-menu"></i>
        </div>
        <!-- 文字logo -->
        <div class="logo">NCIT在線教育管理平臺</div>
        <!-- 右側(cè)頭像等菜單 -->
        <div class="menuRight">
            <div class="rightView">
                <!-- 全屏按鈕 -->
                <div class="btn-fullscreen" @click="handleFullScreen">
                    <!-- 黑色調(diào) 顯示文字 顯示位置 -->
                    <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">
                        <!-- 點擊圖標 路由跳轉(zhuǎn)到 目標 -->
                        <router-link to="/home">
                            <i class="el-icon-bell"></i>
                        </router-link>
                    </el-tooltip>
                    <!-- 上面的消息數(shù)量提示: msgNum有值時顯示 -->
                    <span class="msgNumBadge" v-if="msgNum"></span>
                </div>
                <!-- 用戶頭像 -->
                <div class="userIcon">
                    <img src="../../assets/img/test.png">
                </div>
                <!-- 用戶名下拉菜單 trigger    觸發(fā)下拉的行為 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',//消息數(shù)量
            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);//存儲登錄狀態(tài)
                this.$router.push('/login');//按路由規(guī)則跳轉(zhuǎn)
            }
        }
    },
    mounted(){//模板已經(jīng)編譯
        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;/* 其內(nèi)圖標、文字為22px */
    color: white; /* 其內(nèi)圖標文字為白色 */
}
.menuIcon{
    float: left; /* 向左浮動 */
    line-height: 70px; /* 行高70px */
    padding: 0 24px; /* 內(nèi)邊距 左右都為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); /* 旋轉(zhuǎn)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>