hxgksystemapp/src/views/dashboard/components/userinfo.vue

<!--
@ 作者: 秦东
@ 时间: 2023-11-07 09:48:35
@ 备注: 当前登陆人信息
-->
<script lang='ts' setup>
import UserRole from '@/assets/icons/user.svg'
const props = defineProps({
	userStore:{
		type:Object,
		default(){
			return {}
		}
	}
})
// const userStore = props.userStore
// onMounted(()=>{

// })
</script>
<template>
	<el-card shadow="always" :body-style="{ padding: '10px'  }" style = "border-radius: 12px;margin-top: 10px;; min-height: 335px">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="12" :md="11" :lg="11" :xl="10" class="readback">
					<!--人员头像-->
					<el-avatar shape="square" fit="cover" :src="props.userStore.avatar!=''?props.userStore.avatar:UserRole" style="width:100%; height:130px;" />
				</el-col>
				<el-col :xs="24" :sm="12" :md="13" :lg="13" :xl="14" class="greenColor">
					<!--人员信息-->
					<el-descriptions :column="1">
						<el-descriptions-item>
							<template #label>
								<span class="fa fa-user-o span_icon_left"></span> 姓名
							</template>
							{{props.userStore.userInfoCont.nickname}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<span class="fa fa-vcard-o span_icon_left"></span>工号
							</template>
							{{ props.userStore.userInfoCont.number }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<span class="fa fa-transgender-alt span_icon_left"></span>性别
							</template>
							{{ props.userStore.userInfoCont.genderstr }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<span class="fa fa-volume-control-phone span_icon_left"></span>电话
							</template>
							{{ props.userStore.userInfoCont.mobilephone }}
						</el-descriptions-item>
					</el-descriptions>
				</el-col>
			</el-row>
			<el-row>
				<el-col :xs="4" :sm="7" :md="6" :lg="5" :xl="5"><span class="fa fa-map-marker span_icon_left"></span>住址</el-col>
				<el-col :xs="20" :sm="17" :md="18" :lg="19" :xl="19"><el-text>{{ props.userStore.userInfoCont.currentresidence }}</el-text></el-col>
			</el-row>
			<el-row>
				<el-col :xs="4" :sm="7" :md="6" :lg="5" :xl="5"><span class="fa fa-podcast span_icon_left"></span>职务</el-col>
				<el-col :xs="20" :sm="17" :md="18" :lg="19" :xl="19"><el-text v-for="(im,index) in props.userStore.userInfoCont.postlist" :key="index">{{im}}</el-text></el-col>
			</el-row>
			
	</el-card>
</template>
<style  lang='scss' scoped>
.span_icon_left{
	margin-right:5px;
	
}
</style>