de-net/src/view/iframe/treasure-hunt/result.vue

<template>
    <!-- 开奖页 -->
    <div class="content">
        <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
        <div class="mark">
            <p>You already followed Younan111 </p>
            <!-- 新粉 -->
            <template v-if="state.start_task.amountValue > 0">
                <p>You Win</p>
                <div class="money">${{ state.start_task.usdAmountValue }}</div>
                <div class="mark2">
                    <img :src="state.start_task.currencyIcon" alt="" />
                    <div>{{ state.start_task.amountValue }} {{ state.start_task.currencySymbol }} stored in your DeNet
                        account</div>
                </div>
            </template>
            <!-- 老粉不给钱 -->
            <template v-else>
                <p>Only new followers open silver chest</p>
                <p class="txt">Invite people to</p>
                <p class="txt">open golden chest！</p>
            </template>
        </div>
        <v-btn :txt="'Invite friends for more treasures'" :font-size="'16px'" class="btn"
            v-if="state.start_task.amountValue > 0" @onClick="clickBtn"></v-btn>
        <v-btn :txt="'Invite'" :font-size="'16px'" class="btn" v-else @onClick="clickBtn"></v-btn>
    </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.init()
    state.page = '邀请页'
}

</script>
<style lang="scss" scoped>
.content {
    width: 375px;
    height: 500px;
    background: linear-gradient(179.96deg, #876635 20.15%, #31251A 44.61%, #24180C 78.18%);
    text-align: center;
    position: relative;

    img {
        margin-top: 15px;
        width: 250px;
        height: 250px;
    }

    .mark {
        position: absolute;
        top: 246px;
        width: 375px;

        p {
            margin: 0;
            padding: 0;
            text-align: center;

        }

        p:nth-child(1) {
            color: #A9A49F;
            font-weight: 400;
            font-size: 12px;
            margin-bottom: 10px;
        }

        p:nth-child(2) {
            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>