graphite_vue/src/views/components/Header.vue

<template>
    <div class="header">
        <div class="header_logo">
            <img :src="logo" class="logo"/>
            <div>长春黄金研究院有限公司</div>
        </div>
        <div class="header_time">
            {{ currentTime }}
        </div>
        <div class="header_user">
            <img :src="AvatarSvg" width="20px" height="20px"/>
            <div class="user_name" @click="onShowMenu">Admin</div>
            <div class="user_opt" v-show="showUserMenu">
                <div class="updatePwd" @click="onUpdatePwd">
                    <img :src="PwdSvg" style="width: 1.25rem; height: 1.25rem;" />
                    修改密码
                </div>
                <div class="login_out" @click="onLoginout">
                    <img :src="OutSvg" style="width: 1.25rem; height: 1.25rem;"/>
                    退出登录</div>
            </div>
        </div>
        <OverlayModal :visible="updatePwdVisible">
            <UpdatePwd @cancel="onCancelUpdate"></UpdatePwd>
        </OverlayModal>
    </div>
</template>
<script lang="ts" setup>
    import logo from '@/assets/logo.svg'
    import AvatarSvg from '@/assets/avatar.svg'
    import OutSvg from '@/assets/out.svg'
    import PwdSvg from '@/assets/pwd.svg'
    import { ref, onMounted } from 'vue'
    import OverlayModal from '@/components/OverlayModal.vue'
    import UpdatePwd from '../components/UpdatePwd.vue'
    import {eventBus} from '@/eventBus'
    import { useRouter } from 'vue-router'
    import { getFormattedDateTime } from '@/utils' 
    const router = useRouter()
    const menuId = ref(0)
    const time = getFormattedDateTime()
    const showUserMenu = ref(false)
    const currentTime = ref(time)
    onMounted(()=>{
        //测试页面返回时，需要调整菜单 
        // eventBus.on('menuId', (value:number)=>{
        //     menuId.value = value
        // })
    })

    const updatePwdVisible = ref(false)

    const onUpdatePwd = () => {
        updatePwdVisible.value = true;
    }

    const onLoginout = () => {
        router.push('/login')
    }

    const onShowMenu = () => {
        showUserMenu.value = !showUserMenu.value;
    }

    const onCancelUpdate = () => {
        updatePwdVisible.value = false;
    }
</script>
<style lang="scss" scoped>
    @use "@/assets/style/mixin.scss" as *;
    .header{
        display: flex;
        align-items: center;
        background: #F6F6F6;
      padding: 0 20px;
      height: var(--headerHeight);
        .header_logo{
            display: flex;
            font-size: 1.125rem;
            align-items: center;
            width: 21.875rem;
            color: #8799AB;
            gap: 5px;
            padding-left: 1.5625rem;
            
            .logo{
                height:2.75rem;
                width:2.625rem;
            }
        }
        
        .header_time{
            width: 11.875rem;
            height: 2.5rem;
            font-size: .875rem;
            display: flex;
            align-items: center;
            margin-left: 54%;
            background: white;
            justify-content: center;
            border-radius: 10px;
        }

        .header_ins{
            display: flex;
            align-items: center;
            border-radius: 5px;
            width: 13.875rem;
            height: 2.5rem;
            background: #FFFFFF;
        }

        .header_container{
            margin-left: 3.125rem;
            display: flex;
            align-items: center;
            border-radius: 5px;
            width: 15.625rem;
            height: 2.5rem;
            background: #FFFFFF;
            .waste_status{
                padding:5px 5px;
                width: 75%;
            }

            .waste_detail{
                display: flex;
                justify-content: flex-end;
                width: 40%;
            }
        }

        .header_user{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
            margin-left: .9375rem;            

        }

        .user_name{
            font-size: 1rem;
            color: #393F46;
        }

        .user_opt{
            width: 10rem;
            height: 6.25rem;
            position:absolute;
            top:3rem;
            background: #ffffff;

            .updatePwd{
                color: #323233;
                font-size: 1.125rem;
                display: flex;
                justify-content: center;
                margin-top: 1.5rem;
                gap: 15px;
            }

            .login_out{
                color: #323233;
                font-size: 1.125rem;
                display: flex;
                justify-content: center;
                margin-top: .5rem;
                gap: 15px;
            }
        }
    }

    .circle {
      width: .9375rem; 
      height: .9375rem; 
      background-color: green; 
      border-radius: 50%; 
      margin-left: .3125rem;
    }

    :deep(.van-dropdown-menu__bar){
        background-color: #1871F8;
        border-radius: 5px;
        height: .1rem;
        width: 2.875rem;
        .van-ellipsis{
            color:white;
        }    
        
    }

    :deep(.van-dropdown-item__content){
        width: 4.75rem;
        margin-left: 5.375rem;
    }

    .text_size{
        font-size:1rem;
        padding-right: 5px;
    }
    
</style>