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

<template>
    <div>
        <div class="background"></div>
        <!-- 开奖页 -->
        <div class="content">

            <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
            <div class="mark">
                <p>You Win</p>
                <div class="money">{{ state.open_box.usdAmountValue }}</div>
                <div class="mark2">
                    <img :src="state.open_box.currencyIcon" alt="" />
                    <div>{{ state.open_box.amountValue }} {{ state.open_box.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>
.background {
    background: #000000;
    opacity: .9;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
}

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



    img {
        margin-top: 15px;
    }

    .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;

            img {
                width: 17px;
                height: 17px;
                margin: 0;
            }

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

            }
        }
    }

    .btn {
        position: absolute;
        bottom: 25px;
        left: 15px;
    }
}
</style>