rsxm-master/src/views/recruitment/layout/centerModel.vue

<template>
  <div class="contentWrapper">
    <div class="rowContent">
      <div class="modelWrapper">
        <template v-for="(item, index) in modelContentList" :key="index">
          <div class="modelContent">
            <div class="num">{{ item.num }}</div>
            <div class="label">{{ item.label }}</div>
          </div>
        </template>
      </div>
    </div>

    <div class="content">
      <div class="num">780,000</div>
      <div class="label">人口总数</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const modelContentList = ref([
  {
    num: '780,000',
    label: '户籍人口',
  },
  {
    num: '780,000',
    label: '流动人口',
  },
  {
    num: '780,000',
    label: '就业人群',
  },
  {
    num: '780,000',
    label: '待就业人群',
  },
  {
    num: '780,000',
    label: '新增就业群体',
  },
  {
    num: '780,000',
    label: '灵活就业群体',
  }
])
</script>

<style lang="scss" scoped>
.contentWrapper {
  position: absolute;
  top: 9.53125vw;
  left: 23.58vw;
  width: 52.46vw;

  .rowContent {
    position: absolute;
    width: 100%;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 9.46875vw;

    margin-top: 10.90625vw;
    background: url("~@/assets/recruitment/content_bg.svg") no-repeat;
    background-size: 100% 100%;
    width: 52.46vw;
    height: 31.667vw;

    .num {
      font-family: PingFang SC, PingFang SC;
      font-size: 2.667vw;
      color: #30DCFF;
    }

    .label {
      margin-top: 0.521vw;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 0.833vw;
      color: #CBF2FA;
    }
  }

  .modelWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .modelContent {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      background: url("~@/assets/recruitment/model_bg.svg") no-repeat;
      background-size: 100% 100%;
      width: 10.729vw;
      height: 6.667vw;
      padding: 0.625vw 0;

      .num {
        font-family: PingFang SC, PingFang SC;
        font-size: 1.667vw;
        color: #30DCFF;
      }

      .label {
        margin-top: 0.521vw;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 0.833vw;
        color: #CBF2FA;
      }

      &:nth-last-child(-n+1) {
        margin-top: 2.34375vw;
        margin-right: 13.8vw;
      }

      &:nth-last-child(2) {
        margin-top: 2.34375vw;
        margin-left: 13.8vw;
      }
    }
  }
}
</style>