底腿 历史详情

pages/statistics/history_details_bottom_leg.vue

@@ -0,0 +1,789 @@
+<template>
+	<view>
+		<view class="uni-media-list">
+
+			<view class="uni-media-list-body">
+				<view v-for="(value, key) in dataJson.zEngineeringNodeBo.zEngineeringInfoBoList" :key="key"
+					v-if="isEdit(value)">
+					<view class="uni-media-list-text-top">
+						<view class="tit-text">施工时间:</view>{{value.updateTime}}
+					</view>
+					<view class="uni-common-mt" style="width: 100%;">
+						<text class="uni-title uni-common-pl" style=" font-size: 13px;color:
+									#000;margin-top: 5px;">施工内容:</text>
+						<view style="width: 100%;padding-right: 20rpx;box-sizing: border-box;">
+							<textarea class="textarea" maxlength="255" placeholder-style="padding: 10rpx;"
+								style="width: 100%;height: 100%;border: 1rpx solid #cccccc; border-radius: 15rpx;padding: 10rpx;line-height:normal; min-height: 30px;"
+								auto-height :value="value.zEngineeringMaterialBo[0].remark"
+								@blur="bindTextAreaBlur($event.target.value,key)"></textarea>
+						</view>
+					</view>
+
+					<view class="uni-media-list-text-top" style="border-bottom: 1px solid #f8f8f8;">
+						<view class="tit-text">
+							施工位置
+						</view>
+						<view style="display: flex; justify-content: right; width: 70%;">
+							<view v-if="isEmpty(value.constructAddre)" @click="pickerShow('position')">
+								<span style="color: darkgray;">请选择施工位置</span>
+							</view>
+							<view v-else @click="pickerShow('position',key)">
+								<span style="color: black;">{{value.constructAddre}}</span>
+							</view>
+							第
+							<input class="uni-input" type="number" v-model="value.zEngineeringMaterialBo[0].number"
+								style="text-align: center; border: 1px solid #cccccc; border-radius: 20rpx;width: 60px;"></input>
+							根
+						</view>
+
+					</view>
+
+					<view class="uni-common-mt" style="width: 100%;">
+						<text class="uni-title uni-common-pl" style=" font-size: 13px;color:
+							#000;margin-top: 5px; margin-left: 8px;">沟上部分照片:</text>
+					</view>
+					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
+						<image :src="loadImgSrc('updateimg.png')" mode=""
+							style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="chooseimage(0,key)">
+						</image>
+						<view v-for="(item,index) in  value.onTheDitch" :key="index" style="position: relative;">
+							<view
+								v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
+								<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+									@click="showPhoto(index,value.onTheDitch)">
+								</image>
+							</view>
+							<view v-else>
+								<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
+							</view>
+							<view @click="removeht(index,key,0)"
+								style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
+								<image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
+								</image>
+							</view>
+						</view>
+					</view>
+
+					<view class="uni-common-mt" style="width: 100%;">
+						<text class="uni-title uni-common-pl" style=" font-size: 13px;color:
+							#000;margin-top: 5px; margin-left: 8px;">开挖前照片:</text>
+					</view>
+					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
+						<image :src="loadImgSrc('updateimg.png')" mode=""
+							style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="chooseimage(1,key)">
+						</image>
+						<view v-for="(item,index) in  value.beforeBottom" :key="index" style="position: relative;">
+							<view
+								v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
+								<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+									@click="showPhoto(index,value.beforeBottom)">
+								</image>
+							</view>
+							<view v-else>
+								<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
+							</view>
+							<view @click="removeht(index,key,1)"
+								style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
+								<image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
+								</image>
+							</view>
+						</view>
+					</view>
+
+					<view class="uni-common-mt" style="width: 100%;">
+						<text class="uni-title uni-common-pl" style=" font-size: 13px;color:
+							#000;margin-top: 5px; margin-left: 8px;">下沟照片:</text>
+					</view>
+					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
+						<image :src="loadImgSrc('updateimg.png')" mode=""
+							style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="chooseimage(2,key)">
+						</image>
+						<view v-for="(item,index) in  value.legBackfilling" :key="index" style="position: relative;">
+							<view
+								v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
+								<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+									@click="showPhoto(index,value.legBackfilling)">
+								</image>
+							</view>
+							<view v-else>
+								<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
+							</view>
+							<view @click="removeht(index,key,2)"
+								style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
+								<image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
+								</image>
+							</view>
+						</view>
+					</view>
+
+					<view class="uni-common-mt" style="width: 100%;">
+						<text class="uni-title uni-common-pl" style=" font-size: 13px;color:
+							#000;margin-top: 5px; margin-left: 8px;">回填照片:</text>
+					</view>
+					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
+						<image :src="loadImgSrc('updateimg.png')" mode=""
+							style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="chooseimage(3,key)">
+						</image>
+						<view v-for="(item,index) in  value.inferiorSulcus" :key="index" style="position: relative;">
+							<view
+								v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
+								<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
+									@click="showPhoto(index,value.inferiorSulcus)">
+								</image>
+							</view>
+							<view v-else>
+								<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
+							</view>
+							<view @click="removeht(index,key,3)"
+								style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
+								<image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
+								</image>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
+			subtitleKey="id">
+		</SelectPicker>
+		<SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
+			titleKey="dictLabel" subtitleKey="dictValue" v-model="name"></SelectPicker>
+		<view class="action-btn" v-if="hideButton==false">
+			<button @click="submit" class="btn cu-btn block bg-blue lg round">确认</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import SelectPicker from '../../components/selectPicker/select_picker.vue'
+	import {
+		getDicts
+	} from "@/api/system/dict/data";
+	import {
+		getToken
+	} from '../../utils/auth';
+	import user from '@/store/modules/user'
+	import {
+		getHistoryDetails,
+		getEnginMaterialQualityList,
+		putHistory,
+		getEnginSpecificationsList
+	} from '@/api/common'
+	export default {
+		components: {
+			SelectPicker,
+		},
+		data() {
+			return {
+				// playVideo: false,//视频播放放大
+				// playVideoSrc:'',
+				selectZbfList: [],
+				dictOptions: [],
+				openDict: false,
+				dataIndex: 0, //数据用第几条
+				dataType: '', //数据用第几条
+				selectIndex: 0, //材质规格用的第几条
+				imageIndex: 0,
+				headers: {
+					Authorization: "Bearer " + getToken()
+				},
+				nodeId: '',
+				type: '',
+				title: '',
+				dataJson: '',
+				enginClassification: '',
+				enginType: '',
+				enginClassValue: '',
+				selectList: [],
+				open: false,
+				selectType: '',
+				hideButton: false,
+			}
+		},
+		onLoad(options) {
+			if ('params' in options) {
+				let e = JSON.parse(decodeURIComponent(options.params));
+				this.nodeId = e.id;
+				this.type = '底腿';
+
+				getHistoryDetails(this.nodeId, this.type).then(response => {
+					if (response.data.zEngineeringNodeBo != null) {
+						this.hideButton = false;
+						this.dataJson = response.data;
+						this.title = response.data.zEngineeringNodeBo.type;
+						this.enginType = response.data.enginType;
+						this.enginClassification = response.data.enginClassification;
+
+					} else {
+						this.hideButton = true;
+						this.$modal.msg("暂无历史信息")
+					}
+				});
+
+			}
+		},
+		methods: {
+			//关闭弹窗
+			close(e) {
+				this.open = false
+			},
+			btnAdd(key, index) {
+
+				this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].zEngineeringMaterialBo.push({
+
+					'materialQuality': '',
+					'materialQualityName': '',
+					'number': '',
+					'specifications': '',
+					'specificationsName': ''
+
+				});
+			},
+			btnDel(key, index) {
+				this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].zEngineeringMaterialBo.splice(index, 1);
+			},
+			pickerShow(type, index) {
+				this.dataIndex = index;
+				this.dataType = type;
+				if (type == 'position') {
+					this.openDict = true;
+					getDicts("construct_addre").then(response => {
+						this.dictOptions = response.data;
+					});
+				}
+			},
+			// 截取小数点前的字符串
+			getIntegerPart(numStr, i) {
+				return numStr.toString().split('.')[i] == undefined ? '0' : numStr.toString().split('.')[i];
+			},
+			setInfoBoNumber(key, index, number, i) {
+				let Ynumber = this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].zEngineeringMaterialBo[index]
+					.number;
+				let resAry = Ynumber.toString().split('.');
+				resAry[i] = number
+				this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].zEngineeringMaterialBo[index].number = resAry
+					.join('.');
+			},
+			bindTextAreaBlur(e, index) {
+				this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[index].zEngineeringMaterialBo[0].remark = e;
+			},
+
+			changeSelectDict(item, index) {
+				this.openDict = false;
+				if (this.dataType == 'position') {
+					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[this.dataIndex].constructAddre = item
+					.dictValue;
+				}
+
+			},
+			removeht(index, key, type) {
+				uni.showModal({
+					title: '提示',
+					content: '是否删除该图片或视频？',
+					success: (res) => {
+						if (res.confirm) {
+
+							if (type == 0) {
+								this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].onTheDitch
+									.splice(index, 1)
+							} else if (type == 1) {
+								this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].beforeBottom
+									.splice(index, 1)
+							} else if (type == 2) {
+								this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].legBackfilling
+									.splice(index, 1)
+							} else if (type == 3) {
+								this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList[key].inferiorSulcus
+									.splice(index, 1)
+							}
+
+						}
+					}
+				})
+			},
+			remove(index, key) {
+				uni.showModal({
+					title: '提示',
+					content: '是否删除该图片或视频？',
+					success: (res) => {
+						if (res.confirm) {
+
+							this.dataJson.zEngineeringNodeBo
+								.zEngineeringInfoBoList[key]
+								.zEngiineeringPhotoBoList.splice(index, 1)
+
+						}
+					}
+				})
+			},
+			chooseimage(type, index) {
+				this.dataIndex = index;
+				let _this = this;
+				uni.chooseImage({
+					sizeType: ['album', 'camera'],
+					success(resp) {
+						resp.tempFiles.forEach((item, index) => {
+							const task = uni.uploadFile({
+								url: _this.$HTTP + `/obs`,
+								filePath: item.path,
+								name: 'file',
+								formData: {},
+								header: _this.headers,
+
+								success: res => {
+									let data = JSON.parse(res.data);
+									if (![200].includes(data.code)) {
+										_this.$modal.msg(data.msg)
+									} else {
+										if (_this.progress === 100) {
+											if (type == 0) {
+												_this.dataJson.zEngineeringNodeBo
+													.zEngineeringInfoBoList[_this.dataIndex]
+													.onTheDitch.push(data.data
+														.url);
+											} else if (type == 1) {
+												_this.dataJson.zEngineeringNodeBo
+													.zEngineeringInfoBoList[_this.dataIndex]
+													.beforeBottom.push(data.data
+														.url);
+											} else if (type == 2) {
+												_this.dataJson.zEngineeringNodeBo
+													.zEngineeringInfoBoList[_this.dataIndex]
+													.legBackfilling.push(data.data
+														.url);
+											} else if (type == 3) {
+
+												_this.dataJson.zEngineeringNodeBo
+													.zEngineeringInfoBoList[_this.dataIndex]
+													.inferiorSulcus.push(data.data
+														.url);
+											}
+
+											_this.$modal.msg('上传成功！')
+										}
+									}
+								},
+								fail: e => {
+									_this.$modal.msg('上传失败！')
+								},
+								complete: res => {
+									uni.hideLoading();
+									_this.uploading = false;
+
+								}
+							});
+							task.onProgressUpdate(res => {
+								_this.progress = res.progress;
+								uni.showLoading({
+									title: '上传中'
+								})
+								if (_this.progress != 100) {
+									_this.loading = false
+								} else {
+									_this.loading = true
+								}
+							});
+
+						})
+
+					},
+				})
+			},
+
+			choosevideo(e) {
+				let _this = this;
+				uni.chooseVideo({
+					sourceType: ['album', 'camera'],
+					maxDuration: 30,
+					success(resp) {
+						const task = uni.uploadFile({
+							url: _this.$HTTP + `/obs`,
+							filePath: resp.tempFilePath,
+							name: 'file',
+							formData: {},
+							header: _this.headers,
+							success: res => {
+								let data = JSON.parse(res.data);
+								if (![200].includes(res.statusCode)) {
+									this.uploadError(index, data);
+								} else {
+									//上传成功
+									if (_this.progress === 100) {
+										if (e == 'other') {
+											_this.dataJson.zEngineeringNodeBo
+												.zEngineeringInfoBoList[_this.dataIndex]
+												.zEngiineeringPhotoBoList.push(data.data.url);
+										} else if (e == 'sfht') {
+											_this.dataJson.zEngineeringNodeBo
+												.zEngineeringInfoBoList[_this.dataIndex]
+												.stonePowder.push(data.data.url);
+
+										} else if (e == 'jsdps') {
+											_this.dataJson.zEngineeringNodeBo
+												.zEngineeringInfoBoList[_this.dataIndex]
+												.warningtTape.push(data.data.url);
+										} else if (e == 'hth') {
+											_this.dataJson.zEngineeringNodeBo
+												.zEngineeringInfoBoList[_this.dataIndex]
+												.photosAfter.push(data.data.url);
+										} else if (e == 'video') {
+											_this.dataJson.zEngineeringNodeBo
+												.zEngineeringInfoBoList[_this.dataIndex]
+												.video.push(data.data.url);
+										}
+										_this.$modal.msg('上传成功！')
+									}
+								}
+							},
+							fail: e => {
+								_this.$modal.msg('上传失败！')
+								this.uploadError(index, e);
+							},
+							complete: res => {
+								uni.hideLoading();
+								_this.uploading = false;
+							}
+						});
+						task.onProgressUpdate(res => {
+							_this.progress = res.progress;
+							uni.showLoading({
+								title: '上传中'
+							})
+							if (_this.progress != 100) {
+								_this.loading = false
+							} else {
+								_this.loading = true
+							}
+						});
+
+					},
+				})
+			},
+			showPhoto(index, arr) {
+
+				let newArr = [];
+				arr.forEach((item, index) => {
+					if (item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' ||
+						item.substring(item.length - 4) == 'jpeg') {
+						newArr.push(item)
+					}
+				});
+
+				uni.previewImage({
+					current: index,
+					urls: newArr,
+				})
+
+			},
+
+			isEmpty(str) {
+				return (!str || 0 === str.length);
+			},
+
+			isEdit(item) {
+				var isShow = item.createBy == this.$user.state.name;
+
+				return isShow;
+			},
+			submit() {
+				let isSubmit = true;
+				if (this.title == '底腿') {
+					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList.forEach((res) => {
+						if (this.isEmpty(res.constructAddre)) {
+							this.$modal.msg("请施工位置");
+							isSubmit = false;
+						}
+						if (this.isEmpty(res.zEngineeringMaterialBo[0].number)) {
+							this.$modal.msg("请施工位置");
+							isSubmit = false;
+						}
+						if (res.onTheDitch.length == 0) {
+							this.$modal.msg("请上传沟上部分照片");
+							isSubmit = false;
+						}
+						if (res.beforeBottom.length == 0) {
+							this.$modal.msg("请上传开挖前照片");
+							isSubmit = false;
+						}
+						if (res.legBackfilling.length == 0) {
+							this.$modal.msg("请上传下沟照片");
+							isSubmit = false;
+						}
+						if (res.inferiorSulcus.length == 0) {
+							this.$modal.msg("请上传回填照片");
+							isSubmit = false;
+						}
+					})
+				} else if (this.title == '下沟') {
+					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList.forEach((res) => {
+
+
+
+						res.zEngineeringMaterialBo.forEach((itme) => {
+							if (itme.specifications == '') {
+								this.$modal.msg("请选择规格");
+								isSubmit = false;
+							}
+							if (itme.number == '') {
+								this.$modal.msg("请输入米数");
+								isSubmit = false;
+							}
+						})
+
+						if (res.constructionRecords.length <= 0) {
+							this.$modal.msg('请上传管道施工记录照片')
+							isSubmit = false;
+						}
+						if (res.ductalEpithelium.length <= 0) {
+							this.$modal.msg('请上传管上皮深度测量照片')
+							isSubmit = false;
+						}
+						if (res.trenchProspect.length <= 0) {
+							this.$modal.msg('请上传管沟远景照片')
+							isSubmit = false;
+						}
+						if (res.video.length <= 0) {
+							this.$modal.msg('请上传视频')
+							isSubmit = false;
+						}
+					})
+				} else {
+
+
+					this.dataJson.zEngineeringNodeBo.zEngineeringInfoBoList.forEach((res) => {
+						if (res.zEngiineeringPhotoBoList.length == 0) {
+							this.$modal.msg("请上传照片");
+							isSubmit = false;
+						}
+
+					})
+				}
+				if (!isSubmit) {
+					return
+				}
+
+				putHistory(this.dataJson).then(
+
+					response => {
+						if (response.code == '200') {
+							uni.hideLoading()
+							uni.showToast({
+								title: response.msg,
+								icon: 'none',
+								duration: 2000
+							});
+							setTimeout(function() {
+								uni.navigateBack();
+							}, 1000)
+
+						}
+
+					});
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss">
+	.uni-media-list-body {
+		background: #fff;
+		border: 1px solid #eee;
+		border-radius: 40rpx;
+		margin: 20rpx;
+		padding: 10rpx 0 40rpx;
+		box-shadow: 0 0 5px #eee;
+	}
+
+	.uni-media-list-text-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px;
+		position: relative;
+
+	}
+
+
+	.to-right-icon {
+		width: 15px;
+		height: 15px;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.share {
+		width: 100%;
+		height: 100%;
+
+	}
+
+	.tit-text {
+		color: #4f535a;
+		margin-right: 20rpx;
+	}
+
+	.normal-text {}
+
+	.cz-style {
+		background: #e8f4f9;
+		margin: 20rpx;
+		padding: 10rpx;
+		border-radius: 20rpx;
+		border: 1px solid #d4e3f0;
+	}
+
+	.uni-media-list-text-top {
+		font-size: 14px;
+		color: #696969;
+		padding: 20rpx 20rpx;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		align-items: center;
+	}
+
+	.share-box {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0rpx;
+		left: 0rpx;
+		bottom: 0rpx;
+		right: 0rpx;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition: .3s;
+		z-index: 999;
+	}
+
+	// 进入分享动画
+	.share-show {
+		transition: all 0.3s ease;
+		transform: translateY(0%) !important;
+		border-radius: 20px 20px 0px 0px;
+	}
+
+	.scroll-Y {
+		height: 58vh;
+	}
+
+	// 离开分享动画
+	.share-item {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		height: 70%;
+		background-color: #FFFFFF;
+		transition: all 0.3s ease;
+		transform: translateY(100%);
+		z-index: 1999;
+
+		.share-to {
+			width: 100%;
+			height: 30px;
+			display: flex;
+			justify-content: left;
+			margin: 30rpx 35rpx;
+			align-items: center;
+
+
+		}
+
+		.content {
+			width: 100%;
+			height: auto;
+			display: flex;
+			flex-wrap: wrap;
+
+			.block {
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: left;
+				height: auto;
+
+				image {
+					width: 80rpx;
+					height: 80rpx;
+				}
+
+				text {
+					margin-top: 16rpx;
+					font-size: 28rpx;
+					color: #606266;
+				}
+			}
+		}
+
+		.cancel {
+			width: 100%;
+			height: 3rem;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-top: 1rpx solid #E4E7ED;
+		}
+
+
+	}
+
+	.uni-media-list-text-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px;
+		position: relative;
+
+	}
+
+	.uni-list {
+		border: 1xp solid #eee;
+	}
+
+	.to-right-icon {
+		width: 15px;
+		height: 15px;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+
+	.text {
+		font-size: 16px;
+		color: #333;
+	}
+
+	.tj-btn {
+		height: 69rpx;
+		background: #3184f0;
+		border-radius: 6rpx;
+		font-size: 25rpx;
+		font-weight: 400;
+		color: #FFFFFF;
+		line-height: 69rpx;
+		margin: 40rpx 70rpx;
+
+	}
+
+	.sc-btn {
+		height: 69rpx;
+		background: #f0686b;
+		border-radius: 6rpx;
+		font-size: 25rpx;
+		font-weight: 400;
+		color: #FFFFFF;
+		line-height: 69rpx;
+		margin: 40rpx;
+
+	}
+
+	// .gesture-area {
+	// 	//加浮动弹窗
+	//   width: 100%;
+	//   height: 100%;
+	// }
+</style>