CNCEC_APP/pages/index/board/qms/measuringCard.vue

<template>
	<ChartCard margin="30rpx 0 0 0" title="计量器具数">
		<view class="measuring u-flex u-row-between">
			<view class="measuring-box u-flex u-row-center">
				<view class="measuring-box-icon"><u-icon name="jiliangqijujianguan" color="#e28ea3" custom-prefix="custom-icon" size="60"></u-icon></view>
				<view class="measuring-box-row u-padding-left-20">
					<text class="measuring-box-row-num">900台</text>
					<text class="measuring-box-row-lab">计量器具数</text>
				</view>
			</view>

			<view class="measuring-box u-flex u-row-center">
				<view class="measuring-box-icon"><u-icon name="hege" color="#3bdae2" custom-prefix="custom-icon" size="60"></u-icon></view>
				<view class="measuring-box-row u-padding-left-20">
					<text class="measuring-box-row-num">9000台</text>
					<text class="measuring-box-row-lab">校验合格数</text>
				</view>
			</view>
		</view>
	</ChartCard>
</template>

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

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