<script setup>
import { onMounted, reactive } from "vue";

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

<template>
    <view class="container">
        <view class="row scrollX">
            <view v-for="item in list1" :key="item" class="qp">
                {{ item }}
            </view>
        </view>
        <view class="row scrollX">
            <view v-for="item in list2" :key="item" class="qp">
                {{ item }}
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.container {
    margin-top: 68rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.row {
    display: flex;
    gap: 30rpx;
    overflow-x: auto; // optional
}

.scrollX {
    width: max-content !important;
    animation: scroll 120s linear infinite;

    image {
        flex-shrink: 0;
    }
}

@keyframes scroll {
    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }
}

.qp {
    height: 72rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;
    display: flex;
    align-items: center;
    border-radius: 9999px;
    background: linear-gradient(to right, #B8C5E9, #CAE2E9, #D0D6E2);
    box-shadow: inset 0 0 10px 15rpx rgba(255, 255, 255);
    backdrop-filter: blur(20px);
}
</style>
