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

<template>
    <div class="content">
        <div class="background"></div>
        <!-- 开奖页 -->
        <div class="dialog">
            <div class="txt">{{ txt }}</div>
            <div class="btn" @click="clickBtn">OK</div>
        </div>
    </div>
</template>
<script setup>
import { inject, defineProps, defineEmits } from 'vue'

let state = inject('state')
defineProps({
    txt: {
        type: String,
        default: 'All treasures are hunted, good luck next time!'
    }
})
const clickBtn = () => {
    state.dialog.show = false
}
</script>
<style lang="scss" scoped>
.content {
    width: 375px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .background {
        background: #000000;
        opacity: .9;
        position: fixed;
        width: 375px;
        height: 500px;
    }

    .dialog {
        z-index: 1;
        width: 335px;
        background: #FFFFFF;
        border-radius: 15px;

        .txt {
            color: #000000;
            font-weight: 500;
            font-size: 16px;
            padding: 27px 30px 16px 30px;
            text-align: center;

        }

        .btn {
            cursor: pointer;
            border-top: 1px solid #EEEEEE;
            width: 100%;
            height: 52px;
            color: #1D9BF0;
            font-weight: 500;
            font-size: 17px;
            line-height: 52px;
            text-align: center;

        }
    }
}
</style>