menduner-uniapp/pagesB/personnelDetails/components/baseInfo.vue

<template>
	<view>
		<view class="d-flex">
			<view class="user-avatar">
				<image class="user-avatar-img" :src="getUserAvatar(data?.avatar, data?.sex)" alt="" mode="scaleToFill" />
				<image class="user-avatar-sex" :src="data?.sex ? data?.sex === '1' ? '/static/img/man.png' : '/static/img/female.png' : ''" alt="" mode="scaleToFill" />
			</view>
			<view class="user-left">
				<view class="user-name">{{ data?.name }}</view>
				<view class="ss-m-t-10">
					<span 
						class="color-666"
					 	v-for="(key, index) in desc" 
					 	:key="index"
					>
						{{ data[key] }}
						<span v-if="index !== desc.length - 1 && data[key]" class="ss-m-x-10">|</span>
					</span>
				</view>
			</view>
		</view>
		<view class="ss-m-t-10">
      <uni-tag 
        v-for="(tag,i) in data?.tagList || []"
        :key="i"
        class="tag-gap ss-m-r-10"
        :text="tag"
        inverted="false"
        size="medium"
        custom-style="background-color: #ececec; color: #666; border-color: #ececec; display: inline-block;margin-bottom: 10px;"
      />
    </view>
	</view>
</template>

<script setup>
defineProps({ data: Object })
import { getUserAvatar } from '@/utils/avatar'

const desc = ['jobStatusName', 'eduName', 'expName']
</script>

<style scoped lang="scss">
.user-avatar {
	position: relative;
	&-img {
		width: 65px;
		height: 65px;
		border-radius: 50%;
	}
	&-sex {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 20px;
		height: 20px;
		background-color: #fff;
		border-radius: 50%;
	}
}
.user-left {
	flex: 1;
	margin-left: 10px;
	.user-name {
		font-size: 25px;
		font-weight: 600;
		color: #0E100F;
	}
}
</style>