Header.vue

<template>
<div class="head">
    <div @click="headerShow" class="left">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="cont">问答系统</div>
    <div class="right">
        <!-- <el-icon :size="22"><FullScreen /></el-icon> -->
    </div>
</div>
</template>

<script setup>
import emitter from "../utils/bus"
const headerShow = ()=>{
    emitter.emit('childData')
}
</script>

<style lang="less" scoped>
.head{ 
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(216, 216, 216, 0.8);
    padding: 0 10px;
    .cont{
        color: rgb(160, 162, 162);
    }
    .left{
        cursor: pointer;
        &>span{
           display: block;
           width: 25px;
           height: 1px;
           border-radius: 3px;
           &:nth-child(1){
            border-bottom: 3px solid greenyellow;
            margin-bottom: 3px;
           }
           &:nth-child(2){
            border-bottom: 3px solid orange;
            margin-bottom: 3px;
           }
           &:last-child{
            border-bottom: 3px solid red;
           
           }
        }
    }
    .right{
        height: right;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>