menduner/src/views/recruit/personal/company/components/companyItem.vue

<template>
  <div class="company-box">
    <div class="sub-li" v-for="item in list" :key="item.enterprise.id">
      <div
        class="company-info-top ma-3 rounded-lg px-3 cursor-pointer" :class="item.active ? 'elevation-5' : ''"
        @click.stop="jumpToEnterpriseDetail(item.enterprise.id, true)" @mouseenter="item.active = true" @mouseleave="item.active = false">
        <div class="float-left">
          <v-img :src="item.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" contain rounded :alt="item.enterprise.anotherName" :width="50" :height="50" />
        </div>
        <div class="company-info">
          <h3 v-ellipse-tooltip :class="{'default-active': item.active }">{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</h3>
          <p>{{ item.enterprise.industryName }}</p>
        </div>
      </div>
      <v-divider class="mx-4"></v-divider>
      <v-hover v-slot="{ isHovering, props }">
        <div class="company-info-bottom mx-3 mt-2 rounded-lg pa-3 cursor-pointer" v-bind="props" :class="isHovering && (item?.job && Object.keys(item.job).length) ? 'elevation-5' : ''">
          <div v-if="item?.job && Object.keys(item.job).length" @click.stop="handleClickPosition(item.job)">
            <div class="mb-1 d-flex">
              <p
                v-ellipse-tooltip
                class="mr-3 cursor-pointer name"
                :style="{'max-width': !item.job.payFrom && !item.job.payTo ? '270px' : '180px', 'color': isHovering ? 'var(--v-primary-base)' : '#0E100F'}"
              >{{ formatName(item.job.name) }}</p>
              <span v-if="!item.job.payFrom && !item.job.payTo" class="salary">面议</span>
              <span v-else class="salary">{{ item.job.payFrom ? item.job.payFrom + '-' : '' }}{{ item.job.payTo }}{{ item.job.payName ? '/' + item.job.payName : '' }}</span>
            </div>
            <div style="height: 24px; overflow: hidden; color: #808080;">
              <span v-for="(j, index) in desc" :key="index">
                <span v-if="item.job[j] || j === 'areaName'" class="mr-1 font-size-13">
                  {{ j === 'areaName' ? !item.job.areaId ? '全国' : item.job.area.str : item.job[j] }}
                </span>
                <span v-if="index !== desc.length - 1 && (item.job[desc[index + 1]] || j === 'areaName')" class="septal-line ml-1"></span>
              </span>
            </div>
          </div>
        </div>
      </v-hover>
    </div>
  </div>
</template>

<script setup>
import { formatName } from '@/utils/getText'
import { jumpToEnterpriseDetail } from '@/utils/position'

defineOptions({ name: 'company-item'})
defineProps({
  list: Array
})

const desc = ['areaName', 'eduName', 'expName']
// 职位详情
const handleClickPosition = (job) => {
  window.open(`/recruit/personal/position/details/${job.id}`)
}
</script>

<style scoped lang="scss">
@import url('@/styles/recruit/company.scss');
</style>