FE_occupationlab_client/src/layouts/header/index.vue

<template>
    <div class="header">
        <div v-if="this.$route.path=='/setting/person'" class="goBack" @click="back"><i class="el-icon-arrow-left"></i>返回</div>
        <template v-else>
            <div>
                <img class="logo" :src="logoUrl" />
                <span class="title">{{title}}</span>
            </div>
        </template>
        <div class="header-right">
            <div class="header-user-con">
                <div class="user" @click="toPersonal">
                    <el-avatar :size="40" :src="avatar"></el-avatar>
                    <span class="user-avator">{{ userName }}</span>
                </div>
                <el-divider class="ml20" direction="vertical"></el-divider>
                <el-button type="text" class="ml20" @click="logout">退出</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";

export default {
    data() {
        return {

        };
    },
    computed: {
        ...mapState("user", [
            "title", "logoUrl", "avatar", "userName"
        ])
    },
    mounted() {
        this.getSystemDetail();
        this.getUserInfo();
    },
    methods: {
        ...mapActions("user", [
            "logout", "setTitle", "setLogoUrl", "setAvatar", "setUserName"
        ]),
        getSystemDetail () {
            this.$get(this.api.logoDetail).then(res => {
                if (res.data) {
                    this.setTitle(res.data.title);
                    this.setLogoUrl(res.data.logoUrl);
                }
            }).catch(res => {});
        },
        getUserInfo() {
            this.$get(this.api.queryUserInfoDetails).then(res => {
                let {userAvatars, userName} = res.result.hrUserInfo;
                userAvatars && this.setAvatar(userAvatars);
                this.setUserName(userName);
            }).catch(err => {})
        },
        toPersonal() {
            this.$router.push("/setting/person");
        },
        back() {
            this.$router.go(-1);
        }
    }
};
</script>
<style scoped lang="scss">
.goBack {
    cursor: pointer;
    line-height: 60px;
    height: 60px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 20px;
}

.goBack i {
    color: #9278ff;
    font-size: 20px;
}

.header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    font-size: 16px;
    color: #333;
    .logo {
        height: 50px;
        margin: 0 20px;
    }
    .title {
        font-size: 18px;
        font-weight: bold;
    }
}

.header-right {
    padding-right: 50px;
}

.header-user-con {
    display: flex;
    align-items: center;

    .user {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
}

.user-avator {
    margin-left: 10px;
    font-size: 12px;
}

.ml20 {
    margin-left: 20px;
}

.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.header-right .el-button--text {
    color: #333;
}

.header-right .el-divider--vertical {
    width: 2px;
    height: 15px;
}

.header-right .el-divider {
    background-color: #333;
}
</style>