| <template> | 
|     <div class="info"> | 
|         <div class="info_portrait"> | 
|             <img :src="store.state.userInfo.avatar ? store.state.userInfo.avatar : avatar" alt="" /> | 
|             <span>{{store.state.userInfo.companyUser.name}}</span> | 
|         </div> | 
|         <div class="info_list"> | 
|             <div class="info_list_item"> | 
|                 <span>昵称</span> | 
|                 <span>{{store.state.userInfo.realname ? store.state.userInfo.realname : '暂无昵称'}}</span> | 
|             </div> | 
|             <div class="info_list_item"> | 
|                 <span>手机号</span> | 
|                 <span>{{store.state.userInfo.companyUser.phone ? store.state.userInfo.companyUser.phone : '暂无手机号'}}</span> | 
|             </div> | 
|             <div class="info_list_item"> | 
|                 <span>所属部门</span> | 
|                 <span>{{store.state.userInfo.department.name ? store.state.userInfo.department.name : '暂无所属部门'}}</span> | 
|             </div> | 
|             <div class="info_list_item"> | 
|                 <span>岗位</span> | 
|                 <span>{{store.state.userInfo.companyUser.positionName ? store.state.userInfo.companyUser.positionName : '暂无岗位'}}</span> | 
|             </div> | 
|             <div class="info_list_item"> | 
|                 <span>当前组织</span> | 
|                 <span>{{store.state.userInfo.rootDepartment.name ? store.state.userInfo.rootDepartment.name : '暂无组织'}}</span> | 
|             </div> | 
|         </div> | 
|     </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
|     import { useStore } from "vuex" | 
|   | 
|     const store = useStore() | 
|   | 
|     let avatar: any = require('@/assets/icon/2@2x.png') | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .info { | 
|     padding: 30px; | 
|     position: absolute; | 
|     width: 100%; | 
|     height: 100%; | 
|     box-sizing: border-box; | 
|     background: white; | 
|     .info_portrait { | 
|         display: flex; | 
|         align-items: center; | 
|         flex-direction: column; | 
|         margin-top: 60px; | 
|         img { | 
|             width: 140px; | 
|             height: 140px; | 
|             margin-bottom: 30px; | 
|         } | 
|         span { | 
|             font-size: 30px; | 
|             font-weight: 400; | 
|             color: #222222; | 
|         } | 
|     } | 
|     .info_list { | 
|         margin-top: 30px; | 
|         .info_list_item { | 
|             height: 98px; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: space-between; | 
|             border-bottom: 1PX solid #E5E5E5; | 
|             span { | 
|                 &:first-child { | 
|                     font-size: 30px; | 
|                     font-weight: 400; | 
|                     color: #777777; | 
|                 } | 
|                 &:last-child { | 
|                     font-size: 28px; | 
|                     font-weight: 400; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|         } | 
|     } | 
| } | 
| </style> |