soc_app/src/components/TopBar.vue

<template>
  <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="introduce-info" v-for="item in rolesList" :key="item.roleId">{{orgName}} · {{item.roleName}}</p>
      </div>
      <van-icon name="arrow" size="20"  />
    </div>
  </div>
</template>
<script>
import { Icon } from 'vant';
import {mapGetters} from "vuex";
import {logout} from "@/api/public";
export default {
  components: {
    [Icon.name]: Icon,
  },
  data() {
    return {
      active: this.defaultActive,
      rolesList:[]
    }
  },
  computed: {
    ...mapGetters(['userName','orgName'])
  },
  created(){
    this.rolesList=JSON.parse(window.sessionStorage.getItem('SET_USER_ROLELIST'))
    console.log(this.rolesList);
  },
  methods: {
    clickOutLogin(){
      logout().then(res=>{
        sessionStorage.clear();
        this.$router.replace('/login');
        this.$toast('退出登录');
      })
    },
  }
}
</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>