de-net/src/view/iframe/buy-nft/buy/open-box.vue

<template>
    <!-- gif -->
    <div class="box_content">
        <img :src="require('@/assets/gif/box.gif')" class="box" v-show="state.box.show" />
        <div class="nft" v-for="item in state.nft.data" v-show="item.show">
            <div class="detail">
                <img :src="item.imagePath" alt="" />
            </div>
            <p>{{ item.nftItemName }}</p>
        </div>
    </div>
</template>
<script setup>
import { reactive, onMounted, inject } from 'vue'
import router from "@/router/buy-nft.js";
let pay_info = inject('pay_info');
let state = reactive({
    box: {
        show: true
    },
    nft: {
        data: []
    }
})

const setAllNoShow = () => {
    state.nft.data.forEach((item) => {
        item.show = false
    })
}

const showNFTs = () => {
    let len = state.nft.data.length
    if (len == 0) {
        return
    }
    let i = 0
    setAllNoShow()
    state.nft.data[i].show = true
    i++
    let timer = setInterval(() => {
        if (len > i) {
            setAllNoShow()
            state.nft.data[i].show = true
        } else {
            clearInterval(timer)
            chrome.tabs.getCurrent((tab) => {
                chrome.tabs.sendMessage(tab.id, {
                    actionType: "IFRAME_TWITTER_HIDE_BUY_NFT",
                }, (res) => { });
                chrome.tabs.sendMessage(tab.id, {
                    actionType: "IFRAME_TWITTER_SHOW_POPUP_PAGE",
                }, (res) => { });
                router.replace('/')
            })
        }
        i++
    }, 2000)
}

onMounted(() => {
    state.nft.data = pay_info.buy_items || []
    setTimeout(() => {
        state.box.show = false
        showNFTs()
    }, 2000)
})
</script>
<style lang="scss" scoped>
.box_content {
    position: fixed;
    text-align: center;
    display: flex;
    justify-content: center;
    z-index: 2;

    .box {
        width: 200px;
        position: absolute;
        top: 40%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }

    .nft {
        position: absolute;
        top: 40%;
        margin-top: -200px;
        width: 400px;
        height: 450px;
        animation: myfirst 0.5s;

        display: flex;
        flex-direction: column;

        .detail {
            flex: 1;
            text-align: center;

            img {
                width: 100%;
                height: 100%;
                border: 3px solid white;
                border-radius: 10px;
            }
        }

        p {
            margin: 0;
            padding: 0;
            margin-top: 20px;
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 700;
        }

    }
}

@keyframes myfirst {
    0% {
        width: 300px;
        height: 300px;
    }

    50% {
        width: 450px;
        height: 500px;
        margin-top: -210px;
    }

    100% {
        margin-top: -200px;
        width: 400px;
        height: 450px;
    }
}
</style>