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

<template>
	<ChartCard :loading="loading" margin="0 0 30rpx 0">
		<view class="organizer">
			<view class="organizer-tit">企业及分支机构人数</view>
			<view class="row u-flex u-flex-wrap u-padding-20 u-margin-bottom-20">
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">企业总监数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">企业专职人员数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">分支机构总监数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">分支机构专职人员数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">A证人数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">B证人数</text>
					<text class="organizer_num">13273</text>
				</view>
			</view>
			<view class="organizer-tit">项目人数</view>
			<view class="row u-flex u-flex-wrap u-padding-20 u-margin-bottom-20">
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">项目总监</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">专职安全管理人员(含分包)</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">安全监护人数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">注安师数量</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">C证人数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">特种作业人员数量</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">参建人数</text>
					<text class="organizer_num">13273</text>
				</view>
				<view class="row_li u-flex u-row-center">
					<text class="organizer-lab">安全工时</text>
					<text class="organizer_num">13273</text>
				</view>
			</view>
		</view>
	</ChartCard>
</template>

<script setup>
import { ref } from 'vue';
import ChartCard from '@/components/chartCard.vue';

const loading = ref(false);
</script>

<style lang="scss" scoped>
.organizer {
	width: 100%;
	&-tit {
		color: #2573cb;
		width: 100%;
		font-size: 28rpx;
		background-color: #f7fbfe;
	}

	&-lab {
		color: #999999;
		font-size: 24rpx;
	}

	&_num {
		color: #333333;
		font-size: 28rpx;
		margin-top: 4rpx;
	}

	.row {
		background-color: #f7fbfe;
		gap: 20rpx 0;
		&_li {
			width: 50%;
			display: flex;
			flex-direction: column;
		}
	}
}
</style>