<template>
	<ChartCard margin="30rpx 0 0 0" title="星级标准化工地建设">
		<view class="star-level">
			<view class="star-level-box u-flex">
				<view class="star-level-tit">五星</view>
				<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
					<view class="star-level-row">
						<view class="star-level_lab">
							创建数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
					<view class="star-level-row">
						<view class="star-level_lab">
							企业自评价达标数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
					<view class="star-level-row">
						<view class="star-level_lab">
							集团验收达标数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
				</view>
			</view>
			<view class="star-level-box u-flex u-margin-top-30 u-margin-bottom-30">
				<view class="star-level-tit">四星</view>
				<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
					<view class="star-level-row">
						<view class="star-level_lab">
							创建数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
					<view class="star-level-row">
						<view class="star-level_lab">
							企业自评价达标数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
					<view class="star-level-row">
						<view class="star-level_lab">
							集团验收达标数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
				</view>
			</view>
			<view class="star-level-box u-flex">
				<view class="star-level-tit">三星</view>
				<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
					<view class="star-level-row">
						<view class="star-level_lab">
							创建数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
					<view class="star-level-row">
						<view class="star-level_lab">
							企业自评价达标数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
					<view class="star-level-row">
						<view class="star-level_lab">
							集团验收达标数
						</view>
						<view class="star-level_num">
							59
						</view>
					</view>
				</view>
			</view>
		</view>
	</ChartCard>
</template>

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


<style lang="scss">
	.star-level{
		&-box{
			&_inner{
				padding: 0 30rpx;
				display: grid;
				grid-template-columns: 100rpx 1fr 1fr;
				column-gap: 20rpx;
			}
		}
		&-tit{
			padding: 12rpx;
			width: 48rpx;
			height: 82rpx;
			text-align: center;
			line-height: 30rpx;
			font-size: 24rpx;
			background: linear-gradient(to right, #1e5ca3, #3094ff);
			color: #ffffff;
			border-radius: 6rpx;
		}
		&_lab{
			font-size: 20rpx;
			color: #999999;
		}
		&_num{
			font-size: 28rpx;
			color: #333333;
		}
		&-row{
			height: 100rpx;
			padding: 10rpx;
			flex: 1;
			background-color: #F7FBFE;
			display: flex;flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>