menduner/src/views/recruit/enterprise/talentRecommendation/details/baseInfo.vue

<!-- 基本信息 -->
<template>
  <div>
    <!-- 头像 -->
    <div class="avatarsBox">
      <v-badge
        v-if="info?.sex === '1' || info?.sex === '2'"
        bordered 
        offset-x="-25" 
        offset-y="33" 
        :color="info?.sex ? (info?.sex === '1' ? '#1867c0' : 'error') : 'error'" 
        :icon="info?.sex ? (info?.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'">
        <v-avatar size=80 :image="info?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
      </v-badge>
      <v-avatar v-else size=80 :image="info?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
    </div>
    <div class="text-center mt-3 color-666 font-size-20 font-weight-bold">{{ info?.name }}</div>
    <div>
      <div class="mt-5 d-flex">
        <div class="listBox">
          <div v-for="k in list" :key="k.key" class="mb-1">
            <span :class="[k.icon, { 'mdi': k.icon }]">{{ k.label ? k.label : '' }}</span>
            <span>{{ k.isTime ?  timesTampChange(info[k.key], 'Y-M-D') || '未知' : info[k.key] || '未知' }}</span>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <span style="font-size: 15px;">个人画像：</span>
        <span v-if="info?.tagList && info?.tagList.length > 0">
          <v-chip size="small" label v-for="(k, i) in info.tagList" :key="i" class="mr-2 mb-2" color="primary">{{ k }}</v-chip>
        </span>
        <span v-else>暂无</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// 已废弃
defineOptions({name: 'enterprise-talentPool-details-baseInfo'})
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import { dealDictObjData } from '@/utils/position'

const props = defineProps({
  data: Object
})

const list = [
  { key: 'areaName', icon: 'mdi-map-marker-outline' },
  { key: 'phone', icon: 'mdi-phone-outline' },
  { key: 'email', icon: 'mdi-email-outline' },
  { key: 'expName', icon: 'mdi-calendar-blank-outline' },
  { key: 'eduName', icon: 'mdi-school-outline' },
  { key: 'jobStatusName', icon: 'mdi-tag-outline' },
  { key: 'birthday', icon: 'mdi-cake-variant-outline', isTime: true },
  { key: 'maritalStatusName', icon: 'mdi-account-heart' },
  { key: 'firstWorkTime', label: '首次工作时间：', isTime: true }
]
const info = ref({})
if (props.data && Object.keys(props.data).length) {
  info.value = dealDictObjData({}, props.data)
}
</script>

<style lang="scss" scoped>
.avatarsBox {
  height: 80px;
  width: 80px;
  position: relative;
  // margin-right: 40px;
  margin: auto;
  .img {
    width: 100%;
    height: 100%;
  }
  .mdi {
    font-size: 42px;
    color: #fff;
  }
  div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}
.listBox {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  width: 100%; /* 设置容器宽度 */
  overflow: hidden;
  color: var(--color-666);
  div {
    width: 50%;
    &:nth-child(2n) {
      padding-left: 20px;
    }
    span {
      height: 32px;
      line-height: 32px;
    }
    .mdi {
      font-size: 22px;
      margin-right: 8px;
    }
  }
}
</style>