<template>
    <div class="card-count2-container">
        <div class="top">
            <div class="value">{{ props.value }}</div>
            <div class="title">
                <span>{{ props.title }}</span>
                <span>({{ props.unit }})</span>
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                <div class="name">占比</div>
                <div class="value">{{ props.percent * 100 }}%</div>
            </div>
            <div class="process">
                <div class="value" :style="{width: props.percent * 100 +'px'}"></div>
            </div>
        </div>
    </div>    
</template>

<script setup>
import {defineProps} from 'vue';

const props = defineProps({
    value: {
        type: Number,
        default: 0
    },
    title: {
        type: String,
        default: '标题'
    },
    unit: {
        type: String,
        default: ''
    },
    percent: {
        type: Number,
        default: 0.5
    },
    color: {
        type: String,
        default: 'black'
    }
});
</script>
<style lang="stylus" scoped>
.card-count2-container
    width 140px
    height 120px
    display flex
    flex-direction column
    .top
        display flex
        flex-direction column
        .value
            padding 5px
            text-align center
            font-weight bold
            font-size 22px
            color v-bind(color)
        .title
            padding 0 5px
            text-align center
            font-size 14px
            color #FFFFFF
    .bottom
        display flex
        flex-direction column
        align-items center
        margin-top 10px
        padding 0 10px
        .title
            display flex
            justify-content space-between
            font-size 12px
            width 110px
            color #FFFFFF
        .process
            width 110px
            height 20px
            background-color #1b4d70
            position relative
            .value
                position absolute
                width 100px
                height 6px
                top 7px
                left 5px
                background linear-gradient(90deg, #02b1f7, #FFF)

</style>