soc_app/src/components/TopBar.vue

<template>
  <div class="top-bar">
    <div class="top-box">
      <span>移动安全保卫管理平台</span>
      <van-icon name="setting-o" size="26" />
    </div>
    <div class="bottom-box">
      <div>
        <p class="user-name">{{userName}}</p>
        <p class="introduce-info">福建省农村信用联合社 · 省联社安全保卫管理人员</p>
      </div>
      <van-icon name="arrow" size="20"  />
    </div>
  </div>
</template>
<script>
import { Icon } from 'vant';
import {mapGetters} from "vuex";
export default {
  components: {
    [Icon.name]: Icon,
  },
  data() {
    return {
      active: this.defaultActive
    }
  },
  computed: {
    ...mapGetters(['userName'])
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.top-bar{
  height:300px;
  width: 100%;
  background: url("../assets/img/banner.png") no-repeat center;
  background-size: 100% 100%;
  padding: 40px;
  box-shadow: 0 1px 8px #ccc;
  >div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
}
.top-box{
  >span{
    font-size: 40px;
  }
}
.bottom-box{
  padding-top:50px;
  >div{
    .user-name{
      font-size: 30px;
      margin-bottom: 20px;
    }
    .introduce-info{
      font-size: 20px;
    }
  }
}
</style>