<template>
  <div id="main-header">
    <div class="logo"></div>
    <div class="title">排班绩效系统</div>
    <user-center :user-avator="userAvatar" class="user-center" />
  </div>
</template>

<script>
import userCenter from '@@c/user-center'
export default {
  components: {
    userCenter
  },
  data () {
    return {}
  },
  computed: {
    userAvatar () {
      return this.$store.state.user.avatarImgPath
    }
  }
}
</script>

<style lang="less" scoped>
#main-header {
  display: flex;
  align-items: center;
  //height: 60px;
  height: 60px;
  color: white;
  //background: linear-gradient(#d3394f, #a72432);
  background: url('~@/assets/images/nav_top.jpg');
  .logo {
    width: 194px;
    height: 100%;
    .bg-url-center('~@/assets/images/logo.png');
    zoom: 0.9;
  }
  .title {
    margin-left: 16px;
    font-size: 28px;
    font-weight: bold;
  }
  .user-center {
    margin-left: auto;
    margin-right: 16px;
  }
}
</style>
