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

<template>
    <div class="content" v-show="show">
        <div class="mark">
            <div class="background"></div>
            <img :src="icon" alt="">
            <span>{{ txt }}</span>
        </div>
    </div>
</template>
<script setup>
import { defineProps, watch, reactive } from "vue";

let props = defineProps({
    txt: {
        type: String,
        default: ''
    },

    icon: {
        type: String,
        default: require('@/assets/svg/icon-while-yes.svg')
    },
    show: {
        type: Boolean,
        default: false
    },
})


</script>
<style lang="scss" scoped>
.content {
    position: fixed;
    width: 375px;
    height: 500px;
    text-align: center;
    display: flex;
    justify-content: center;
    top: 0;

    .mark {
        height: 39px;
        top: 50%;
        width: fit-content;
        color: #FFFFFF;
        border-radius: 44px;
        overflow: hidden;
        position: relative;

        display: flex;
        align-items: center;
        padding: 0 13px;

        img {
            z-index: 2;
            width: 15px;
            height: 15px;
            margin-right: 6px;
        }

        span {
            z-index: 2;
            font-weight: 600;
            font-size: 14px;
            color: #fff;
        }

        .background {
            z-index: 1;
            width: 100%;
            left: 0;
            top: 0;
            height: 100%;
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
        }
    }

}
</style>