<template>
  <!-- 页面的 HTML 模板部分 -->

  <ul class="schoolLsit">
    <li v-for="(item, index) in workList" :key="index">
      <div class="name">{{ item.name }}</div>
      <div>
        <span class="numb">{{ item.num }}</span
        ><span>人</span>
      </div>
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
const workList = ref([
  {
    name: "普工",
    num: 71
  },
  {
    name: "操作员",
    num: 45
  },
  {
    name: "厨师",
    num: 36
  },
  {
    name: "保洁员",
    num: 68
  },
  {
    name: "车床技工",
    num: 154
  },
  {
    name: "电工",
    num: 28
  },
  {
    name: "焊工",
    num: 34
  },
  {
    name: "钳工",
    num: 51
  },
  {
    name: "机修",
    num: 27
  },
  {
    name: "汽修",
    num: 49
  },
  {
    name: "车间主管",
    num: 15
  },
  {
    name: "技术研发员",
    num: 82
  }
]);
// 生命周期钩子
onMounted(() => {});
</script>

<style lang="scss" scoped>
ul.schoolLsit {
  margin: 0 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    height: 42px;
    width: 220px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(48, 220, 255, 0.2);
    // box-sizing: border-box;
    margin: 20px 0 0 48px;
    position: relative;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    &::before {
      content: "";
      position: absolute;
      display: block;
      width: 42px;
      height: 42px;
      background: url("~@/assets/images/recruitment/people@2x.png") no-repeat
        center;
      background-size: 100%;
      left: -48px;
      top: -1px;
    }
    > div {
      height: 100%;
      line-height: 42px;
    }
    .name {
      color: #cbf2fa;
    }
    .numb {
      color: #30dcff;
      font-size: 18px;
      font-weight: bold;
      display: inline-block;
      padding: 0 0.3vw 0 0;
    }
  }
}
</style>
