<script setup>
import {reactive, onMounted} from "vue";
import Api from "../../api/index.js";

const list1 = reactive([]);
const list2 = reactive([]);
onMounted(() => {
    Api.system.getBarrageList().then(({data}) => {
        for (let i = 0; i <= 1000; i++) {
            list1.push(data[Math.floor(Math.random() * data.length)]);
            list2.push(data[Math.floor(Math.random() * data.length)]);
        }
    });
})
</script>

<template>
    <view class="!mt-[68rpx] !flex flex-col gap-[20rpx]">
        <view class="!flex gap-[30rpx] scrollX">
            <view
                v-for="item in list1"
                class="!h-[72rpx] qp">
                {{ item }}
            </view>
        </view>
        <view class="!flex gap-[30rpx] scrollX">
            <view
                v-for="item in list2"
                class="!h-[72rpx] qp">
                {{ item }}
            </view>
        </view>
    </view>
</template>

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

    image {
        flex-shrink: 0;
    }
}

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

.qp {
    @apply px-[36rpx] flex items-center rounded-full;
    background: linear-gradient(to right, #B8C5E9, #CAE2E9, #D0D6E2);
    box-shadow: inset 0 0 10px 15rpx rgba(255, 255, 255);
    backdrop-filter: blur(20px);
}
</style>
