huikaifa/src/layouts/DefaultLayout/DefaultHeader/index.vue

<!--
 * @Author: WangJiaCheng
 * @Date: 2021-05-06 17:52:07
 * @LastEditors: wjc
 * @LastEditTime: 2021-09-24 11:00:02
 * @Description:
-->
<template>
  <el-header class="layout-header">
    <logo
      title="绘开发"
    />
    <span>
      <span class="name">wjc</span><el-avatar icon="el-icon-user-solid" />
    </span>
  </el-header>
</template>

<script>
import Logo from './Logo'

export default {
  name: 'DeafultHeader',
  components: {
    Logo
  }
}
</script>

<style lang="less">
  .layout-header {
    display: flex;
    justify-content: space-between;
    z-index: 102;
    margin-bottom: 2px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    color: #333;
    line-height: 60px;
    text-align: right;
    .name {
      margin-right: 8px;
    }
    span {
      vertical-align: middle;
    }
  }
</style>