| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="info"> |
| | | <view class="info_portrait"> |
| | | <image :src="userInfo.avatar ? userInfo.avatar : avatar" mode="widthFix" /> |
| | | <text>ç¨æ·å</text> |
| | | </view> |
| | | <view class="info_list"> |
| | | <view class="info_list_item"> |
| | | <text>æµç§°</text> |
| | | <text>{{userInfo.realname ? userInfo.realname : 'ææ æµç§°'}}</text> |
| | | </view> |
| | | <view class="info_list_item"> |
| | | <text>ææºå·</text> |
| | | <text>{{userInfo.companyUser.phone ? userInfo.companyUser.phone : 'ææ ææºå·'}}</text> |
| | | </view> |
| | | <view class="info_list_item"> |
| | | <text>æå±é¨é¨</text> |
| | | <text>{{userInfo.department.name ? userInfo.department.name : 'ææ æå±é¨é¨'}}</text> |
| | | </view> |
| | | <view class="info_list_item"> |
| | | <text>å²ä½</text> |
| | | <text>{{userInfo.companyUser.positionName ? userInfo.companyUser.positionName : 'ææ å²ä½'}}</text> |
| | | </view> |
| | | <view class="info_list_item"> |
| | | <text>å½åç»ç»</text> |
| | | <text>{{userInfo.rootDepartment.name ? userInfo.rootDepartment.name : 'ææ ç»ç»'}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | export default { |
| | | data() { |
| | | return { |
| | | avatar: require('@/static/2@2x.png'), |
| | | }; |
| | | }, |
| | | computed: mapState([ |
| | | 'userInfo' |
| | | ]) |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .info { |
| | | padding: 30rpx; |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | box-sizing: border-box; |
| | | background: white; |
| | | .info_portrait { |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | margin-top: 60rpx; |
| | | image { |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | margin-bottom: 30rpx; |
| | | } |
| | | text { |
| | | font-size: 30rpx; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | } |
| | | } |
| | | .info_list { |
| | | margin-top: 30rpx; |
| | | .info_list_item { |
| | | height: 98rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | border-bottom: 1rpx solid #E5E5E5; |
| | | text { |
| | | &:first-child { |
| | | font-size: 30rpx; |
| | | font-weight: 400; |
| | | color: #777777; |
| | | } |
| | | &:last-child { |
| | | font-size: 28rpx; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |