<template>
	<!-- 兼职注册 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 姓名
				</view>
				<view class="reg-value">
					<input type="text" v-model="formData.name" placeholder="请填写姓名"
						style="background: rgba(247, 248, 248, 0.6);height: 80rpx;line-height: 80rpx;padding: 18rpx 20rpx;border-radius: 20rpx;">
				</view>
			</view>

			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 学生证上传 <text
						style="font-weight: 400;color: #777;font-size: 11px;">身份信息仅用于认证身份，平台会严格保密</text>
				</view>
				<view class="reg-value">
					<img @tap="pictureAdd('mentou')"
						src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/89d37db7e34c490da24c5dd62183bf2d.png" alt=""
						style="width: 160rpx;height: 160rpx;background-size: 100%;margin-right: 20rpx;" />
					<img @tap="largeImg" :src="formData.studentCard" alt=""
						style="width: 160rpx;height: 160rpx;background-size: 100%;" />
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 超出3楼以上额外收费
				</view>
				<view class="reg-value">
					<input type="number" v-model="formData.highFloorFee" placeholder="可设置金额"
						style="background: rgba(247, 248, 248, 0.6);height: 80rpx;line-height: 80rpx;padding: 18rpx 20rpx;border-radius: 20rpx;">
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 送达地点
				</view>
				<view class="reg-value" style="display: flex;">
					<view class="box-check-btn delivery-location-btn" @tap="selectDeliveryLocation(0)"
						:style="{background:formData.deliveryLocation == 0?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.deliveryLocation == 0?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						送上楼
					</view>
					<view class="box-check-btn delivery-location-btn" @tap="selectDeliveryLocation(1)"
						:style="{background:formData.deliveryLocation == 1?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.deliveryLocation == 1?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						送到宿舍门口
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 手机号
				</view>
				<view class="reg-value">
					<input type="number" v-model="formData.mobile" placeholder="手机号"
						style="background: rgba(247, 248, 248, 0.6);height: 80rpx;line-height: 80rpx;padding: 18rpx 20rpx;border-radius: 20rpx;">
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					<text style="color:red;">*</text> 兼职类型
				</view>
				<view class="reg-value" style="display: flex;">
					<view class="box-check-btn" @tap="waimaOrpaotui('waima')"
						:style="{background:formData.waima?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.waima?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						外卖
					</view>
					<view class="box-check-btn" @tap="waimaOrpaotui('paotui')"
						:style="{background:formData.paotui?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:formData.paotui?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						快递
					</view>
				</view>
			</view>
			<view class="box1" v-if="formData.waima != false || formData.paotui != false">
				<view class="reg-name">
					<text style="color:red;">*</text> 规则配置
				</view>
				<view class="reg-value">
					<view class="value1" v-if="formData.waima">
						<view class="value-title">
							<view class="title-1">
								外卖规则
							</view>
							<view class="title-2" @tap="checkAddress('waima')">
								配置规则
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
						<view class="guize-list">
							<view class="guize1" v-for="(item, index) in waimaRuleList" :key="index"
								style="flex-direction: column; padding-bottom: 20rpx; border-bottom: 1px solid #ddd;">
								<view style="display: flex; width: 100%;">
									<view class="guize1-qusong">
										<view class="qusong1">
											取
										</view>
										<view class="qusong2">
											{{item.getAreaName}}
										</view>
									</view>
									<view class="guize1-qusong">
										<view class="qusong1">
											送
										</view>
										<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
											{{item.putAreaName}}
										</view>
									</view>
									<view class="qusong3" style="display:flex; align-items:center;">
										<input type="digit" :value="item.orderBkge" placeholder="填写配送费"
											@input="onOrderBkgeInput($event, item)" style="flex:1;">
										<uni-icons type="closeempty" size="20" @click="removeRule('waima', index)"
											color="#ff0000" style="margin-left:10rpx;"></uni-icons>
									</view>
								</view>
								<view style="display: flex; width: 100%; margin-top: 20rpx; align-items: center;">
									<text
										style="margin: 0 20rpx 0 10rpx; color: #777; font-size: 26rpx; font-weight: bold;">备注：</text>
									<input type="text" v-model="item.remark" placeholder="填写备注，如：限时/大件加钱"
										style="flex:1; background: #fff; border-radius: 10rpx; padding: 0 20rpx; height: 60rpx; line-height: 60rpx;">
								</view>
							</view>
						</view>
					</view>
					<view class="value1" v-if="formData.paotui">
						<view class="value-title">
							<view class="title-1">
								快递规则
							</view>
							<view class="title-2" @tap="checkAddress('paotui')">
								配置规则
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
						<view class="guize-list">
							<view class="guize1" v-for="(item, index) in paotuiRuleList" :key="index"
								style="flex-direction: column; padding-bottom: 20rpx; border-bottom: 1px solid #ddd;">
								<view style="display: flex; width: 100%;">
									<view class="guize1-qusong">
										<view class="qusong1">
											取
										</view>
										<view class="qusong2">
											{{item.getAreaName}}
										</view>
									</view>
									<view class="guize1-qusong">
										<view class="qusong1">
											送
										</view>
										<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
											{{item.putAreaName}}
										</view>
									</view>
									<view class="qusong3" style="display:flex; align-items:center;">
										<input type="digit" :value="item.orderBkge" placeholder="填写配送费"
											@input="onOrderBkgeInput($event, item)" style="flex:1;">
										<uni-icons type="closeempty" size="20" @click="removeRule('paotui', index)"
											color="#ff0000" style="margin-left:10rpx;"></uni-icons>
									</view>
								</view>
								<view style="display: flex; width: 100%; margin-top: 20rpx; align-items: center;">
									<text
										style="margin: 0 20rpx 0 10rpx; color: #777; font-size: 26rpx; font-weight: bold;">备注：</text>
									<input type="text" v-model="item.remark" placeholder="填写备注，如：限时/大件加钱"
										style="flex:1; background: #fff; border-radius: 10rpx; padding: 0 20rpx; height: 60rpx; line-height: 60rpx;">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view
				style="width: 240rpx;height: 280rpx;background: rgba(166, 255, 234, 1);margin: 20rpx auto;border-radius: 40rpx;text-align: center;">
				<img show-menu-by-longpress
					src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d23a9043a8c24731831ec4db909fe3b4.jpg" alt=""
					style="width: 180rpx;height: 180rpx;margin-top: 20rpx;" />
				<view style="height: 50rpx;line-height: 50rpx;font-weight: 700;">关注公众号</view>
			</view>
			<view class="btn" @click="submit">
				提交注册
			</view>
		</view>
		<!-- 查看大图弹出层 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="img-popup-content">
				<img :src="bigImg" alt="" style="width: 100%;height: 100%;">
			</view>
		</uni-popup>
		<!-- 温馨提示弹出层 -->
		<uni-popup ref="lianggePopup" background-color="#fff" @change="changePopup">
			<view class="liangge-popup-content">
				<view class="liangge-title">
					温馨提示
				</view>
				<view class="liangge-text">
					1.送单规则，需要在<text style="color:red">配送</text>页面开启才能生效
				</view>
				<view class="liangge-text">
					2.您还没有关注公众号，关注公众号后可提现佣金
				</view>
			</view>
		</uni-popup>
		<!-- 规则选择弹出层 -->
		<uni-popup ref="guizePopup" background-color="#fff">
			<view class="guize-popup-content">
				<view style="margin-top: 20rpx;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f06433fa1bd34b31948eaefe5338c357.png"
						alt="" style="width: 204rpx;height: 50rpx;" />
				</view>
				<view style="margin-top: 20rpx;height: auto;overflow:hidden;min-height: 90rpx;">
					<view class="box-check-btn" @tap="qucanOrsongcan('qucan',index)" v-for="(item,index) in qucan"
						:key="index" style="float: left;padding: 0 20rpx;width: auto;margin-bottom:20rpx;"
						:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						{{item.title}}
					</view>
					<view v-if="qucan.length==0" style="color:#999;font-size:24rpx;margin:20rpx 0;">暂无可选取货区域</view>
				</view>
				<view style="margin-top: 130rpx;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/32fd9d723fbf4d778f2631277d316940.png"
						alt="" style="width: 204rpx;height: 50rpx;" />
				</view>
				<view style="margin-top: 20rpx;height: auto;overflow:hidden;min-height: 90rpx;">
					<view class="box-check-btn" @tap="qucanOrsongcan('songcan',index)" v-for="(item,index) in songcan"
						:key="index" style="float: left;padding: 0 20rpx;width: auto;margin-bottom:20rpx;"
						:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'rgba(247, 248, 248, 0.6)',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						{{item.title}}
					</view>
					<view v-if="songcan.length==0" style="color:#999;font-size:24rpx;margin:20rpx 0;">暂无可送货区域</view>
				</view>
				<view class="guize-btn" @tap="closeGuize">
					确定
				</view>
				<view style="position: absolute;bottom: -100rpx;left: 50%;transform:translateX(-50%);"
					@tap.stop="$refs.guizePopup.close()">
					<uni-icons type="close" size="40" color="#fff"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<common-loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				formData: {
					name: '',
					highFloorFee: 0,
					deliveryLocation: 0,
					paotui: false,
					waima: false,
					mobile: '',
					studentCard: '',
				},
				bigImg: '',
				qucan: [],
				songcan: [],
				shopArea: [],
				waimaRuleList: [],
				paotuiRuleList: [],
				currentConfigType: ''
			}
		},
		components: {

		},
		onLoad() {
			this.getShopArea()
			this.getWorkerMessage()
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			formatMoneyInput(value) {
				value = String(value || '');
				value = value.replace(/[^\d.]/g, '');
				const dotIndex = value.indexOf('.');
				if (dotIndex !== -1) {
					value = value.slice(0, dotIndex + 1) + value.slice(dotIndex + 1).replace(/\./g, '');
					const parts = value.split('.');
					value = parts[0] + '.' + parts[1].slice(0, 2);
				}
				return value;
			},
			normalizeOrderBkge(item) {
				const value = this.formatMoneyInput(item.orderBkge);
				const amount = parseFloat(value);
				item.orderBkge = isNaN(amount) ? '' : (Math.floor(amount * 100) / 100).toFixed(2).replace(/\.?0+$/, '');
				return item.orderBkge;
			},
			onOrderBkgeInput(e, item) {
				const value = this.formatMoneyInput(e.detail.value);
				item.orderBkge = value;
				return value;
			},
			getWorkerMessage() {
				let that = this
				that.tui.request("/app/workerRelaPrice/getByWorkerId?workerId=" + uni.getStorageSync('worker').workerId,
					"GET", {}, false, true).then((res) => {
					if (res.code == 200) {
						if (res.result != null) {
							let data = res.result;
							if (data.workerName) that.formData.name = data.workerName;
							if (data.cardPicture) that.formData.studentCard = data.cardPicture;
							if (data.mobile) that.formData.mobile = data.mobile;
							if (data.highFloorFee !== undefined && data.highFloorFee !== null) that.formData
								.highFloorFee = data.highFloorFee;
							if (data.deliveryLocation !== undefined && data.deliveryLocation !== null) that.formData
								.deliveryLocation = data.deliveryLocation;

							let list = data.workerRelaPriceList || [];
							let waimaList = list.filter(item => item.orderType == 0);
							let paotuiList = list.filter(item => item.orderType == 1);

							if (waimaList.length > 0) {
								that.formData.waima = true;
								that.waimaRuleList = waimaList;
							}
							if (paotuiList.length > 0) {
								that.formData.paotui = true;
								that.paotuiRuleList = paotuiList;
							}
							that.$forceUpdate();
						}
					} else {
						that.tui.toast(res.message)
						return
					}
				}).catch((res) => {})
			},
			getShopArea() {
				let that = this
				that.tui.request("/app/shopArea/getByParentId/" + JSON.parse(uni.getStorageSync('area')).id, "GET", {},
					false, true).then((res) => {
					if (res.code == 200) {
						if (res.result != null) {
							for (let m = 0; m < res.result.length; m++) {
								that.shopArea.push(res.result[m])
							}
						}
					} else {
						that.tui.toast(res.message)
						return
					}
				}).catch((res) => {})
			},
			back() {
				uni.navigateBack()
			},
			//查看大图
			largeImg(img) {
				this.bigImg = this.formData.studentCard;
				this.$refs.imgPopup.open()
			},
			waimaOrpaotui(type) {
				if (type == 'waima') {
					this.formData.waima = !this.formData.waima
				} else {
					this.formData.paotui = !this.formData.paotui
				}
				this.$forceUpdate()
			},
			selectDeliveryLocation(value) {
				this.formData.deliveryLocation = value
				this.$forceUpdate()
			},
			qucanOrsongcan(type, index) {
				if (type == 'qucan') {
					this.qucan[index].checked = !this.qucan[index].checked
				} else {
					this.songcan[index].checked = !this.songcan[index].checked
				}
				this.$forceUpdate()
			},
			closeGuize() {
				let selectedQucan = this.qucan.filter(item => item.checked);
				let selectedSongcan = this.songcan.filter(item => item.checked);

				if (selectedQucan.length == 0 || selectedSongcan.length == 0) {
					uni.showToast({
						title: '请至少选择一个取货地址和一个送货地址',
						icon: 'none'
					});
					return;
				}

				let currentRuleList = this.currentConfigType == 'waima' ? this.waimaRuleList : this.paotuiRuleList;
				let newRules = [];
				let userId = uni.getStorageSync('id') || '';
				selectedQucan.forEach(q => {
					selectedSongcan.forEach(s => {
						let existing = currentRuleList.find(r => r.getAreaId == q.id && r.putAreaId == s
							.id);
						if (existing) {
							newRules.push(existing);
						} else {
							newRules.push({
								workerId: "W" + userId,
								getAreaId: q.id,
								getAreaName: q.title,
								putAreaId: s.id,
								putAreaName: s.title,
								orderBkge: '',
								orderType: this.currentConfigType == 'waima' ? 0 : 1,
								remark: ''
							});
						}
					});
				});

				if (this.currentConfigType == 'waima') {
					this.waimaRuleList = newRules;
				} else {
					this.paotuiRuleList = newRules;
				}

				this.$refs.guizePopup.close()
			},
			changePopup(e){
				if(e.show == false){
					uni.navigateBack()
				}
			},
			checkAddress(type) {
				let that = this
				this.currentConfigType = type;
				this.qucan = [];
				this.songcan = [];
				let currentRuleList = type == 'waima' ? this.waimaRuleList : this.paotuiRuleList;
				let isCanteenVal = type == 'waima' ? 1 : 2;

				this.shopArea.forEach(item => {
					let isGetChecked = currentRuleList.some(r => r.getAreaId == item.id);
					let isPutChecked = currentRuleList.some(r => r.putAreaId == item.id);

					if (item.isCanteen == isCanteenVal) {
						that.qucan.push({
							...item,
							checked: isGetChecked
						});
					} else {
						that.songcan.push({
							...item,
							checked: isPutChecked
						});
					}
				});
				this.$refs.guizePopup.open()
			},
			removeRule(type, index) {
				if (type == 'waima') {
					this.waimaRuleList.splice(index, 1);
				} else {
					this.paotuiRuleList.splice(index, 1);
				}
			},
			submit() {
				if (!this.formData.name) return uni.showToast({
					title: '请填写姓名',
					icon: 'none'
				});
				if (!this.formData.studentCard) return uni.showToast({
					title: '请上传学生证',
					icon: 'none'
				});
				if (!this.formData.waima && !this.formData.paotui) return uni.showToast({
					title: '请至少选择一种兼职类型',
					icon: 'none'
				});

				if (this.formData.waima && this.waimaRuleList.length == 0) {
					return uni.showToast({
						title: '请配置外卖规则',
						icon: 'none'
					});
				}
				if (this.formData.paotui && this.paotuiRuleList.length == 0) {
					return uni.showToast({
						title: '请配置快递规则',
						icon: 'none'
					});
				}

				let workerRelaPriceList = [];
				if (this.formData.waima) {
					this.waimaRuleList.forEach(item => this.normalizeOrderBkge(item));
					let invalid = this.waimaRuleList.find(item => !item.orderBkge);
					if (invalid) return uni.showToast({
						title: '请填写外卖配送费',
						icon: 'none'
					});
					workerRelaPriceList = workerRelaPriceList.concat(this.waimaRuleList);
				}
				if (this.formData.paotui) {
					this.paotuiRuleList.forEach(item => this.normalizeOrderBkge(item));
					let invalid = this.paotuiRuleList.find(item => !item.orderBkge);
					if (invalid) return uni.showToast({
						title: '请填写快递配送费',
						icon: 'none'
					});
					workerRelaPriceList = workerRelaPriceList.concat(this.paotuiRuleList);
				}

				let submitData = {
					userId: uni.getStorageSync('id'),
					workerName: this.formData.name,
					cardPicture: this.formData.studentCard,
					highFloorFee: this.formData.highFloorFee,
					deliveryLocation: this.formData.deliveryLocation,
					mobile: this.formData.mobile,
					workerRelaPriceList: workerRelaPriceList
				};

				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				this.tui.request('/app/workerRelaPrice/batchAdd', 'post', submitData).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let user = res.result;
						uni.setStorageSync('officialAccountOpenid', user.officialAccountOpenid)
						if (user.officialAccountOpenid == null || user.officialAccountOpenid == '' || user
							.officialAccountOpenid == undefined) {
							this.$refs.lianggePopup.open()
						} else {
							uni.showToast({
								title: '提交成功'
							});
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
				});
			},
			pictureAdd() {
				let that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['camera', 'album'],
					success(res) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						for (let i = 0; i < res.tempFiles.length; i++) {

							that.upLoadFile(res.tempFiles[i].tempFilePath)
						}

					}
				})
			},
			async upLoadFile(path) {
				let that = this;
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: that.tui.interfaceUrl() + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {
						let pathData = JSON.parse(uploadFileRes.data)
						that.formData.studentCard = pathData.result
						that.$forceUpdate()
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					uni.hideLoading();
				}, 1000)
			},
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/461dd2d5ba1f462ca05da7e2379d1d90.png') no-repeat;
		width: 100%;
		height: 640rpx;
		background-size: 100%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.content {
		position: absolute;
		top: 450rpx;
		width: 100%;
		border-radius: 40rpx;
		background: #fff;
		padding: 16rpx 20rpx;
	}

	.reg-name {
		font-size: 32rpx;
		font-weight: 700;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 20rpx;
	}

	.reg-value {
		margin-top: 10rpx;
	}

	.img-popup-content {
		width: 500rpx;
		height: 500rpx;
	}

	.liangge-popup-content {
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		height: 150px;
	}
	.liangge-title{
		
		    height: 50px;
		    line-height: 35px;
		    text-align: center;
		    font-size: 16px;
		    font-weight: 700;

	}
	.liangge-text{
		height: 30px;
		font-size: 14px;
		font-weight: 700;
	}
	.box-check-btn {
		width: 160rpx;
		height: 70rpx;
		background: rgba(180, 255, 238, 0.27);
		text-align: center;
		line-height: 70rpx;
		border-radius: 70rpx;
		font-weight: 700;
		border: 1px solid rgba(180, 255, 238, 1);
		margin-right: 20rpx;
	}

	.delivery-location-btn {
		width: 240rpx;
	}

	.value1 {
		background: rgba(247, 248, 248, 0.6);
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.value-title {

		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		font-weight: 400;

	}

	.title-1 {
		font-weight: 700;
	}

	.title-2 {

		flex: 1;
		color: #777;
		text-align: right;

	}

	.guize1-qusong {
		display: flex;
		flex: 1;
		padding-top: 20rpx;
	}

	.guize1 {
		display: flex;
		margin-top: 20rpx;
	}

	.qusong1 {
		width: 40rpx;
		height: 40rpx;
		background: rgba(0, 35, 28, 1);
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 20rpx;
		z-index: 80;
	}

	.qusong2 {
		height: 40rpx;
		font-size: 24rpx;
		line-height: 38rpx;
		text-align: center;
		background: rgba(166, 255, 234, 0.5);
		padding: 0 20rpx;
		margin-left: -10rpx;
		font-weight: 700;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.qusong3 {
		width: 190rpx;
		height: 70rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		flex: 1;
	}

	.btn {
		width: 95%;
		height: 100rpx;
		font-size: 32rpx;
		font-weight: 700;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 40rpx auto;
	}

	.guize-popup-content {
		height: auto;
		background: #fff;
		padding: 40rpx;
		border-radius: 40rpx;
		width: 90%;
		margin: 0 auto;
		max-height: 860rpx;
		overflow: scroll;
		position: relative;
	}

	.guize-btn {
		background: #00231c;
		border-radius: 100rpx;
		height: 100rpx;
		width: 100%;
		margin: 120rpx auto 0;
		color: #b4ffee;
		clear: both;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: 700
	}
</style>