menduner/src/views/enterprise/positionManagement/components/item.vue

<template>
  <div>
    <div v-for="val in list" :key="val.id" class="itemBox mb-3">
      <div class="d-flex justify-space-between pa-5">
        <div class="position">
          <div>
            <span class="position-name">{{ val.name }}</span>
          </div>
          <div class="mt-3 other-info ellipsis">
            <span>{{ val.areaName }}</span>
            <span class="lines"></span>
            <span>{{ val.eduName }}</span>
            <span class="lines"></span>
            <span>{{ val.expName }}</span>
            <span class="lines"></span>
            <span>{{ val.salary }}</span>
            <span class="lines"></span>
            <span>{{ val.positionTypeName }}</span>
          </div>
        </div>
        <div class="d-flex align-center">
          <div class="resume">
            <div class="resume-number">6</div>
            <div>待筛选简历</div>
          </div>
          <div>
            <v-btn color="primary" variant="tonal">人才搜索</v-btn>
            <v-btn class="mx-3" color="primary">刷新职位</v-btn>
            <v-btn color="primary">置顶职位</v-btn>
          </div>
        </div>
      </div>
      <div class="bottom pa-5 d-flex justify-space-between align-center">
        <div>刷新时间：2024.5.30（90天后到期）</div>
        <div>
          <span class="cursor-pointer">招聘统计</span>
          <span class="lines"></span>
          <span class="cursor-pointer">编辑</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'enterprise-position-item'})
import { ref } from 'vue'

const list = ref([
  {
    id: '1',
    name: '销售总监',
    areaName: '广东 广州 越秀区',
    eduName: '本科',
    expName: '3年以上',
    salary: '1万到1.5万',
    positionTypeName: '销售总监'
  },
  {
    id: '2',
    name: '市场总监',
    areaName: '广东 广州 越秀区',
    eduName: '本科',
    expName: '3年以上',
    salary: '1万到1.5万',
    positionTypeName: '销售总监'
  },
  {
    id: '3',
    name: '行政总监',
    areaName: '广东 广州 越秀区',
    eduName: '本科',
    expName: '3年以上',
    salary: '1万到1.5万',
    positionTypeName: '销售总监'
  }
])
</script>

<style scoped lang="scss">
.itemBox {
  border: 1px solid #e5e6eb;
  height: 145px;
}
.position-name {
  color: #333;
  font-size: 19px;
  cursor: pointer;
  &:hover {
    color: var(--v-primary-base);
  }
}
.position {
  max-width: 46%;
}
.lines {
  display: inline-block;
  width: 1px;
  height: 17px;
  vertical-align: middle;
  background-color: #e0e0e0;
  margin: 0 10px;
}
.other-info {
  font-size: 15px;
  color: #666;
}
.bottom {
  height: 40px;
  background-color: #f7f8fa;
  font-size: 14px;
  color: #888;
}
.resume {
  display: flex;
  font-size: 13px;
  flex-direction: column;
  align-items: center;
  color: #888;
  margin-right: 100px;
  cursor: pointer;
}
.resume-number {
  font-size: 20px;
  font-weight: 700;
  color: #999;
}
</style>