topbar.vue

<template>
<div class="top-bar">
    <div class="top-bar-left">
        <div class="logo"></div>
        <span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span>
    </div>
    <div class="top-bar-right">
         <div class="avatar"></div>
         <div class="user-name f16 ">{{userName}}</div>
         <div class="line"></div>
         <div class="login-out"></div>
    </div>
</div>
</template>
<script>

export default{
    data() {
        return{
            userName:'admin,北京市政府'
        }
    },
    mounted(){

    },
    methods:{

    }
}
</script>
<style lang="less" scoped>
.top-bar{
    background-color: @party-red;
    width: 100%;
    height: 76px;
    line-height: 76px;
    padding:0 30px;
    overflow:hidden;
    .top-bar-left{
        float: left;
        .logo{
            width: 46px;
            height: 36px;
            display: inline-block;
            vertical-align: middle;
            background-color: pink;
        }
        .title{
           color: @party-white; 
           vertical-align: middle;
           padding-left: 16px;
        }
    }
    .top-bar-right{
        float: right;
        > *{
            display: inline-block;
            vertical-align: middle;
        }
        .avatar{
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: pink;
        }
        .user-name{
            font-size: 16px;
            line-height: 16px;
            color: @party-white;
        }
        .line{
            width: 2px;
            height: 18px;
            background-color: @party-white;
            margin: 0 15px;
        }
        .login-out{
            width: 20px;
            height: 20px;
            background-color: pink;
        }

    }
}

</style>