duomendian/pages/goods/lottery/grids/index.vue

<template>
	<view>
		<!-- #ifdef MP || APP-PLUS -->
		<NavBar titleText="抽奖活动" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack></NavBar>
		<!-- #endif -->
		<view class="page-wrapper" v-if="lotteryShow && loading">
			<template1 v-if="lotteryType==1" :type="type" :image="image" :isAll="is_all_record" :isPersonal="is_personal_record" :isContent="is_content" :prizeList="prize" :userList="userList.data"
				:myList="myList.data" :htmlData="htmlData.data" :lotteryNum="lottery_num" @getWiningIndex="getWiningIndex" @luck_draw_finish="luck_draw_finish" @H5Share="H5Share">
			</template1>
			<template2 v-else-if="lotteryType==2" :type="type" :image="image" :isAll="is_all_record" :isPersonal="is_personal_record" :isContent="is_content" :prizeList="prize"
				:userList="userList.data" :myList="myList.data" :htmlData="htmlData.data" :lotteryNum="lottery_num" @getWiningIndex="getWiningIndex" @luck_draw_finish="luck_draw_finish"
				@H5Share="H5Share">
			</template2>
			<view v-if="rulesShow || aleartStatus || addressModel" class="mask" @touchmove.stop.prevent="moveHandle"></view>
		</view>
		<view class="p-20" v-else-if="!lotteryShow && loading">
			<emptyPage title="商家暂未上架活动哦～" src="/statics/images/noActivity.gif"></emptyPage>
		</view>
		<!-- 抽奖结果弹窗 -->
		<lotteryAleart :aleartStatus="aleartStatus" @close="closeLottery" :alData="alData" :aleartType="aleartType">
		</lotteryAleart>
		<!-- #ifdef H5 -->
		<view class="share-box" v-if="H5ShareBox">
			<image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getLotteryData,
		startLottery,
		receiveLottery
	} from '@/api/lottery.js'
	import {
		getUserInfo
	} from '@/api/user.js';
	import colors from '@/mixins/color.js'
	import zbCode from '@/components/zb-code/zb-code.vue'
	import gridsLottery from '../../components/lottery/index.vue'
	import showBox from '../components/showbox.vue'
	import noticeBar from '../components/noticeBar.vue'
	import lotteryAleart from '../../components/lotteryAleart/index.vue'
	import home from '@/components/home';
	import template1 from '../template/template1.vue';
	import template2 from '../template/template2.vue';
	import emptyPage from '@/components/emptyPage.vue';
	// #ifdef MP || APP-PLUS
	import NavBar from '@/components/NavBar.vue';
	// #endif
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		postCartAdd
	} from '@/api/store.js';
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	const app = getApp();
	export default {
		components: {
			template1,
			template2,
			gridsLottery,
			showBox,
			noticeBar,
			lotteryAleart,
			zbCode,
			emptyPage,
			home,
			// #ifdef MP || APP-PLUS
			NavBar,
			// #endif
		},
		mixins: [colors],
		data() {
			return {
				lotteryShow: true,
				loading: false,
				H5ShareBox: false,
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				// #endif
				addressModel: false,
				lottery_num: 0,
				aleartType: 0,
				aleartStatus: false,
				lottery_draw_param: {
					startIndex: 3, //开始抽奖位置，从0开始
					totalCount: 3, //一共要转的圈数
					winingIndex: 1, //中奖的位置，从0开始
					speed: 100 //抽奖动画的速度 [数字越大越慢,默认100]
				},
				userList: {
					type: 'user',
					data: []
				},
				myList: {
					type: 'me',
					data: []
				},
				htmlData: {
					type: 'html',
					data: ''
				},
				prizeData: {
					type: 'prize',
					data: []
				},
				prize: [],
				factor_num: 0,
				id: 0,
				alData: {},
				type: '',
				followCode: false,
				//二维码参数
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				codeSrc: "",
				image: "", //上部背景图
				is_content: 0,
				is_all_record: 0,
				is_personal_record: 0,
				factor: 0,
				imgHost: HTTP_REQUEST_URL,
				isShowAuth: false,
				rulesShow: false,
				isRotating: false,
				lotteryType: 0,
				iconColor: '#FFFFFF',
				isScrolling: false,
			}
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						//#ifndef MP
						this.getLotteryData(this.type)
						//#endif
					}
				},
				deep: true
			}
		},
		onLoad(option) {
			this.type = option.type;
			if (this.isLogin) {
				this.getLotteryData(this.type)
			}
		},
		onShow() {
			uni.removeStorageSync('form_type_cart');
			if (!this.isLogin) {
				toLogin()
			}
		},
		onPageScroll(e) {
			// #ifdef MP
			if (e.scrollTop > 50) {
				this.iconColor = '#333333';
				this.isScrolling = true;
			} else {
				this.iconColor = '#FFFFFF';
				this.isScrolling = false;
			}
			// #endif
		},
		methods: {
			H5Share() {
				this.H5ShareBox = true;
			},
			onLoadFun() {
				this.getLotteryData(this.type)
				this.isShowAuth = false
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			//#ifdef H5
			ShareInfo(data) {
				let href = location.href;
				if (this.$wechat.isWeixin()) {
					getUserInfo().then(res => {
						href = href.indexOf('?') === -1 ? href + '?spid=' + res.data.uid : href + '&spid=' +
							res.data.uid;
						let configAppMessage = {
							desc: data.name,
							title: data.name,
							link: href,
							imgUrl: data.image
						};
						this.$wechat
							.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData',
								'onMenuShareAppMessage',
								'onMenuShareTimeline'
							], configAppMessage)
							.then(res => {})
							.catch(err => {});
					});
				}
			},
			//#endif
			getLotteryData(type) {
				uni.showLoading({
					title: '获取抽奖信息'
				});
				getLotteryData(type).then(res => {
					this.loading = true
					this.factor_num = res.data.lottery.factor_num
					this.id = res.data.lottery.id
					this.image = res.data.lottery.image
					this.prize = res.data.lottery.prize
					this.lottery_num = res.data.lottery_num
					this.htmlData.data = res.data.lottery.content
					this.is_content = res.data.lottery.is_content
					this.is_personal_record = res.data.lottery.is_personal_record
					this.is_all_record = res.data.lottery.is_all_record
					this.factor = res.data.lottery.factor
					this.userList.data = res.data.all_record
					this.myList.data = res.data.user_record
					this.lotteryType = res.data.lottery.type
					if (this.lotteryType == 1) {
						this.prize.push({})
					}
					// #ifdef H5
					if (this.isLogin) {
						this.ShareInfo(res.data.lottery);
					}
					// #endif
					this.prizeData.data = res.data.lottery.prize;
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					this.lotteryShow = false
					this.loading = true
					this.$util.Tips({
						title: err
					});
				})
			},
			closeLottery(status) {
				this.aleartStatus = false
				this.getLotteryData(this.type)
				if (this.alData.type === 6) {
					postCartAdd({
						cartNum: 1,
						new: 1,
						is_new: 1,
						productId: this.alData.product_id,
						uniqueId: this.alData.unique,
						luckRecordId: this.alData.lottery_record_id,
					}).then(res => {
						uni.navigateTo({
							url: `/pages/goods/order_confirm/index?new=1&luckRecordId=${this.alData.lottery_record_id}&cartId=${res.data.cartId}`
						});
					}).catch(err => {
						this.$util.Tips({
							title: `${err},请联系客服`
						});
					});;
				}
			},
			getAddress(data) {
				let addData = data
				addData.id = this.alData.lottery_record_id
				addData.address = data.address.province + data.address.city + data.address.district + data.detail
				receiveLottery(addData).then(res => {
					this.$util.Tips({
						title: '领取成功'
					});
					this.addressModel = false
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
			},
			getWiningIndex(callback) {
				this.aleartType = 0
				let that = this
				startLottery({
					id: this.id,
					type: this.type
				}).then(res => {
					if (res.data.code === 'subscribe') {
						that.$set(that, 'followCode', true);
						this.codeSrc = res.data.url
						return;
					}
					this.prize.forEach((item, index) => {
						if (res.data.id === item.id) {
							this.alData = res.data
							this.lottery_draw_param.winingIndex = index;
							callback(this.lottery_draw_param);
						}
					})
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
				// //props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
			},
			// 抽奖完成
			luck_draw_finish(param) {
				this.aleartType = 2
				this.aleartStatus = true
				this.isRotating = false
				// console.log(`抽到第${param+1}个方格的奖品`)
			},
			qrR(res) {
				this.codeSrc = res
			},
			moveHandle() {},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .lucky-wheel .marquee-item {
		text-align: center;
		font-size: 20rpx !important;
		color: #E93323 !important;
		letter-spacing: 2px;

		.name {
			color: #E93323 !important;
		}
	}

	/deep/ .lottery .marquee-item {
		letter-spacing: 2px;
	}

	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.page-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	/deep/ .safe-area-inset-bottom {
		height: 0;
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
	}

	.lottery {
		background-color: #E74435;
		min-height: 100vh;
		padding: 0 0 20rpx 0;

		.mask {
			z-index: 1000;
		}

		.rules-popup {
			position: fixed;
			top: 50%;
			left: 50%;
			z-index: 1001;
			display: none;
			width: 620rpx;
			padding: 94rpx 0 0;
			border: 10rpx solid #FED59C;
			border-radius: 48rpx;
			background-color: #FFFFFF;
			transform: translate(-50%, -50%);

			&.active {
				display: block;
			}

			.popup-top {
				position: absolute;
				top: -24rpx;
				left: 50%;
				width: 396rpx;
				height: 87rpx;
				padding-top: 14rpx;
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYwAAABXCAYAAAAXt3ISAAAAAXNSR0IArs4c6QAACD9JREFUeNrt3U1sE2cex/E5cODAgQMHpPbAIQcOlbbSVtpK5RBpKy0HpK20K3WlXWkjUalIrZSV9pBDDlTiwKErRSoNb6FNS4AAYaElhZSm7LSb0lAIdRNij18SpiEhps7L2Ens8XgcPfufkGWDNi+2YwfwfB/pox8PsT3x2JpfZibjaFqBQ81FfjWfGq53U7FOEcinomZ+JubKv1VekCRJkk8tZxe2yYvcmZjubavla4fmZ4b+np+N/kElh36dSAS3aJUaStc35WeG/ioLjeUXv7FHou6TcwDAsy8qP+RHe6VQDkqh/K5sBaJS0d/kkxFTHtxrr9u5ZHRfNhWs+e/XZ8Yj29xk9PX5VPTAQqMt3A4A8KyRbbS3B9IrWvMzIhXtlv83hO39n7e9L7ks5FDT3nwqLHsRkdn5VOSdQu6Ts4w6uf2Em4zIN7gEc+bMmTPf8Llsj71teJtrGbXe0aLltttzieD2XDK8T24fcJPh296hqyLLIrxX7qjyyXDcmRzYWcx9vYXLfQ3v/gCAp0Z3JiNFbb/zVuQN2e6bokNlIi+sfRhqJvyamzTcfNIouiyWloZ3f3kcBQDYYKlw00p7FGsN75yGHF1qc5MhS3Yefr9yWZj65rxljMoNXXc6uGs95z/y08Ye1wopAMDGySdDR8pxDns+GW5c6IJk8LfL3kC+2OgtcD4VeqccC5TH6+YFBIANEyh1z2L50gg1yGPOqpnB1574gmUFtrrWoCVt0luuhbnW3VrXCioAQOXlpvpfLfelFXkreEiY3hGoJU0SfFsKwy31vMWKpTE9aAgFAKgc2ahfqtS1eO703V43OdiwdG9ADh8NNpV7YbKgRqEAABU0cbe2Uhdw21ZgR256wPSORMkFeH3b3OmB2bnEre3lXlA2cadGHlsBACrG0Co85pMDb+en7r4pv9E08Gd3aqCpUgtyp/sD7lS/AgBUwHR/Y6ULwzs0JedI/iYb9IGDldi7eFwYUwMHeFEBoDK8IznaBgxnsm+nlpsM1FVyIW6ib1du6icFACi7gLaRo9LttHCWfSpgSTEpAED5uFM/HdCqbbiTP3bkJn9UAIDy8Y7gVF1h5Cb69uUm7ygAQHnID+Kz5byy+5kZdrx3h5SGAgCUhztxp0ur1pGb7DN5kQGgTIUx2ddQvYUxcbtdqFxCkCRJkutKO3FzV/UWRuJWvVAAgHWauOUmEvqWqi0Mrw1ziR8UAGDdAlo1D8vUt+YSNxUAYL1+aNGqfTiJm/HcL70KAFC6bPz7d6u+MOSJ9vBiA8D6pMe/e6X6CyNxo8V5+L0CAJTOXPoX8Kp1uIkbjc7DGyonSJIkyZLS0PwwcvEbdc7D7xQAoDTuLz0dvigMO95T68R75EkLkiRJsuiUwtjvk8LQdzjxfysAQMn+6IvC8E7U8GIDQOlyY/rLml9GLv7thDP+rQIAFM8XvyH1+OK98W8MoQAARYp/E9P8NHLjuu6M6woAULQuvxVGm/NAnvhj/1LMmTNnznztee6BfshXhSFP+v1HKwEAUIzsg+vv+qow3PHrjc6D6woAUJzs6Ne7fVUY9tj1uuzY18rjLCZz5syZMy9gPvplja8KIzt2bY8z1i0roFuRJEmShafS9U3+2sMY6d6VHftKAQAK5zz4ytT8Nmyza0d2VFbA6DVFkiRJFphj17p9VxiJ4Pktj1YCAKBwX7ZofhzyxF2hAACFccauNfqzMO53mUIBAApjj3T9xZeF4dy/ejt7/6oCABTGHrm8y6d7GFe6syNXZCUIkiRJcs3MjF190ad7GFdaF1YEAGBt96+4ml+HPdJ5MDvyhQIAFMT0bWE4I180ZEc6FQCgAPc7df/uYZiX6+yfL6usIEmSJNfIkcutPi6MS7XZnz9XAIC1OSOf7/dtYcyYF3ba5mcKAFCAe5+95dvCsMxLW3kTAEBh5syLuzU/j+y9i7NyaEoBAFY3O3TxJX8XhnnRsM2LCgCwOu9DW32+h3Gh0773TwUAWNWE5vchhXHIvndBAQBW1UthmBfq7Xsdyh4WJEmS5ErZ4vvCSA937FlYGQCAFTlmR4PvC2MueH67PXxeAQBWlh4694bG0LTM8DnLHj6nAADLmx06+xJt4Z3HGD7bmRk6q+wlmDNnzpz5Y7auv7eJtvA+tXa4vcEealcAgGXpNMXiSA211WRiZxQA4P/Zw+37aYql5zFiZwK8MQBgmcKItdXSEk+c+D5dn4mdVgCA/7Fjp21Tb91MSyz9qPPImW127JSdiZ6SlSRIkiRJKYxTnL9YbtjRtvZMtE0BABbF2rhgb7kxa7TWZqInFQBARE66mVjLi7TDSucyop8GMpFPFQD4nR052UUrrPZRIdHWOt4oAOBp/ROtsMrwrmbMRD6JCQUAPmbx21GF7GUYspcRblUA4Fd2+JMDtEGhexnhjw2hAMBv0uGPLSvQupU2KHQvI3xidyb8kQIA/2mtpwWK/Y0p46P2tHFCAYBfyHbP5NxFSVd/H9smKzDOmwiAb4RO8IeSSj40FTr+eiZ03E0bLQoAqlnGaDnIVn+9h6bCx+vToeMKAKpYN38kqVylETrWlA4dUwBQfY7G54LN29nSl/Uk+NH3ZcUqAKgWmeAxI9P/AZ8XVYkhK3hvJnTUTgePqHRQVjhJkuRzmpng0R4r0MT1FhU9ER5sfllW+N1HKx0AnkOhIy2cs9jIq8FDzfXpwcNxoQDguRA83JvqP/wqW/GnMEz9vc3pwQ/fSg829wgFAM+ogBwdqWOr/axc6Nf3j21zAx/UZQY/bJIS6coEm03JUaEA4CkI2KHmxlSwuaaatrX/ASvOhcTrz9UBAAAAAElFTkSuQmCC);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				transform: translateX(-50%);
				text-align: center;

				.title {
					display: inline-block;
					padding: 0 48rpx;
					background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAANCAYAAAAuYadYAAAAAXNSR0IArs4c6QAAAbFJREFUSEvNlc9LG0EUx79vk9ltjPWijaLRg5hDL0HJIXg1PZX+B/5xIv4Dnr2KBUHFU2tNUERbBcU0mmhmJrNPdidL0mDMHkLqwvLefN+beZ+dnR+E//Aw4Pxd+Tx/96hvcpWK7EWgUTOVi0sTH1v+DoGKDFyIJH2d3K/86OYYKdRNPp8m0fgOIN8FcZ1AYm3q8PQk0kYG9adQGEugugfQ8iu/60qT/2Xu4PxXECPe2PiAdNrCVavWPjwQGg3rPz1Z+/xMuL8HlCJobbXA1mqAMf/2931CvQ5E1jXeXTaz7Ytkod9yYeDSMVzKHJ+Vibe21o2UXkIpF9GrtRf6zWagWd+2PbRaIvSl7OgDfNYqrVLCqS1OD1rCp5ka5UMoaG0LvgYVxKKiUrphbg8US+lR1LcbsJ3HWo+rVJJiQIEYOeLNzW/trxcIihqTDGdISgGtBZpNqysVzJDVgphtd3QpXVZKUCdmc6R0DZsFNSZmHuen4s3UoKxhxHk1m7pV3i4D8dbUMIrGGeOt3QfGb8fxS5+i3RdnwGHl9DunDDul2aPyz5GfU1HBd3eiR2CD7r4X9K4sHA2QNjgAAAAASUVORK5CYII=),
						url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAANCAYAAAAuYadYAAAAAXNSR0IArs4c6QAAAaBJREFUSEvNlcEvA0EUxr+3szOzVVpEoogItgQXESIhzq7+WW4949CQXhyIgzZFcRFtbad2ZHa0tEqbCLrJ5L15882837zdmSV0eM59X44N8dTwyVmegLCT5jdj1L74w6a/rOr6gIAZAEePLu2mjy8efxOife0WqOJaeolRmAEw8UGY0yq+lcrlyn8F1oS6W59dDEMnA8LU5+T69AXP25PZYuUvwCKo0upcOmSUIWD6q6SOqmfHCqU91FiAwUHAcXTTmkkjIzqay5hGMglwbvvGCqExOgrEYjY2MGBtPK6RSFjfzC8UIkva92UpqXMAFr6rQvLyFqKiQhKiDCFqkDKIbLsvhI1L+a5xXQXPe9cbjefZuZw34y9C1JiUAZXW5n1NOO/2WiKoal0T508tQL1AcW4hG1rTN1Cu27o5A855redKDeXvIcrqhjns6i2BghBR01IqMr5NrqJmq2h9zq3W86zGWjtm4BirN9d0XdXzN6WB7LgIduiwUO1W1Z+Ot54+7ZjroD9OX2NnfXdPNcCuN/wVCvV+39zoDbD//ve9AhTN0SA4F/9jAAAAAElFTkSuQmCC);
					background-position: left center, right center;
					background-repeat: no-repeat;
					background-size: 37rpx 13rpx;
					font-weight: 500;
					font-size: 36rpx;
					line-height: 50rpx;
					color: #E93323;
				}
			}

			.popup-center {
				height: 572rpx;
				padding: 0 38rpx;
			}

			.popup-bottom {
				padding: 24rpx 40rpx;

				.button {
					height: 80rpx;
					border-radius: 40rpx;
					background-color: #E93323;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}

		.rules-button {
			position: absolute;
			top: 198rpx;
			right: 0;
			width: 52rpx;
			padding: 10rpx 15rpx;
			border-radius: 16rpx 0 0 16rpx;
			background: linear-gradient(90deg, #FF8D8D 0%, #FF3F3F 100%);
			font-weight: 500;
			font-size: 22rpx;
			line-height: 30rpx;
			color: #FFFFFF;
		}

		.lottery-header {
			width: 100%;
			height: 580rpx;
			margin: 0;
		}

		.grids {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			padding: 448rpx 85rpx 0;
			background-image: url(data:image/png;base64,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
			background-repeat: no-repeat;
			background-size: 100%;


			.grids-bag {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.grids-box {
				width: 540rpx;
				height: 540rpx;
				// z-index: 10000;
				margin-top: 59rpx;
			}

			.grids-top {
				display: flex;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.grids-title {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 20px;
					color: #fff;
					z-index: 999;
					padding: 0 14rpx;

					.grids-frequency {
						color: #FFD68E;
					}
				}
			}

			.winning-tips-list {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				font-size: 20rpx;
				line-height: 62rpx;
				height: 62rpx;
				font-weight: 400;
				color: #FFF8F8;
				// margin: 20rpx 0;
				z-index: 999;
				// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 51%, rgba(255, 255, 255, 0) 100%);

				.iconfont {
					font-size: 20rpx;
					margin-right: 10rpx;
				}
			}
		}

		.invite-people {
			display: flex;
			justify-content: center;

			.invite {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 558rpx;
				height: 76rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #E74435;
				background: #FFD68E;
				box-shadow: 0px 6px 0px 0px rgba(185, 16, 0, 0.3);
				border-radius: 38px;
				margin: 76rpx;
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9;
	}

	.share-box {
		z-index: 1300;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.followCode {
		.pictrue {
			width: 500rpx;
			height: 530rpx;
			border-radius: 12px;
			left: 50%;
			top: 50%;
			margin-left: -250rpx;
			margin-top: -360rpx;
			position: fixed;
			z-index: 10000;

			.code-bg {
				display: flex;
				justify-content: center;
				width: 100%;
				height: 100%;
				background-image: url('~@/static/images/code-bg.png');
				background-size: 100% 100%;
			}

			.imgs {
				width: 310rpx;
				height: 310rpx;
				margin-top: 92rpx;
			}
		}

		.mask {
			z-index: 9999;
		}
	}

	[v-cloak] {
		display: none;
	}

	.draw-button {
		width: 470rpx;
		height: 141rpx;
		margin: 88rpx 0 52rpx;
		background-image: url(data:image/png;base64,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
		background-size: 100% 100%;
	}

	.show-box-wrapper {
		padding: 20rpx;
		background-color: #EC4545;
	}

	.show-box-list {
		padding: 30rpx 20rpx;
		border-radius: 24rpx;
		background: #E23B1F;
		box-shadow: inset 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.5);
	}
</style>