<script setup>
import dm1 from '../../static/icons/弹幕1.png';
import dm2 from '../../static/icons/弹幕2.png';
import dm3 from '../../static/icons/弹幕3.png';
import dm4 from '../../static/icons/弹幕4.png';
import dm5 from '../../static/icons/弹幕5.png';
import dm6 from '../../static/icons/弹幕6.png';
import dm7 from '../../static/icons/弹幕7.png';
import dm8 from '../../static/icons/弹幕8.png';
import dm9 from '../../static/icons/弹幕9.png';
import {reactive} from "vue";

const MAP = [dm1,dm2,dm3,dm4,dm5,dm6,dm7,dm8,dm9];
const list1 = reactive([]);
const list2 = reactive([]);

for (let i = 0; i <= 100; i++) {
    list1.push(MAP[Math.floor(Math.random() * 9)]);
    list2.push(MAP[Math.floor(Math.random() * 9)]);
}
</script>

<template>
    <view class="!mt-[68rpx] !flex flex-col gap-[20rpx]">
        <view class="!flex gap-[30rpx] scrollX">
            <image
                v-for="item in list1"
                class="!h-[72rpx]"
                mode="heightFix"
                :src="item">
            </image>
        </view>
        <view class="!flex gap-[30rpx] scrollX">
            <image
                v-for="item in list2"
                class="!h-[72rpx]"
                mode="heightFix"
                :src="item">
            </image>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.scrollX {
    width: max-content !important;
    animation: scroll 150s linear infinite;

    image {
        flex-shrink: 0;
    }
}

@keyframes scroll {
    0% {
        transform: translateX(100vw); /* 从右侧开始 */
    }
    100% {
        transform: translateX(-100%); /* 滚动到左侧结束 */
    }
}
</style>
