de-net-official/pages/luckdraw.vue

<!-- 红包玩法落地页 -->
<template>
    <div class="content">
        <template v-if="isLoading">
            <img
                class="loading"
                src="../static/svg/icon-loading.svg" />
        </template>
        <template v-else>
            <template v-if="isMobile">
                <!-- 手机端 -->
                <div class="small" :class="{
                    bg: status === 'not-open',
                    custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
                }">
                    <template v-if="status === 'not-open'">
                        <template v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
                            <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
                        </template>
                        <template v-else>
                          <template v-if="isMoneyPrize">
                              <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
                              <div class="head">
                                  <img :src="detail.postBizData.postUserInfo.avatarUrl" />
                                  <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
                              </div>
                              <div class="price">
                                  <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
                                  <div class="money">
                                      <img :src="detail.postBizData.currencyIconPath" />
                                      <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
                                  </div>
                              </div>
                              <div class="time">
                                  <img class="img" :src=" require('../static/svg/icon-time.svg') " />
                                  {{ validity || '00:00:00' }}
                              </div>
                              <div class="box">
                                  <img src="../static/subject/icon-box.png" />
                              </div>
                          </template>

                          <template v-else>
                            <custom-card-cover
                                :totalCount="detail.postBizData.totalCount"
                                :amountValue="detail.postBizData.amountValue"
                                :tokenSymbol="detail.postBizData.tokenSymbol"
                                :currencyIconUrl="detail.postBizData.iconPath"
                                :playType="2"
                                :validity="validity"
                                :userInfo="{
                                    nickName: detail.postBizData.postUserInfo.nickName,
                                    avatarUrl: detail.postBizData.postUserInfo.avatarUrl
                                }"
                                :rewardType="detail.postBizData.rewardType"
                                :customizedReward="detail.postBizData.customizedReward"
                                :showBottomInfo="false"
                            ></custom-card-cover>
                          </template>
                      </template>
                    </template>
                    <template v-else>
                        <div class="succTop">
                            <template v-if="status === 'opened'">
                                <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
                                <p class="tips">Good Luck Next Time!</p>
                            </template>
                            <template v-else-if="status === 'expire'">
                                <!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
                                <p class="tips">This Draw is Complete</p> -->
                                <p class="expire">This Giveaways<br/>expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</p>
                            </template>
                            <template v-else>
                                <p class="win">🎉 Awesome! You Will Get</p>
                                <div class="win-money">
                                    <img :src="detail.postBizData.currencyIconPath" />
                                    <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
                                </div>
                            </template>
                        </div>
                        <div class="succTitle">
                            <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</span>
                            <span  v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
                        </div>
                        <div class="luck-list" @scroll="handleScroll($event)">
                            <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
                                <div class="userLogo">
                                    <img class="medal" v-if="i < 2" :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
                                    <img class="header" v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
                                    <img class="header" v-else src="/svg/icon-twitter.svg" alt />
                                </div>
                                <div class="luck-content">
                                    <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
                                    <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
                                </div>
                                <div class="luck-money" v-if="isMoneyPrize">
                                    <img :src="item.currencyIconPath" alt />
                                    <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
                                </div>
                                <div class="luck-custom-prize" v-else>winner</div>
                                <div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
                                    <img src="/svg/icon-king-hat.svg" alt />
                                    <span>Luckiest Draw</span>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="area-cp-link">
                        <div class="area-list">
                            <div class="item">
                                <div class="icon"><img :src=" require('../static/subject/01.svg') " /></div>
                                <div class="font">Complete the tasks on tweet</div>
                            </div>
                            <div class="item">
                                <div class="icon"><img :src=" require('../static/subject/02.svg') " /></div>
                                <div class="font">Open link on PC to draw</div>
                                <div class="pc"><img :src=" require('../static/subject/pc.svg') " /></div>
                            </div>
                        </div>
                        <div class="area-content">
                            {{ linkHref }}
                        </div>
                        <div class="area-btn">
                            <div class="btn" :data-clipboard-text="linkHref">Copy Link</div>
                        </div>
                    </div>
                    <div class="layer" v-show="layer_show">
                        <div class="layer-box">
                            <div class="layer-txt">Unable to copy, please enter the link manually</div>
                            <div class="layer-btn" @click="layer_show = false">Done</div>
                        </div>
                    </div>
                </div>
            </template>
            <!-- PC端 -->
            <template v-else>
                <div class="logo">
                    <img src="/img/icon-logo.png" />
                </div>
                <div class="show">
                    <div class="center">
                      <div class="head-in-custom" v-if="!isMoneyPrize">
                          <img :src="detail.postBizData.postUserInfo.avatarUrl" />
                          <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
                      </div>
                        <div class="giveaway" :class="{
                            bg: status === 'not-open',
                            custom: detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled,
                            'auto-height': !isMoneyPrize
                        }">
                            <div v-if="status === 'not-open'">
                                <template v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
                                  <!-- <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
                                  <div class="customBottom">
                                    <div class="theme">
                                      <img class="icon" :src="require('../static/svg/icon-last-time.svg')"/>
                                      <span class="time2">{{ validity || '00:00:00' }}</span>
                                      <span class="info">Left</span>
                                    </div>
                                    <div class="winner-info">
                                      <span class="count">{{detail.postBizData.totalCount}} Winners</span>
                                      <span>to Share </span>
                                      <span class="prize-name">{{detail.postBizData.amountValue + ' ' + detail.postBizData.currencySymbol}}</span>
                                    </div>
                                  </div> -->
                                  <custom-card-cover
                                    :totalCount="detail.postBizData.totalCount"
                                    :amountValue="detail.postBizData.amountValue"
                                    :tokenSymbol="detail.postBizData.tokenSymbol"
                                    :currencyIconUrl="detail.postBizData.iconPath"
                                    :playType="2"
                                    :posterType="2"
                                    :customPosterInstalled="detail.postBizData.customPosterInstalled"
                                    :validity="validity"
                                    :userInfo="{
                                        nickName: detail.postBizData.postUserInfo.nickName,
                                        avatarUrl: detail.postBizData.postUserInfo.avatarUrl
                                    }"
                                    :rewardType="detail.postBizData.rewardType"
                                    :customizedReward="detail.postBizData.customizedReward"
                                    :showBottomInfo="true"
                                  ></custom-card-cover>
                                </template>
                                <template v-else>
                                  <!-- 旧版 样式，后续更新时在 custom-card-cover 公共组件内维护-->
                                  <template v-if="isMoneyPrize">
                                    <img class="lottery" :src=" require('../static/svg/icon-luck-mark.svg') " />
                                    <div class="head">
                                        <img :src="detail.postBizData.postUserInfo.avatarUrl" />
                                        <span>{{ detail.postBizData.postUserInfo.nickName }}</span>
                                    </div>
                                    <div class="price">
                                        <div class="usdt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
                                        <div class="money">
                                            <img :src="detail.postBizData.currencyIconPath" />
                                            <font-amount :fontSize="60" :amount="detail.postBizData.amountValue"></font-amount>
                                        </div>
                                    </div>
                                    <div class="time">
                                        <img class="img" :src=" require('../static/svg/icon-time.svg') " />
                                        {{ validity || '00:00:00' }}
                                    </div>
                                    <div class="box">
                                        <img src="../static/subject/icon-box.png" />
                                    </div>
                                  </template>

                                  <template v-else>
                                    <custom-card-cover
                                        :totalCount="detail.postBizData.totalCount"
                                        :amountValue="detail.postBizData.amountValue"
                                        :tokenSymbol="detail.postBizData.tokenSymbol"
                                        :currencyIconUrl="detail.postBizData.iconPath"
                                        :playType="2"
                                        :validity="validity"
                                        :userInfo="{
                                            nickName: detail.postBizData.postUserInfo.nickName,
                                            avatarUrl: detail.postBizData.postUserInfo.avatarUrl
                                        }"
                                        :rewardType="detail.postBizData.rewardType"
                                        :customizedReward="detail.postBizData.customizedReward"
                                        :showBottomInfo="true"
                                    ></custom-card-cover>
                                  </template>
                                </template>
                            </div>
                            <template v-else>
                                <div class="succTop">
                                    <template v-if="status === 'opened'">
                                        <img class="img" :src=" require('../static/svg/icon-luck-rabbit.svg') " />
                                        <p class="tips">Good Luck Next Time!</p>
                                    </template>
                                    <template v-else-if="status === 'expire'">
                                        <!-- <img class="img" :src=" require('../static/svg/icon-luck-complete.svg') " />
                                        <p class="tips">This Draw is Complete</p> -->
                                        <p class="expire">This Giveaways<br/>expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</p>
                                    </template>
                                    <template v-else>
                                        <p class="win">🎉 Awesome! You are Winner!</p>
                                        <div class="win-money">
                                            <img :src="detail.postBizData.currencyIconPath" />
                                            <font-amount :fontSize="46" :amount="receiveAmount"></font-amount>
                                        </div>
                                    </template>
                                </div>
                                <div class="succTitle">
                                    <span>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</span>
                                    <span v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</span>
                                </div>
                                <div class="luck-list" @scroll="handleScroll($event)">
                                    <div class="luck-item" v-for="item, i in luck_list" v-bind:key="i">
                                        <div class="userLogo">
                                            <img class="medal" v-if="i < 2" :src=" require('../static/svg/icon-medal-' + i + '.svg') " />
                                            <img class="header" v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
                                            <img class="header" v-else src="/svg/icon-twitter.svg" alt />
                                        </div>
                                        <div class="luck-content">
                                            <div class="luck-title">{{ item.simpleUserInfoVO.nickName || 'Twitter User' }}</div>
                                            <div class="luck-time">{{ formatTime(item.receiveTimestamp, 'MM-DD HH:mm') }}</div>
                                        </div>
                                        <div class="luck-money" v-if="isMoneyPrize">
                                            <img :src="item.currencyIconPath" alt />
                                            <div class="luck-money-txt">{{ item.amountValue || 0 }}</div>
                                        </div>
                                        <div class="luck-custom-prize" v-else>winner</div>
                                        <div class="luck-king" v-if="isMoneyPrize && item.maxAmount">
                                            <img src="/svg/icon-king-hat.svg" alt />
                                            <span>Luckiest Draw</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="desc">
                            <template v-if="isChrome">
                                <template v-if="status === 'not-open'">
                                    <div class="title">Install DeNet Plugin<br/>to Draw Prizes</div>
                                    <div class="issue">DeNet will detect task situation to issue Giveaway</div>
                                </template>
                                <template v-else>
                                    <div class="title">Install the Denet plugin<br/>to not miss the next draw</div>
                                </template>
                                <img class="button" @click="installExtension" src="../static/svg/icon-install-nft-plugin.svg" />
                            </template>
                            <template v-else>
                                <div class="title">Get Giveaway<br />with chrome</div>
                                <div class="issue">Only supports getting Giveaways through chrome</div>
                                <img class="button" @click="clickOpenChrome" src="../static/svg/icon-install-nft-chrome.svg" />
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'
import { Toast } from 'vant';
import { isBrowser, appType, appVersionCode, formatSecondsAsDaysOrTime } from '../utils/help.js'
import FontAmount from '../components/FontAmount.vue'
import CustomCardCover from '../components/CustomCardCover.vue'
import { RewardType } from '../types';

var moment = require('moment');
var ClipboardJS = require('clipboard')

const api = {
	prod: 'https://api.denetme.net',
	pre: 'https://preapi.denetme.net',
	test: 'https://testapi.denetme.net'
}
const page = {
	prod: "https://h5.denetme.net",
	pre: "https://preh5.denetme.net",
	test: 'https://testh5.denetme.net'
}
const jumpUrl = page[process.env.NUXT_ENV.MODE] + '/'
const baseURL = api[process.env.NUXT_ENV.MODE]

export default {
    name: 'luckdraw',
    components: {
		FontAmount,CustomCardCover
	},
    head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: 3,
			meta: [
				// facebook
				{
					name: 'og:url',
					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
				},
				{
					name: 'og:title',
					content: this.metaTitle
				},
				{
					name: 'og:image',
					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
				},
				// twitter
				{
					name: 'twitter:card',
					content: 'summary_large_image'
				},
				{
					name: 'twitter:url',
					content: this.jumpUrl + 'luckdraw/' + this.detail.postId
				},
				{
					name: 'twitter:title',
					content: this.metaTitle
				},
				{
					name: 'twitter:image',
					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || ''
				}
			]
		}
	},
    data() {
        return {
            detail: {
                postId: '',
                postBizData: {
                    imagePath: '',
                    postUserInfo: {},
                    amountValue: '0',
                }
            },
            luck_list: [],
            luck_list_end: false,
            layer_show: false,
            isLoading: true,
            isMobile: false,
            isChrome: false,
            config: {},
            mid: '',
            status: '',  // not-open->未打开   opened->没有抽中   success->抽中了   expire->过期
            page_index: 1,
			page_size: 20,
            validity: '',
            receiveAmount: '0',
            title: 'DeNet Giveaway',
            jumpUrl: jumpUrl,
			metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
        }
  },
  computed: {
    // 货币类型的奖品
    isMoneyPrize() {
      return this.detail.postBizData.rewardType === RewardType.money;
    }
  },
    mounted() {
        this.getConfig()
        this.setCookieMid()
        this.checkBrowser()
        this.handleStatusPage()
        this.isLoading = false;

        // 复制链接
        var clipboard = new ClipboardJS('.btn');
        clipboard.on('success', function (e) {
            Toast('copy success');
            e.clearSelection();
        });
        clipboard.on('error', function (e) {
            this.layer_show = true
        });
    },
    async asyncData(params) {
		let { route } = params;
		let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
			baseInfo: {
				appVersionCode: appVersionCode,
				mid: function () {
					return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
						var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
						return v.toString(16);
					});
				}()
			},
			params: {
				postId: route.params.id || ''
			}
		})
		if (data.code == 0) {
			if (data.data && data.data.postBizData && typeof data.data.postBizData == 'string') {
				data.data.postBizData = JSON.parse(data.data.postBizData)
			}
			if(data.data.postBizData === null) {
				data.data.postBizData = {
					postUserInfo: {}
				}
			}
			return {
				detail: data.data,
			}
		}
	},
    methods: {
        checkBrowser() {
            this.linkHref = window.location.href;
            this.isChrome = isBrowser() == 'chrome';
			this.isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
            if (!this.isChrome) {
                this.status = 'no-chrome'
            } else {
                this.setPickupInfo()
            }
		},
        async getConfig() {
            let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid
				},
				params: {}
			})
			if (data.code == 0) {
				this.config = data.data;
			}
        },
        setCookieMid() {
            let _cookie_mid_arr = Cookies.get('mid') || []
			if (_cookie_mid_arr.length > 0) {
				this.mid = JSON.parse(_cookie_mid_arr)[0].mid
			} else {
				this.mid = this.guid()
				Cookies.set('mid', JSON.stringify([{ mid: this.mid }]), { expires: 1000 })
			}
        },
        guid() {
			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
				var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
				return v.toString(16);
			});
		},
        clickOpenChrome() {
			window.open('https://www.google.com/chrome')
		},
        installExtension() {
            let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
            switch (extensionsInstallChannel) {
				case "officeDownload":
					location.href = url;
					this.$router.push({
						path: '/install'
					})
					break;
				case "chromeAppStore":
					window.open(extensionsInstallUrl)
					break;
			}
        },
        setPickupInfo() {
            let pickupInfo = {
				srcContentId: this.detail.srcContentId || '',
				postNickName: this.detail.postBizData.postUserInfo.nickName || '',
                createTime: Date.now(),
                jump_type: 'luck_draw',
			};
			Cookies.set('jump_info', JSON.stringify(pickupInfo), { expires: 100 });
        },
        formatTime(time, _type = 'MM-DD HH:mm:ss') {
			return moment(time).format(_type)
		},
        getValidity(end_time) {
            let timer = setInterval(() => {
                let time = moment(new Date().getTime())
                let endTime = moment(end_time + 5000)
                let downTime = (endTime - time) || 0
                if (downTime > 0) {
                    this.validity = formatSecondsAsDaysOrTime(downTime / 1000);
                } else {
                    this.validity = `00:00:00`
                    this.getDetail(() => {
                        this.handleStatusPage()
                    })
                    clearInterval(timer)
                }
            }, 1000)
        },
        handleScroll(e) {
			e = e.target
			if (this.luck_list_end) {
				return
			}
			if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
				this.luck_list_end = false
				this.page_index++
				this.getReceivedList()
			}
		},
        handleStatusPage() {
            // 如果 我领取过了
            // taskFinishStatus  任务完成状态（0:未完成，1:已完成，2:已过期）
            if (this.detail.postBizData.myReceived) {
                this.receiveAmount = this.detail.postBizData.myReceived.amountValue || 0
                // 如果 任务完成状态 = 未完成
                if (this.detail.postBizData.myReceived.taskFinishStatus == 0) {
                    // 显示任务未完成页面
                    this.status = `opened`
                } else if (this.detail.postBizData.myReceived.taskFinishStatus == 1) {
                    //如果 任务完成状态 = 已经完成
                    if (this.receiveAmount == 0) {
                        // 领取到空红包
                        this.status = `opened`
                    } else {
                        // 显示成功页面
                        this.status = `success`
                    }
                } else {
                    // 如果 任务完成状态 = 已经过期
                    if (this.detail.postBizData.status == 1) {
                        // 显示未打开页面
                        this.status = 'not-open'
                    } else {
                        // 显示已经过期页面
                        this.status = 'expire'
                    }
                }
            } else {
                // 如果 我没有领取过
                // 如果 红包状态 = 进行中
                if (this.detail.postBizData.status == 1) {
                    // 如果 过了红包的领取截止时间 = true
                    if (this.detail.postBizData.receiveTimeExpired) {
                        // 显示过期页面
                        this.status = 'expire'
                    } else {
                        // 如果 过了红包的领取截止时间 = false
                        // 显示未打开页面
                        this.status = 'not-open'
                    }
                } else {
                    // 红包状态 = 已经结束了 ｜ 已经终止 ｜ 终止退款中
                    // 显示过期页面
                    this.status = 'expire'
                }
            }

            // this.status = 'not-open'

            // getList
            if (this.status !== 'not-open') {
                this.getReceivedList()
            } else {
                this.getValidity(this.detail.postBizData.endTimestamp)
            }
        },
        async getDetail(fn) {
			let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid
				},
				params: {
					postId: this.detail.postId
				}
			})
          if (data.code == 0) {
        console.log(data.data)
				this.detail.postBizData = JSON.parse(data.data.postBizData)
                if (fn) fn();
			}
		},
        async getReceivedList() {
			let { data } = await axios.post(`${baseURL}/denet/post/luckdrop/getReceivedList`, {
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid
				},
				params: {
					pageNum: this.page_index,
					pageSize: this.page_size,
					postId: this.detail.postId || ''
				}
			})
			if (data.code == 0) {
				if (data.data.length > 0) {
					this.luck_list = this.luck_list.concat(data.data)
					this.luck_list_end = false
				} else {
					this.luck_list_end = true
				}
			}
		},
    }
}
</script>

<style lang="scss">
html,
body,
#__nuxt,
#__layout {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #fff;
    .loading {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        margin: auto;
        width: 40px;
        border-radius: 50%;
    }
    .logo {
        display: flex;
        align-items: center;
        height: 70px;
        margin-left: 25px;
        img {
            width: 99px;
            height: 32px;
        }
    }
    .show {
        display: flex;
        align-items: center;
        height: calc(100% - 70px);
        .center {
            display: flex;
            margin: -50px auto 0;
            justify-content: space-between;
            width: 1000px;
            position: relative;
            .head-in-custom {
                position: absolute;
                bottom: 100%;
                left: 0;
                background: #fff;
                display: flex;
                align-items: center;
                font-weight: 500;
                font-size: 15px;
                color: #000;
                height: 54px;
                img {
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  margin-right: 10px;
                }

            }
            .giveaway {
                position: relative;
                overflow: hidden;
                width: 375px;
                height: 500px;
                border-radius: 20px;
                background-color: #fff;
                box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);

                &.bg {
                    background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
                }
                &.custom {
                    background: unset;
                    height: auto!important;
                }
                &.auto-height {
                  height: auto;
                }



                .lottery {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 110px;
                    height: 94px;
                }
                .head {
                    display: flex;
                    height: 50px;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        margin: 0 10px 0 15px;
                        border: solid 2px #fff;
                    }
                    span {
                        color: #fff;
                        font-size: 13px;
                        font-weight: 700;
                        line-height: 16px;
                        letter-spacing: 0.005em;
                    }
                }
                .price {
                    text-align: center;
                    .usdt {
                        margin: 10px 0;
                        color: #FFFFFF;
                        font-weight: bold;
                        font-size: 16px;
                        line-height: 20px;
                        text-align: center;
                        letter-spacing: 0.3px;
                    }
                    .money {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        img {
                            width: 46px;
                            height: 46px;
                            margin-right: 15px;
                            border-radius: 50%;
                            border: solid 3px #fff;
                        }
                        span {
                            color: #fff;
                            font-size: 60px;
                            font-weight: 800;
                            line-height: 76px;
                        }
                    }
                }
                .time {
                    display: flex;
                    height: 46px;
                    color: #FFCC4D;
                    align-items: center;
                    justify-content: center;
                    font-weight: bold;
                    font-size: 26px;
                    line-height: 33px;
                    text-align: center;
                    background: rgba($color: #000000, $alpha: .15);
                    .img {
                        width: 26px;
                        margin-right: 10px;
                    }
                }
                .box {
                    margin: auto;
                    width: 200px;
                    height: 200px;
                    margin-top: 27px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .desc {
                width: 520px;
                .title {
                    color: #2C2C2C;
                    font-size: 36px;
                    line-height: 40px;
                    font-weight: 900;
                    margin-top: 90px;
                    margin-bottom: 20px;
                }
                .issue {
                    font-size: 15px;
                    color: #A4A4A4;
                }
                .button {
                    cursor: pointer;
                    height: 64px;
                    margin-top: 30px;
                }
            }
        }
    }
}

.small {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;
    &.bg {
        background: linear-gradient(17.98deg, #3438FF 3.69%, #8B56FC 74.32%);
    }
    &.custom {
        background: #111214!important;
    }
    .lottery {
        position: absolute;
        top: 0;
        right: 0;
        width: 110px;
        height: 94px;
    }
    .luck-list {
        height: calc(100% - 430px);
    }
    .head {
        display: flex;
        height: 50px;
        align-items: center;
        img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 0 10px 0 15px;
            border: solid 2px #fff;
        }
        span {
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            line-height: 16px;
            letter-spacing: 0.005em;
        }
    }
    .price {
        text-align: center;
        .usdt {
            margin: 10px 0;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
            letter-spacing: 0.3px;
        }
        .money {
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 46px;
                height: 46px;
                margin-right: 15px;
                border-radius: 50%;
                border: solid 3px #fff;
            }
            span {
                color: #fff;
                font-size: 60px;
                font-weight: 800;
                line-height: 76px;
            }
        }
    }
    .time {
        display: flex;
        height: 46px;
        color: #FFCC4D;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 26px;
        line-height: 33px;
        text-align: center;
        background: rgba($color: #000000, $alpha: .15);
        .img {
            width: 26px;
            margin-right: 10px;
        }
    }
    .box {
        margin: auto;
        width: 200px;
        height: 200px;
        margin-top: 27px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .area-cp-link {
        position: absolute;
        bottom: 0;
		background: #fff;
        overflow: hidden;
		width: 100%;
		flex-wrap: wrap;
		height: 238px;
		box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

        .area-list {
            clear: both;
            margin: 15px;
            .item {
                clear: both;
                overflow: hidden;
                margin: 7px 0;
                font-size: 16px;
                font-weight: 500;
                .icon {
                    float: left;
                    margin-right: 8px;
                    margin-top: -2px;
                }
                .font {
                    float: left;
                    margin-right: 8px;
                }
                .pc {
                    float: left;
                    margin-top: -2px;
                }
            }
        }

		.area-content {
            margin: 0 15px;
            color: #4B4B4B;
			padding: 7px 10px;
			font-size: 13px;
            border-radius: 5px;
            background: #F4F4F4;
			word-break: break-all;
		}

		.area-btn {
			flex: 1;
			display: flex;
			justify-content: center;

			.btn {
                margin: 15px 15px 0 15px;
                display: inline-block;
                width: 100%;
				height: 47px;
				font-size: 18px;
                line-height: 34px;
				color: #FFFFFF;
				border-radius: 100px;
				background: #389AFF;
			}
		}
	}
}

.layer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);

    .layer-box {
        width: 300px;
        height: 170px;
        background: #FFFFFF;
        border-radius: 11px;
        opacity: 1;
        position: absolute;
        top: 250px;
        left: 50%;
        margin-left: -150px;

        .layer-txt {
            margin: 30px 0;
            width: 100%;
            padding: 0 27px;
            font-weight: 600;
            font-size: 18px;
            text-align: center;
        }

        .layer-btn {
            width: 190px;
            height: 40px;
            background: #389AFF;
            border-radius: 100px;
            margin: 0 auto;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: 600;
            font-size: 18px;
        }
    }
}

.luck-list {
    flex: 1;
    width: 100%;
    height: 310px;
    overflow-y: auto;
    .luck-item {
        display: flex;
        padding: 12px 0;
        margin: 0 16px;
        border-bottom: 1px solid #F2F2F2;
        justify-content: space-between;
        position: relative;
        .header {
            border-radius: 50%;
        }
        .luck-king {
            position: absolute;
            top: 36px;
            right: 0px;
            display: flex;
            align-items: center;
            img {
                width: 22px;
                height: 19px;
                margin: 0;
            }
            span {
                font-weight: 500;
                font-size: 12px;
                line-height: 14px;
                letter-spacing: 0.3px;
                color: #f5b945;
            }
        }
        .userLogo {
            position: relative;
            width: 42px;
            height: 42px;
            margin-right: 12px;
            .medal {
                position: absolute;
                right: -5px;
                bottom: -5px;
                width: 18px;
                height: 18px;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
        .luck-content {
            flex: auto;
            .luck-title {
                font-weight: 500;
                font-size: 16px;
                letter-spacing: 0.3px;
                color: #444444;
            }
            .luck-time {
                font-weight: 400;
                font-size: 12px;
                line-height: 14px;

                color: #9b9b9b;
            }
        }
        .luck-money {
            display: flex;
            height: 17px;
            align-items: center;
            img {
                width: 14px;
                height: 14px;
                margin-right: 6px;
            }
            .luck-money-txt {
                font-weight: 500;
                font-size: 14px;
                /* identical to box height */
                text-align: right;
                letter-spacing: 0.3px;
                color: #444444;
            }
        }
        .luck-custom-prize {
          font-weight: 500;
          font-size: 14px;
          letter-spacing: 0.3px;
          color: #F5B945;
      }
    }
    .luck-item:last-child {
        border: 0;
    }
}

.succTop {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 150px;
    margin-bottom: 13px;
    background: #7D52FD;
    border-radius: 0 586px 586px/0 0 104px 104px;
    .img {
        height: 62px;
    }
    .expire {
        color: #FFFFFF;
        font-size: 22px;
        font-weight: 800;
        line-height: 36px;
        margin-top: 15px;
        text-align: center;
    }
    .tips {
        color: #FFFFFF;
        font-size: 22px;
        font-weight: 800;
        line-height: 26px;
        margin-top: 15px;
    }
    .win {
        font-size: 21px;
        font-weight: 800;
        color: #fff;
    }
    .win-money {
        display: flex;
        margin-top: -10px;
        align-items: center;
        justify-content: center;
        img {
            width: 44px;
            height: 44px;
            margin-right: 15px;
            border-radius: 50%;
            border: solid 3px #fff;
        }
        span {
            color: #fff;
            font-size: 60px;
            font-weight: 800;
            line-height: 76px;
        }
    }
}
.succTitle {
    display: flex;
    padding: 5px 0;
    justify-content: space-between;
    box-shadow: inset 0px -1px 0px #F2F2F2;
    span {
        margin: 0 16px;
        font-size: 12px;
        color: #B0B0B0;
        &:last-child {
            text-align: right;
        }
    }
}

.customImg {
    width: 100%;
    min-height: 373px;
}
.customBottom {
    width: 100%;
    background:#111214;
    padding: 10px 16px;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.3px;
    color: #838383;
    line-height: 20px;
    .theme {
        display: flex;
        height: 20px;
        align-items: center;
        justify-content: flex-start;
        .icon {
            width: 12px;
        }
        .time2 {
            margin: 0 4px;
            color: #1D9BF0;
        }
    }
    .winner-info {
        display: flex;
        height: 20px;
        align-items: center;
        justify-content: flex-start;
        .count{
            color: #1D9BF0;
            margin-right: 4px;
        }
        .prize-name {
            color: #1D9BF0;
            margin-left: 4px;
        }
    }
}
</style>