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" @click="handleClickEnterprise(item)" @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'" :alt="item.enterprise.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
        </div>
        <div class="company-info">
          <h3 :class="{'default-active': item.active }" style="width: 200px;">{{ item.enterprise.anotherName }}</h3>
          <p>{{ item.enterprise.industryName }}</p>
        </div>
      </div>
      <v-divider class="mx-4"></v-divider>
      <div class="company-info-bottom">
        <div v-if="item?.job && Object.keys(item.job).length" class="job-hover" @click="handleClickPosition(item.job)">
          <div class="mb-1 d-flex">
            <p :class="['mr-3', 'cursor-pointer', 'name']" :style="{'max-width': !item.job.payFrom && !item.job.payTo ? '200px' : '120px'}">{{ 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]" class="mr-1 font-size-13">{{ item.job[j] }}</span>
              <span v-if="item.job[j] && index !== desc.length - 1 && item.job[desc[index + 1]]" class="septal-line ml-1"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'company-item'})
defineProps({
  list: Array
})

const desc = ['areaName', 'eduName', 'expName']

const handleClickEnterprise = (item) => {
  window.open(`/recruit/personal/company/details/${item.enterprise.id}?key=briefIntroduction`)
}
// 职位详情
const handleClickPosition = (job) => {
  window.open(`/recruit/personal/position/details/${job.id}`)
}
</script>

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