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

<template>
    <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">$0.22</div>
            <div class="mark2">
                <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
                <div>14872 SHBI stored in your DeNet account</div>
            </div>

        </div>
        <v-btn :txt="'OK'" :font-size="'16px'" class="btn" :icon="false"></v-btn>
    </div>
</template>
<script setup>
import { inject } from 'vue'
import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
let state = inject('state')

state.status = '新粉给钱'
// state.status = '老粉不给钱'

</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>