WenWuGuanJia/shouhu_fenbao/xunCha/xunCha.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="巡查" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view>
			<view class="xxxc_box">
				<view style="display: flex; align-items: center; font-size: 30rpx; font-weight: 600; color: #b75830; margin-bottom: 10rpx">
					<uni-icons type="sound" size="22" color="#b75830"></uni-icons>
					<view>任务公告</view>
				</view>
				<view>
					<view style="color: #90592a">
						<view class="">
							<text>{{ taskDetails.type_text || '暂无任务' }}：</text>
							<text>{{ taskDetails.desc }}</text>
						</view>
						<view v-if="taskDetails.progress != 0">巡查时间:{{ taskDetails.submit_time }}</view>
					</view>
					<view style="margin-top: 10rpx; font-size: 28rpx; color: #c0a991">请按任务要求填写巡查报告</view>
				</view>
			</view>
			<!-- <view class="map_tit">
				<image style="width: 186rpx; height: 40rpx" src="/static/img/right_img.png"></image>
				<view class="">文物监控</view>
				<image style="width: 186rpx; height: 40rpx" src="/static/img/left_img.png"></image>
			</view> -->

			<!-- 监控 -->
			<!-- 		<view class="jk_box">
				<view @click="openVideo('3e8744121f434332b057391d4ae682d8')" class="jk_item">
					<image :src="videoSrc + '3e8744121f434332b057391d4ae682d8' + '.jpg'" class="img"></image>
				</view>
				<view @click="openVideo('7c078920874f4bd9812224f44a2c8d02')" class="jk_item">
					<image :src="videoSrc + '7c078920874f4bd9812224f44a2c8d02' + '.jpg'" class="img"></image>
				</view>
			</view> -->
			<!-- 		<view class="gui-card-list gui-margin gui-margin-top gui-flex gui-rows gui-wrap gui-space-between">
				<view class="gui-card-item" hover-class="gui-tap" v-for="(item, index) in item.device_list" :key="index">
					<view class="gui-card-img" @click="openVideo(item.camera_index_code)">
						<gui-image :width="330" :height="180" :src="videoSrc + item.camera_index_code + '.jpg'" mode="aspectFit"></gui-image>
					</view>
					<text class="gui-card-title gui-block-text gui-text gui-primary-color">{{ item.name }}</text>
				</view>
			</view> -->
		</view>

		<!-- 线下巡查 -->
		<view class="map_tit">
			<image style="width: 186rpx; height: 40rpx" src="/static/img/right_img.png"></image>
			<view class="">巡查报告</view>
			<image style="width: 186rpx; height: 40rpx" src="/static/img/left_img.png"></image>
		</view>
		<view class="" style="width: 90%; margin: auto">
			<view class="" style="display: flex; align-items: center">
				<view class="dw" @click="dwBtn">
					<uni-icons type="location" size="18" color="#ffffff"></uni-icons>
					<view style="margin-left: 10rpx">签到</view>
				</view>

				<view v-if="longitude != ''" :style="{ color: dwShow ? '#07c160' : 'red' }" style="width: 340rpx; margin-left: 20rpx; font-size: 24rpx">
					当前经纬度{{ longitude }},{{ latitude }}
				</view>
				<view v-else style="margin-left: 20rpx; color: rgba(68, 68, 68, 0.6)">请点击左侧签到按钮获取当前经纬度</view>
			</view>
		</view>
		<view class="zk_box">
			<view @click="AssetBtn(item)" class="zk_item" v-for="(item, index) in assetList" :key="item.id">
				<!-- 调整 -->
				<view class="top_box" style="">
					<view>
						<view v-if="item.image != ''">
							<image :src="item.image" style="width: 280rpx; height: 200rpx"></image>
						</view>
						<view v-else style="width: 280rpx; height: 200rpx">
							<image
								v-if="item.title == '文保牌'"
								src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/wbp2.png"
								style="width: 280rpx; height: 200rpx"
							></image>
							<image v-else src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zwtp.png" style="width: 280rpx; height: 200rpx"></image>
						</view>
					</view>
					<view @click="AssetShow = true" class="" style="display: flex; align-items: center">
						<view style="margin-left: 20rpx">
							<view style="font-size: 32rpx; color: #444444; font-weight: 600">文物{{ item.type_text }}状况</view>
							<view style="height: 150rpx; overflow: scroll; margin-top: 20rpx; font-size: 28rpx; font-weight: 400; color: rgba(68, 68, 68, 0.6)">
								{{ item.type == 1 ? '文物本体' : item.title }}:{{ item.desc }}
							</view>
						</view>
					</view>
				</view>
				<!-- 调整 -->

				<view class="" style="margin-top: 30rpx; display: flex; justify-content: space-between">
					<view style="width: 100%; margin: auto">
						<!-- 	<Segmented activeColor="#EDA98E" :current="item.status" :target="item" :values="displayedItems" @clickItem="onClickItem" styleType="button"></Segmented> -->
						<!-- 默认选中未知 -->
						<Segmented activeColor="#c87d5a" :target="item" :values="displayedItems" @clickItem="onClickItem" styleType="button"></Segmented>
						<!-- 每项上传的照片 -->
						<view class="" style="display: flex; flex-wrap: wrap; justify-content: start; margin-top: 20rpx">
							<image
								@click="clickImg(item.extraImages, index2)"
								v-for="(item2, index2) in item.extraImages"
								:src="item2.url"
								:key="item2.index2"
								style="width: 210rpx; height: 120rpx; margin-left: 10rpx; margin-top: 10rpx"
							></image>
						</view>
						<!-- 每项的描述 -->
						<!-- :style="{ height: item.describeVal != undefined ? '80rpx' : '0rpx' }" -->
						<view style="font-weight: normal; font-size: 30rpx; margin-top: 10rpx; line-height: 40rpx; color: rgba(68, 68, 68, 0.6)">
							{{ item.describeVal || '' }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center" :closeable="true" bgColor="#f9dbbf" round="5">
			<view class="pop_box">
				<view v-if="normal">
					<view style="display: flex; align-items: center">
						<view style="margin-top: 20rpx">事件类型</view>
						<view class="lx" @click="showType = true" :style="{ color: Evtsituation ? '#000000' : '' }">
							{{ Evtsituation ? Evtsituation : '点击选择类型' }}
							<u-icon name="arrow-down" color="#d67b54" size="20"></u-icon>
						</view>
					</view>
					<view style="display: flex; align-items: center">
						<view style="margin-top: 20rpx">事件等级</view>
						<view class="lx" @click="showPicker = true" :style="{ color: Evtsituation ? '#000000' : '' }">
							{{ situation ? situation : '点击选择等级' }}
							<u-icon name="arrow-down" color="#d67b54" size="20"></u-icon>
						</view>
					</view>
				</view>

				<view class="tit_box">
					<view class="title" style="margin-top: -120rpx; margin-right: 70rpx" :class="{ miaoshu: !normal }">描述</view>
					<u--textarea v-model.trim="describeVal" count></u--textarea>
				</view>
				<!-- 图片 -->
				<view style="height: 400rpx; overflow: scroll">
					<!-- 上传照片 -->
					<view>
						<SCimage :fileList="fileList" @childEvent="handleChildEvent"></SCimage>
					</view>
				</view>

				<view class="zque" @click="isOk">确认</view>
			</view>
		</u-popup>
		<!-- 事件类型 -->
		<u-picker :show="showType" keyName="title" @cancel="showType = false" :columns="Evtcolumns" @close="close" :closeOnClickOverlay="true" @confirm="evtConfirm"></u-picker>
		<!-- 事件等级 -->
		<u-picker :show="showPicker" keyName="title" @cancel="showPicker = false" :columns="columns" @close="close" :closeOnClickOverlay="true" @confirm="confirm"></u-picker>

		<!-- 文物资产详情 -->
		<u-popup :show="AssetShow" @close="close" mode="center" :closeable="true" bgColor="#f9dbbf" round="5">
			<view class="pop_box">
				<view style="text-align: center; margin-right: 20rpx; margin-bottom: 20rpx; font-size: 32rpx">{{ assetDetails.title }}</view>
				<view>状况：{{ assetDetails.status_text }}</view>
				<view>位置：{{ assetDetails.position ? assetDetails.position : '暂未显示' }}</view>
				<view>
					<image style="width: 180rpx; height: 140rpx" :src="assetDetails.image"></image>
				</view>
			</view>
		</u-popup>

		<view class="tjxc" @click="submitTo">提交巡查</view>
	</view>
</template>

<script>
var md5 = require('@/common/md5.js');
let that;
export default {
	data() {
		return {
			dwShow: true,
			position: '',
			longitude: '',
			latitude: '',
			showType: false,
			distance: null /* 判断用户距离 */,
			cr_id: '' /* 文物id */,
			cr_code: '' /* 文物编号 */,
			videoSrc: 'https://huli-app.wenlvti.net/map_source/static/images/video/',
			taskDetails: {} /* 任务详情 */,
			taskId: '' /* 任务id */,
			submitStatuso: '' /*  任务状态*/,
			eventTypeId: '' /* 异常事件类型id */,
			stateId: '' /* 状态id */,
			items: [{ title: '未知' }, { title: '正常', status: 1 }, { title: '异常', status: 2 }],
			displayedItems: [],
			current: 0,
			assetList: [] /* 资产列表 */,
			postList: [],
			assetDetails: {} /* 资产详情 */,
			AssetShow: false,
			normal: false,
			describeVal: '',
			show: false,
			showPicker: false,
			situation: '',
			Evtsituation: '',
			// 弹层Tab
			popTab: [],
			columns: [
				[
					{
						title: '一般',
						id: 1
					},
					{
						title: '较大',
						id: 2
					},
					{
						title: '重大',
						id: 3
					},
					{
						title: '非常重大',
						id: 4
					}
				]
			],
			Evtcolumns: [],
			// 上传的图片
			fileList: []
		};
	},

	onLoad(o) {
		console.log(o, 'ooo');
		that = this;
		this.taskId = o.id; /* 任务id */
		this.cr_id = o.cr_id; /* 文物id */
		this.cr_code = o.cr_code;
		this.submitStatuso = o.submit_statuso; /* 提交的任务状态 */
		// 处理状态
		this.displayedItems = this.items.map((item) => item.title);
		this.getPatrolTaskDetails(o.id);
		this.loadGlobalFont();
	},
	methods: {
		// 监控
		// openVideo(camera_index_code) {
		// 	console.log(camera_index_code);
		// 	var t = Date.parse(new Date()) / 1000;
		// 	var key = md5.md5(t + '@feichenghuli');

		// 	this.webViedoUrl = encodeURIComponent('https://wenwu.16fw.cn/hik_monitor/mobile_monitor.html?t=' + t.toString() + '&key=' + key + '&index_code=' + camera_index_code);
		// 	console.log(this.webViedoUrl);
		// 	this.$common.navigateTo('/shouhu_fenbao/shouHu/webview?url=' + this.webViedoUrl);
		// 	return;
		// },
		// 打卡
		dwBtn() {
			uni.getLocation({
				type: 'gcj02',
				success: function (data) {
					that.$api.distanceCheck({ cr_id: that.cr_id, longitude: data.longitude, latitude: data.latitude }, function (res) {
						if (res.data === false && res.code == 0) {
							that.dwShow = false;
							that.longitude = data.longitude;
							that.latitude = data.latitude;
							that.$common.errorToShow(res.msg);
							console.log(res, '不是特殊文物距离过远');
						} else {
							that.longitude = data.longitude;
							that.latitude = data.latitude;
							that.$common.successToShow('签到成功');
							// console.log('当前位置的经度：' + res.longitude);
							// console.log('当前位置的纬度：' + res.latitude);
						}
					});
				},
				fail: function (res) {
					//1.2 拒绝授权
					uni.showModal({
						content: '检测到您没打开获取位置权限，是否去设置打开？',
						confirmText: '确认',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (res) => {
										console.log(res);
										uni.getLocation();
									}
								});
							} else {
								// console.log('取消');
								return false;
							}
						}
					});
				}
			});
		},

		// 接受子组件上传的图片
		handleChildEvent(data) {
			// console.log('Received data from child component:', data);
			this.fileList = data;
		},
		// 任务详情
		getPatrolTaskDetails(id) {
			this.$api.getPatrolTaskDetails({ main_body_id: 1, task_id: id, cr_id: this.cr_id }, function (res) {
				// console.log(res, '任务详情');
				that.taskDetails = res.data;
				that.cr_id = that.taskDetails.cr_id;
				that.cr_code = that.taskDetails.cr_code;
				that.taskId = that.taskDetails.id;
				that.getCrProperty();
			});
		},
		// 文物资产列表
		getCrProperty() {
			this.$api.getCrProperty({ main_body_id: 1, cr_id: this.cr_id }, function (res) {
				// console.log(res, 'resres');
				if (res.code === 1) {
					// that.assetList = res.data;
					let alist = res.data;
					that.taskDetails.patrolTaskAnnexList.forEach((requestItem, index) => {
						// console.log(alist, '999999');

						alist.forEach((item, i) => {
							if (item.id == requestItem.property_id) {
								// console.log(item, '3333333333');
								// console.log(alist[i], '1111111111');
								alist[i].describeVal = requestItem.desc;
								alist[i].extraImages = [];
								requestItem.images.forEach((img, imgidx) => {
									alist[i].extraImages.push({ url: img });
								});

								alist[i].status_text = requestItem.status_text;
							}
						});
					});

					that.assetList = alist;

					that.postList = { main_body_id: 1, task_id: that.taskId, submit_status: that.submitStatuso, property_list: [] };
				} else {
					console.log(res.msg);
				}
			});
		},

		// 状态事件
		onClickItem(e) {
			// console.log(e, '修改w');

			this.assetDetails = e.target;
			// console.log(this.assetDetails, 'item');
			this.stateId = e.currentIndex;
			var tarIndex = -1;
			for (var i = 0; i < this.postList.property_list.length; i++) {
				if (this.postList.property_list[i].id == this.assetDetails.id) {
					tarIndex = i;
					// console.log(this.postList.property_list[i], '11111111');
				}
			}

			if (tarIndex >= 0) {
				console.log(this.postList.property_list[tarIndex]);
				this.fileList = this.postList.property_list[tarIndex].images;
			} else {
				// 关闭弹层将相关内容清空

				if (typeof this.assetDetails.extraImages != 'undefined') {
					this.fileList = [...this.assetDetails.extraImages];
				} else {
					this.fileList = [];
				}
				this.describeVal = '';
				this.situation = '';
				this.situationId = '';
				this.eventTypeId = '';

				this.Evtsituation = '';
			}

			if (this.items[e.currentIndex].title === '异常') {
				// 文物分类列表
				this.describeVal = '';
				this.$api.getCulturalRelicCategory({ main_body_id: 1, type: 42 }, function (res) {
					// console.log(res, '事件类型');
					that.Evtcolumns = [res.data];
				});

				// 弹层
				this.show = true;
				// 异常弹层布局
				this.normal = true;
			} else if (this.items[e.currentIndex].title === '正常') {
				this.show = true;
				// this.describeVal = '未发现异常';
			}
		},
		// 文物资产项
		AssetBtn(item) {
			this.assetDetails = item;
			this.describeVal = item.describeVal;
			// console.log(this.assetDetails, 'this.assetDetails');
		},
		// 弹层确认
		isOk() {
			this.describeVal = this.describeVal;
			// console.log(this.items[this.stateId].status, '状态');
			// 文物本体
			var tarIndex = -1;
			for (var i = 0; i < this.postList.property_list.length; i++) {
				if (this.postList.property_list[i].id == this.assetDetails.id) {
					tarIndex = i;
				}
			}
			if (tarIndex < 0) {
				this.postList.property_list.push({
					id: this.assetDetails.id,
					images: [],
					desc: '',
					event_level: '',
					event_type: '',
					status: this.normal ? 2 : 1
				});
				tarIndex = this.postList.property_list.length - 1;
			}
			this.postList.property_list[tarIndex].images = this.fileList;
			this.postList.property_list[tarIndex].desc = this.describeVal;
			this.postList.property_list[tarIndex].event_level = this.situationId;
			this.postList.property_list[tarIndex].event_type = this.eventTypeId;

			// 检查描述和图片是否已填写
			for (var i = 0; i < this.postList.property_list.length; i++) {
				let property = this.postList.property_list[i];

				// 检查描述是否已填写
				if (!property.desc || property.desc.trim() === '') {
					// 新加
					if (this.normal) {
						this.$common.errorToShow('请填写问题描述');
					} else {
						this.describeVal = '未发现异常';
					}

					// this.$common.errorToShow('请填写问题描述');
					return;
				}

				// 检查是否有至少一张图片
				if (property.images.length === 0) {
					this.$common.errorToShow('请上传图片');
					return;
				}
			}
			// 检查描述和图片是否已填写end
			this.show = false;
			this.normal = false;

			// console.log('kkk', this.postList); /* 参数 */
			// console.log('上传的照片66', this.fileList); /* 照片 */
			let arr = [];
			//显示每项上传的图片， 遍历this.fileList，为每个项创建包含url属性的对象，并推送到新数组
			this.assetList.forEach((obj) => {
				if (!obj.extraImages) {
					obj.extraImages = [];
				}

				const uniqueUrls = new Set();
				const deduplicatedExtraImages = [];

				obj.extraImages.forEach((imageObj) => {
					const url = imageObj.url;
					if (!uniqueUrls.has(url)) {
						uniqueUrls.add(url);
						deduplicatedExtraImages.push(imageObj);
					}
				});

				obj.extraImages = deduplicatedExtraImages;
			});

			this.assetList.forEach((obj) => {
				if (obj.id === this.assetDetails.id) {
					this.postList.property_list.forEach((item) => {
						obj.describeVal = item.desc;
					});

					// 遍历this.fileList，为每个项创建包含url属性的对象，检查其是否已存在于obj.extraImages中，
					// 若不存在则推送到obj.extraImages
					this.fileList.forEach((fileItem) => {
						const url = fileItem.url;
						const isDuplicate = obj.extraImages.some((imageObj) => imageObj.url === url);

						if (!isDuplicate) {
							obj.extraImages.push({ url });
						}
					});
				}
			});

			// console.log(this.assetList, '每项添加照片和描述');
		},
		// 提交巡查
		submitTo() {
			// 判断图片和描述有没有填写
			let allItemsValid = true;
			let incompleteItems = []; // 用于存储需要完善信息的文物类型
			this.assetList.forEach((item) => {
				const hasExtraImages = item.hasOwnProperty('extraImages') && item.extraImages !== null && item.extraImages !== undefined;
				const hasDescribeVal = item.hasOwnProperty('describeVal') && item.describeVal !== null && item.describeVal !== undefined;

				if (!hasExtraImages || !hasDescribeVal) {
					incompleteItems.push(item.type_text); // 将需要完善信息的文物类型添加到数组中
					allItemsValid = false; // 遇到不符合条件的对象时，标记为不通过
				}
			});

			if (allItemsValid) {
				// 需要移除的域名
				const domainToRemove = 'https://meng.wenlvti.net';
				if (this.postList && Array.isArray(this.postList.property_list)) {
					for (const property of this.postList.property_list) {
						if (property.images && Array.isArray(property.images)) {
							for (const imageObj of property.images) {
								if (imageObj.url && imageObj.url.startsWith(domainToRemove)) {
									imageObj.url = imageObj.url.substring(domainToRemove.length);
								}
							}
						}
					}
				}
				// 需要移除的域名end

				let mypost = JSON.parse(JSON.stringify(this.postList));
				for (var i = 0; i < this.postList.property_list.length; i++) {
					let images = '';
					for (var j = 0; j < this.postList.property_list[i].images.length; j++) {
						if (images == '') images += this.postList.property_list[i].images[j].url;
						else images += ',' + this.postList.property_list[i].images[j].url;
					}
					mypost.property_list[i].images = images;
				}
				mypost.property_list = JSON.stringify(mypost.property_list);

				console.log(mypost, '提交参数');

				// 获取位置判断距离文物多远,不是特殊文物需判断距离
				if (that.assetList[0].is_special === 0) {
					uni.getLocation({
						type: 'gcj02',

						success: function (res) {
							that.position = res.longitude + ',' + res.latitude;
							mypost.position = that.position;
							// console.log(mypost, '提交参数22222222');
							// console.log(that.position, '提交位置');
							that.$api.distanceCheck({ cr_id: that.cr_id, longitude: res.longitude, latitude: res.latitude }, function (res) {
								if (res.data === false && res.code == 0) {
									that.$common.errorToShow(res.msg);
									console.log(res, '不是特殊文物距离过远');
								} else {
									console.log(res, '不是特殊文物距离ok');
									that.$api.submitTask(mypost, function (res) {
										if (res.code == 1) {
											// console.log(res, '提交成功');
											that.$common.successToShow('提交成功');
											setTimeout(() => {
												uni.switchTab({
													url: '/pages/shouhu/shouhu'
												});
											}, 1000);
										} else {
											that.$common.errorToShow('请稍后再试');
										}
									});
								}
							});
						},
						fail: function (err) {
							console.log(err, '定位失败');
						}
					});
				} else {
					// 特殊文物不用判断距离
					console.log('特殊文物不用判断距离');
					that.$api.submitTask(mypost, function (res) {
						if (res.code == 1) {
							// console.log(res, '提交成功');
							that.$common.successToShow('提交成功');
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/shouhu/shouhu'
								});
							}, 1000);
						} else {
							that.$common.errorToShow('请稍后再试');
						}
					});
				}
			} else {
				const message = `请完善文物${incompleteItems.join(', ')}巡查信息`;
				that.$common.errorToShow(message);
			}
		},

		confirm(e) {
			// console.log('confirm', e);
			this.situation = e.value[0].title;
			this.situationId = e.value[0].id;
			this.showPicker = false;
		},
		evtConfirm(e) {
			console.log('confirm', e);
			this.Evtsituation = e.value[0].title;
			this.eventTypeId = e.value[0].id;
			this.showType = false;
		},
		// 历史记录
		jiluBtn() {
			uni.navigateTo({
				url: '/shouhu_fenbao/xunCha/jiLu'
			});
		},
		// 图片预览
		clickImg(item, i) {
			let img = [];
			item.forEach((item) => {
				img.push(item.url);
			});

			uni.previewImage({
				urls: img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: img[i] // 当前显示图片的http链接，默认是第一个
			});
		},
		close() {
			this.show = false;
			this.showPicker = false;
			this.normal = false;
			this.AssetShow = false;
			this.showType = false;
		},
		// 加载字体
		loadGlobalFont() {
			try {
				uni.loadFontFace({
					family: 'MyGlobalFont', // 自定义字体名
					source: 'url("https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/songTi.ttf")',
					success() {
						console.log('全局字体加载成功');
					}
				});
			} catch (error) {
				console.error('全局字体加载异常', error);
			}
		}
	}
};
</script>

<style>
.box {
	min-height: 100%;
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	/* background-color: #fff9e9; */
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-size: 100% 100%;
	font-family: 'MyGlobalFont';
}

.u-textarea__field.data-v-09988a29 {
	color: #000000 !important;
}
.u-textarea.data-v-09988a29 {
	background-color: #f1bd8e !important;
}
.active {
	color: #fae5bb !important;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/cy_tit1.png') !important;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #f1bd8e !important;
	border-radius: 0;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #f1bd8e !important;
}
.tab_active {
	background-color: #b75830 !important;
}
.u-textarea__count.data-v-09988a29 {
	background-color: transparent !important;
}
.u-upload__button.data-v-69e2a36e {
	background-color: #f1bd8e !important;
}
.dw {
	display: flex;
	align-items: center;
	width: 160rpx;
	height: 80rpx;
	color: #ffffff;
	line-height: 80rpx;
	font-size: 28rpx;
	border-radius: 10rpx;
	justify-content: center;
	background-color: #c87d5a;
}
.filter-box {
	padding: 30upx 50upx 0 50upx;
	margin-bottom: 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.miaoshu {
	margin-top: -260rpx !important;
	margin-right: 0 !important;
}
.filter-box .b-item {
	width: 278rpx;
	height: 80rpx;
	font-size: 30rpx;
	color: #ffefc4;
	font-weight: 600;
	text-align: center;
	line-height: 80rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/cy_tit2.png');
	background-size: 100% 100%;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 125rpx;
	margin-top: 50rpx;
	margin-bottom: 20rpx;
	font-size: 36rpx;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.map_tit2 {
	position: relative;
	top: -176rpx;
}
.jk_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: auto;
}
.img {
	width: 100%;
	height: 100%;
}
.jk_item {
	width: 310rpx;
	height: 230rpx;
	margin-top: 40rpx;
}
.zk_box {
	width: 90%;
	margin: auto;
	margin-top: 30rpx;
}
.zk_item {
	/* justify-content: space-between;
	display: flex; */
	font-size: 30rpx;
	font-weight: 600;
	margin-top: 40rpx;
}
.zk_item2 {
	display: block !important;
	font-size: 30rpx;
	font-weight: 600;
	margin-top: 40rpx;
}

.tjxc {
	width: 670rpx;
	height: 88rpx;
	margin: auto;
	font-size: 32rpx;
	font-weight: 600;
	color: #fef3e1;
	margin-top: 50rpx;
	line-height: 82rpx;
	text-align: center;
	background-color: #c87d5a;
}
.pop_box {
	width: 635rpx;
	padding: 80rpx 40rpx 40rpx 40rpx;
	font-size: 30rpx;
	font-weight: 600;
}
.pop_item {
	height: 60rpx;
	border-radius: 10rpx;
	text-align: center;
	padding: 10rpx;
	border: 2rpx solid #d67b54;
}
.lx {
	display: flex;
	justify-content: space-between;
	width: 410rpx;
	height: 70rpx;
	margin: auto;
	margin-top: 30rpx;
	border: 2rpx solid #d67b54;
	border-radius: 10rpx;
	line-height: 70rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	color: #7b6d67;
}
.tit_box {
	width: 540rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
}
.tit_box2 {
	width: 630rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
	margin-left: 80rpx;
}
.zque {
	width: 260rpx;
	height: 70rpx;
	margin: auto;
	text-align: center;
	line-height: 70rpx;
	color: #ffffff;
	background-color: #c87d5a;
	border-radius: 10rpx;
}
.xxxc_box {
	/* height: 400rpx; */
	margin: auto;
	padding: 50rpx 70rpx 80rpx 90rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xxxc_top.png');
	background-size: 100% 100%;
}
.wwmc {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.wwmc_left {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 250rpx;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #f1bd8e;
	border-radius: 10rpx;
	font-size: 30rpx;
}
.wwmc_right {
	width: 250rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	background-color: #f1bd8e;
	border-radius: 6rpx;
	font-size: 30rpx;
}
.wwmc_right2 {
	width: 250rpx;
	height: 60rpx;
	text-align: center;
	/* line-height: 60rpx; */
	background-color: #f1bd8e;
	border-radius: 6rpx;
	font-size: 30rpx;
}
.top_box {
	padding: 20rpx;
	width: 100%;
	margin: auto;
	display: flex;
	border: 2rpx solid #ebc9a9;
	background-color: #fefdfb;
}
</style>