<template>
	<ChartCard :loading="loading" margin="30rpx 0 0 0" padding="20rpx 10rpx 80rpx 10rpx"
		bg-color="linear-gradient(#1e5ca3, #3094ff)">
		<view class="project">
			<view class="project-col" @click="handleSkip">
				<text class="project-col-num">1024</text>
				<text class="project-col-lab u-margin-top-10">在建项目</text>
			</view>
			<view class="project-col">
				<text class="project-col-num">1024</text>
				<text class="project-col-lab u-margin-top-10">停工项目</text>
			</view>
			<view class="project-col">
				<text class="project-col-num">1024111</text>
				<text class="project-col-lab u-margin-top-10">参建人数</text>
			</view>
			<view class="project-col">
				<text class="project-col-num">1024</text>
				<text class="project-col-lab u-margin-top-10">在施危大工程</text>
			</view>
		</view>
	</ChartCard>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import ChartCard from '@/components/chartCard.vue'
	const loading = ref(false)
	
	const handleSkip = ()=>{
		uni.navigateTo({
			url: `/pages/penetrate/project`
		})
	}
</script>

<style lang="scss">
	.project {
		display: grid;
		grid-template-columns: repeat(4, 25%);

		&-col {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&-num {
				text-align: center;
				overflow-wrap: break-word;
				width: 100%;
				color: #ffffff;
				font-size: 40rpx;

			}

			&-lab {
				color: #ffffff;
				font-size: 24rpx;
			}
		}
	}
</style>