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

<template>
	<ChartCard margin="30rpx 0 0 0" title="领导级质量检查数">
		<view class="defect">
			<!-- <u-subsection :list="list" :current="current" @change="handleChange"></u-subsection> -->
			<view class="defect-main u-flex u-row-between">
				<view class="defect-box gb-all">
					<text class="defect-box-lab">集团检查数</text>
					<text class="defect-box-num u-margin-top-20">4567</text>
				</view>
				<view class="defect-box gb-rectified">
					<text class="defect-box-lab">企业检查数</text>
					<text class="defect-box-num u-margin-top-20">20</text>
				</view>
				<view class="defect-box gb-not-rectified">
					<text class="defect-box-lab">分支机构检查数</text>
					<text class="defect-box-num u-margin-top-20">6</text>
				</view>
			</view>
		</view>
	</ChartCard>
</template>
<script setup>
import ChartCard from '@/components/chartCard.vue';
import { ref, watch } from 'vue';

const current = ref(0);
const list = ref([
	{
		name: '集团级'
	},
	{
		name: '企业级'
	},
	{
		name: '分支机构'
	},
	{
		name: '项目级'
	}
]);

const handleChange = () => {};
</script>
<style lang="scss">
.defect {
	&-main {
		height: 120rpx;
	}

	&-box {
		width: calc((100% - 40rpx) / 3);
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

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

		&-num {
			font-size: 28rpx;
			font-weight: 600;
			color: #ffffff;
		}
	}
}

.gb-all {
	background: linear-gradient(to top right, #9e9e9e, #dcdcdc);
}

.gb-not-rectified {
	background: linear-gradient(to top right, #ffd626, #ff9f7d);
}

.gb-rectified {
	background: linear-gradient(to top right, #2488fa, #79baff);
}
</style>