大屏左下

src/views/recruitment/components/cygjbl.vue

@@ -8,7 +8,11 @@
         </li>
       </ul>
       <ul class="inright items tc">
-        <li class="child relative right_child" v-for="it in data.right" :key="it">
+        <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>
@@ -21,12 +25,12 @@
 import { reactive, ref } from "vue";
 const data = reactive({
   left: [
-    { label: "岗位需求人数", per: "12%" },
-    { label: "就业意向人数", per: "80%" },
+    { label: "岗位需求人数", per: "7.9万人" },
+    { label: "就业意向人数", per: "5.8万人" }
   ],
   right: [
-    { label: "岗位需求增幅", per: "78.3%" },
-    { label: "求职人员增幅", per: "23.1%" },
+    { label: "岗位需求增幅", per: "17.04%" },
+    { label: "求职人员增幅", per: "20.38%" }
   ]
 });
 </script>
@@ -45,16 +49,16 @@ const data = reactive({
 
 .inbox {
   width: 19vw;
-  height: 100%;
-  margin-top: 2vw;
+  height: 14vw;
+  padding-top: 2vw;
+  box-sizing:border-box;
   background: url("~@/assets/recruitment/jy.png") no-repeat;
-  background-size:100% 100%;
-  img{
+  background-size: 100% 100%;
+  img {
     width: 100%;
     height: 100%;
   }
 
-
   .items {
     width: 50%;
     height: 70%;
@@ -62,8 +66,6 @@ const data = reactive({
     .child {
       height: 100px;
       background-size: 100% 100%;
-
-
     }
 
     .left_child {
@@ -83,12 +85,11 @@ const data = reactive({
         margin-left: 1.5vw;
         font-family: "YSBTH";
         white-space: nowrap;
-        font-size: 1vw;
-        @include textColor(#5cb2f7, #48FAFC);
+        font-size: 0.9vw;
+        @include textColor(#5cb2f7, #48fafc);
       }
 
       &:nth-child(1) {
-        margin-left: 3vw;
         background: url("~@/assets/recruitment/left-one.svg") no-repeat;
       }
 
@@ -99,6 +100,7 @@ const data = reactive({
 
     .right_child {
       background-size: 100% 100%;
+      margin-top: -1vw;
 
       .text {
         margin-right: 1.5vw;
@@ -113,17 +115,22 @@ const data = reactive({
         margin-right: 1.5vw;
         font-family: "YSBTH";
         white-space: nowrap;
-        font-size: 1vw;
-        @include textColor(#5cb2f7, #ffffff);
+        font-size: 0.9vw;
+        @include textColor(#5cb2f7, #48fafc);
       }
 
       &:nth-child(1) {
-        margin-right: 3vw;
-        background: url("~@/assets/recruitment/right-one.svg") no-repeat right center;
+        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 center;
+        background: url("~@/assets/recruitment/right-two.svg") no-repeat right;
+        .text {
+          margin-top: 34px;
+        }
       }
     }
   }
@@ -185,4 +192,4 @@ const data = reactive({
     @include textColor(#5cb2f7, #ffffff);
   }
 }
-</style>
+</style>