header.vue

<template>
  <el-container>
    <el-header>
      <el-row :gutter="0">
        <el-col :xs="16" :sm="18" :md="20" :lg="21" :xl="22">
          <div class="grid-content bg-purple logo_icon">
            <img :src="require('../../assets/images/haitai_logo.png')" style="width:30px;height:26px;margin:10px 12px;" alt="logo" />
          </div>
          <div class="logo_name">智慧护理管理端</div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2">
           <div class="head_img"></div>
          <span class="grid-content bg-purple user_info">{{ userCode }}</span>
        </el-col>
      </el-row>
    </el-header>
  </el-container>
</template>

<script>
import headImg from "../../assets/images/head_portrait.png";
export default {
  data() {
    console.log(localStorage);
    return {
      userCode: JSON.parse(localStorage.getItem("userInfo")).userCode
    };
  }
};
</script>
<style lang="scss">
.el-header {
  background-color: #ffffff;
	box-shadow: 0px 1px 4px 0px 
		rgba(0, 21, 41, 0.12);
  color: #333;
  line-height: 48px;
  padding: 0 !important;
  height:48px !important;
  .el-row{
    margin:0 !important;
  }
  .el-col{
     padding: 0 !important;
  }
}
.logo_icon {
  text-align: left;
  height: 48px;
  width:54px;
  display:inline-block;
  float:left;
  img {
    width:30px;
    height:26px;
    margin:10px 12px;
  }
}
.logo_name{
  font-size: 16px;
	line-height: 48px;
	color: #262626;
	opacity: 0.85;
  display:inline-block;
  float:left;
}
.user_info {
  text-align: right;
}
.head_info {
  text-align: right;
}
.head_img {
  width: 24px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  background:url(../../assets/images/head_portrait.png) no-repeat center;
  background-size: 24px 24px;
}
</style>