<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>