<template>
    <view v-if="data && data.length > 0" class="show-num">
        <view
            v-for="(item, index) in data"
            :key="item.num"
            class="show-num__item"
        >
            <text class="show-num__item__label">{{ item.labelBefore }}</text>
            <text class="show-num__item__num">{{ item.num }}</text>
            <text class="show-num__item__label">{{ item.labelAfter }}</text>
            <view v-if="index < data.length - 1" class="c-line-vertical show-num__item__line"/>
        </view>
    </view>
</template>

<script>
export default {
    config: {
        component: true
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    }
};
</script>

<style lang="less" scoped>
.show-num {
    &__item {
        font-size: 14px;
        line-height: 14px;
        display: inline-block;
        &__label {
            color: #858585;
            font-weight: 400;
        }

        &__num {
            color: #1f1f1f;
            font-weight: 500;
        }

        &__line {
            margin: 0 5px;
        }
    }
}
</style>
