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>
			<!-- 手机端 -->
			<MobileLandPage
				v-if="isMobile"
				:playType="PlayType.lottery"
				:rewardType="this.detail.postBizData.rewardType"
				:useFul="!this.detail.postBizData.receiveTimeExpired"
				:userInfo="this.detail.postBizData.postUserInfo"
				:currencyIconPath="this.detail.postBizData.currencyIconPath"
				:amountValue="isMoneyPrize ? this.detail.postBizData.amountValue : ''"
				:usValue="isMoneyPrize ? this.detail.postBizData.usdAmountValue : ''"
				:prize="isMoneyPrize ? this.detail.postBizData.currencySymbol : this.detail.postBizData.customizedReward"
				:postId="this.detail.srcContentId"
			>
			</MobileLandPage>
			<!-- 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 Report from '../log-center/log';
import { RewardType, PlayType } from '../types';
import MobileLandPage from '../components/MobileLandPage.vue';

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,
		MobileLandPage,
	},
	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: appVersionCode,
			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 {
			PlayType,
			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',
			reportStatus: 'normal',
			customCover: '',
			customGiveaway: '',
		};
	},
	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 () {
			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: {},
				};
			}
			console.log('data', data);
			return {
				detail: data.data,
				customCover: data.data.postBizData && data.data.postBizData.posterType == 2 ? 1 : 0,
				customGiveaway: data.data.postBizData && data.data.postBizData.rewardType == 2 ? 1 : 0,
			};
		}
	},
	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();
			}
			// report
			setTimeout(() => {
				this.reportData();
			}, 500);
		},
		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');

			let extParams = this.isMobile ? {} : { status: this.reportStatus };
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.newUserLandingPage,
					appType,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.installButton,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						senderId: this.detail.srcUserId,
						redPacketType: 1,
						customCover: this.customCover,
						customGiveaway: this.customGiveaway,
					},
					extParams: extParams,
				},
			});
		},
		installExtension() {
			let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
			let url = extensionsInstallUrl;
			let extParams = this.isMobile ? {} : { status: this.reportStatus };

			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.newUserLandingPage,
					appType,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.installButton,
						postId: this.detail.postId,
						srcContentId: this.detail.srcContentId,
						senderId: this.detail.srcUserId,
						redPacketType: 1,
						customCover: this.customCover,
						customGiveaway: this.customGiveaway,
					},
					extParams: extParams,
				},
			});

			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 > 0.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`;
						this.reportStatus = `empty`;
					} else {
						// 显示成功页面
						this.status = `success`;
					}
				} else {
					// 如果 任务完成状态 = 已经过期
					if (this.detail.postBizData.status == 1) {
						// 显示未打开页面
						this.status = 'not-open';
					} else {
						// 显示已经过期页面
						this.status = 'expire';
						this.reportStatus = `empty`;
					}
				}
			} else {
				// 如果 我没有领取过
				// 如果 红包状态 = 进行中
				if (this.detail.postBizData.status == 1) {
					// 如果 过了红包的领取截止时间 = true
					if (this.detail.postBizData.receiveTimeExpired) {
						// 显示过期页面
						this.status = 'expire';
						this.reportStatus = `empty`;
					} else {
						// 如果 过了红包的领取截止时间 = false
						// 显示未打开页面
						this.status = 'not-open';
					}
				} else {
					// 红包状态 = 已经结束了 ｜ 已经终止 ｜ 终止退款中
					// 显示过期页面
					this.status = 'expire';
					this.reportStatus = `empty`;
				}
			}

			// 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) {
				this.detail.postBizData = JSON.parse(data.data.postBizData);
				this.customCover = this.detail.postBizData && this.detail.postBizData.posterType == 2 ? 1 : 0;
				this.customGiveaway = this.detail.postBizData && this.detail.postBizData.rewardType == 2 ? 1 : 0;
				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;
				}
			}
		},

		copyLinkHandle() {
			Report.reportLog({
				baseInfo: {
					appVersionCode: appVersionCode,
					mid: this.mid,
					pageSource: Report.pageSource.mobileLandingPage,
					appType,
					machineCode: this.mid,
				},
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.copyLinkButton,
						postId: this.detail.postId || '',
						srcContentId: this.detail.srcContentId || '',
						senderId: this.detail.srcUserId || '',
						redPacketType: 1,
						customCover: this.customCover,
						customGiveaway: this.customGiveaway,
					},
				},
			});
		},
		reportData() {
			if (this.isMobile) {
				// 手机端
				Report.reportLog({
					baseInfo: {
						appVersionCode: appVersionCode,
						mid: this.mid,
						pageSource: Report.pageSource.mobileLandingPage,
						appType,
						machineCode: this.mid,
					},
					params: {
						eventData: {
							businessType: Report.businessType.pageView,
							postId: this.detail.postId,
							srcContentId: this.detail.srcContentId,
							senderId: this.detail.srcUserId,
							redPacketType: 1,
							customCover: this.customCover,
							customGiveaway: this.customGiveaway,
						},
					},
				});
			} else if (this.isChrome) {
				// pc端
				Report.reportLog({
					baseInfo: {
						appVersionCode: appVersionCode,
						mid: this.mid,
						pageSource: Report.pageSource.newUserLandingPage,
						appType,
						machineCode: this.mid,
					},
					params: {
						eventData: {
							businessType: Report.businessType.pageView,
							postId: this.detail.postId,
							srcContentId: this.detail.srcContentId,
							senderId: this.detail.srcUserId,
							redPacketType: 1,
							customCover: this.customCover,
							customGiveaway: this.customGiveaway,
						},
						extParams: {
							status: this.reportStatus,
						},
					},
				});
			} else {
				Report.reportLog({
					baseInfo: {
						appVersionCode: appVersionCode,
						mid: this.mid,
						pageSource: Report.pageSource.newUserLandingPage,
						appType,
						machineCode: this.mid,
					},
					params: {
						eventData: {
							businessType: Report.businessType.pageView,
							postId: this.detail.postId,
							srcContentId: this.detail.srcContentId,
							senderId: this.detail.srcUserId,
							redPacketType: 1,
							customCover: this.customCover,
							customGiveaway: this.customGiveaway,
						},
						extParams: {
							status: 'not-chrome',
						},
					},
				});
			}
		},
	},
};
</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: 0.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: 0.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, 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>