<template>
    <div class="dialog-shadow">
        <div class="dialog-box">
            <div class="dialog-relative">
                <img src="./images/close_1 b@2x.png" alt="" class="dialog-close" @click="close" />
                <div class="text-1">领取奖品</div>
                <div class="text-2">恭喜你完成任务，快添加企业微信领取奖品吧！</div>
                <div class="img-box"><img :src="imgPath" alt="" /></div>
                <div class="text-3">
                    <img src="./images/fingerprint.png" alt="" />
                    <span>长按识别二维码添加微信</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        imgPath: {
            default: ''
        }
    },
    methods: {
        close() {
            this.$emit('close');
        }
    }
};
</script>
<style scoped lang="scss">
.dialog-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index:99;
    .dialog-box {
        width: 5.76rem;
        height: 6.44rem;
        position: absolute;
        left: 0.88rem;
        top: 3.64rem;
        background: white;
        border-radius: 0.16rem;
        .dialog-relative {
            position: relative;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            .dialog-close {
                position: absolute;
                right: 0.24rem;
                top: 0.24rem;
                width: 0.32rem;
                height: 0.32rem;
            }
            .text-1 {
                font-weight: 500;
                color: #333333;
                font-size: 0.32rem;
                padding-top: 0.48rem;
            }
            .text-2 {
                font-weight: 400;
                color: #666666;
                font-size: 0.32rem;
                padding-top: 0.16rem;
                padding:0 .32rem;
                display: flex;
                justify-content: center;
            }
            .img-box {
                margin:0 !important;
                margin-top: 0.16rem !important;
                width: 3.2rem;
                height: 3.2rem;
                display: flex;
                justify-content: center;
                margin-left: 1.28rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text-3 {
                font-size: 0.24rem;
                font-weight: 400;
                color: #333333;
                margin-top: 0.16rem;
                img {
                    width: 0.32rem;
                    height: 0.32rem;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>
