<template>
	<view class="page">
		<c-nav-bar1 title="订单详情" bgColor="transparent"></c-nav-bar1>
		<view class="bg"></view>
		<view class="content" :style="{ 'height': (h - mt) + 'px', 'top': mt + 'px' }">
			<view class="head">
				<text class="status disabled" v-if="getalllist.orderStatus == '0'">待支付</text>
				<text class="status disabled" v-if="getalllist.orderStatus == '-1'">已取消</text>
				<text class="status s2" v-if="getalllist.orderStatus == '4'">待使用</text>
				<text class="status s3" v-if="getalllist.orderStatus == '-3'">已退款</text>
				<text class="status s3" v-if="getalllist.orderStatus == '3'">已使用</text>
			</view>
			<view class="ticketInfonmb">
				<view class="taocan">
					<view class="taocan1" v-if="getalllist.productImg">
						<u--image :src="getalllist.productImg.split(',')[0]" width="168rpx" height="168rpx"></u--image>
					</view>
					<view class="taocan2">
						<view class="taoxxq1">
							{{ getalllist.productName }}
						</view>
						<view class="taoxxq2">
							{{ getalllist.notice | delNotice }}
						</view>
						<view class="taoxxq3">
							<view class="jiage1">
								<span>￥</span> {{ getalllist.realityPay }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="basicInfo">
				<view class="chaoji">
					套餐明细
				</view>
				<view class="taocanmx">
					<view class="taocanlistmx" v-for="(item, index) in JSON.parse(getalllist.productsDetail)" :key="index">
						<view class="taocanlistmx1">
							*{{ item.name }}
						</view>
						<view class="taocanlistmx2">
							（{{ item.number }}份）
						</view>
						<view class="taocanlistmx3">
							¥{{ item.price }}
						</view>
					</view>

				</view>
			</view>
			<view class="basicInfo" style="margin-bottom: 50rpx;">
				<view class="chaoji" style="margin: 0 0 40rpx 0;">
					订单信息
				</view>
				<view class="dingdanxinxi">
					<view class="dingdanxinxi1">
						<view class="dingdanxinxi2">
							订单编号
						</view>
						<view class="dingdanxinxi3">
							{{ getalllist.orderCode }}
						</view>
					</view>
					<view class="dingdanxinxi1">
						<view class="dingdanxinxi2">
							付款时间
						</view>
						<view class="dingdanxinxi3">
							{{ getalllist.paymentTime }}
						</view>
					</view>
					<view class="dingdanxinxi1" v-if="getalllist.orderStatus == 3">
						<view class="dingdanxinxi2">
							核销时间
						</view>
						<view class="dingdanxinxi3">
							{{ getalllist.writeOffTime }}
						</view>
					</view>
					<view class="dingdanxinxi1">
						<view class="dingdanxinxi2">
							订单总价
						</view>
						<view class="dingdanxinxi3">
							¥{{ getalllist.realityPay }}
						</view>
					</view>
					<view class="dingdanxinxi1">
						<view class="dingdanxinxi2">
							实际付款
						</view>
						<view class="dingdanxinxi3">
							¥{{ getalllist.realityPay }}
						</view>
					</view>
					<view class="dingdanxinxi1">
						<view class="dingdanxinxi2">
							联系方式
						</view>
						<view class="dingdanxinxi3">
							{{ getalllist.guestPhone }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btns" v-if="getalllist.orderStatus == 4">
			<view class="hexiao" @click="hexiaonima">确认核销 </view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- 取消弹框 -->
		<u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirm" @cancel='cancel'></u-modal>
	</view>

</template>

<script>
export default {
	data() {
		return {
			titles: '订单详情',
			h: uni.getSystemInfoSync().windowHeight,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			value: 1,
			status: 1,
			id: '',
			getalllist: {},
			bedData: {},
			arriveTime: '',
			arriveTimes: '',
			leaveTime: '',
			leaveTimes: '',
			count: '',
			orderId: '',
			price: '',
			form: {
				initiator: 2,
				orderCode: '',
				status: ''
			},
			num: 0,
			title: '温馨提示',
			content: '您确定要取消吗？确定取消将不可撤回，再次预订可能因为没有房间，影响后续行程！',
			showAgree: false,
			checkInTimeStart: '',
			checkOutTime: '',
			FormData: {
				arriveDate: "", //	到达时间(yyyy-MM-dd)
				leaveDate: "", //离开时间(yyyy-MM-dd)
				limit: 10, //每页显示记录数
				page: 1, //当前页码
				name: "",
				islandId: '', //岛屿id
				priceSort: '', //价格排序: 1有高高低, 0由低到高
				featureLabels: '', //	特色服务(逗号分割):字典FeatureLabels
				category: '', //	酒店类别(逗号分割): 字典HotelCategory
			},
			departWeek: '',
			departWeeks: '',
			weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			checkInRooms: 0,
			hexiaodata: {},

		}
	},
	filters: {
		delNotice(val) {
			if (val) {
				return JSON.parse(val)[0].notice

			}
		}
	},
	onLoad(option) {
		this.hexiaodata = JSON.parse(option.list);
		let postdata = {
			merchantCategory: 4,
			orderCode: JSON.parse(option.list).orderCode,
		};
		this.$api.get('/api/merchant/food/queryOrderDetail', postdata).then(res => {
			if (res.data.code == 500) {
				uni.showToast({
					title: res.data.msg,
					icon: 'none',
					duration: 1500
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500)
			} else {
				this.getalllist = res.data.data;
			}

		})


	},
	methods: {
		hexiaonima() {
			this.$api.post('/api/merchant/food/scenic/merchant/order/verifyOrderQrCode?writeOffCode', this.hexiaodata)
				.then(res => {
					if (res.data.code == 0) {
						this.$showToast('核销成功');
						uni.setStorageSync('list', {
							totalPrice: this.getalllist.realityPay
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesHouse/Mine/ordersList/outcome'
							})
						}, 1500)
						// uni.navigateBack({
						// 	delta: 1
						// });
					} else {
						this.$showToast(res.data.msg)
					}
				})
		},
	}
}
</script>

<style lang="scss" scoped>
.dingdanxinxi {

	.dingdanxinxi1 {
		display: flex;

		.dingdanxinxi2 {
			width: 140rpx;
			height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
			line-height: 60rpx;
			text-align: justify;
			font-style: normal;
		}

		.dingdanxinxi3 {
			flex-grow: 1;
			height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 60rpx;
			text-align: justify;
			font-style: normal;
		}
	}
}

.chaoji {
	width: 100%;
	height: 40rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: bold;
	font-size: 40rpx;
	color: #1C1E41;
	line-height: 40rpx;
	text-align: left;
	font-style: normal;
	margin: 40rpx 0 0 0;
}

.goumai {
	position: fixed;
	bottom: 0rpx;
	left: 30rpx;
	background: #fff;
	width: 690rpx;
	height: 140rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.goumai2 {
		width: 220rpx;
		height: 88rpx;
		background: #007A69;
		border-radius: 44px;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
	}

	.goumai1 {
		flex-grow: 1;
		height: 140rpx;
		display: flex;
		align-items: center;

		.zongji1 {
			height: 140rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 140rpx;
			text-align: left;
			font-style: normal;
		}

		.zongji2 {
			height: 140rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF4141;
			line-height: 140rpx;
			text-align: left;
			font-style: normal;
		}

		.zongji3 {
			height: 140rpx;
			font-family: DINAlternate, DINAlternate;
			font-weight: bold;
			font-size: 48rpx;
			color: #FF4141;
			line-height: 140rpx;
			text-align: left;
			font-style: normal;
			padding: 0 8rpx;
		}

		.zongji4 {}
	}
}

.canyu {
	width: 100%;
	height: 190rpx;
	display: flex;
	margin: 40rpx 0 40rpx 0;

	.canyu1 {
		width: 190rpx;
		height: 190rpx;
	}

	.canyu2 {
		flex-grow: 1;
		height: 190rpx;

		.papdang1 {
			width: 100%;
			height: 95rpx;
			display: flex;

			.haixian2 {
				width: 56rpx;
				height: 95rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.haixian1 {
				flex-grow: 1;
				height: 95rpx;

				.xhpd1 {
					width: 100%;
					height: 47.5rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					line-height: 47.5rpx;
					text-align: left;
					font-style: normal;
					padding-left: 20rpx;
				}

				.xhpd2 {
					width: 100%;
					height: 47.5rpx;
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					.xhpd2new {
						height: 47.5rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;
						line-height: 47.5rpx;
						text-align: left;
						font-style: normal;
						padding-right: 20rpx;
					}
				}
			}
		}

		.papdang2 {
			display: flex;
			padding-left: 20rpx;

			.yingyez1 {
				width: 78rpx;
				height: 47.5rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 47.5rpx;
				text-align: justify;
				font-style: normal;
				padding-right: 10rpx;
			}

			.yingyez2 {
				flex-grow: 1;
				height: 47.5rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 47.5rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.papdang3 {
			padding-left: 20rpx;
			height: 47.5rpx;
			display: flex;
			align-items: center;

			.dizhinew1 {
				width: 30rpx;
				height: 47.5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.dizhinew2 {
				flex-grow: 1;
				height: 47.5rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 47.5rpx;
				text-align: justify;
				font-style: normal;
			}
		}
	}

}

.yyyue1new {
	width: 100%;
	min-height: 55rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #111111;
	line-height: 45rpx;
	text-align: left;
	font-style: normal;
}

.xuzhinew {
	width: 100%;
	min-height: 130rpx;
	display: flex;
	margin: 30rpx 0;

	.xuzhi1new {
		width: 260rpx;
		height: 55rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 45rpx;
		text-align: left;
		font-style: normal;
	}

	.xuzhi2new {
		flex-grow: 1;
	}
}

.taocanlistnewmx1 {
	width: 460rpx;
	height: 50rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #111111;
	line-height: 50rpx;
	text-align: left;
	font-style: normal;
}

.wuyiyi {
	width: 750rpx;
	height: 20rpx;
	background: #F5F8FA;
}

.taocanmx {
	margin: 30rpx 0;

	.taocanlistmx {
		display: flex;

		.taocanlistmx1 {
			width: 460rpx;
			height: 50rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
			line-height: 50rpx;
			text-align: left;
			font-style: normal;
		}

		.taocanlistmx2 {
			width: 150rpx;
			height: 50rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 50rpx;
			text-align: center;
			font-style: normal;
		}

		.taocanlistmx3 {
			width: 80rpx;
			height: 50rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
			line-height: 50rpx;
			text-align: right;
			font-style: normal;
		}
	}
}

.yyyue1 {
	width: 100%;
	height: 55rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #111111;
	line-height: 55rpx;
	text-align: left;
	font-style: normal;
}

.xuzhi {
	width: 100%;
	min-height: 130rpx;
	display: flex;

	.xuzhi1 {
		width: 90rpx;
		height: 55rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 55rpx;
		text-align: left;
		font-style: normal;
	}

	.xuzhi2 {
		flex-grow: 1;
	}
}

.basicInfo {
	width: 678rpx;
	margin: 0 auto 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 20rpx;

	.chaoji {
		width: 100%;
		height: 40rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #1C1E41;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin: 20rpx 0 40rpx 0;
	}

	.xianzhi {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #e6e6e6;

		.xianzhi1 {
			width: 140rpx;
			height: 80rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
		}

		.xianzhi2 {
			flex-grow: 1;
			height: 80rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
		}

	}

}

.daoqi {
	height: 30rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: bold;
	font-size: 30rpx;
	color: #111111;
	line-height: 30rpx;
	text-align: center;
	font-style: normal;
}

.erweima {
	width: 100%;
	height: 340rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pjm {
	display: flex;

	.pjm1 {
		height: 32rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
		line-height: 32rpx;
		text-align: center;
		font-style: normal;
	}

	.pjm2 {
		height: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #AAAAAA;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		padding-left: 20rpx;
	}
}

.ticketInfonmb {
	box-sizing: border-box;
	width: 96%;
	margin: 0 auto 20rpx;
	padding: 10rpx 24rpx;
	border-radius: 20rpx;
	position: relative;
	background-color: #fff;
	z-index: 2;
}

.taocan {
	width: 690rpx;
	height: 226rpx;

	border-radius: 20px;
	background: #fff;
	display: flex;
	align-items: center;

	.taocan1 {
		width: 168rpx;
		height: 168rpx;
		//margin-left: 20rpx;
	}

	.taocan2 {
		flex-grow: 1;
		height: 168rpx;

		.taoxxq1 {
			height: 52rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			line-height: 52rpx;
			text-align: left;
			font-style: normal;
			padding-left: 20rpx;
		}

		.taoxxq2 {
			height: 50rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;
			line-height: 50rpx;
			text-align: left;
			font-style: normal;
			padding-left: 20rpx;
		}

		.taoxxq3 {
			height: 66rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.jiage1 {
				flex-grow: 1;
				height: 66rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FF3E3E;
				line-height: 66rpx;
				text-align: left;
				font-style: normal;

				span {
					width: 24rpx;
					height: 66rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FF3E3E;
					line-height: 66rpx;
					text-align: left;
					font-style: normal;
					padding-left: 20rpx;
				}
			}

			.right {
				width: 190rpx;
				height: 66rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 44rpx;
					height: 44rpx;
					vertical-align: middle;
				}

				.number {
					font-size: 36rpx;
					vertical-align: middle;
					margin: 0 30rpx;
				}
			}
		}

	}
}



.bottom-list {
	display: flex;
	margin: 37rpx auto;
	justify-content: center;

	.image {
		width: 36rpx;
		height: 36rpx;
		margin: 0 8rpx;

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

	.text {
		font-size: 26rpx;
		color: #999999;
		font-weight: Regular;
	}
}

.minus,
.plus {
	display: flex;
	align-items: center;
	// width: 44rpx;
	// height: 44rpx;
	// line-height: 44rpx;
	padding: 10rpx 10rpx;
	// padding-left: 8rpx;

	border: 1px solid #999;
	border-radius: 6rpx;
	text-align: center;
}

.page {
	box-sizing: border-box;
	background-color: #F5F8FA;
	overflow: hidden;


	.content {
		position: relative;
		z-index: 3;
		padding-bottom: 180rpx;
		box-sizing: border-box;
		overflow-y: auto;

		.hand-title {
			position: absolute;
			left: 20rpx;
			top: 100rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}

}

.bg {
	height: 100%;
	position: fixed;
	// top: 44px;
	z-index: 1;
	width: 100%;
	// background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
	background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
}

.ticketInfo-demo {
	// border-bottom: 2rpx solid #EFEFEF;
	margin-top: 40rpx;

	.demo-layout {
		display: flex;
		align-items: center;
		text-align: center;
		margin: 0 80rpx;
	}
}

.two-center-two {
	box-sizing: border-box;

	.tit {
		font-size: 32rpx;
		color: #333333;
		margin: 20rpx 0;
	}

	.df-one {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;

		// .bg-purple-dark {
		// 	margin-left: 140rpx;
		// }

		// .demo-layout {
		// 	margin-left: 30rpx;
		// }
	}

	.df-two {
		border-bottom: 2rpx solid #EFEFEF;

		.bg-purple {
			// margin-right: 100rpx;
			width: 182rpx;
			margin-left: -13rpx;
		}

		.bg-purple-dark {
			// margin-left: 50rpx;
		}

		.bg-purple,
		.bg-purple-dark {
			font-size: 26rpx;
			color: #777777;
			font-weight: Regular;
			text-align: center;

			text {
				margin: 0 8rpx;
			}
		}

		.bg-purple-light {
			font-size: 24rpx;
			color: #666666;
			border: 1rpx solid #666666;
			text-align: center;
			border-radius: 50rpx;
		}

	}
}


.prices-content {
	margin: 24rpx 0;

	.txt1 {
		font-size: 32rpx;
		color: #111111;
		font-weight: bold;
	}

	.txt2 {
		margin: 12rpx 0;
		font-size: 26rpx;
		color: #777777;
		font-weight: Regular;
	}

}



.orderInfo {
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 16rpx;
	width: 96%;
	margin: 0 auto 20rpx;

	.tit {
		font-size: 32rpx;
		color: #333;
		padding-left: 30rpx;
		padding-top: 40rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.txt {
		font-size: 28rpx;
		color: #666;
		width: 115rpx;
	}

	.icon {
		font-size: 28rpx;
		color: #666;
	}

	.val {
		font-size: 28rpx;
		color: #666;
		margin: 0 20rpx 0 30rpx;
	}

	.nums {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #f0f2f5;
		padding: 0 24rpx;

		.input {
			margin: 0 30rpx;
			font-size: 28rpx;
		}

		text {
			margin: 20rpx 0;

			&:nth-child(1) {
				font-size: 28rpx;
				color: #333;
				font-weight: 400;
			}

			&:nth-child(3) {
				font-size: 36rpx;
				color: #FF4141;
				margin-right: 40rpx;
			}

			&.icon {
				display: inline-block;
				width: 100rpx;
				flex: 1;
				text-align: right;
				padding-top: 12rpx;
			}
		}

		// .minus,
		// .plus {
		// 	width: 44rpx;
		// 	height: 44rpx;
		// 	line-height: 44rpx;
		// 	padding: 11rpx 9rpx;
		// 	border: 1px solid #999;
		// 	border-radius: 6rpx;
		// }

		.plus {
			background-color: #0EBFFE;
			border-color: #0EBFFE;
		}

	}

}

.ticketInfo {
	box-sizing: border-box;
	width: 96%;
	margin: 0 auto 20rpx;
	padding: 44rpx 24rpx;
	border-radius: 20rpx;
	position: relative;
	background-color: #fff;
	z-index: 2;

	.ticketInfo-hander {
		display: flex;

		.image {
			width: 130rpx;
			height: 136rpx;
			border-radius: 12rpx;
			margin-right: 20rpx;

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

	}

	.name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		width: 100%;
	}

	.date {
		// padding: 20rpx 0 32rpx;
		padding-top: 40rpx;

		text {
			font-size: 26rpx;

			&:nth-child(1) {
				color: #808080;
			}

			&:nth-child(2) {
				color: #FF7D01;
				margin-left: 30rpx;
			}
		}
	}



	.topHead {
		width: 96%;
		margin: 0 auto;
		background-color: #F5F8FA;
		padding: 28rpx 0 28rpx 84rpx;
		border-radius: 16rpx;
		position: relative;

		text {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			border-radius: 16rpx 0 0 16rpx;
			width: 48rpx;
			color: #fff;
			font-size: 20rpx;
			background-color: #484F61;
			text-align: center;
			height: 100%;
			padding: 15rpx 10rpx 0;

		}

		.p {
			font-size: 28rpx;
			color: #333;

			&:nth-of-type(1) {
				font-weight: 600;
				margin-bottom: 16rpx;
			}
		}


	}

	.code {
		margin-top: 40rpx;
		text-align: center;
		position: relative;

		.cover,
		.sx {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			width: 340rpx;
			height: 340rpx;
			top: 66rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.sx {
			width: 120rpx;
			height: 120rpx;
			top: 150rpx;
			background: transparent;
		}

		.txt {
			font-size: 28rpx;
		}

		image {
			width: 340rpx;
			height: 340rpx;
			margin: 30rpx 0;
		}
	}
}

.head {
	box-sizing: border-box;
	padding: 14rpx 24rpx 30rpx;
	display: flex;
	position: relative;
	z-index: 2;

	.s2 {
		font-weight: bold;
	}

	text {
		color: #fff;

		&:nth-child(1),
		&:nth-child(3) {
			font-size: 44rpx;
		}

		&:nth-child(2) {
			flex: 1;
			text-align: right;
			width: 100px;
			font-size: 36rpx;
		}
	}
}


.btns {
	box-sizing: border-box;
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 4;
	left: 0;
	display: flex;
	padding: 32rpx 32rpx 50rpx;
	background-color: #fff;
	gap: 0 20rpx;
	box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);

	.hexiao {
		width: 690rpx;
		height: 88rpx;
		background: #007A69;
		border-radius: 44rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
	}


}
</style>