<template>
  <ul class="topStatisticsBox">
    <li
      v-for="(item, index) in statisticsData"
      :key="index"
      :style="{ margin: item.margin }"
    >
      <img :src="item.imgURL" :alt="item.title" />
      <div class="infoBox">
        <div class="title">
          <span>{{ item.title }}</span>
        </div>
        <div class="count">
          <span class="numb">{{ item.value }}</span
          >（{{ item.unit }}）
        </div>
      </div>
    </li>
  </ul>
</template>

<script setup>
import { ref } from "vue";
import topStatisticsJyfwz from "@/assets/images/largeScreen/topStatistics-jyfwz.png";
import topStatisticsRzqy from "@/assets/images/largeScreen/topStatistics-rzqy.png";
import topStatisticsWczpjh from "@/assets/images/largeScreen/topStatistics-wczpjh.png";
import topStatisticsZhytj from "@/assets/images/largeScreen/topStatistics-zhytj.png";
import topStatisticsZpgw from "@/assets/images/largeScreen/topStatistics-zpgw.png";

const statisticsData = ref([
  {
    title: "招聘岗位",
    value: "325",
    imgURL: topStatisticsZpgw,
    unit: "个",
    margin: "-326px 0 0 -685px"
  },
  {
    title: "完成招聘计划",
    value: "312",
    imgURL: topStatisticsWczpjh,
    unit: "个",
    margin: "-467px 0px 0px -228px"
  },
  {
    title: "入住企业",
    value: "35",
    imgURL: topStatisticsRzqy,
    unit: "家",
    margin: "-232px 0px 0px 306px"
  },
  {
    title: "综合一体机",
    value: "78",
    imgURL: topStatisticsZhytj,
    unit: "个",
    margin: "-76px 0px 0px -500px"
  },
  {
    title: "就业服务站",
    value: "18",
    imgURL: topStatisticsJyfwz,
    unit: "家",
    margin: "-48px 0px 0 9px"
  }
]);
</script>

<style lang="scss" scoped>
ul.topStatisticsBox {
  height: 1055px;
  background: url("~@/assets/images/largeScreen/topStatistics-bg.png") no-repeat
    center;
  position: relative;
  li {
    position: absolute;
    width: 450px;
    height: 190px;
    top: 50%;
    left: 50%;
    img {
      display: block;
      width: 190px;
      height: 190px;
      float: left;
    }
    .infoBox {
      float: left;
      padding: 0 0 0 10px;
      .title {
        height: 40px;
        line-height: 40px;
        margin-top: 36px;

        span {
          background: -webkit-linear-gradient(#ffffff, #75e8ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 32px;
          font-weight: 500;
        }
      }
      .count {
        font-size: 24px;
        padding: 18px 0 0 0;
        span.numb {
          font-size: 64px;
          display: inline-block;
          padding: 0 5px 0 0;
        }
      }
    }
  }
}
</style>
