menduner/src/views/recruit/personal/home/components/hotJobs.vue

<template>
  <div class="default-width mb-6 d-flex align-center justify-center">
    <span class="color-primary font-weight-bold" style="width: 80px; min-width: 80px;">{{ $t('position.popularPosition') }}：</span>
    <div class="overflow-hidden py-3 pl-2" style="height: 60px; ">
      <v-hover v-slot="{ isHovering, props }" v-for="(item, index) in jobs" :key="index">
        <span 
          v-bind="props"
          v-ripple.center
          label
          size="small"
          class="mr-2 mb-4 tag" 
          :class="isHovering ? 'elevation-5' : 'elevation-1'"
          @click.stop="handleClick(item)"
        >
          {{ item.nameCn }}
        </span>
      </v-hover>
    </div>
  </div>
</template>

<script setup>
import { getHotPositionList } from '@/api/common/index'
import Snackbar from '@/plugins/snackbar'
import { ref } from 'vue';
defineOptions({ name:'personal-hotJobs-list'})

const handleClick = (item) => { 
  if (!item?.id) {
    return Snackbar.warning('岗位信息失效，请更换岗位查看详情')
  }
  window.open('/recruit/personal/position?positionId=' + item.id)
 }

// 获取行业树形
let jobs = ref(null)
const getTreeData = async () => {
  const res = await getHotPositionList()
  jobs.value = res.splice(0, 10) || []
}
getTreeData()
</script>

<style lang="scss" scoped>
.tag {
  background-color: #fff !important;
  color: var(--v-primary-base);
  padding: 5px 20px;
  display: inline-block;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
}
</style>