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

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

const props = defineProps({
    bg: {
        type: String,
        required: true
    },
    title: {
        type: String,
        default: '标题'
    },
    value: {
        type: Number,
        default: 0
    },
    unit: {
        type: String,
        default: ''
    }
});

</script>

<style lang="stylus" scoped>
.container
    display flex
    flex-direction column
    justify-content space-between
    width 200px
    height 55px
    padding 5px 30px
    background-repeat no-repeat
    background-size 100% 100%
    color #FFFFFF
    .top
        font-size 18px
        font-weight bold
    .bottom
        display flex
        justify-content space-between
        align-items center
        height 30px
        .left
            font-size 22px
        .right
            font-size 14px
</style>