99 lines
2.2 KiB
Vue
99 lines
2.2 KiB
Vue
<template>
|
|
<div class="ordersizeCenter">
|
|
<div v-for="(item, index) in list" :key="index" :class="item.bgimg">
|
|
<div class="listItem">
|
|
<div class="listNumber">{{ item.number }}</div>
|
|
<div class="listName">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from "vue";
|
|
import { getEngineeringAll } from "@/api/modules/largeSreen";
|
|
|
|
onMounted(() => {
|
|
projectNumber();
|
|
});
|
|
//工程数
|
|
const list = ref([
|
|
{ bgimg: "bgImgOne", number: "60348", name: "今年新增工程" },
|
|
{ bgimg: "bgImgTwo", number: "19374", name: "今年竣工工程" },
|
|
{ bgimg: "bgImgThree", number: "2479", name: "重点工程" }
|
|
]);
|
|
const projectNumber = async () => {
|
|
const { result } = await getEngineeringAll();
|
|
list.value[0].number = result.newBuild;
|
|
list.value[1].number = result.finish;
|
|
list.value[2].number = result.important;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ordersizeCenter {
|
|
position: fixed;
|
|
top: 15%;
|
|
left: 50%;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 48%;
|
|
height: 100%;
|
|
transform: translate(-50%);
|
|
.bgImgOne {
|
|
width: 232px;
|
|
height: 82px;
|
|
background: url("@/assets/images/screenImg/add.png") no-repeat center center;
|
|
background-size: 100%;
|
|
.listItem {
|
|
padding: 15px 0 0 85px;
|
|
color: white;
|
|
.listNumber {
|
|
font-family: DigitalRegular;
|
|
font-size: 36px;
|
|
}
|
|
.listName {
|
|
font-family: SourceHanSansCNR;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.bgImgTwo {
|
|
width: 232px;
|
|
height: 82px;
|
|
background: url("@/assets/images/screenImg/completed.png") no-repeat center center;
|
|
background-size: 100%;
|
|
.listItem {
|
|
padding: 15px 0 0 85px;
|
|
color: white;
|
|
.listNumber {
|
|
font-family: DigitalRegular;
|
|
font-size: 36px;
|
|
}
|
|
.listName {
|
|
font-family: SourceHanSansCNR;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.bgImgThree {
|
|
width: 232px;
|
|
height: 82px;
|
|
background: url("@/assets/images/screenImg/importent.png") no-repeat center center;
|
|
background-size: 100%;
|
|
.listItem {
|
|
padding: 15px 0 0 85px;
|
|
color: white;
|
|
.listNumber {
|
|
font-family: DigitalRegular;
|
|
font-size: 36px;
|
|
}
|
|
.listName {
|
|
font-family: SourceHanSansCNR;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|