<template>
    <el-card>
        <div class="flex flex-wrap">
            <div class="head-con" v-for="(item, i) in list" :key="i" @click="dianji(i)" :style="{ backgroundColor: i === num ? '#3E8EF7' : '#fff' }">
                <div :class="{ bgcolor1: i === num, title: i !== num }">
                    {{ item.name }}
                </div>
                <div :class="{ bgcolor2: i === num, detail: i !== num }">
                    {{ item.count }}
                </div>
            </div>
        </div>
    </el-card>
</template>
<script lang="ts" setup>
const props = defineProps({

    list: {
        type: Array
    }
})
const list = reactive([])
console.log(props.list)
list.splice(0, list.length, ...props.list)
const num = ref(-1);
const dianji = (index: any) => {
    num.value = index;
};


</script>

<style lang="scss" scoped>
el-card {
    border-radius: 4px 0 4px 0 !important;
}

.head-con {
    margin-right: 50px;
    padding: 10px;
    cursor: pointer;

    .title {
        margin-bottom: 6px;
        text-align: center;
        font-size: 12px;
        color: #ccc;
    }

    .detail {
        color: #3e8ef7;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
    }

    .bgcolor1 {
        color: #fff;
        margin-bottom: 6px;
        text-align: center;
        font-size: 12px;
    }

    .bgcolor2 {
        color: #fff;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
    }
}
</style>