|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="flexJob-card-wrapper"> | 
|---|
|  |  |  | <div class="flexJob-card-top-wrapper"> | 
|---|
|  |  |  | <UserAvatar :size="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-gender"> | 
|---|
|  |  |  | <img v-if="1" :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> | 
|---|
|  |  |  | <div class="flexJob-card-top-info-detail">{{ '26岁 | 非学生 | 本科 | 上岗121次' }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <FlexJobTopView | 
|---|
|  |  |  | :name="name" | 
|---|
|  |  |  | :age="age" | 
|---|
|  |  |  | :avatar="avatar" | 
|---|
|  |  |  | :gender="gender" | 
|---|
|  |  |  | :isReal="isReal" | 
|---|
|  |  |  | :personalIdentityContent="personalIdentityContent" | 
|---|
|  |  |  | :educationalBackgroundContent="educationalBackgroundContent" | 
|---|
|  |  |  | :taskCount="taskCount" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <div class="flexJob-card-done-list"> | 
|---|
|  |  |  | {{ | 
|---|
|  |  |  | '做过:客房服务员、客房服务员、客房客房服务员、客房做过:客房服务员、客房服务员、客房客房服务员、客房' | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | {{ workExperience }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="flexJob-card-done-detail"> | 
|---|
|  |  |  | <div class="flexJob-card-done-detail-item"> | 
|---|
|  |  |  | {{ '在「宁波雷迪森酒店」,做过客房服务员在「宁波雷迪森酒店」,做过客房服务员' }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="flexJob-card-done-detail-item">{{ '在「宁波雷迪森酒店」,做过客房服务员' }}</div> | 
|---|
|  |  |  | <div class="flexJob-card-done-detail" v-if="showDoneDetail"> | 
|---|
|  |  |  | <div class="flexJob-card-done-detail-item">{{ workSeniority }}</div> | 
|---|
|  |  |  | <!-- <div class="flexJob-card-done-detail-item">{{ '在「宁波雷迪森酒店」,做过客房服务员' }}</div> --> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="flexJob-card-footer"> | 
|---|
|  |  |  | <div class="flexJob-card-footer-left" v-if="showFooterLeft"> | 
|---|
|  |  |  | <slot name="footerLeft"> | 
|---|
|  |  |  | <div class="flexJob-card-footer-text">取消收藏</div> | 
|---|
|  |  |  | </slot> | 
|---|
|  |  |  | <div class="flexJob-card-footer-left-wrapper"> | 
|---|
|  |  |  | <div class="flexJob-card-footer-left" v-if="showFooterLeft"> | 
|---|
|  |  |  | <slot name="footerLeft"> | 
|---|
|  |  |  | <div class="flexJob-card-footer-text" @click.stop="emit('cancelCollection')"> | 
|---|
|  |  |  | 取消收藏 | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div class="flexJob-card-footer-right" v-if="showFooterRight"> | 
|---|
|  |  |  | <slot name="footerRight"> | 
|---|
|  |  |  | <nut-button type="primary">立即联系</nut-button> | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import IconMale from '@/assets/mine/icon-male.png'; | 
|---|
|  |  |  | import IconFemale from '@/assets/mine/icon-female.png'; | 
|---|
|  |  |  | import { CommonTaskCardProps } from './card'; | 
|---|
|  |  |  | import FlexJobTopView from './FlexJobTopView.vue'; | 
|---|
|  |  |  | import { EnumUserGender } from '@12333/constants'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | name: 'FlexJobCard', | 
|---|
|  |  |  | 
|---|
|  |  |  | type Props = CommonTaskCardProps & { | 
|---|
|  |  |  | showFooterLeft?: boolean; | 
|---|
|  |  |  | showFooterRight?: boolean; | 
|---|
|  |  |  | showDoneDetail?: boolean; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | name?: string; | 
|---|
|  |  |  | avatar?: string; | 
|---|
|  |  |  | gender?: EnumUserGender; | 
|---|
|  |  |  | age?: number; | 
|---|
|  |  |  | isReal?: boolean; | 
|---|
|  |  |  | personalIdentityContent?: string; | 
|---|
|  |  |  | educationalBackgroundContent?: string; | 
|---|
|  |  |  | taskCount?: number; | 
|---|
|  |  |  | workExperience?: string; | 
|---|
|  |  |  | workSeniority?: string; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const props = withDefaults(defineProps<Props>(), { | 
|---|
|  |  |  | showFooterLeft: true, | 
|---|
|  |  |  | showFooterRight: true, | 
|---|
|  |  |  | showDoneDetail: true, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const emit = defineEmits<{ | 
|---|
|  |  |  | (e: 'cancelCollection'): void; | 
|---|
|  |  |  | }>(); | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss"> | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-wrapper { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | margin-bottom: 38px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-avatar { | 
|---|
|  |  |  | margin-right: 30px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-info { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-info-item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-info-name { | 
|---|
|  |  |  | font-size: 34px; | 
|---|
|  |  |  | line-height: 34px; | 
|---|
|  |  |  | font-weight: bold; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'primary'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-info-gender { | 
|---|
|  |  |  | display: inline-flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | height: 34px; | 
|---|
|  |  |  | margin: 0 10px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-info-gender-icon { | 
|---|
|  |  |  | width: 24px; | 
|---|
|  |  |  | height: 24px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-info-auth { | 
|---|
|  |  |  | font-size: 28px; | 
|---|
|  |  |  | line-height: 34px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-top-info-detail { | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | line-height: 28px; | 
|---|
|  |  |  | margin-top: 12px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'secondary'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-done-list { | 
|---|
|  |  |  | 
|---|
|  |  |  | .flexJob-card-footer { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | border-top: #d9d9d9 1px solid; | 
|---|
|  |  |  | padding-top: 24px; | 
|---|
|  |  |  | margin-top: 18px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-footer-left-wrapper { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | min-width: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .flexJob-card-footer-left { | 
|---|
|  |  |  | .flexJob-card-footer-text { | 
|---|
|  |  |  | 
|---|
|  |  |  | .flexJob-card-footer-right { | 
|---|
|  |  |  | --nut-button-default-font-size: 24px; | 
|---|
|  |  |  | --nut-button-default-height: 52px; | 
|---|
|  |  |  | --nut-button-default-line-height: 49px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .nut-button { | 
|---|
|  |  |  | min-width: 144rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|