baodeng_xcx/pages/myorder/index.vue

<template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar" :custom-back="btnfanhui">
		</u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/u1dVlFYFsW87hp0Rs014" class="bj" mode=""></image>
		<view class="bjmask"></view>
		<view class="jilu neon-button" @click="btnjilu">
			记录
		</view>
		<view class="caozuo">
			<image class="czbj" src="https://api.ccttiot.com/smartmeter/img/static/u2FepRO7UQ0k1b5nceB3" mode=""></image>
			<view class="topname">
				 <image src="https://api.ccttiot.com/smartmeter/img/static/uLd99OBSt2ECYX5cNHwn" mode=""></image>
			</view>
			<view class="line"></view>
			<view class="bangding">
				<view class="lt">
					<view class="zhuozi">
						绑定桌号：<text v-if="yonghuobj.boothName" class="">{{yonghuobj.boothName}}</text> <text v-else>未绑定</text>
					</view>
					<view class="sm">
						绑定桌号，即可解锁对应桌台的爆灯器
					</view>
				</view>
				<view v-if="yonghuobj.boothName" class="rt" @click="jbflag = true">
					解绑/换绑 <image src="https://api.ccttiot.com/smartmeter/img/static/uYIshjyTMzRFKve7Ensk" mode=""></image>
				</view>
				<view v-else class="rt" @click="smflag = true">
					去绑定 <image src="https://api.ccttiot.com/smartmeter/img/static/uYIshjyTMzRFKve7Ensk" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="shengyu">
				剩余爆灯次数：<text style="font-size: 50rpx;font-weight: 600;">{{shengyuobj.number == null ? '0' : shengyuobj.number}}</text>次
			</view>
			<view v-if="yonghuobj.boothName" @click="btnbaodeng" class="cishu breathing-light"
				style="width: 254rpx;height: 254rpx;color: #fff;margin: auto;margin-top: 20rpx;display: flex;align-items: center;justify-content: center;position: relative;">
				<image v-if="shengyuobj.number > 0" class="breathing-image" style="position: absolute;top: 0;left: 0;width: 254rpx;height: 254rpx;z-index: -1;"
					src="https://api.ccttiot.com/smartmeter/img/static/uw0QKoMF30vahW7o1YPU" mode=""></image>
				<image v-else style="position: absolute;top: 0;left: 0;width: 254rpx;height: 254rpx;z-index: -1;"
					src="https://api.ccttiot.com/smartmeter/img/static/u0piVrPcUak8yM6mMziR" mode=""></image>
			</view>
			<view v-else class="cishu breathing-light"
				style="width: 254rpx;height: 254rpx;color: #fff;margin: auto;margin-top: 20rpx;display: flex;align-items: center;justify-content: center;position: relative;">
				<image class="" style="position: absolute;top: 0;left: 0;width: 254rpx;height: 254rpx;z-index: -1;"
					src="https://api.ccttiot.com/smartmeter/img/static/u0piVrPcUak8yM6mMziR" mode=""></image>
			</view>
			<view v-if="yonghuobj.boothName" @click="btnbaodeng" class="neon-text-small"
				style="width: 100%;text-align: center;margin-top: 30rpx;">
				{{countdown > 0 ? `请等待${countdown}秒后再点击` : '点击爆灯'}}
			</view>
			<view class="chongzhi" @click="czflag = true">
				充值
			</view>
		</view>
		<!-- 解除绑定弹窗 -->
		<view class="delbd" v-if="jbflag">
			<image class="cha" @click="jbflag = false"
				src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
			<view class="zhuohao">
				<view class="taihao">
					绑定桌号
				</view>
				<view class="d15">
					{{yonghuobj.boothName == null ? '--' : yonghuobj.boothName}}
				</view>
			</view>
			<view class="jcbd" @click="btnjiebang">
				解除绑定 <image src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
			</view>
			<view class="ghbd" @click="btngenghuan">
				更换桌号 <image src="https://api.ccttiot.com/smartmeter/img/static/usK85jkGXw491hI1ItJo" mode=""></image>
			</view>
		</view>
		<view class="mask" v-if="jbflag"></view>
		<!-- 充值弹窗 -->
		<view class="cztc" v-if="czflag">
			<image class="cha" @click="czflag = false" src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
			<view class="top">
				请先充值爆灯次数
			</view>
			<view class="sy">
				剩余：{{shengyuobj.number == null ? '0' : shengyuobj.number}}次
			</view>
			<view class="list">
				<view :class="['list_item',tabindex == index ? 'active' : '']" v-for="(item,index) in taocanlist" :key="item.suitId" @click="btnitem(index,item)">
					{{item.lightingNums == null ? '--' : item.lightingNums}} <text>次</text>
				</view>
			</view>
			<view class="zfaniu" @click="btnzf">
				立即支付（￥{{price}}元）
			</view>
		</view>
		<view class="mask" v-if="czflag"></view>
		<!-- 扫码绑定弹窗 -->
		<view class="ewmbd" v-if="smflag">
			<image class="cha" @click="smflag = false"
				src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
			<view class="top">
				请扫描桌号二维码
			</view>
			<view class="toptwo">
				进行绑定
			</view>
			<view class="hong">
				绑定后即可使用对应桌台爆灯器
			</view>
			<view class="ewm">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uqZ6aQmUd79pHO6nSksa" mode=""></image>
			</view>
			<view class="saoma" @click="btnsaoma">
				扫码绑定
			</view>
		</view>
		<view class="mask" v-if="smflag"></view>
	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js")
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
				jbflag: false,
				tabindex: 0,
				czflag: false,
				smflag: false,
				kazuoid: "",
				taocanlist: [],
				price: '',
				suitId: '',
				cishu: '',
				user: {},
				shengyuobj: {},
				yonghuobj: {},
				countdown: 0, // 倒计时秒数
				countdownTimer: null, // 倒计时定时器
				ver_dataflag: 1,
				mac: '',
				deviceid: '',
				devicename: '',
				devicesarr: [],
				findDeviceTimer: null,
				duration:''
			}
		},
		onLoad(option) {
			if (option.q) { //判断是否直接扫码进入 解析携带参数
				const getQueryParam = (url, paramName) => {
					const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
					const results = regex.exec(url)
					return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
				}
				const sceneValue = option.q
				const decodedValue = decodeURIComponent(sceneValue)
				this.kazuoid = getQueryParam(decodedValue, 'k')
				console.log(this.kazuoid,option.q);
				if (!this.kazuoid) { //判断是否解析成功 有无id
					uni.showModal({
						title: '提示',
						content: '无效的二维码',
						confirmText: '知道了',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {}
						}
					})
					return
				}
				uni.showLoading({
					title: '绑定中...',
					mask: true
				})
				// 有id的话 一进入直接就进行绑定操作
				this.$u.get(`/app/booth/getBoothDetail/${this.kazuoid}`).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.yonghuobj = res.data
						this.smflag = false
						setTimeout(() => {
							this.getcishu()
						}, 500)
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							confirmText: '知道了',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {}
							}
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: '绑定失败，请重试',
						confirmText: '知道了',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {}
						}
					})
				})
			}
		},
		onShow() {
			this.tabindex = 0
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
			this.getinfo()
			this.gettaocan()
		},
		methods: {
			// 点击返回到首页
			btnfanhui() {
				uni.setStorageSync('type', 1)
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 点击更换桌号
			btngenghuan() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要换绑桌号吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							uni.scanCode({ //扫描桌号二维码解析出桌号id
								onlyFromCamera: true,
								scanType: ['qrCode'],
								success: res => {
									const getQueryParam = (url, paramName) => {
										const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
										const results = regex.exec(url)
										return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
									}
									const sceneValue = res.result
									const decodedValue = decodeURIComponent(sceneValue)
									that.kazuoid = getQueryParam(decodedValue, 'k')
									if (!that.kazuoid) {
										uni.showToast({
											title: '无效的二维码',
											icon: 'none',
											duration: 2000
										})
										return
									}
									uni.showLoading({
										title: '更换绑定中...',
										mask: true
									})
									that.$u.get(`/app/booth/getBoothDetail/${that.kazuoid}`).then(res => {
										uni.hideLoading()
										if (res.code == 200) {
											that.yonghuobj = res.data
											that.smflag = false
											setTimeout(() => {
												that.jbflag = false
												that.getcishu()
											}, 500)
											uni.showToast({
												title: '更换绑定成功',
												icon: 'success',
												duration: 2000
											})
										} else {
											uni.showModal({
												title: '提示',
												content: res.msg,
												confirmText: '知道了',
												showCancel: false,
												success: (res) => {
													if (res.confirm) {}
												}
											})
										}
									}).catch(() => {
										uni.hideLoading()
										uni.showToast({
											title: '换绑失败，请重试',
											icon: 'none',
											duration: 2000
										})
									})
								},
								fail: err => {
									uni.showToast({
										title: '扫描失败，请重试',
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			// 点击解绑桌号
			btnjiebang() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要解绑吗？',
					success: function(res) {
						if (res.confirm) {
							that.yonghuobj = {}
							that.kazuoid = ''
							uni.showToast({
								title: '解绑成功',
								icon: 'success',
								duration: 2000
							})
							that.jbflag = false
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			// 判断离线连接蓝牙
			findDevice() {
				const matchedDevice = this.devicesarr.find(device => device.name.slice(-12) === this.mac.slice(-12)) //截取最后12位mac号进行判断是否存在相同的
				if (matchedDevice) { //如果有则停止搜索 进行连接
					xBlufi.notifyStartDiscoverBle({
						'isStart': false
					})
					xBlufi.notifyConnectBle({
						isStart: true,
						deviceId: matchedDevice.deviceId,
						name: matchedDevice.name
					})
					this.deviceid = matchedDevice.deviceId
					this.devicename = matchedDevice.name
				} else { //如果没找到 则一直找 直到找到为止
					this.findDeviceTimer = setTimeout(this.findDevice.bind(this), 1000)
				}
			},
			// 获取附近蓝牙设备列表
			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
						if (!options.result) { //监听蓝牙是否断开
							this.ver_dataflag = 1
							this.findDevice() //如果监听到断开之后 则进行重新连接
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) { //将搜索的附近设备赋值
							this.devicesarr = options.data
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						if (options.result == true) { //蓝牙回调 判断是否连接成功还是失败
							xBlufi.notifyInitBleEsp32({
								deviceId: this.deviceid
							})
							this.deviceid = options.data.deviceId
							this.name = this.name
							setTimeout(() => {
								this.ver_dataflag = 3
								uni.hideLoading()
							}, 2000)
						} else {
							uni.hideLoading()
							this.findDevice() //如果连接失败则继续重新连接
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
						if (!options.result) { //蓝牙初始化失败 则需要重新进入 重新初始化
							console.log('蓝牙初始化失败');
							return
						}
						break;
				}
			},
			btnyue(){
				this.flag = true
				this.bootm = 0
				res.data.forEach(item =>{
					if(item.id == this.id){
						this.list.map({
							name:item.devicename,
							id:item.id,
							price:item.money
						})
					}
				})
			},
			// 点击立即支付
			btnzf() {
				this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}`).then((res) => {
					if (res.code == 200) {
						let data = {
							suitId: this.suitId,
							appId: this.$store.state.appid,
							channelId: res.data[0].channelId,
							payAmount: this.price,
							number: this.cishu
						}
						this.$u.post(`/app/order`, data).then(resp => {
							if (resp.code == 200) {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: resp.data.payParams.timeStamp,
									nonceStr: resp.data.payParams.nonceStr,
									package: resp.data.payParams.packageVal,
									signType: resp.data.payParams.signType,
									paySign: resp.data.payParams.paySign,
									success: (respc) => {
										console.log(respc, '支付成功')
										this.$u.put(
											`/app/pay/refreshPayResult?no=${resp.data.pay.no}`
											).then((res) => { //刷新支付结果
											this.czflag = false
											this.getcishu()
										})
									},
									fail(err) {
										setTimeout(() => {
											uni.hideLoading()
										}, 1000)
										console.log('取消或者支付失败')
									}
								})
							} else {
								uni.showToast({
									title: resp.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 爆灯成功开始倒计时 需倒计时结束后方可再次点击
			startCountdown() {
				this.countdown = this.duration
				this.countdownTimer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.countdownTimer)
						this.countdownTimer = null
					}
				}, 1000)
			},
			// 点击爆灯请求
			btnbaodeng() {
				if (this.shengyuobj.number == 0) {
					uni.showToast({
						title: `您当前没有爆灯次数，请先充值`,
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.countdown > 0) {
					uni.showToast({
						title: `请等待${this.countdown}秒后再次点击`,
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.yonghuobj.devices[0]) {
					let flag = ''
					if (this.ver_dataflag == 3) {
						flag = false
					} else {
						flag = true
					}
					this.$u.put(`/app/booth/${this.yonghuobj.boothId}/lighting?requiredIot=${flag}`).then(res => {
						if (res.code == 200 && res.data.db >= 1) {
							if (res.data.iot == false) { //判断是否进行蓝牙充值 为true则进行蓝牙发送命令
								if (this.ver_dataflag == 3) { //判断蓝牙是否已经连接
									xBlufi.notifySendCustomData({
										customData: "11time" + this.duration + '@' //进行蓝牙发送命令 
									})
									uni.showToast({
										title: "爆灯成功",
										icon: 'success',
										duration: 2000
									})
									this.getcishu()
									this.startCountdown() //爆灯成功后进行禁用倒计时
								} else {
									uni.showToast({
										title: '设备离线',
										icon: 'none',
										duration: 2000
									})
								}
							} else {
								uni.showToast({
									title: "爆灯成功",
									icon: 'success',
									duration: 2000
								})
								this.getcishu()
								this.startCountdown() //爆灯成功后进行禁用倒计时
							}
						} else {
							console.log(res.msg);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '该桌号暂无设备',
						confirmText: '知道了',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {}
						}
					})
				}
			},

			// 用户请求剩余爆灯次数
			getcishu() {
				this.$u.get(`/app/lightingNum/userLightingNum?storeId=${this.$store.state.storeId}&userId=${this.user.userId}`).then(res => {
					if (res.code == 200) {
						this.shengyuobj = res.data //赋值
					}
				})
			},
			// 请求用户个人信息
			getinfo() {
				this.$u.get(`/getInfo`).then(res => {
					if (res.code == 200) {
						this.user = res.user
						this.getcishu()
					}
				})
			},
			
			// 请求充值套餐列表 
			gettaocan() {
				this.$u.get(`/app/suit/list?pageNum=1&pageSize=999&storeId=${this.$store.state.storeId}`).then(res => {
					if (res.code == 200) {
						this.taocanlist = res.rows
						this.price = res.rows[0].rechargeAmount
						this.suitId = res.rows[0].suitId
						this.cishu = res.rows[0].lightingNums
					}
				})
			},
			// 点击切换充值套餐高亮
			btnitem(index, item) {
				this.tabindex = index
				this.price = item.rechargeAmount
				this.suitId = item.suitId
				this.cishu = item.lightingNums
			},
			// 点击跳转到记录
			btnjilu() {
				uni.navigateTo({
					url: '/pages/myorder/returned/index'
				})
			},
			// 扫码绑定 
			btnsaoma() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						const getQueryParam = (url, paramName) => {
							const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							const results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						const sceneValue = res.result
						const decodedValue = decodeURIComponent(sceneValue)
						this.kazuoid = getQueryParam(decodedValue, 'k')
						console.log(this.kazuoid,res);
						if (!this.kazuoid) {
							uni.showModal({
								title: '提示',
								content: '无效的二维码',
								confirmText: '知道了',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {}
								}
							})
							return
						}
						uni.showLoading({
							title: '绑定中...',
							mask: true
						})
						this.$u.get(`/app/booth/getBoothDetail/${this.kazuoid}`).then(res => {
							uni.hideLoading()
							if (res.code == 200) {
								this.yonghuobj = res.data
								this.smflag = false
								setTimeout(() => {
									this.getcishu()
								}, 500)
							} else {
								uni.showModal({
									title: '提示',
									content: res.msg,
									confirmText: '知道了',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {}
									}
								})
							}
						}).catch(() => {
							uni.hideLoading()
							uni.showModal({
								title: '提示',
								content: '绑定失败，请重试',
								confirmText: '知道了',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {}
								}
							})
						})
					},
					fail: err => {
						uni.showToast({
							title: '扫描失败，请重试',
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(45deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
			animation: gradientBG 10s ease infinite;
			z-index: -1;
		}
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.neon-text {
		background: linear-gradient(90deg, #FF00FF, #00FFFF, #FF00FF, #00FFFF);
		background-size: 300% 100%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: neonGradient 3s linear infinite;
		text-shadow: 0 0 10rpx rgba(255, 0, 255, 0.5),
			0 0 20rpx rgba(0, 255, 255, 0.5);
	}

	.neon-text-small {
		background: linear-gradient(90deg, #FF00FF, #00FFFF, #FF00FF, #00FFFF);
		background-size: 300% 100%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: neonGradient 3s linear infinite;
		text-shadow: 0 0 5rpx rgba(255, 0, 255, 0.5),
			0 0 10rpx rgba(0, 255, 255, 0.5);
	}

	.neon-button {
		position: relative;
		background: linear-gradient(90deg, #FF00FF, #00FFFF);
		background-size: 200% 100%;
		animation: neonGradient 3s linear infinite;
		border-radius: 50rpx;
		box-shadow: 0 0 10rpx rgba(255, 0, 255, 0.5),
			0 0 20rpx rgba(0, 255, 255, 0.5);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 0 5rpx rgba(255, 0, 255, 0.3),
				0 0 10rpx rgba(0, 255, 255, 0.3);
		}
	}

	.neon-button-small {
		position: relative;
		background: linear-gradient(90deg, #FF00FF, #00FFFF);
		background-size: 200% 100%;
		animation: neonGradient 3s linear infinite;
		border-radius: 23rpx;
		box-shadow: 0 0 5rpx rgba(255, 0, 255, 0.5),
			0 0 10rpx rgba(0, 255, 255, 0.5);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 0 3rpx rgba(255, 0, 255, 0.3),
				0 0 5rpx rgba(0, 255, 255, 0.3);
		}
	}

	.czbj {
		// animation: float 6s ease-in-out infinite;
	}

	@keyframes float {
		0% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-10px);
		}

		100% {
			transform: translateY(0px);
		}
	}

	.line {
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			animation: shine 3s infinite;
		}
	}

	@keyframes shine {
		0% {
			left: -100%;
		}

		100% {
			left: 100%;
		}
	}

	.active {
		background-color: #FF1818;
		color: #fff !important;

		text {
			border: 1px solid #fff;
		}
	}

	.ewmbd {
		width: 750rpx;
		height: 932rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;

		.hong {
			font-size: 26rpx;
			color: #F72B2B;
			width: 100%;
			text-align: center;
			margin-top: 42rpx;
		}

		.top {
			font-weight: 600;
			font-size: 48rpx;
			color: #3D3D3D;
			width: 100%;
			text-align: center;
			margin-top: 106rpx;
		}

		.toptwo {
			font-weight: 600;
			font-size: 48rpx;
			color: #3D3D3D;
			width: 100%;
			text-align: center;
		}

		.saoma {
			width: 238rpx;
			height: 68rpx;
			background: #010000;
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 112rpx;
			padding-top: 16rpx;
			box-sizing: border-box;
		}

		.ewm {
			width: 246rpx;
			height: 246rpx;
			margin: auto;
			margin-top: 90rpx;

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

		.cha {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 26rpx;
			top: -100rpx;
		}
	}

	.mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		z-index: 8;
		top: 0;
		left: 0;
	}

	.cztc {
		width: 646rpx;
		max-height: 858rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 418rpx;
		border-radius: 20rpx;
		z-index: 9;

		.zfaniu {
			width: 518rpx;
			height: 76rpx;
			background: #FF1818;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 76rpx;
			margin: auto;
			margin-top: 52rpx;
		}

		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 54rpx;
			box-sizing: border-box;

			.list_item {
				width: 252rpx;
				height: 118rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #FF1818;
				text-align: center;
				margin-top: 36rpx;
				font-weight: 700;
				font-size: 72rpx;
				color: #FF1818;
				position: relative;
				padding-top: 10rpx;
				box-sizing: border-box;

				text {
					font-size: 24rpx;
					color: #FFFFFF;
					display: inline-block;
					width: 32rpx;
					height: 32rpx;
					background-color: #FF1818;
					border-radius: 50%;
					position: absolute;
					right: 67rpx;
					top: 56rpx;
				}
			}
		}

		.sy {
			font-size: 24rpx;
			color: #3D3D3D;
			margin-top: 40rpx;
			width: 100%;
			text-align: center;
		}

		.top {
			font-size: 40rpx;
			color: #3D3D3D;
			width: 100%;
			text-align: center;
			margin-top: 62rpx;
		}

		.cha {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 0;
			top: -100rpx;
		}
	}

	.delbd {
		width: 646rpx;
		height: 512rpx;
		background: #FFFFFF;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 696rpx;
		z-index: 9;
		border-radius: 20rpx;

		.cha {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 0;
			top: -100rpx;
		}

		.taihao {
			font-size: 40rpx;
			color: #3D3D3D;
			width: 100%;
			text-align: center;
			margin-top: 62rpx;
		}

		.d15 {
			font-size: 68rpx;
			color: #3D3D3D;
			width: 100%;
			text-align: center;
			margin-top: 14rpx;
		}

		.ghbd {
			width: 242rpx;
			height: 60rpx;
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			border: 2rpx solid #000000;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #010000;
			align-items: center;
			padding-left: 44rpx;
			padding-right: 8rpx;
			box-sizing: border-box;
			margin: auto;
			margin-top: 26rpx;

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

		.jcbd {
			width: 242rpx;
			height: 60rpx;
			background: #010000;
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #FFFFFF;
			align-items: center;
			padding-left: 44rpx;
			padding-right: 8rpx;
			box-sizing: border-box;
			margin: auto;
			margin-top: 72rpx;

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

	.caozuo {
		width: 700rpx;
		height: 1000rpx;
		margin: auto;
		margin-top: 366rpx;
		position: relative;
		padding: 0 62rpx;
		box-sizing: border-box;

		.chongzhi {
			width: 154rpx;
			height: 52rpx;
			background: #F72B2B;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 52rpx;
			margin: auto;
			margin-top: 54rpx;
		}

		.cishu {
			font-size: 144rpx;
			color: #3D3D3D;
			width: 100%;
			text-align: center;
			margin-top: 84rpx;
		}

		.shengyu {
			font-size: 36rpx;
			color: #3D3D3D;
			width: 100%;
			text-align: center;
			margin-top: 32rpx;
		}

		.bangding {
			margin-top: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 34rpx;

			.lt {
				.zhuozi {
					font-weight: 600;
					font-size: 34rpx;
					color: #3D3D3D;
				}

				.sm {
					font-size: 20rpx;
					color: #7C7C7C;
					margin-top: 10rpx;
				}
			}

			.rt {
				padding-right: 6rpx;
				width: 178rpx;
				height: 46rpx;
				background: #D8D8D8;
				border-radius: 23rpx 23rpx 23rpx 23rpx;
				font-size: 24rpx;
				color: #010000;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 24rpx;
				box-sizing: border-box;

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

		.topname {
			width: 100%;
			text-align: center;
			font-weight: 600;
			font-size: 44rpx;
			color: #3D3D3D;
			padding-top: 64rpx;
			box-sizing: border-box;
            image{
            	width: 232rpx;
            	height: 138rpx;
            }
			.neon-text {
				background: linear-gradient(90deg, #FF00FF, #00FFFF, #FF00FF, #00FFFF);
				background-size: 300% 100%;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				animation: neonGradient 3s linear infinite;
				text-shadow: 0 0 10rpx rgba(255, 0, 255, 0.5),
					0 0 20rpx rgba(0, 255, 255, 0.5);
					
			}
		}

		.line {
			width: 578rpx;
			height: 6rpx;
			border: 1rpx dashed #B8B8B8;
			margin-top: 6rpx;
		}

		.czbj {
			width: 700rpx;
			height: 1000rpx;
			position: absolute;
			left: 0;
			z-index: -1;
		}
	}

	.jilu {
		width: 140rpx;
		height: 62rpx;
		background: #010000;
		font-weight: 600;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 50rpx 0 0 50rpx;
		position: fixed;
		right: 0;
		top: 350rpx;
		padding-top: 10rpx;
		box-sizing: border-box;
	}

	.bj {
		width: 760rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: -10rpx;
		z-index: -2;
		
	}
    .bjmask{
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: -1;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
	}
	.breathing-light {
		.breathing-image {
			animation: breathing 2s ease-in-out infinite;
		}

		.breathing-text {
			animation: breathing 2s ease-in-out infinite;
			font-size: 72rpx;
			font-weight: bold;
		}
	}

	@keyframes breathing {
		0% {
			opacity: 0.9;
			transform: scale(0.95);
		}

		50% {
			opacity: 1;
			transform: scale(1.05);
		}

		100% {
			opacity: 0.9;
			transform: scale(0.95);
		}
	}

	@keyframes neonGradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}
</style>