|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div :class="['flexJob-card-top-wrapper', size]"> | 
|---|
|  |  |  | <UserAvatar :size="size === 'small' ? 50 : 60" class="flexJob-card-top-avatar" /> | 
|---|
|  |  |  | <Avatar :src="avatarUrl" :size="size === 'small' ? 50 : 60" class="flexJob-card-top-avatar" /> | 
|---|
|  |  |  | <div class="flexJob-card-top-info"> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-item"> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-name">{{ '洋洋' }}</div> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-name">{{ name }}</div> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-gender"> | 
|---|
|  |  |  | <img v-if="1" :src="IconMale" class="flexJob-card-top-info-gender-icon" /> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="genderType === Gender.Male" | 
|---|
|  |  |  | :src="IconMale" | 
|---|
|  |  |  | class="flexJob-card-top-info-gender-icon" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img v-else :src="IconFemale" class="flexJob-card-top-info-gender-icon" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-auth">{{ '已实名' }}</div> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-auth">{{ isRealName ? '已实名' : '未实名' }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <slot name="detail"> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-detail">{{ '26岁 | 非学生 | 本科 | 上岗121次' }}</div> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-detail"> | 
|---|
|  |  |  | {{ `${age}岁 | ${educationalLevel} |  ${educationalLevel} | 上岗${arrangeCount}次` }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import IconMale from '@/assets/mine/icon-male.png'; | 
|---|
|  |  |  | import IconFemale from '@/assets/mine/icon-female.png'; | 
|---|
|  |  |  | import { AvatarImage, Gender } from '@12333/constants'; | 
|---|
|  |  |  | import { Avatar } from '@12333/components'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | name: 'FlexJobTopView', | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | type Props = { | 
|---|
|  |  |  | size?: 'normal' | 'small'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | avatarUrl?: string; | 
|---|
|  |  |  | name?: string; | 
|---|
|  |  |  | genderType?: Gender; | 
|---|
|  |  |  | age?: number; | 
|---|
|  |  |  | educationalLevel?: string; | 
|---|
|  |  |  | arrangeCount?: number; | 
|---|
|  |  |  | isRealName?: boolean; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const props = withDefaults(defineProps<Props>(), { | 
|---|
|  |  |  | size: 'normal', | 
|---|
|  |  |  | avatarUrl: AvatarImage, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|