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>
|