soc_app/src/components/TopBar.vue

<template>
  <div class="top-bar-box">
    <div class="top-bar">
      <div class="top-box">
        <span>移动安全保卫管理平台</span>
        <van-icon name="setting-o" size="26" @click="clickOutLogin" />
      </div>
      <div class="bottom-box">
        <div>
          <p class="user-name">{{ userName }}</p>
          <p class="org-info">
            <span>{{ orgName }}</span>
            <van-icon name="arrow" size="20" />
          </p>
          <p class="van-multi-ellipsis--l2 introduce-info ">
            <span v-for="item in roleList" :key="item.roleId">{{ item.roleName }}</span>
          </p>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { logout } from '@/api/public'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['userName', 'orgName','roleList', 'orgId']),
  },
  methods: {
    clickOutLogin() {
      logout().then(res => {
        sessionStorage.clear();
        this.$router.replace('/login');
        this.$toast('退出登录');
      })
    },
  }
}
</script>

<style scoped lang="scss">
.top-bar-box{
  position: relative;
}
.top-bar {
  height: 300px;
  width: 100%;
  background: url('../assets/img/banner.png') no-repeat center rgba(255,255,255,.1);
  background-size: 100% 100%;
  padding: 40px 40px 20px 40px;
  text-shadow: 0 1px 3px #666;
  box-shadow: 0 1px 10px #5ebaee;
  color: #fff;
  > div {
    width: 100%;
  }
}

.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    font-size: 40px;
  }
}
.bottom-box {
  padding-top: 30px;
  > div {
    .user-name {
      font-size: 30px;
      margin-bottom: 10px;
    }
    .org-info{
      font-size: 28px;
      display: flex;
      justify-content: space-between;
    }
    .introduce-info {
      font-size: 24px;
      line-height: 34px;
      >span{
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
}
</style>