de-net-official/components/MobileGuidePage.vue

<template>
    <div class="guide" v-if="detail">
        <div class="header">
            <div class="tips">
                <img class="icon" :src="postUserInfo.avatarUrl" />
                <span>@{{postUserInfo.nickName}}</span>
                <span class="special">{{ playType === 3 ? 'Invite You to Hunt the Treasure' : 'Send You Giveaway!' }}</span>
            </div>
            <div class="gif">
                <img :src="gifUrl" />
            </div>
        </div>
        <div class="welcome">
            <!-- 普通红包 -->
            <template v-if="playType === 1">
                <template v-if="postBizData.rewardType === 1">
                    <div>
                        <span>You Won</span>
                        <img class="icon" :src="postBizData.currencyIconPath" />
                        <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
                        <span class="special">(${{postBizData.usdAmountValue}})</span>
                    </div>
                    <div>
                        <span>in the Giveaway!</span>
                    </div>
                </template>
                <template v-else>
                    <div>
                        <span>You Won</span>
                        <span class="special">{{postBizData.customizedReward}}</span>
                    </div>
                    <div>
                        <span>in the Giveaway!</span>
                    </div>
                </template>
            </template>

            <!-- 抽奖红包 -->
            <template v-if="playType === 2">
                <div>
                    <span>You are gifted an entries to earn</span>
                </div>
                <template v-if="postBizData.rewardType === 1">
                    <div>
                        <img class="icon" :src="postBizData.currencyIconPath" />
                        <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
                        <span class="special">(${{postBizData.usdAmountValue}})</span>
                    </div>
                </template>
                <template v-else>
                    <div>
                        <span class="special">{{postBizData.customizedReward}}</span>
                    </div>
                </template>
            </template>

            <!-- 夺宝红包 -->
            <template v-if="playType === 3">
                <div>
                    <span>Complete the quest to win up to</span>
                </div>
                <div>
                    <span class="special">${{detail.upGainAmountValue}} for you two!</span>
                </div>
            </template>
        </div>
        <div class="footer">
            <div class="item">
                <img class="icon" src="../static/img/icon-item1.svg" />
                <span>First, <span class="special">Retweet</span> this tweet.</span>
            </div>
            <div class="item">
                <img class="icon" src="../static/img/icon-item2.svg" />
                <span>When you have access to your <span class="special">laptop</span>, open <span class="special">Chrome</span> and go to <span class="special">twitter.com.</span></span>
            </div>
            <div class="item">
                <img class="icon" src="../static/img/icon-item3.svg" />
                <span>Go to your profile page by clicking <span class="special">"Profile"</span> on the left column.</span>
            </div>
            <div class="item">
                <img class="icon" src="../static/img/icon-item4.svg" />
                <span>Find the tweet you retweeted, and click the giveaway, you can then install the <span class="special">DeNet Chrome Extension</span> to Get Giveaway.</span>
            </div>
        </div>
        <div class="retweet">
            <img src="../static/img/icon-retweet.svg" />
            <span>Retweet</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'mobileGuidePage',
    props: {
        detail: {
            type: Object,
        },
        postBizData: {
            type: Object,
        },
        postUserInfo: {
            type: Object,
        },
        playType: {
			type: Number,
		},
    },
    data() {
        return {}
    },
    computed: {
        gifUrl() {
            let url;
            switch(this.playType) {
                case 1:
                    url = require('../static/img/icon-gif-redbag.gif');
                    break;
                case 2:
                    url = require('../static/img/icon-gif-draw.png');
                    break;
                case 3:
                    url = require('../static/img/icon-gif-treasure.png');
                    break;
            }
            return url;
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.guide {
    width: 100%;
    min-height: 100%;
    background: linear-gradient(180deg, #cceaff 0%, #ffffff 70.42%);
    .header {
        position: relative;
        height: 240px;
        .tips {
            display: inline-block;
            height: 32px;
            color: #FFFFFF;
            line-height: 30px;
            margin-top: 8px;
            font-size: 12px;
            padding: 0 18px 0 10px;
            background: #1B5277;
            border-radius: 0 32px 32px 0;
            .icon {
                overflow: hidden;
                width: 20px;
                height: 20px;
                margin-right: 6px;
                border-radius: 50%;
                vertical-align: middle;
            }
            .special {
                color: #FF9737;
                font-weight: 700;
            }
        }
        .gif {
            width: 150px;
            height: 150px;
            margin: 40px auto 0;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .welcome {
        padding: 14px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        text-align: center;
        background: rgba($color: #FFFFFF, $alpha: .5);
        .icon {
            overflow: hidden;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            vertical-align: middle;
        }
        .special {
            color: #FF9737;
        }
    }
    .footer {
        padding: 40px 15px 100px;
        color: #6D6D6D;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        .item {
            position: relative;
            padding-left: 38px;
            margin-bottom: 16px;
            &:last-child {
                margin-bottom: 0;
            }
            .icon {
                position: absolute;
                left: 0;
            }
            .special {
                color: #1D9BF0;
            }
        }
    }
    .retweet {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 26px;
        left: 16px;
        right: 16px;
        height: 52px;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 600;
        border-radius: 52px;
        background: #1D9BF0;
        img {
            width: 24px;
            margin-right: 6px;
        }
    }
}
</style>