CNCEC_APP/pages/index/board/safe/projectCard.vue

<template>
	<ChartCard :loading="loading" margin="30rpx 0 0 0" padding="20rpx 10rpx 80rpx 10rpx" bg-color="linear-gradient(#1e5ca3, #3094ff)">
		<view class="project" @click="router.push('/pages/index/dataSummary/index')">
			<view class="project-col">
				<text class="project-col-num">{{ projectInfoData?.BeUnderConstructionNum || 0 }}</text>
				<text class="project-col-lab u-margin-top-10">在建项目</text>
			</view>
			<view class="project-col">
				<text class="project-col-num">{{ projectInfoData?.ShutdownNum || 0 }}</text>
				<text class="project-col-lab u-margin-top-10">停工项目</text>
			</view>
			<view class="project-col">
				<text class="project-col-num">{{ projectInfoData?.JoinConstructionPersonNum || 0 }}</text>
				<text class="project-col-lab u-margin-top-10">参建人数</text>
			</view>
			<view class="project-col">
				<text class="project-col-num">{{ projectInfoData?.MajorProjectsUnderConstructionNum || 0 }}</text>
				<text class="project-col-lab u-margin-top-10">在施危大工程</text>
			</view>
		</view>
	</ChartCard>
</template>

<script setup>
import { ref } from 'vue';
import { router } from '@/utils';
import ChartCard from '@/components/chartCard.vue';
const loading = ref(false);
defineProps({
	projectInfoData: {
		type: Object,
		default: () => ({})
	}
});
</script>

<style lang="scss">
.project {
	display: grid;
	grid-template-columns: repeat(4, 25%);

	&-col {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&-num {
			text-align: center;
			overflow-wrap: break-word;
			width: 100%;
			color: #ffffff;
			font-size: 40rpx;
		}

		&-lab {
			color: #ffffff;
			font-size: 24rpx;
		}
	}
}
</style>