<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 } from "vue";
const list = ref([
	{ bgimg: "bgImgOne", number: "60348", name: "今年新增工程" },
	{ bgimg: "bgImgTwo", number: "19374", name: "今年竣工工程" },
	{ bgimg: "bgImgThree", number: "2479", name: "重点工程" }
]);
</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("/src/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("/src/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("/src/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>
