<template>
    <div class="tumble_box">
        <div v-for="item in number">
            <div class="box">
                <span class="num"
                    :style="{ transform: `translate(-50%, -${item * 10}%)`, color: color }">0123456789</span>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    number: {
        type: Array,
        default: [0, 0, 0, 0],
        required: true,
    },
    color: {
        type: String,
        default: '#ffffff',
        required: true,
    },
});
</script>

<style lang="scss" scoped>
.tumble_box {
    display: flex;
    align-items: center;
}

.box {
    user-select: none;
    width: 40px;
    height: 60px;
    margin-right: 5px;
    background: url(data:image/png;base64,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);
    background-size: 100% 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
    writing-mode: vertical-lr;
    text-orientation: upright;
}

.num {
    position: absolute;
    left: calc(50% - 2px);
    top: calc(50% - 24px);
    line-height: 60px;
    transition: all 1.5s;
    font: 400 48px mFont;
}
</style>