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

<template>
    <div class="open-box">
        <div class="background"></div>
        <!-- 开奖页 -->
        <div class="content">
            <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" class="popIn" />
            <div class="mark">
                <p>You Win</p>
                <div class="money">{{ state.open_box.data.usdAmountValue }}</div>
                <div class="mark2">
                    <img :src="state.open_box.data.currencyIcon" alt="" />
                    <div>{{ state.open_box.data.amountValue }} {{ state.open_box.data.currencySymbol }} stored in your
                        DeNet
                        account
                    </div>
                </div>
            </div>
            <v-btn :txt="'OK'" :font-size="'16px'" class="btn" :icon="false" @onClick="clickBtn"></v-btn>
        </div>
    </div>
</template>
<script setup>
import { inject } from 'vue'
import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
let state = inject('state')

const clickBtn = () => {
    state.open_box.show = false
}
</script>
<style lang="scss" scoped>
.open-box {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;


    .background {
        background: #000000;
        opacity: .9;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .content {
        z-index: 2;
        width: 375px;
        height: 500px;
        text-align: center;
        position: relative;

        .popIn {
            -webkit-animation: fadeleftIn .4s;
            animation: fadeleftIn .4s;
            -webkit-animation-name: popIn;
            animation-name: popIn;
        }

        img {
            margin-top: 15px;
            width: 250px;
            height: 250px;
            animation: show 0.5s;
        }

        .mark {
            position: absolute;
            top: 246px;
            width: 375px;

            p {
                margin: 0;
                padding: 0;
                text-align: center;

            }


            p:nth-child(1) {
                margin-bottom: 10px;
                color: #FFFFFF;
                font-weight: 800;
                font-size: 18px;
            }

            .txt {
                color: #FFC83A;
                font-weight: 800;
                font-size: 24px;

            }

            .money {
                color: #FFC83A;
                font-weight: 800;
                font-size: 34px;
            }

            .mark2 {
                margin-top: 10px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 17px;
                    height: 17px;
                    margin-right: 5px;
                }

                div {
                    color: #A9A49F;
                    font-weight: 400;
                    font-size: 12px;

                }
            }
        }

        .btn {
            position: absolute;
            bottom: 25px;
            left: 15px;
        }
    }
}



@keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}
</style>