13屏幕

src/views/recruitment/components/cygjbl.vue

@@ -0,0 +1,188 @@
+<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: "12%" },
+    { label: "就业意向人数", per: "80%" },
+  ],
+  right: [
+    { label: "岗位需求增幅", per: "78.3%" },
+    { label: "求职人员增幅", per: "23.1%" },
+  ]
+});
+</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: 100%;
+  margin-top: 2vw;
+  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: 1vw;
+        @include textColor(#5cb2f7, #48FAFC);
+      }
+
+      &:nth-child(1) {
+        margin-left: 3vw;
+        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%;
+
+      .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: 1vw;
+        @include textColor(#5cb2f7, #ffffff);
+      }
+
+      &:nth-child(1) {
+        margin-right: 3vw;
+        background: url("~@/assets/recruitment/right-one.svg") no-repeat right center;
+      }
+
+      &:nth-child(2) {
+        background: url("~@/assets/recruitment/right-two.svg") no-repeat right center;
+      }
+    }
+  }
+
+  .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>