116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
|
<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>
|