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

<template>
	<ChartCard margin="0 0 30rpx 0" title="作业许可数">
		<view class="work u-flex u-row-between">
			<view class="work-box u-flex u-row-center">
				<view class="work-box-icon"><u-icon name="xukezheng" color="#8CEEFF" custom-prefix="custom-icon" size="60"></u-icon></view>
				<view class="work-box-row u-padding-left-20">
					<text class="work-box-row-num">9000个</text>
					<text class="work-box-row-lab">许可证总数</text>
				</view>
			</view>

			<view class="work-box u-flex u-row-center">
				<view class="work-box-icon">
					<u-icon name="guanbi" color="#ee6666" custom-prefix="custom-icon" size="60"></u-icon>
				</view>
				<view class="work-box-row u-padding-left-20">
					<text class="work-box-row-num">9000个</text>
					<text class="work-box-row-lab">高风险作业许可进行中数量</text>
				</view>
			</view>
		</view>
	</ChartCard>
</template>

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

<style lang="scss" scoped>
.work {
	padding: 20rpx 0;
	&-box {
		height: 100rpx;
		&-row {
			height: 100rpx;
			display: flex;
			flex-direction: column;
			&-lab {
				font-size: 24rpx;
				color: #999999;
				margin-top: 12rpx;
			}
			&-num {
				color: #333333;
				font-size: 28rpx;
			}
		}
	}
}
</style>