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

const list = ['简单做轻松赚', '我是大圆宝 已提现304.46元', '路马克 已提现858.37元', 'Rainy day 已提现1634.78元', '邀请好友，更多奖励', '0成本轻创业，有手就行', '无套路，没门槛', '一边带娃一边赚钱，方便省心~', '舍友同学都在用，提现快捷'];
const list1 = reactive([]);
const list2 = reactive([]);
onMounted(() => {
    for (let i = 0; i <= 1000; i++) {
        list1.push(list[Math.floor(Math.random() * list.length)]);
        list2.push(list[Math.floor(Math.random() * list.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 1200s 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>
