reservation-ssr/components/default/adminHeader.vue

<template>
<div class="header">
  <div class="container">
    <el-row>
      <el-col :span="6">
        <div class="f-title">
          <img src="" alt="">
          <span>商家预约后台管理系统</span>
        </div>
      </el-col>
      <el-col :span="8">
        <ul class="f-nav">
          <li class="active"><span>首页</span></li>
          <li><span>消息</span><i>23</i></li>
        </ul>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
  export default {
    name: 'adminHeader'
  }
</script>

<style scoped type="text/scss" lang="scss">
  // 头部信息
  .header{
    background: #2f95dd;
    height:50px;
    vertical-align: middle;
    .f-title{
      img{
        display:inline-block;
        width:36px;
        height:36px;
        border-radius:50%;
        background: #fff;
        margin-top:7px;
      }
      span{
        font-size: 18px;
        font-weight: bold;
        color:#fff;
        margin-left:15px;
        vertical-align: top;
        line-height: 50px;
      }
    }
    .f-nav{
      margin-left:30px;
      li{
        display:inline-block;
        position:relative;
        width:75px;
        margin:0 50px;
        text-align: center;
        &.active:after{
          position:absolute;
          bottom:0;
          left:50%;
          margin-left:-7px;
          display:block;
          content: '';
          width:0;
          height:0;
          border:7px solid #2f95dd;
          border-bottom:7px solid #fff;
        }
        span{
          line-height: 50px;
          font-size: 16px;
          color:#fff;
        }
        i{
          position:absolute;
          top:7px;
          right:-3px;
          display:block;
          width:24px;
          height:24px;
          line-height: 24px;
          background: #e35b61;
          border-radius:50%;
          text-align: center;
          font-size: 12px;
          font-style:normal;
          color:#fff;
        }

      }
    }
  }

</style>