【vue组件】--后台管理头部（1）

HTML代码

<template>
  <div class="headernav">
    <div class="nav">
      <img src="../../static/image/banner4.png" alt="" class="navlogo">
      <div class="rightcon">
        <img src="../../static/image/banner4.png" alt="" class="userlogo">
        <span class="usermsg">
          <h1 class="username">{{username}}</h1>
          <h1 class="userid">ID:{{userid}}</h1>
        </span>
        <button class="out"><a href=""><i class=" iconfont icon-tuichu"></i>退出</a></button>
      </div>
    </div>
  </div>
</template>

script代码

<script>
  export default {
    name: 'headernav',
    data() {
      return {
        username: '地主家傻儿子',
        userid: '222222222'
      }
    }
  }
</script>

CSS代码

<style>
  .headernav {
    width: 100%;
    height: 60px;
    background: #252525;
  }

  .headernav .nav {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .headernav .nav .navlogo {
    width: 60px;
    height: 30px;
    padding: 15px 30px;
  }

  .headernav .nav .rightcon {
    text-align: left;
  }

  .headernav .nav .rightcon .userlogo {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin: 10px;

  }

  .headernav .nav .rightcon .usermsg {
    display: inline-block;
    vertical-align: top;
    padding: 10px 5px;
  }

  .headernav .nav .rightcon .usermsg h1 {
    line-height: 20px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
  }.headernav .nav .rightcon .out{
    height: 30px;
    margin: 15px 0;
    padding: 0 10px;
    background: #FF0000;
  }
  .headernav .nav .rightcon .out a{
    color: #fff;
    line-height: 30px;
    font-size: 12px;
  }
  .headernav .nav .rightcon .out a i{
    margin-right: 5px;
  }
</style>

案例显示