zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue

<template>
	<div class="leftTop">
		<Card title="人员概况">
			<div class="topPeopleNum">
				<div class="dataTlo">
					<div class="text"><i>实名制人数</i></div>
					<div class="num"><i>1024</i></div>
				</div>
				<div class="dataTlt">
					<div class="text"><i>在场人数</i></div>
					<div class="num"><i>1024</i></div>
				</div>
			</div>
			<div class="bottomPeopleNum">
				<div style="display: flex; margin-left: 2%">
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 2%"></div>
					<div><i>管理人员</i></div>
				</div>
				<div class="peopleData">
					<div class="peoImg"><img src="@/assets/images/comprehensiveManage/project3.png" alt="" /></div>
					<div class="peoNum">
						<div class="penName"></div>
						<div class="penN"></div>
						<div class="numData1 numData">
							<div class="text"><i>甲方人员</i></div>
							<div class="num"><i style="color: #eea959">1/2</i></div>
						</div>
						<div class="numData2 numData">
							<div class="text"><i>监理人员</i></div>
							<div class="num"><i style="color: #82fbea">1/1</i></div>
						</div>
						<div class="numData3 numData">
							<div class="text"><i>乙方人员</i></div>
							<div class="num"><i style="color: #7aa0ea">0/1</i></div>
						</div>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.topPeopleNum {
		height: 40%;
		display: flex;
		.dataTlo {
			width: 35%;
			height: 100%;
			background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 10%;
		}
		.dataTlt {
			width: 35%;
			height: 100%;
			background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 10%;
		}
		.text {
			color: #fff;
			font-size: 14px;
			margin-left: 50%;
			margin-top: 15%;
		}
		.num {
			font-size: 24px;
			font-weight: bold;
			background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-left: 47%;
			margin-top: 5%;
		}
	}
	.bottomPeopleNum {
		height: 60%;
		div {
			height: 20%;
			color: #fff;
			font-size: 16px;
		}
		.peopleData {
			height: 80%;
			display: flex;
			.peoImg {
				width: 30%;
				height: 100%;
				img {
					margin-left: 30%;
					width: 50%;
					margin-top: 7%;
				}
			}
			.peoNum {
				height: 100%;
				width: 70%;
				position: relative;
				.penName {
					background: rgba(39, 88, 192, 0.6);
					margin: 5% 5%;
				}
				.penN {
					height: 10px;
					background: url("@/assets/images/comprehensiveManage/project8.png") no-repeat;
					background-size: 100% 100%;
					margin: 13% 5%;
				}
				.numData1 {
					left: 8%;
					top: -10%;
				}
				.numData2 {
					left: 40%;
					top: -10%;
				}
				.numData3 {
					left: 70%;
					top: -10%;
				}
				.numData {
					position: absolute;
					height: 60%;
					width: 30%;
					.text {
						margin-top: 18%;
						font-size: 16px;
					}
					.num {
						font-size: 20px;
						margin-top: 20%;
						margin-left: 10%;
					}
				}
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
</style>