rsxm-master/src/views/recruitment/components/cygjbl.vue

<template>
  <div class="seconent">
    <div class="inbox flex space-between">
      <ul class="inLeft items">
        <li class="child left_child" v-for="it in data.left" :key="it">
          <div class="text">{{ it.label }}</div>
          <div class="num">{{ it.per }}</div>
        </li>
      </ul>
      <ul class="inright items tc">
        <li
          class="child relative right_child"
          v-for="it in data.right"
          :key="it"
        >
          <div class="text">{{ it.label }}</div>
          <div class="num">{{ it.per }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const data = reactive({
  left: [
    { label: "岗位需求人数", per: "7.9万人" },
    { label: "就业意向人数", per: "5.8万人" }
  ],
  right: [
    { label: "岗位需求增幅", per: "17.04%" },
    { label: "求职人员增幅", per: "20.38%" }
  ]
});
</script>

<style lang="scss" scoped>
@mixin textColor($color1, $color2) {
  background-image: linear-gradient(to top, $color1 0%, $color2 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.seconent {
  position: relative;
  height: 100%;
}

.inbox {
  width: 19vw;
  height: 14vw;
  padding-top: 2vw;
  box-sizing:border-box;
  background: url("~@/assets/recruitment/jy.png") no-repeat;
  background-size: 100% 100%;
  img {
    width: 100%;
    height: 100%;
  }

  .items {
    width: 50%;
    height: 70%;

    .child {
      height: 100px;
      background-size: 100% 100%;
    }

    .left_child {
      // width: 439px;
      background-size: 100% 100%;

      .text {
        margin-left: 1.6vw;
        margin-top: -0.2vw;
        white-space: nowrap;
        font-size: 0.8vw;
        font-family: "YSBTH";
        @include textColor(#5cb2f7, #ffffff);
      }

      .num {
        margin-left: 1.5vw;
        font-family: "YSBTH";
        white-space: nowrap;
        font-size: 0.9vw;
        @include textColor(#5cb2f7, #48fafc);
      }

      &:nth-child(1) {
        background: url("~@/assets/recruitment/left-one.svg") no-repeat;
      }

      &:nth-child(2) {
        background: url("~@/assets/recruitment/left-two.svg") no-repeat;
      }
    }

    .right_child {
      background-size: 100% 100%;
      margin-top: -1vw;

      .text {
        margin-right: 1.5vw;
        margin-top: -0.2vw;
        white-space: nowrap;
        font-size: 0.8vw;
        font-family: "YSBTH";
        @include textColor(#5cb2f7, #ffffff);
      }

      .num {
        margin-right: 1.5vw;
        font-family: "YSBTH";
        white-space: nowrap;
        font-size: 0.9vw;
        @include textColor(#5cb2f7, #48fafc);
      }

      &:nth-child(1) {
        background: url("~@/assets/recruitment/right-one.svg") no-repeat right;
        .text {
          margin-top: 34px;
        }
      }

      &:nth-child(2) {
        background: url("~@/assets/recruitment/right-two.svg") no-repeat right;
        .text {
          margin-top: 34px;
        }
      }
    }
  }

  .inLeft,
  .inright {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .inLeft {
    // margin-left: -2vw;
  }

  .inright {
    .num {
      margin-left: 40px !important;
    }
  }

  .ohher {
    position: absolute;
    top: 60px;
    left: 162px;
    font-family: "YSBTH";
    font-size: 16px;
    white-space: nowrap;
  }
}

.incenter {
  box-sizing: border-box;
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translateX(-54%);
  width: 60%;

  .hedbt {
    text-align: center;
    margin-bottom: 10px;

    .text {
      white-space: nowrap;
      font-size: 2vw;
      font-family: "YSBTH";
      @include textColor(#5cb2f7, #ffffff);
      margin-left: 70px;
    }
  }

  .ctbox {
    justify-content: space-around;
    padding-left: 30px;
    font-size: 3vw;
    font-family: "YSBTH";
    @include textColor(#5cb2f7, #ffffff);
  }
}
</style>