大屏处理

src/views/recruitment/layout/centerModel.vue

@@ -0,0 +1,134 @@
+<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>