Header.vue

<template>
    <div class="self-header">
        <h2 class="self_header_label">新一代银行国际结算系统</h2>
        <div class="user-operate">
            <span @click="logout">退出登录</span>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        logout() {
            this.$store.commit("UserContext/setLogout");
            this.$router.push("/login");
        }
    }
}
</script>

<style>
 
    .self-header{
        height: 100%;
        /* background-color: #eeeeee; */
        /* margin-bottom: 5px; */
        background-image: url("../../assets/head_bg.png");
    }
    .self-header h2{
        margin: 0;
        padding: 0;
    }
    .self_header_label{
        color: antiquewhite;
        /* margin-top: 10px !important; */
        position: relative;
        top:15px;
        left:2em;
    }
    .user-operate{
        position: absolute;
        right: 20px;
        color: #FFF;
    }
    .user-operate span{
        cursor: pointer;
    }
    .user-operate span:hover{
        color: #e6a23c;
    }
</style>