兴蜀来了平台业务数据大屏页面、三级劳务体系⼈员数据大屏页面、“产教评”融合培训平台大屏页面

src/views/platformBusinessData/components/topStatistics.vue

@@ -0,0 +1,115 @@
+<template>
+  <ul class="topStatisticsBox">
+    <li
+      v-for="(item, index) in statisticsData"
+      :key="index"
+      :style="{ margin: item.margin }"
+    >
+      <img :src="item.imgURL" :alt="item.title" />
+      <div class="infoBox">
+        <div class="title">
+          <span>{{ item.title }}</span>
+        </div>
+        <div class="count">
+          <span class="numb">{{ item.value }}</span
+          >（{{ item.unit }}）
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import topStatisticsJyfwz from "@/assets/images/largeScreen/topStatistics-jyfwz.png";
+import topStatisticsRzqy from "@/assets/images/largeScreen/topStatistics-rzqy.png";
+import topStatisticsWczpjh from "@/assets/images/largeScreen/topStatistics-wczpjh.png";
+import topStatisticsZhytj from "@/assets/images/largeScreen/topStatistics-zhytj.png";
+import topStatisticsZpgw from "@/assets/images/largeScreen/topStatistics-zpgw.png";
+
+const statisticsData = ref([
+  {
+    title: "招聘岗位",
+    value: "325",
+    imgURL: topStatisticsZpgw,
+    unit: "个",
+    margin: "-326px 0 0 -685px"
+  },
+  {
+    title: "完成招聘计划",
+    value: "312",
+    imgURL: topStatisticsWczpjh,
+    unit: "个",
+    margin: "-467px 0px 0px -228px"
+  },
+  {
+    title: "入住企业",
+    value: "35",
+    imgURL: topStatisticsRzqy,
+    unit: "家",
+    margin: "-232px 0px 0px 306px"
+  },
+  {
+    title: "综合一体机",
+    value: "78",
+    imgURL: topStatisticsZhytj,
+    unit: "个",
+    margin: "-76px 0px 0px -500px"
+  },
+  {
+    title: "就业服务站",
+    value: "18",
+    imgURL: topStatisticsJyfwz,
+    unit: "家",
+    margin: "-48px 0px 0 9px"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+ul.topStatisticsBox {
+  height: 1055px;
+  background: url("~@/assets/images/largeScreen/topStatistics-bg.png") no-repeat
+    center;
+  position: relative;
+  li {
+    position: absolute;
+    width: 450px;
+    height: 190px;
+    top: 50%;
+    left: 50%;
+    img {
+      display: block;
+      width: 190px;
+      height: 190px;
+      float: left;
+    }
+    .infoBox {
+      float: left;
+      padding: 0 0 0 10px;
+      .title {
+        height: 40px;
+        line-height: 40px;
+        margin-top: 36px;
+
+        span {
+          background: -webkit-linear-gradient(#ffffff, #75e8ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 32px;
+          font-weight: 500;
+        }
+      }
+      .count {
+        font-size: 24px;
+        padding: 18px 0 0 0;
+        span.numb {
+          font-size: 64px;
+          display: inline-block;
+          padding: 0 5px 0 0;
+        }
+      }
+    }
+  }
+}
+</style>