de-net-official/pages/index.vue

<!-- 普通玩法落地页 -->
<template>
	<div style="width: 100%; height: 100%">
		<div class="content" :style="{ background: `#fff` }" v-show="show_home" v-if="detail">
			<div class="logo">
				<img src="/img/icon-logo.png" alt />
			</div>
			<!-- 未开始 -->
			<div class="not-open" v-show="status == 'not-open'">
				<img src="/subject/001.gif" />
			</div>
			<div class="head-in-custom" v-if="!isMoneyPrize">
				<img :src="detail.postBizData.postUserInfo.avatarUrl" />
				<span>{{ detail.postBizData.postUserInfo.nickName }}</span>
			</div>
			<!-- 红包打开 -->
			<div class="redPacket" :class="{ redPacket2: status != 'open', key_packet: status == 'open' }" v-if="status != 'nothing'" v-show="status != 'not-open'">
				<!-- 内容 -->
				<div class="head">
					<div class="head-title">
						<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
						<span>{{ detail.postBizData.postUserInfo.nickName }}</span>
					</div>

					<!-- <div class="head-txt" v-if="status == 'open' || status == 'opened'">Awesome! You Will Get</div> -->
					<!-- <div class="head-area" v-else-if="status == 'opened'">opened!</div> -->

					<!-- 红包被领完了 -->
					<div class="head-area" v-if="status == 'nothing'">
						<div class="txt">Better luck next time!</div>
					</div>

					<!-- 过期 -->
					<div class="head-area expire" v-if="status == 'expire'">
						<div class="txt">This Giveaways</div>
						<div class="titme">expired on {{ formatTime(detail.postBizData.endTimestamp, 'MM-DD') }}</div>
					</div>

					<!-- 非chrome浏览器 -->
					<div class="head-area expire" v-if="status == 'no-chrome'">
						<div class="txt">Get Giveaways</div>
						<div class="titme">with chrome</div>
					</div>
					<!-- 领取成功 -->
					<div class="head-area head-money" v-if="status == 'open' || status == 'opened'">
						<div class="txt">AWESOME! YOU Will GET</div>
						<div class="head-money-area">
							<img :src="currencyIconPath" alt />
							<span class="money-txt" :style="{ fontSize: amount_font_size + 'px' }">{{ receiveAmount }}</span>
						</div>
					</div>
				</div>

				<!-- 领取列表 -->
				<div class="luck-list-title">
					<div>{{ detail.postBizData.receiveCount || 0 }}/{{ detail.postBizData.totalCount || 0 }} Winners</div>
					<div v-if="isMoneyPrize">{{ detail.postBizData.receiveAmountValue }} / {{ detail.postBizData.amountValue || '' }} {{ detail.postBizData.currencySymbol || '' }}</div>
				</div>
				<div class="luck-list" @scroll="handleScroll($event)">
					<div class="luck-item" v-for="(item, i) in luck_list" v-bind:key="i">
						<img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
						<img v-else src="/svg/icon-twitter.svg" alt />
						<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>
			</div>
			<template v-else>
				<div class="redBagCustom" v-if="detail.postBizData.posterType === 2 && detail.postBizData.customPosterInstalled">
					<!-- <img class="customImg" :src="detail.postBizData.customPosterInstalled" />
					<div class="customBottom">
						<div class="theme">
							<span class="info">Instant Giveaway</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.currencySymbol"
						:currencyIconUrl="detail.postBizData.iconPath"
						:playType="1"
						: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>
				</div>
				<div class="redBag" :class="{ 'auto-height': !isMoneyPrize }" v-else>
					<!-- 货币类型 -->
					<template v-if="isMoneyPrize">
						<img src="/subject/001-card.png" alt="" />
						<img class="open-gif" src="/subject/001.gif" />
						<div class="title" v-if="detail.postBizData.postUserInfo">
							<img :src="detail.postBizData.postUserInfo.avatarUrl" alt />
							<span>{{ detail.postBizData.postUserInfo.nickName || 'FutureDoctor' }}</span>
						</div>
						<div class="money-area">
							<div class="txt">{{ detail.postBizData.currencySymbol }} GIVEAWAY</div>
							<div class="coin">
								<img :src="detail.postBizData.currencyIconPath" alt />
								<font-amount :amount="detail.postBizData.amountValue"></font-amount>
							</div>
							<div class="people">{{ detail.postBizData.totalCount }} WINNERS TO SHARE</div>
						</div>
					</template>

					<template v-else>
						<custom-card-cover
							:totalCount="detail.postBizData.totalCount"
							:amountValue="detail.postBizData.amountValue"
							:tokenSymbol="detail.postBizData.currencySymbol"
							:currencyIconUrl="detail.postBizData.iconPath"
							:playType="1"
							: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>
				</div>
			</template>

			<!-- 安装 -->
			<div class="install" v-if="status == 'nothing' || status == 'open' || status == 'opened'" :class="{ key_install: status == 'open' }">
				<div v-if="status == 'nothing'">
					<div class="title">Install Denet to Draw</div>
				</div>
				<div v-else>
					<div class="title">Withdraw to Wallet</div>
					<div class="validity">
						<template v-if="validity_state">
							<span style="color: #ffa620">Remaining valid time </span>
							<span style="color: #ffa620">{{ validity }}</span>
						</template>
						<template v-else>
							<span style="color: #ffa620">Giveaways Validity</span>
						</template>
					</div>
				</div>

				<div class="flow">
					<div class="line"></div>

					<div class="area_num">
						<div class="num">1</div>
						<span>Install DeNet</span>
					</div>
					<div class="tip">Used to verify tasks and get rewards</div>
					<div class="install_btn" @click="installExtension">Install</div>
					<div class="area_num">
						<div class="num">2</div>
						<span v-if="status == 'nothing'">Complete Tasks</span>
						<span v-else>Complete Tasks by {{ detail.postBizData.postUserInfo.nickName }}</span>
					</div>
					<div class="tip">Complete like, retweet and follow in a simple way</div>
				</div>
			</div>

			<!-- 过期 -->
			<div class="install install-error" v-if="status == 'expire'">
				<div class="title">Install DeNet</div>
				<div class="title">Don't miss the next Giveaway</div>
				<div class="tip">Used to verify tasks and get rewards</div>
				<div class="install_btn" @click="installExtension">Install</div>
			</div>

			<!-- 非chrome 浏览器状态 -->
			<div class="install install-error" v-if="status == 'no-chrome'">
				<div class="title">Open Giveaways</div>
				<div class="title">with chrome</div>
				<div class="tip">Only supports getting Giveaways through chrome</div>
				<div class="install_chrome" @click="clickOpenChrome()">
					<img src="/svg/icon-chrome.svg" alt />
					Install Chrome
				</div>
			</div>
			<div v-if="status == 'error'"></div>
		</div>
		<MobileGuidePage
			v-if="show_moblie"
			:playType="PlayType.common"
			:detail="detail"
			:postBizData="detail.postBizData"
			:postUserInfo="detail.postBizData.postUserInfo">
		</MobileGuidePage>
	</div>
</template>

<script>
import axios from 'axios';
import Cookies from 'js-cookie';
import { isBrowser, appType } from '../utils/help.js';
import Report from '../log-center/log';
import { Toast } from 'vant';
import FontAmount from '../components/FontAmount.vue';
import MobileGuidePage from '../components/MobileGuidePage.vue';
// eslint-disable-next-line no-unused-vars
import { RewardType, PlayType } 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];

let appVersionCode = 6;
export default {
	name: 'index',
	data() {
		return {
			PlayType,
			cp_link: '',
			appVersionCode: appVersionCode,
			mid: '',
			show_moblie: false,
			show_home: false,
			layer_show: false,
			amount_font_size: 46,
			validity: '',
			receiveAmount: 0,
			validity_state: true,
			detail: {
				postId: '',
				postBizData: {
					imagePath: '',
					postUserInfo: {},
				},
			},
			currencyIconPath: '',
			customCover: '',
			customGiveaway: '',
			title: 'DeNet Giveaway',
			metaTitle: 'DeNet: An Easy Web3 Tool For GIVEAWAY / AIRDROP',
			jumpUrl: jumpUrl,
			status: '',
			reportStatus: 'normal',
			page_index: 1,
			page_size: 20,
			luck_list: [],
			luck_list_end: false,
			config: {
				extensionsInstallChannel: 'officeDownload', // chromeAppStore
				extensionsInstallUrl: '',
			},
		};
	},
	computed: {
		// 货币类型的奖品
		isMoneyPrize() {
			return this.detail.postBizData.rewardType === RewardType.money;
		},
	},
	components: {
		FontAmount,
		MobileGuidePage,
	},
	head() {
		return {
			type: '',
			title: this.title,
			appVersionCode: 3,
			meta: [
				// facebook
				{
					name: 'og:url',
					content: this.jumpUrl + 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 + this.detail.postId,
				},
				{
					name: 'twitter:title',
					content: this.metaTitle,
				},
				{
					name: 'twitter:image',
					content: this.detail.postBizData.imagePath || this.detail.postBizData.customPosterUninstalled || '',
				},
			],
		};
	},
	methods: {
		copyLinkHandle() {
			Report.reportLog({
				baseInfo: {
					appVersionCode: this.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: 0,
						customCover: this.customCover,
					},
				},
			});
		},
		clickOpenChrome() {
			window.open('https://www.google.com/chrome');

			let extParams = this.isMobile() ? {} : { status: this.reportStatus };
			Report.reportLog({
				baseInfo: {
					appVersionCode: this.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: 0,
						customCover: this.customCover,
					},
					extParams: extParams,
				},
			});
		},
		isMobile() {
			let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
			return flag;
		},
		installExtension() {
			let { extensionsInstallChannel, extensionsInstallUrl } = this.config;
			let url = extensionsInstallUrl;
			let extParams = this.isMobile() ? {} : { status: this.reportStatus };
			Report.reportLog({
				baseInfo: {
					appVersionCode: this.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: 0,
						customCover: this.customCover,
					},
					extParams: extParams,
				},
			});
			switch (extensionsInstallChannel) {
				case 'officeDownload':
					location.href = url;
					this.$router.push({
						path: '/install',
					});
					break;
				case 'chromeAppStore':
					window.open(extensionsInstallUrl);
					break;
			}
		},
		formatTime(time, _type = 'MM-DD HH:mm:ss') {
			return moment(time).format(_type);
		},
		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);
			});
		},
		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();
			}
		},
		getFontSize(amount) {
			let _num = parseInt(360 / amount.length);
			this.amount_font_size = _num < 46 ? _num : 46;
		},
		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 });
			}
		},
		async getRedPacket() {
			this.currencyIconPath = this.detail.postBizData.currencyIconPath;
			let { data } = await axios.post(`${baseURL}/denet/post/luckdrop/receiveLuckdrop`, {
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid,
				},
				params: {
					postId: this.detail.postId || '',
				},
			});
			this.show_home = true;
			switch (data.code.toString()) {
				case '0':
					this.getDetail();
					if (data.data.receiveAmount == '0') {
						this.reportStatus = 'empty';
						this.status = 'nothing';
					} else {
						if (data.data.newReceived) {
							this.status = 'not-open';
							setTimeout(() => {
								this.status = 'open';
							}, 3000);
							this.receiveAmount = data.data.receiveAmount;
						} else {
							this.status = 'opened';
						}
					}
					this.getValidity(data.data.endTimestamp);
					this.receiveAmount = data.data.receiveAmount;
					this.getFontSize(this.receiveAmount);
					break;
				case '2003':
					// this.status = 'expire'
					this.reportStatus = 'empty';
					this.getDetail();
					this.status = 'nothing';
					break;
				// 红包被领完了
				case '2008':
					this.reportStatus = 'empty';
					this.getDetail();
					this.status = 'nothing';
					break;
				case '2029':
					// 推文未发布
					this.status = 'error';
					break;
				default:
					console.log('getRedPacket', data);
					// this.show_home = false
					this.reportStatus = 'empty';
					this.getDetail();
					this.status = 'nothing';
					break;
			}
			// 领取列表分页
			this.getReceivedList();
		},
		async getReceivedList() {
			let { data } = await axios.post(`${baseURL}/denet/post/luckdrop/getReceivedList`, {
				baseInfo: {
					appVersionCode: this.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;
				}
			} else {
				console.log('getReceivedList', data);
			}
		},
		getValidity(end_time) {
			let _d1, _d2, _d3, _h, _m, _s;
			let timer = setInterval(() => {
				let _time = new Date().getTime();
				_d3 = end_time - _time;
				if (_d3 > 0) {
					_d1 = moment(end_time);
					_d2 = moment(_time);
					_h = moment.duration(_d1.diff(_d2)).hours();
					_m = moment.duration(_d1.diff(_d2)).minutes();
					_s = moment.duration(_d1.diff(_d2)).seconds();
					if (_h < 10) {
						_h = '0' + _h;
					}
					if (_m < 10) {
						_m = '0' + _m;
					}
					if (_s < 10) {
						_s = '0' + _s;
					}
					this.validity = `${_h}:${_m}:${_s}`;
				} else {
					clearInterval(timer);
				}
			}, 1000);
		},
		setPickupInfo() {
			let pickupInfo = {
				srcContentId: this.detail.srcContentId || '',
				postNickName: this.detail.postBizData.postUserInfo.nickName || '',
				createTime: Date.now(),
				jump_type: 'red_packet',
			};
			Cookies.set('jump_info', JSON.stringify(pickupInfo), { expires: 100 });
		},
		async getDetail() {
			let { data } = await axios.post(`${baseURL}/denet/post/getDetail`, {
				baseInfo: {
					appVersionCode: this.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;
			}
		},
		async getConfig() {
			let { data } = await axios.post(`${baseURL}/denet/base/config/getFrontConfig`, {
				baseInfo: {
					appVersionCode: this.appVersionCode,
					mid: this.mid,
				},
				params: {},
			});
			if (data.code == 0) {
				this.config = data.data;
			}
		},
	},

	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,
				customCover: data.data.postBizData && data.data.postBizData.posterType == 2 ? 1 : 0,
				customGiveaway: data.data.postBizData && data.data.postBizData.rewardType == 2 ? 1 : 0,
			};
		}
	},

	mounted() {
		this.getConfig();
		if (!this.detail.postId) {
			return;
		}
		console.log(this.detail);
		//改变font-size
		// (function (doc, win) {
		// 	var docEI = doc.documentElement,
		// 		resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
		// 		recalc = function () {
		// 			var clientWidth = docEI.clientWidth;
		// 			if (!clientWidth) return;
		// 			//100是字体大小，1510是开发时浏览器窗口的宽度，等比计算
		// 			docEI.style.fontSize = 10 * (clientWidth / 1510) + 'px';
		// 		}

		// 	if (!doc.addEventListener) return;
		// 	win.addEventListener(resizeEvt, recalc, false);
		// 	doc.addEventListener('DOMContentLoaded', recalc, false);
		// })(document, window);

		document.documentElement.style.fontSize = '62.5%';
		if (this.isMobile()) {
			this.setCookieMid();
			setTimeout(() => {
				Report.reportLog({
					baseInfo: {
						appVersionCode: this.appVersionCode,
						mid: this.mid,
						pageSource: Report.pageSource.mobileLandingPage,
						machineCode: this.mid,
					},
					params: {
						eventData: {
							businessType: Report.businessType.pageView,
							postId: this.detail.postId,
						},
					},
				});
			}, 500);
			this.show_moblie = true;
			this.cp_link = window.location.href;
			// 复制链接
			var clipboard = new ClipboardJS('.btn');
			clipboard.on('success', function (e) {
				Toast('copy success');
				console.info('Action:', e.action);
				console.info('Text:', e.text);
				console.info('Trigger:', e.trigger);

				e.clearSelection();
			});

			clipboard.on('error', function (e) {
				this.layer_show = true;
				console.error('Action:', e.action);
				console.error('Trigger:', e.trigger);
			});
			// 领取列表分页
			this.getReceivedList();
		} else if (isBrowser() == 'chrome') {
			// 领取任务红包
			this.setCookieMid();
			// 是否被领完
			if (this.detail.postBizData.receiveCount < this.detail.postBizData.totalCount) {
				this.getRedPacket();
			} else {
				this.show_home = true;
				this.status = 'nothing';
				this.reportStatus = 'empty';
			}
			this.setPickupInfo();
			setTimeout(() => {
				Report.reportLog({
					baseInfo: {
						appVersionCode: this.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: 0,
							customCover: this.customCover,
						},
						extParams: {
							status: this.reportStatus,
						},
					},
				});
			}, 1000);
		} else {
			this.show_home = true;
			this.status = 'no-chrome';
			this.reportStatus = 'not-chrome';
			Report.reportLog({
				baseInfo: {
					appVersionCode: this.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: 0,
						customCover: this.customCover,
					},
					extParams: {
						status: this.reportStatus,
					},
				},
			});
		}
	},
};
</script>

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

.moblie {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	align-content: flex-start;
	flex-direction: column;

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

		.layer-box {
			width: 30rem;
			height: 17rem;
			background: #ffffff;
			border-radius: 11px;
			opacity: 1;
			position: absolute;
			top: 25rem;
			left: 50%;
			margin-left: -15rem;

			.layer-txt {
				margin: 3rem 0;
				width: 100%;
				padding: 0 2.7rem;
				font-weight: 600;
				font-size: 1.8rem;
				text-align: center;
			}

			.layer-btn {
				width: 19rem;
				height: 4rem;
				background: #389aff;
				border-radius: 100px;
				margin: 0 auto;
				text-align: center;
				line-height: 4rem;
				color: #fff;
				font-weight: 600;
				font-size: 1.8rem;
			}
		}
	}

	.head-area {
		width: 100%;
		height: 11rem;
		text-align: center;
		letter-spacing: 0.3px;
		font-size: 2rem;
		text-align: center;
		color: #fff;
		background: #389aff;
		border-radius: 0 586px 586px/0 0 104px 104px;
		display: flex;
		align-items: center;
		justify-content: center;

		.gift {
			margin-right: 1.4rem;

			img {
				width: 5.2rem;
			}
		}

		.txt {
			font-size: 1.8rem;
			text-align: left;
		}
	}

	.luck-list-title {
		/*      margin-top: 47px;*/
		margin: 0 16px;
		padding: 14px 0 11px 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		color: #b0b0b0;
		border-bottom: 1px solid #d1d1d1;
	}

	.luck-list {
		flex: 1;
		width: 100%;
		overflow-y: auto;

		.luck-item {
			display: flex;
			padding: 12px 0;
			margin: 0 16px;
			border-bottom: 1px solid #f2f2f2;
			justify-content: space-between;
			position: relative;

			img:first-child {
				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;
				}
			}

			img {
				width: 42px;
				height: 42px;
				margin-right: 12px;
			}

			.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;
		}
	}

	.area-cp-link {
		background: #fff;
		width: 100%;
		flex-wrap: wrap;
		height: 18rem;
		box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;

		.area-list {
			width: 34.3rem;
			margin: 1.5rem auto;

			.item {
				clear: both;
				overflow: hidden;
				margin: 0.7rem 0;
				font-size: 1.6rem;
				font-weight: 500;

				.icon {
					float: left;
					margin-right: 0.8rem;
				}

				.font {
					float: left;
					margin-right: 0.8rem;
				}

				.pc {
					float: left;
				}
			}
		}

		.area-content {
			background: #f4f4f4;
			padding: 0.7rem 1rem;
			margin: 0 auto 1rem;
			width: 34.3rem;
			font-size: 1.3rem;
			border-radius: 0.5rem;
			word-break: break-all;
		}

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

			.btn {
				width: 34.3rem;
				height: 4rem;
				background: #389aff;
				border-radius: 100px;
				font-size: 1.8rem;
				color: #ffffff;
			}
		}
	}
}

.content {
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 600;

	.head-in-custom {
		position: absolute;
		top: 9rem;
		left: 30rem;
		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;
		}
	}

	.not-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		img {
			width: 20rem;
			height: 20rem;
		}
	}

	.logo {
		position: absolute;
		left: 4rem;
		top: 1.5rem;

		img {
			width: 10.7rem;
			height: 3.4rem;
		}
	}

	.key_packet {
		animation: key_packet 3s;
		animation-delay: 0s;
		animation-fill-mode: forwards;
	}

	.redBagCustom {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		position: absolute;
		top: 16rem;
		left: 30.6rem;
		width: 37.5rem;
		border-radius: 2rem;
		overflow-y: hidden;
		box-shadow: 0 0.3rem 2rem rgba(0, 0, 0, 0.2);
		background: #fff;

		.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;
				}

				.time {
					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;
				}
			}
		}
	}

	.redBag {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		position: absolute;
		top: 14rem;
		left: 30.6rem;
		width: 37.5rem;
		height: 50rem;
		border-radius: 2rem;
		overflow-y: hidden;
		box-shadow: 0 0 5px #888888;
		background: #fff;

		&.auto-height {
			height: auto;
		}

		.money-area {
			width: 100%;
			position: absolute;
			top: 65px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

			.txt {
				font-weight: 800;
				font-size: 16px;
				text-align: center;
				letter-spacing: 0.3px;
				color: #ffffff;
			}

			.coin {
				text-align: center;
				margin-top: 6px;
				margin-bottom: 7px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90%;

				img {
					width: 46px;
					height: 46px;
					border-radius: 50%;
					border: 3px solid #ffffff;
				}

				span {
					margin-left: 15px;
					font-weight: 800;
					font-size: 60px;
					line-height: 76px;
					color: #ffffff;
				}
			}

			.people {
				font-weight: 800;
				font-size: 13px;
				line-height: 16px;
				letter-spacing: 0.05em;
				text-align: center;
				color: #ffffff;
			}
		}

		.title {
			position: absolute;
			top: 15px;
			left: 15px;
			z-index: 3;
			display: flex;
			align-items: center;

			img {
				width: 24px;
				height: 24px;
				border: 2px solid #fff;
				border-radius: 50%;
			}

			span {
				margin-left: 10px;
				font-weight: 600;
				font-size: 16px;
				letter-spacing: 0.3px;
				color: #fff;
			}
		}

		img {
			width: 100%;
		}

		.up {
			position: absolute;
			top: 0;
			z-index: 1;
		}

		.down {
			position: absolute;
			top: 253px;
		}

		.open {
			width: 335px;
			height: 50px;
			cursor: pointer;
			position: absolute;
			bottom: 28px;
			left: 50%;
			margin-left: -167.5px;
			z-index: 4;
		}

		.open-gif {
			width: 200px;
			height: 200px;
			text-align: center;
			position: absolute;
			bottom: 70px;
			left: 50%;
			margin-left: -100px;
			z-index: 3;
		}
	}

	.redPacket {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		position: absolute;
		top: 9rem;
		left: 50%;
		width: 37.5rem;
		margin-left: -18rem;
		height: 65rem;
		border-radius: 2rem;
		// background: red;
		overflow-y: hidden;
		box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
		background: #fff;

		.top {
			top: 0;
			position: absolute;
			width: 100%;
			z-index: 12;
		}

		.down {
			bottom: 0;
			position: absolute;
			height: 32.3rem;
			z-index: 11;
		}

		.head {
			position: relative;

			.head-title {
				position: absolute;
				top: 0;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 3.6rem;
				background: rgba(255, 255, 255, 0.1);

				img {
					width: 1.8rem;
					height: 1.8rem;
					border-radius: 50%;

					border: 1px solid #fff;
				}

				span {
					margin-left: 0.8rem;
					font-size: 1.2rem;
					color: #fff;
				}
			}

			.head-txt {
				margin-top: 4.7rem;
				font-size: 2rem;
				text-align: center;
				color: #fff;
			}

			.head-area {
				height: 19rem;
				text-align: center;
				letter-spacing: 0.3px;
				font-size: 2rem;
				text-align: center;
				color: #fff;
				background: #389aff;
				border-radius: 0 586px 586px/0 0 164px 164px;

				.txt {
					padding-top: 8.5rem;
				}
			}

			.head-money {
				.txt {
					padding-top: 6.8rem;
					font-weight: 800;
					font-size: 1.5rem;
					text-align: center;
					letter-spacing: 0.3px;
				}

				.head-money-area {
					display: flex;
					width: 100%;
					justify-content: center;
					align-items: center;

					img {
						width: 4rem;
						height: 4rem;
						border: 2px solid #ffffff;
						border-radius: 100px;
					}

					span {
						margin-left: 1.3rem;
						font-size: 4.6rem;
						word-break: break-all;
					}
				}
			}
		}

		.luck-list-title {
			/*      margin-top: 47px;*/
			margin: 0 16px;
			padding: 14px 0 11px 0;
			background: #fff;
			display: flex;
			font-weight: 500;
			justify-content: space-between;
			color: #b0b0b0;
			border-bottom: 1px solid #f2f2f2;
		}

		.luck-list {
			background: #fff;
			overflow-y: auto;

			.luck-item {
				display: flex;
				padding: 12px 0;
				margin: 0 16px;
				border-bottom: 1px solid #f2f2f2;
				justify-content: space-between;
				position: relative;

				img:first-child {
					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;
					}
				}

				img {
					width: 42px;
					height: 42px;
					margin-right: 12px;
				}

				.luck-content {
					flex: auto;

					.luck-title {
						font-weight: 500;
						font-size: 16px;
						letter-spacing: 0.3px;
						color: #444444;
						margin-bottom: 5px;
					}

					.luck-time {
						font-weight: 400;
						font-size: 12px;
						line-height: 14px;
						color: #b0b0b0;
					}
				}

				.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;
			}
		}

		.area {
			position: absolute;
			z-index: 112;
			width: 100%;

			.title {
				z-index: 11;
				margin-top: 8.5rem;
				text-align: center;

				img {
					width: 3.6rem;
					height: 3.6rem;
					border: 2px solid #fff4db;
					border-radius: 50%;
				}

				span {
					letter-spacing: 0.3px;
					font-size: 1.6rem;
					color: #fff2d3;
				}
			}

			.txt {
				font-size: 4rem;
				text-align: center;
				letter-spacing: 0.03rem;
				color: #fff2d3;
			}
		}

		.key_area {
			animation: key_area 1s;
			animation-delay: 1s;
			animation-fill-mode: forwards;
		}
	}

	.redPacket2 {
		left: 43.6rem;
		margin-left: -18rem;
	}

	.key_install {
		opacity: 0;
		animation: key_install 2s;
		animation-delay: 0s;
		animation-fill-mode: forwards;
	}

	.install {
		position: absolute;
		top: 20rem;
		left: 73.5rem;

		.title {
			font-size: 4.8rem;
			color: #000000;
			letter-spacing: 0.3px;
		}

		.validity {
			margin-top: 1rem;
			color: #ff0000;
			width: 40rem;
			height: 3.3rem;
			line-height: 3.3rem;
			font-weight: normal;

			span {
				font-size: 1.4rem;
			}
		}

		.flow {
			position: absolute;
			margin-top: 4rem;

			.line {
				position: absolute;
				height: 16rem;
				border: 1px solid #e0e0e0;
				top: 3rem;
				left: 1.2rem;
			}

			.area_num {
				display: flex;
				align-items: center;

				.num {
					width: 2.4rem;
					height: 2.4rem;
					background-color: rgba(56, 154, 255, 1);
					border-radius: 50%;
					color: #fff;
					text-align: center;
					line-height: 2.4rem;
					font-size: 1.4rem;
				}

				span {
					margin-left: 1.5rem;
					color: #000000;
					font-size: 1.8rem;
				}
			}

			.tip {
				margin-left: 4rem;
				margin-top: 0.7rem;
				font-size: 1.4rem;
				color: #a4a4a4;
			}

			.install_btn {
				cursor: pointer;
				margin-left: 4rem;
				margin-top: 2rem;
				margin-bottom: 6.7rem;
				width: 23rem;
				height: 5.8rem;
				background: #389aff;
				border-radius: 10rem;
				color: #fff;
				line-height: 5.8rem;
				text-align: center;
				font-size: 2rem;
			}
		}

		.tip {
			margin-top: 0.7rem;
			font-size: 1.4rem;
			color: #a4a4a4;
		}

		.install_btn {
			cursor: pointer;
			margin-top: 2rem;
			margin-bottom: 6.7rem;
			width: 23rem;
			height: 5.8rem;
			background: #389aff;
			border-radius: 10rem;
			color: #fff;
			line-height: 5.8rem;
			text-align: center;
			font-size: 2rem;
		}
	}

	.install-error {
		left: 78.5rem;

		.install_chrome {
			cursor: pointer;
			width: 24.3rem;
			height: 5.8rem;
			font-size: 2rem;
			font-weight: 500;
			letter-spacing: 0.3px;
			display: flex;
			align-items: center;
			background: #ffffff;
			border: 1px solid #e8e8e8;
			border-radius: 10rem;
			margin-top: 3.3rem;

			img {
				width: 3.2rem;
				height: 3.2rem;
				margin-left: 3.3rem;
			}

			span {
				margin-left: 1.2rem;
			}
		}
	}
}

@keyframes key_area {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes key_install {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes key_packet {
	0% {
	}

	100% {
		left: 30.6rem;
		margin-left: -18rem;
	}
}
</style>