<template>
    <view class="overview">
        <view class="item" v-for="(item, index) in cardList" :key="index">
            <text class="label">{{ item.label }}</text>
            <text class="value">{{ item.value }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

interface ICrad {
    label: string
    value: string
}
defineProps({
    cardList: {
        type: Array as PropType<ICrad[]>,
        default: () => []
    }
})
</script>

<style lang="scss" scoped>
.overview {
    display: flex;
    gap: 20rpx;
    padding: 24rpx 32rpx;
    .item {
        flex: 1;
        flex-direction: column;
        @include flex-center;
        background-color: $gray-1;
        border-radius: 12rpx;
        padding: 24rpx 0;
        gap: 12rpx;
        .label {
            color: $gray-2;
        }
        .value {
            font-size: 36rpx;
            font-weight: 700;
        }
    }
}
</style>
