menduner/src/views/recruit/enterprise/resumeManagement/talentPool/components/details/baseInfo.vue

<!-- 基本信息 -->
<template>
  <div class="d-flex">
    <!-- 头像 -->
    <div class="avatarsBox">
      <v-badge 
        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>
    </div>
    <!-- 信息 -->
    <div style="flex: 1;">
      <span style="font-size: 20px; font-weight: 600;color: var(--color-666);">{{ info?.name }}</span>
      <div class="mt-3 d-flex">
        <div class="listBox" style="height: 68px">
          <div>
            <span class="mdi mdi-map-marker-outline"></span>
            <span>{{ info?.areaName || '暂无' }}</span>
          </div>
          <div>
            <span class="mdi mdi-phone-outline"></span>
            <span>{{ info?.phone }}</span>
          </div>
          <div>
            <span class="mdi mdi-email-outline"></span>
            <span>{{ info?.email }}</span>
          </div>
          <div>
            <span class="mdi mdi-calendar-blank-outline"></span>
            <span>{{ info?.expName }}</span>
          </div>
          <div>
            <span class="mdi mdi-school-outline"></span>
            <span>{{ info?.eduName }}</span>
          </div>
          <div>
            <span class="mdi mdi-tag-outline"></span>
            <span>{{ info?.jobStatusName }}</span>
          </div>
          <div>
            <span class="mdi mdi-cake-variant-outline"></span>
            <span>{{ timesTampChange(info?.birthday, 'Y-M-D') }}</span>
          </div>
          <div>
            <span class="mdi mdi-account-heart"></span>
            <span>{{ info?.maritalStatusName }}</span>
          </div>
          <div>
            <span>{{ $t('resume.firstWorkTime') }}：</span>
            <span>{{ timesTampChange(info?.firstWorkTime, 'Y-M-D') }}</span>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <span style="font-size: 15px;">个人画像：</span>
        <v-chip size="small" label v-for="(k, i) in ['响应', '改变', '诚信', '进取精神', '信任', '卓越']" :key="i" class="mr-2" color="primary">{{ k }}</v-chip>
      </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 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: 32px;
  margin-right: 40px;
  .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%; /* 设置容器宽度 */
  // height: 68px;
  overflow: hidden;
  color: var(--color-666);
  div {
    margin-right: 50px;
    span {
      height: 32px;
      line-height: 32px;
    }
    .mdi {
      font-size: 22px;
      margin-right: 8px;
    }
  }
}
</style>