menduner/src/components/PositionLongStrip/item.vue

<!-- 搜索页面的职位详情-长条 -->
<template>
  <div class="positionItem" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
    <div class="position-and-company">
      <!-- 职位 -->
      <div v-if="item?.job?.hire" class="mr-3">
        <PublicRecruitment width="45" height="45"></PublicRecruitment>
      </div>
      <div class="position" @mouseenter="item.positionActive = true" @mouseleave="item.positionActive = false" @click="handlePosition(item)">
        <div class="d-flex">
          <p v-if="item.job.name.indexOf('style')" v-html="item.job.name" :class="['title1', {'default-active': item.positionActive }]"></p>
          <p v-else :class="['title1', {'default-active': item.positionActive }]">{{ item.job.name }}{{ item.job.pos ? ' [' + item.job.pos + '] ' : '' }}</p>
          <p class="salary ml-1">{{ item.job.payFrom }}-{{ item.job.payTo }}/{{ item.job.payName }}</p>
          <v-chip v-if="item?.job?.hirePrice" class="ml-3" label color="primary" size="small">赏金：{{ item.job.hirePrice }}元</v-chip>
        </div>
        <div class="mt-2">
          <v-chip size="x-small" label v-for="(j, i) in desc" :key="i" class="mr-1" color="var(--color-666)" :prepend-icon="j.mdi">{{ item.job[j.value] }}</v-chip>
        </div>
      </div>
      <!-- 公司 -->
      <div class="company" @click="handleEnterprise(item)">
        <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">
          <v-hover>
            <template v-slot:default="{ isHovering, props }">
              <h3 v-bind="props" :class="{'default-active': isHovering }" class="title1">{{ item.enterprise.anotherName }}</h3>
            </template>
          </v-hover>
          <p class="mt-2">{{ item.enterprise.financingName }}<span class="mx-2">|</span>{{ item.enterprise.scaleName }}<span class="mx-2">|</span>{{ item.enterprise.industryName }}</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer-left">
        <template v-for="(jobTag, jobTagsIndex) in item.job.tagList" :key="jobTagsIndex">
          <span class="textColor666 mx-1" v-if="jobTagsIndex">|</span>
          <span class="textColor666 dis">{{ jobTag }}</span>
        </template>
      </div>
      <div class="footer-right">
        <v-avatar size="x-small" :image="item.contact.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
        <span class="mx-2 textColor666">{{ item.contact.name }} | {{ item.contact.postNameCn }}</span>
        <v-chip color="primary" label size="x-small">当前在线</v-chip>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'long-strip-position-card-item' })
import { ref, watch } from 'vue'
const props = defineProps({
  items: {
    type: Object,
    default: () => ({ data: [], total: 0 })
  }
})
const list = ref([])
watch(
  () => props.items, 
  (newVal) => {
    list.value = newVal
  },
  { immediate: true },
  { deep: true }
)

const desc = [
  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
  { mdi: 'mdi-school-outline', value: 'eduName' },
  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
]

const handlePosition = (item) => {
  const id = item.job.id // item.job.positionId
  if (!id) return
  window.open(`/recruit/personal/position/details/${id}`)
}
const handleEnterprise = (item) => {
  const id = item.enterprise.id // item.enterprise.enterpriseId
  if (!id) return
  window.open(`/recruit/personal/company/details/${id}?key=briefIntroduction`)
}
</script>

<style lang="scss" scoped>
.title1 {
  position: relative;
  max-width: 200px;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  &:hover {
    color: var(--v-primary-base);
  }
}
.company {
  flex: 1;
  display: flex;
  justify-content: end;
}
.company-info {
  float: left;
  margin-left: 16px;
  // width: 282px;
}
.company-info p {
  height: 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-999);
}
.textColor666 { color: var(--color-666); }
.positionItem {
  width: 850px;
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s linear;
  background-color: #fff;
  &:hover {
    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
  }
  .position-and-company {
    display: flex;
    padding: 16px 20px;
    width: 100%;
    .position {
      width: 484px;
      padding-right: 12px;
    }
  }
  .footer {
    height: 48px;
    line-height: 48px;
    padding: 0px 20px;
    font-size: 14px;
    background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
    display: flex;
    .footer-left {
      width: 440px;
      padding-right: 12px;
    }
    .footer-right {
      flex: 1;
      text-align: right;
    }
    div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .ellipsisStyle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.salary {
  font-size: 16px;
  font-weight: 700;
  color: var(--v-error-base);
  line-height: 22px;
  flex: none;
}
</style>