jfcloud-coldchain/snowy-admin-web/src/components/HomeCard/SysCountCard/index.vue

<template>
	<div class="home_count">
		<div class="ant-card-body">
			<div class="card-left">
				<div class="left-title">监控点总数</div>
				<div class="left-count">{{ dataSource.jkdzs }}</div>
			</div>
			<div class="card-right">
				<img src="/src/assets/images/home/01.png" class="right-img" />
			</div>
		</div>
		<div class="ant-card-body">
			<div class="card-left">
				<div class="left-title">正常</div>
				<div class="left-count">{{ dataSource.zc }}</div>
			</div>
			<div class="card-right">
				<img src="/src/assets/images/home/02.png" class="right-img" />
			</div>
		</div>

		<div class="ant-card-body">
			<div class="card-left">
				<div class="left-title">断线</div>
				<div class="left-count">{{ dataSource.dx }}</div>
			</div>
			<div class="card-right">
				<img src="/src/assets/images/home/04.png" class="right-img" />
			</div>
		</div>
		<div class="ant-card-body">
			<div class="card-left">
				<div class="left-title">未绑定</div>
				<div class="left-count">{{ dataSource.xzwx }}</div>
			</div>
			<div class="card-right">
				<img src="/src/assets/images/home/05.png" class="right-img" />
			</div>
		</div>
	</div>
</template>

<script setup name="SysCountCard">
	import indexApi from '@/api/sys/indexApi'

	const apiLoading = ref(false)
	const dataSource = ref({
		jkdzs: 673,
		zc: 136,
		cx: 351,
		dx: 94,
		xzwx: 92
	})
	onMounted(() => {
		apiLoading.value = true
	})
</script>

<style lang="less" scoped>
	.home_count {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.ant-card-body {
			flex: 0 0 calc(25% - 10px);
			width: 100%;
			height: 150px;
			margin-bottom: 10px;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 10px;
			display: flex;
			justify-content: center;

			.card-left {
				width: 50%;
				padding: 30px 10px 20px 30px;
				.left-title {
					font-size: 18px;
				}
				.left-count {
					padding-top: 10px;
					font-size: 45px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.card-right {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;

				.right-img {
					width: 60%;
				}
			}
		}
		.ant-card-body:nth-child(5n) {
			margin-right: 0;
		}
	}
</style>