<template>
    <el-aside class="left">

        <ul class="flex">
            <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" class="num" />
        </ul>

    </el-aside>
</template>

<script setup>
import { computed, ref } from 'vue'
import ScrollNum from './roll.vue'

const num = ref(888)
const numArr = computed(() => {
    const str = String(num.value)
    let arr = []
    for (let i = 0; i < str.length; i++) {
        arr.push(parseInt(str[i]))
    }
    return arr
})
</script>

<style scoped lang="scss">
@import '../assets/css/left.scss';
</style>
<style>
.classpopover {
    .el-popper__arrow {
        top: 196px !important;
    }

    .el-popper[data-popper-placement^=bottom],
    .el-popper__arrow::before {
        border-left-color: transparent !important;
        border-top-color: transparent !important;
    }
}

.flex {
    display: flex;
}

.el-popper.is-light {
    border-radius: 10px;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.num {
    /* --width: 26px;
    margin-right: 6px;
    border: 1px solid black;
    border-radius: 8px */
}
</style>