feat: 接口对接

wupengfei

2025-03-11 286f1b727856d6b32a8d237f353ae008f3076deb

 packages/components/src/Card/FlexJobTopView.vue

@@ -1,16 +1,24 @@
<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>
      <div class="flexJob-card-top-info-detail">{{ '26岁 | 非学生 | 本科 | 上岗121次' }}</div>
      <slot name="detail">
        <div class="flexJob-card-top-info-detail">
          {{ `${age}岁 | ${educationalLevel} |  ${educationalLevel} | 上岗${arrangeCount}次` }}
        </div>
      </slot>
    </div>
  </div>
</template>
@@ -18,6 +26,8 @@
<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',
@@ -25,10 +35,19 @@

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>

@@ -46,6 +65,8 @@
  .flexJob-card-top-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;

    .flexJob-card-top-info-item {
      display: flex;
@@ -56,6 +77,7 @@
        line-height: 34px;
        font-weight: bold;
        color: boleGetCssVar('text-color', 'primary');
        @include ellipsis;
      }

      .flexJob-card-top-info-gender {
@@ -63,6 +85,7 @@
        align-items: center;
        height: 34px;
        margin: 0 10px;
        flex-shrink: 0;

        .flexJob-card-top-info-gender-icon {
          width: 24px;
@@ -73,6 +96,7 @@
      .flexJob-card-top-info-auth {
        font-size: 28px;
        line-height: 34px;
        flex-shrink: 0;
      }
    }