CKQ/src/components/Header.vue

<template>
    <div id="app-header">
        <span class="title">采空区信息化管理系统</span>
        <div class="time">{{ time }}</div>
        <div class="user"><el-icon><User /></el-icon><span class="welcome">欢迎您，{{ user?.accountName||'***' }}</span></div>
    </div>
</template>
<script>
import {parseTime} from '@/utils'
import { mapState } from 'pinia'
import { useStore } from '@/store/modules/user'
import {getUserProfile} from '@/api/system'
export default {
    name:'AppHeader',
    data(){
        return{
            time:parseTime(new Date(),'{y}.{m}.{d} {h}:{i}:{s}'),
            timer:null
        }
    },
    computed: {
        ...mapState(useStore,{
            "user":'user'
        })
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            this.timer=setInterval(()=>{
                this.getnow()
            },1000)
            this.saveUserInfo()
        },
        getnow(){
            this.time = parseTime(new Date(),'{y}.{m}.{d} {h}:{i}:{s}')
        },
        saveUserInfo(){
            const store=useStore()
            getUserProfile().then((res)=>{     
                store.$patch({
                    user:res.data
                })                               
                localStorage.setItem('user',JSON.stringify(res.data))
            })
        },
    },
    destroyed() {
        if(this.timer){
            clearInterval(this.timer)
        }
    },
}
</script>
<style lang="scss" scoped>
#app-header{
    height: 8.89vh;
    background-image: url(@/assets/images/header.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
    line-height:8vh;
    position: relative;
    .title{
        font-size: 36.6px;
        font-family: 'YouSheBiaoTiHei';
        letter-spacing: 4px;
    }
    .time{
        color: #32C5FF;
        font-size: 18px;
        position: absolute;
        left: 20px;
        bottom: -1.5vh;
    }
    .user{
        color: #32C5FF;
        font-size: 18px;
        position: absolute;
        right: 20px;
        bottom: -1.5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        .welcome{
            text-indent: 5px;
        }
    }
}
</style>