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

<template>
	<view>
		<view class="d-flex">
			<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 class="user-avatar">
				<image :src="data?.avatar" alt="" mode="scaleToFill" />
			</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 })

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

<style scoped lang="scss">
.user-avatar image {
	width: 65px;
	height: 65px;
	border-radius: 50%;
}
.user-left {
	flex: 1;
	.user-name {
		font-size: 25px;
		font-weight: 600;
		color: #0E100F;
	}
}
</style>