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
                <template v-for="item, i in state.follows">
                    <span v-if="i == 0">@{{ item.name }}</span>
                    <span v-else>, @{{ item.name }}</span>
                </template>
            </p>
            <!-- 新粉 -->
            <template v-if="Number(state.start_task.amountValue) > 0">
                <p>You Win</p>
                <component-zoom width="335" fontSize="34" style="margin:0 auto;">
                    <div class="money">${{ state.start_task.usdAmountValue }}</div>
                </component-zoom>
                <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="Number(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, onMounted } from 'vue'
import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
let state = inject('state')

const clickBtn = () => {
    state.init(() => {
        state.page = '邀请页'
    })
}
JSON.parse('[{\"type\":2},{\"type\":10},{\"relatedUsers\":[{\"name\":\"Ice17619765\",\"twitterUserId\":\"1502254505236525056\"},{\"name\":\"IanDuddyUK\",\"twitterUserId\":\"556285604\"},{\"name\":\"ffvc\",\"twitterUserId\":\"285917234\"}],\"type\":1}]')

</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 16px;
            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;
            align-items: center;

            img {
                width: 17px;
                height: 17px;
                margin-right: 5px;
            }

            div {
                color: #A9A49F;
                font-weight: 400;
                font-size: 12px;

            }
        }
    }

    .btn {
        position: absolute;
        bottom: 25px;
        left: 15px;
    }
}
</style>