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>