<template>

	<view style="display: flex;flex-direction: column;" id="page">

		<view class="top">
			<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight"
				:end-change-height="page.endHeight">
			</NavBar>
			<view style="display: flex;flex-direction: column;margin-top: 25vw; margin-left: 5vw;">
				<view style="font-size: 17px;color: #fff;height: 8vw;line-height: 8vw;margin-top: 5vw;">
					{{data.state}}
				</view>
				<view
					style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;box-sizing: border-box;">
					窖号：{{data.serialNumber}}
				</view>
				<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;">
					{{data.time}}
				</view>
			</view>

		</view>
		<view
			style="display: flex;flex-direction: row;justify-content: center;
			background-color: #fff;height: 25vw; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;">

			<image src="https://supervise.yxtsoft.com/lpk/image/detail_family.png" mode="aspectFit"
				style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image>

			<view style="width: 55%; margin-left: 20vw;
			display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center;
			justify-content: space-between;">
				<text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text>

				<text v-if="data.notRese"
					style="background: #fff ; border-radius: 25px;color: #FF7201;padding: 3px 10px;"
					@click="showDialog2">转赠亲友</text>

				<text v-if="!data.notRese"
					style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text>
			</view>

		</view>
		<loading-state ref="pageView" @request="request">

			<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;">

				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
					<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
					<text style="margin-left: 8px;font-size: 14px;color: #333;">商品明细</text>
				</view>

			</view>

			<view v-for="(item,index) in data.goodsVos" :key="index" @click="itemClick(item.goodsSid)"
				style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

				<view style="display: flex;flex-direction: row;background-color: #fff;padding: 10px 15px;
					border-bottom: 1px #F1F2F3 solid; width: 100%;">
					<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
					<view style="margin-left: 10px;margin-right: 10px;flex: 1;">
						<text class="text" style="font-weight: 500;">{{item.goods}}
						</text>
						<view style="font-size: 12px;color: #666666;margin-top: 5px;">{{item.remarks}}</view>
						<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 5px;">
							<text
								style="font-size: 12px;color: #666666;margin-right: 10px;">总数：{{item.num}}{{item.unitName}}
							</text>
							<view style="font-size: 12px;color: #666666;">可预约：{{item.lnum}}{{item.unitName}}</view>
						</view>
					</view>
				</view>


			</view>

			<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;">

				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
					<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
					<text style="margin-left: 8px;font-size: 14px;color: #333;">预约记录</text>
				</view>

			</view>

			<view style="margin-bottom: 10px;">
				<view v-for="(item,index) in data.orderCardVoList" :key="index"
					style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

					<view style="display: flex;flex-direction: column;background-color: #fff;
					border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;">
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/date.png"
								style="width: 20px;height: 20px;">
							</image>
							<text
								style="margin-left: 5px;font-size: 12px; color: #999;">提货时间：{{item.reserveDate}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/location.png"
								style="width: 20px;height: 20px;">
							</image>
							<text style="margin-left: 5px;font-size: 12px; color: #999;">提货地点：{{item.store}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/user2.png" mode="aspectFill"
								style="width: 20px;height: 20px;">
							</image>
							<text
								style="margin-left: 5px;font-size: 12px; color: #999;">提&ensp;货&ensp;人：{{item.userName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/phone2.png" mode="aspectFill"
								style="width: 20px;height: 20px;">
							</image>
							<text style="margin-left: 5px;font-size: 12px; color: #999;">联系电话：{{item.userPhone}}</text>
						</view>
						<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
							<text style="color: #999; font-size: 12px;">- {{item.goods}}</text>
						</view>

					</view>

				</view>

			</view>

			<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;" id='the-id'>

				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
					<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
					<text style="margin-left: 8px;font-size: 14px;color: #333;">转赠记录</text>
				</view>

			</view>

			<view style="margin-bottom: 50px;">

				<view v-for="(item,index) in data.empCardGifts" :key="index"
					style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

					<view style="display: flex;flex-direction: row;background-color: #fff;
						border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;">

						<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png"
								style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image>

							<view style="display: flex;flex-direction: column;width: 100%;">

								<text
									style="font-size: 12px; color: #333;margin-top: 5px;">亲情窖序号：{{item.serialNumber}}</text>
								<text
									style="font-size: 12px; color: #333;margin-top: 5px;">分享时间：{{item.createTime}}</text>
								<text style="font-size: 12px; color: #333;margin-top: 5px;">亲情窖编码：{{item.code}}</text>
								<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text>
								<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text>

								<view
									style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;">
									<text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text>

									<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item"
										open-type="share">分享窖</button>
									<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item"
										open-type="share">已分享</button>
									<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button>


								</view>
							</view>

						</view>

					</view>

				</view>

			</view>

			<view style="height: 50px;"></view>

			<view v-if="data.notRese" style="width: 100%; background-color: #fff;height: 15vw;position: fixed;bottom: 0;overflow:hidden;
			display: flex;flex-direction: row;">
				<!-- <text
					style="flex: 1;color: #B3B3B3; padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;">
					可选择就近网点进行预约提货 >
				</text> -->
				<view style="flex: 1;"></view>
				<text style=" width: 20vw;font-size: 16px;color: #fff; background-color: #FF9D33;
					padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog">预约提货</text>


			</view>


		</loading-state>


		<!-- 弹窗蒙版 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal' @click.stop="colseDialog()"></view>
		<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'>
			<scroll-view scroll-y="true" style="height: 100%;width: 100%; padding: 20px; " bindscrolltoupper="upper"
				bindscrolltolower="lower" bindscroll="scroll">

				<view style="display: flex;flex-direction: column;margin-top: 10px;">
					<text>提货地点</text>
					<view
						style="margin-top: 10px;background:#F5F5F5 ; display: flex;flex-direction: row;justify-content: space-between;width: 89.5%;border-radius: 4px;min-height: 35px;align-items: center;"
						@click="address">
						<view v-if="stringIsEmpty(data.addressName)"
							style="color: #666;font-size: 12px;margin-left: 10px;">
							请选择提货点</view>
						<view v-if="stringIsNotEmpty(data.addressName)"
							style="color: #666;font-size: 12px;margin-left: 10px;">{{data.addressName}}</view>
						<uni-icons type="bottom" size="14" color="#999" style="flex-direction: 0;margin: 0px 5px;" />
					</view>
				</view>

				<view style="display: flex;flex-direction: column;margin-top: 10px;">
					<text>提货时间</text>
					<view style="display: flex;align-items: center;margin-top: 6px;width: 89.5%;">
						<uni-datetime-picker type="date" v-model="data.reserveDate" style="flex: 1;background: #F8F8F8;"
							:start="data.start" :end="data.end" :disabledDate="disabledDate" />
					</view>
				</view>

				<view style="display: flex;flex-direction: column;margin-top: 10px;">
					<text>提货人</text>
					<view style="display: flex;align-items: center;margin-top: 6px;width: 89.5%;">
						<input placeholder="请输入提货人"
							style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;"
							:value="data.userName" @input="onKeyInput1" />
					</view>
				</view>

				<view style="display: flex;flex-direction: column;margin-top: 10px;">
					<text>联系电话</text>
					<view style="display: flex;align-items: center;margin-top: 6px;width: 89.5%;">
						<input maxlength="11" placeholder="请输入联系电话"
							style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;"
							type="number" :value="data.userPhone" @input="onKeyInput2" />
					</view>
				</view>

				<view style="background: #F5F5F5; border-radius: 5px;margin-top: 15px;width: 89.5%;">
					<view v-for="(item,index) in data.goodsVos"
						style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;">
						<view style="margin-left: 10px;margin-right: 10px;flex: 1;
						display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
						padding: 10px;">
							<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}}
							</text>
							<text class="text"
								style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}}
							</text>
							<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0"
								:max="item.lnum" v-model="item.select"></uni-number-box>
						</view>
					</view>
				</view>

				<view
					style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 100px;width: 100%;">

					<text
						style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;"
						@click.stop="colseDialog()">取消</text>
					<text
						style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FF9D33;  padding: 5px 30px;margin-left: 20px;"
						@click="save">确认</text>

				</view>

				<view style="height: 50px;">

				</view>

			</scroll-view>
		</view>


		<!-- 弹窗蒙版 -->
		<view class="model" catchtouchmove='preventTouchMove' v-if='showModal2' @click.stop="colseDialog2()"></view>
		<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal2'>
			<scroll-view scroll-y="true" style="height: 100%; width: 100%;  box-sizing: border-box; 
		" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">

				<view style="display: flex;flex-direction: column;margin: 20px;">
					<text>菜窖数量</text>
					<view style="display: flex;align-items: center;margin-top: 6px;">
						<input placeholder="请输入菜窖数量"
							style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;"
							type="number" :value="info.count" @input="onKeyInput3" />
					</view>
				</view>
				<view style="display: flex;flex-direction: column;margin: 20px;">
					<text>商品列表</text>
					<view style="background: #F5F5F5; border-radius: 5px;margin-top: 6px;">
						<view v-for="(item,index) in data.goodsVos"
							style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;">
							<view style="margin-left: 10px;margin-right: 10px;flex: 1;
						display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
						padding: 10px;">
								<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}}
								</text>
								<text class="text"
									style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}}
								</text>
								<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0"
									:max="item.lnum" v-model="item.select"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: column;margin: 20px;">
					<text>备注说明</text>
					<view style="display: flex;align-items: center;margin-top: 6px;">
						<input placeholder="请输入"
							style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;"
							:value="info.remarks" @input="onKeyInput4" />
						<!-- 	<textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;
						line-height: 20px;padding: 10px;
						 white-space: pre-wrap;
						 height: auto;min-height: 30px;
						  word-wrap: break-word;" :value="info.remarks" @input="onKeyInput2" /> -->
					</view>
				</view>


				<view
					style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 100px;width: 100%;">

					<text
						style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;"
						@click.stop="colseDialog2()">取消</text>
					<text
						style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FF9D33;  padding: 5px 30px;margin-left: 20px;"
						@click="save2()">确认</text>

				</view>
				<view style="height: 50px;">

				</view>

			</scroll-view>
		</view>


	</view>
</template>

<script>
	//引入bus
	import bus from '@/common/bus';
	export default {
		data() {
			return {
				showModal: false,
				showModal2: false,
				page: {
					sid: '',
					startHeight: 0,
					endHeight: 0
				},
				data: {
					time: "",
					name: "",
					pname: "",
					state: "",
					notRese: false,
					showBtn: false,
					showRecord: false,
					goodsVos: [],
					value: "",
					userName: "",
					userPhone: "",
				},
				disabledDate: [
					// '2023-12-16'
				],
				info: {
					count: "1",
					empCardSid: "",
					remarks: "",
					goodsVoList: []
				},
			}
		},
		mounted() {
			this.$bus.$on('order', msg => {
				this.request();
				this.$nextTick(() => {

					this.$refs.pageView.setLoadState(0)

				})

			})

			uni.$on("address", (e) => {
				// 相当与下拉刷新
				this.data.value = e.sid;
				this.data.addressName = e.name;
			})
		},
		onLoad(options) {
			this.page.sid = options.sid
			this.request()

			let info = uni.getSystemInfoSync();

			this.page.startHeight = info.windowWidth * 0.6
			this.page.endHeight = info.windowWidth * 0.8
		},
		onUnload() {
			uni.$off('order');
			uni.$off('address');
		},
		onPageScroll(res) {
			// 渐变
			this.$refs.nav.defaultColorBgAlpha(res)
		},
		methods: {
			showDialog() {
				this.showModal = true
			},
			showDialog2() {
				this.showModal2 = true

			},
			colseDialog() {
				this.showModal = false
			},
			colseDialog2() {
				this.showModal2 = false
			},
			address() {
				uni.navigateTo({
					url: '/pages/SelectAddressActivity'
				})
			},
			onKeyInput1: function(event) {
				this.data.userName = event.target.value
			},
			onKeyInput2: function(event) {
				this.data.userPhone = event.target.value
			},
			onKeyInput3: function(event) {
				this.info.count = event.target.value

			},
			onKeyInput4: function(event) {
				this.info.remarks = event.target.value
			},
			save() {
				if (this.stringIsEmpty(this.data.value)) {
					this.shortToast('请选择提货地点')
					return
				}
				if (this.stringIsEmpty(this.data.reserveDate)) {
					this.shortToast('请选择提货时间')
					return
				}
				if (this.stringIsEmpty(this.data.userName)) {
					this.shortToast('请输入提货人员')
					return
				}
				if (this.stringIsEmpty(this.data.userPhone)) {
					this.shortToast('请输入手机号码')
					return
				}
				if (this.data.userPhone.length != 11) {
					this.shortToast('手机号码格式不对')
					return
				}


				let num = 0;
				for (var i = 0; i < this.data.goodsVos.length; i++) {
					num += Number(this.data.goodsVos[i].select);
				}
				if (num == 0) {
					this.shortToast('您未选择任何商品')
					return
				}

				let _this = this
				_this.$api.cardBookingSave(this.data).then((resp) => {
					bus.$emit('order', "监听回调");
					// setTimeout(() => {
					// 	uni.$emit('order', "监听回调")
					// }, 500)
					uni.navigateBack()


				}).catch(e => {
					_this.shortToast(e.msg)
				})

			},

			save2() {
				this.colseDialog2()
				this.pageScroll()
				let num = 0;
				for (var i = 0; i < this.data.goodsVos.length; i++) {
					num += Number(this.data.goodsVos[i].select);
				}
				if (num == 0) {
					this.shortToast('您未选择任何商品')
					return
				}

				let _this = this

				this.info.empCardSid = this.page.sid,
					this.info.goodsVoList = this.data.goodsVos,

					console.log("info>>", this.info);
				_this.$api.generateEmpCard(this.info).then((resp) => {
					bus.$emit('order', "监听回调");
					// uni.navigateBack()


				}).catch(e => {
					_this.shortToast(e.msg)
				})

			},
			pageScroll() {

				//获取容器高度，使页面滚动到容器底部  #xxx就是view的id名
				wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) {
					console.log('rect', rect);
					console.log('rectheight', rect.height);
					/* 将页面移动到最底部（用xxx的height定位） */
					wx.pageScrollTo({
						scrollTop: rect.height
					})
				}).exec()

			},

			request() {
				let _this = this
				_this.$api.cardDetail(this.page.sid).then((resp) => {
					_this.data = resp
					_this.$nextTick(() => {

						_this.$refs.pageView.setLoadState(2)
					})
					_this.getSun()

				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},

			getSun() {
				let _this = this
				_this.$api.isSaturAndSun(this.page.sid).then((resp) => {

					// console.log("aaa",resp)

					this.disabledDate = resp

				}).catch(e => {

				})
			},

			showRecord(sid) {
				uni.navigateTo({
					url: '/pages/card/card_record?sid=' + sid
				})
			},
			booking(sid) {
				uni.navigateTo({
					url: '/pages/card/card_booking?sid=' + sid
				})
			},
			itemClick(goodsSid) {
				uni.navigateTo({
					url: '/pages/good/goodsDetail?sid=' + goodsSid
				})
			},
			onShareAppMessage: function(res) {
				console.log("res", res)
				console.log("data", res.target.dataset)
				var data = res.target.dataset.info
				this.shareCard(data.sid)
				// ①
				let shareData = JSON.stringify({
					params: {
						code: data.code,
						codeKey: data.codeKey,
						customerSid: ''
					},
					functionName: 'bindCard',
					url: '/pages/detail/detail_affeection?sid=' + data.sid

					// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey,
					// FunctionName:'share!
				})
				// 转码传输
				let value = encodeURIComponent(shareData)

				return {
					title: '汇融惠享-云菜窖',
					// ②
					path: '/pages/login/login?data=' + value,
					imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。
					success: function(res) {
						console.log('aaaa', "分享成功")
					},
					fail: function(res) {
						// 转发失败
						console.log('aaaa', "用户点击了取消")
					}
				}
			},

			shareCard(sid) {
				let _this = this

				_this.$api.shareEmpCard(sid).then((resp) => {

					var item = _this.data.empCardGiftVos.find(item => item.sid === sid)

					console.log("item", item);

					item.share = '2'

				}).catch(e => {})
			}
		}
	}
</script>

<style>
	.canvas-code {
		width: 39vw !important;
		height: 39vw !important;
	}

	.sharebtn {
		background: #FF4727;
		font-size: 12px;
		color: #fff;
		width: 30vw;
		border-radius: 20px;
	}


	.sharebtn::after {
		border: none;
	}

	.sharebtn2 {
		background: #FF7165;
		width: 30vw;
		font-size: 12px;
		color: #fff;
		border-radius: 20px;
	}

	.sharebtn2::after {
		border: none;
	}

	.sharebtn3 {
		background: #CFCFCF;
		width: 30vw;
		font-size: 12px;
		color: #fff;
		border-radius: 20px;
	}

	.sharebtn3::after {
		border: none;
	}

	.top {
		width: 100vw;
		/* height: 126.66vw; */
		height: 65vw;
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj1.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	.text {
		white-space: normal;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	uni-page-body,
	page {
		background: #F1F2F3;
	}

	.btn {
		border: 1px solid;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		border-radius: 50rpx;
		height: 15px;
		margin-left: 25rpx;
		font-size: 26rpx;
	}

	/* 弹窗样式 */
	.model {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #000;
		z-index: 999;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.modalDlg {
		/* 设置超出滚动 */
		overflow: auto;
		width: 100%;
		position: fixed;
		top: 50vw;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background-color: #fff;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		display: flex;
		flex-direction: column;

	}
</style>