<template>
    <div class="container" :style="{backgroundImage: `url(${bg})`}">
        <div class="value">{{ props.value }}</div>
        <div class="title">{{ props.title }}</div>
    </div>
</template>

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

const props = defineProps({
    value: {
        type: Number,
        default: 0
    },
    title: {
        type: String,
        default: '标题'
    },
    bgType: {
        type: Number,
        default: 1
    }
})

const bg = ref('assets/imgs/card/bg6.png');
if(props.bgType === 2) {
    bg.value = 'assets/imgs/card/bg7.png';
}
</script>

<style lang="stylus" scoped>
.container
    width 120px
    height 120px
    background-size 140% 100%
    background-position center -20px
    text-align center
    color #FFF
    .value
        font-size 22px
        font-weight bold
    .title
        font-size 12px
</style>