<template>
  <view class="header">
    <tui-card style="flex: 1;">
      <template>
        <tui-section title="姓名:">
          <view>{{userinfo.nickname}}</view>
        </tui-section>
        <tui-section title="单位:">{{userinfo.userId}}</tui-section>
        <tui-section title="岗位:">{{roleName}}</tui-section>
      </template>
    </tui-card>
    <tui-card style="width: 120px;height: 120px;;margin-left: 0;">
      <template>
        <image :src="userinfo.avatar?userinfo.avatar:'/static/images/person.jpg'"
               style=" width:120px; height:120px;"></image>
      </template>
    </tui-card>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["userinfo", "roleName"]),
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
}
</style>