de-net/src/view/iframe/treasure-hunt/components/carousel.vue

<template>
    <div class="area-carousel">
        <!-- left -->
        <div class="area-left" @click="state.page_show = '总邀请者页'">
            <div>
                <img :src="require('@/assets/svg/icon-user1.svg')" alt="" />
                <span>{{ state.detail.receiveCountWithAmount }}</span>
            </div>
            <div>Get Money</div>
        </div>
        <div class="area-right">
            <div class="area-success-message" @mouseover="mouseOver" @mouseleave="mouseLeave">
                <div class="content-success-message" ref="content_success_message">
                    <div class="success-message" v-for="item, index in state.success_message_list" :key="index"
                        @click="clickItem(item)">
                        <img :src="item.userInfo.avatarUrl" alt="" />
                        <span>Get</span> &nbsp;
                        <span>${{ item.amountUsdValue }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script setup>
import { inject, ref, onMounted, watch } from 'vue'
import { receiveListV2 } from '@/http/treasure.js'
let content_success_message = ref(null)
let state = inject('state')
let global_refresh = inject('global_refresh')
// ---- 走马灯
state.success_message_list = []

watch(global_refresh, () => {
    if (global_refresh.value) {
        init()
    }
})

onMounted(() => {
    init()
})

const init = () => {
    receiveListV2({
        params: {
            postId: state.postId,
            pageNum: 1,
            pageSize: 1000,
        }
    }).then((res) => {
        if (res.code == 0) {
            state.success_message_list = res.data
            state.success_message_list = state.success_message_list.concat(state.success_message_list)

            while (state.success_message_list.length < 10 && state.success_message_list.length > 0) {
                state.success_message_list = state.success_message_list.concat(state.success_message_list)
            }

            if (content_success_message && content_success_message.value) {
                let dom = content_success_message.value
                let s = state.success_message_list.length * 4
                dom.style.animationDuration = s + 's'
            }
        }
    })
}
const clickItem = (item) => {
    window.open(`https://twitter.com/${item.userInfo.nickName}`)
}

const mouseOver = () => {
    if (content_success_message && content_success_message.value && content_success_message.value.style) {
        content_success_message.value.style.animationPlayState = 'paused'
    }
}
const mouseLeave = () => {
    if (content_success_message && content_success_message.value && content_success_message.value.style) {
        content_success_message.value.style.animationPlayState = 'running'
    }
}
</script>
<style lang="scss" scoped>
.area-carousel {
    width: 100%;
    display: flex;

    .area-left {
        cursor: pointer;
        user-select: none;
        width: 78px;


        div:nth-child(1) {
            display: flex;
            align-items: center;

            img {
                width: 16px;
                height: 16px;
                margin-left: 14px;
                margin-right: 6px;
            }

            span {
                color: #FFFFFF;
                font-weight: 600;
                font-size: 12px;
            }
        }

        div:nth-child(2) {
            margin: 6px 0;
            text-align: center;
            color: #FFFFFF;
            opacity: 0.4;
            font-weight: 400;

        }

    }

    .area-right {
        flex: 1;
        overflow: hidden;

        .area-success-message {
            height: 30px;
            width: 100%;

            .content-success-message {
                width: fit-content;
                display: flex;
                animation: rolling 18s linear infinite;
                animation-duration: 10s;
                animation-play-state: running;

                .success-message {
                    cursor: pointer;
                    width: fit-content;
                    height: 30px;
                    padding: 0 9px;
                    border-radius: 100px;
                    background: rgba(255, 255, 255, 0.1);
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    margin-right: 10px;

                    img {
                        width: 20px;
                        height: 20px;
                        border-radius: 100px;
                        margin-right: 5px;

                    }

                    span {
                        font-style: normal;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 14px;
                        white-space: nowrap;
                    }

                    span:nth-child(2) {
                        color: #FFFFFF;
                        opacity: 0.5;

                    }

                    span:nth-child(3) {
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
}

@keyframes rolling {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
</style>