<template>
	<view class="v-pages v-pages-bg">
		<view class="v-pages-search">
			<view class="search_box row flex-align-center">
				<view class="col">
					<input @input="write" type="text" class="input" @confirm="confirm" confirm-type="search"
						color="#666666" placeholder-style="color:#999" placeholder="输入景区名称" />
				</view>
				<view class="btn_img" @click="search()">
					<image src="/subPageB/static/img/icon-search.png" class="img"></image>
				</view>
			</view>
			<view class="dy_fx amt_30">
				<view class="search-tip-bar">	
					<view @tap="changePanel" :class="[searchItemClass, selectedParam.hiddenSortPanel ? 'active' : '']"
						data-type="hiddenSortPanel">智能排序</view>
					<view @tap="changePanel"
						:class="[searchItemClass, selectedParam.hiddenAttributePanel ? 'active' : '']"
						data-type="hiddenAttributePanel">分类筛选</view>
				</view>
			</view>
		</view>

		<view class="category">
			<view class="category-wrapper" v-if="catrgoryList.length > 0" style="top: 100rpx">
				<!-- 左边导航 -->
				<scroll-view v-if="leftScollShow" scrollY="true" class="scroll-view" scroll-with-animation="true"
					:scroll-top="left_scroll">
					<view class="left-content">
						<view class="title-content" :class="select_index === index ? 'onSelected' : ''"
							v-for="(title, index) in catrgoryList" :key="title.id" @tap="choose(index)">
							{{ title.name }}
						</view>
					</view>
				</scroll-view>
				<!-- 右边内容 -->
				<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true"
					:scroll-top="right_scroll" @scroll="myscroll">
					<!-- 产品区 -->
					<view class="v-pages-list" v-if="scenicList.content.length > 0">
						<view class="list_item row" v-for="(p_item, p_index) in scenicList.content"
							@tap="gotoDetail(p_item.cid)">
							<view class="item_recommend normal" v-if="p_item.isrecommend == 'YES'">
								<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tuijian.png"
									mode="widthFix"></image>
							</view>
							<view class="item_image scenic">
								<image mode="aspectFill" class="img" :src="p_item.thumb"></image>
							</view>
							<view class="item_content col">
								<view class="content-name">{{ p_item.cname }}</view>
								<view class="content-tip"><span class="item">{{
								                        p_item.slevel
								                      }}</span></view>
								<view class="content-address">
									{{ p_item.address }}
								</view>
							</view>
						</view>


					</view>
					<view class="scroll-empty" v-else>
						<image class="empty-icon" src="http://www.mescroll.com/img/mescroll-empty.png?v=1"
							mode="widthFix">
						</image>
						<view class="empty-tip">~ 暂无相关数据 ~</view>
					</view>

				</scroll-view>
			</view>		
		</view>
		<view class="sort-page" :hidden="selectedParam.hiddenSortPanel">
						<view class="sort-group">
							<view @tap="selected" :class="[
		  pageClass.sortItemClass,
		  selectedParam.sortId == item.id ? 'sort-item-active' : '',
		]" data-panel="hiddenSortPanel" data-type="sortId" :data-id="item.id" v-for="(item, index) in filter.sort"
								:key="index">
								{{ item.name }}
							</view>
						</view>
					</view>
		
					<view class="sort-page" :hidden="selectedParam.hiddenRegionPanel">
						<view class="sort-group">
							<view @tap="regionSelected" :class="[
		  pageClass.sortItemClass,
		  selectedParam.bm == item.bm ? 'sort-item-active' : '',
		]" data-panel="hiddenRegionPanel" :data-name="item.title" data-type="bm" :data-id="item.bm"
								v-for="(item, index) in regionList" :key="index">
								{{ item.title }}
							</view>
						</view>
					</view>
		
					<view class="filter-page" :hidden="selectedParam.hiddenAttributePanel">
						<view class="filter-box">
							<scroll-view scrollY class="filter-hd">
								<view @tap="parentLevel" :class="[
		    pageClass.filterHdItemClass,
		    parentLevelItem == 'attribute_' + items.type
		      ? 'filter-hd-item-active'
		      : '',
		  ]" :data-parentLevelItem="'attribute_' + items.type" v-for="(items, index) in filter.attribute"
									:key="index">
									{{ items.name }}
								</view>
							</scroll-view>
							<scroll-view scrollY class="filter-bd">
								<view class="filter-group" v-if="parentLevelItem == 'attribute_' + items.type"
									v-for="(items, index) in filter.attribute" :key="items.dicnum">
									<view @tap="childLevel" :class="[
		      pageClass.filterBdItem,
		      selectedFIlter['attribute_' + items.type] == 0
		        ? 'filter-bd-item-active'
		        : '',
		    ]" data-id="0" :data-type="'attribute_' + items.type">
										全部
									</view>
									<view @tap="childLevel" :class="[
		      pageClass.filterBdItem,
		      selectedFIlter['attribute_' + items.type] == item.dicnum
		        ? 'filter-bd-item-active'
		        : '',
		    ]" :data-id="item.dicnum" :data-type="'attribute_' + items.type"
										v-for="(item, childIndex) in items.child" :key="childIndex">
										{{ item.dicname }}
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="control-bar-block">
							<view @tap="resetFilter" class="control-back-btn">恢复默认</view>
							<view @tap="confirmClick" class="control-confirm-btn">确定</view>
						</view>
					</view>
	</view>
</template>

<script>
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import uniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
	import uniSection from "@/components/uni-section/uni-section.vue";
	import uniStatusBar from "@/components/uni-status-bar/uni-status-bar.vue";
	export default {
		components: {
			uniIcons,
			uniNavBar,
			uniSection,
			uniStatusBar,
		},
		data() {
			return {
				windows_height: 0, //屏幕高度
				filter: {
					sort: [],
					attribute: [],
				},
				swiperList: [],
				catrgoryList: [],
				scenicList: [],
				select_index: 0,
				right_height: [], //右侧每个内容的高度集合
				right_scroll: 0, //右侧的滑动值
				left_height: 0, //左侧总高度
				left_scroll: 0, //左侧滑动值
				last: 0,
				leftScollShow: false,
				regionList: [],
				regionname: "全部",
				searchItemClass: "search-tip-item",
				pageClass: {
					sortItemClass: "sort-item",
					filterHdItemClass: "filter-hd-item",
					filterBdItem: "filter-bd-item",
				},
				searchTitle: "",
				parentLevelItem: "attribute_stype",
				defaultFilter: {
					attribute_stype: 0,
					attribute_slevel: 0,
				},
				selectedFIlterBak: {
					attribute_stype: 0,
					attribute_slevel: 0,
				},
				selectedFIlter: {
					attribute_stype: 0,
					attribute_slevel: 0,
				},
				selectedParam: {
					sortId: 1,
					bm: "",
					hiddenSortPanel: !0,
					hiddenAttributePanel: !0,
					hiddenRegionPanel: !0,
				},
				netType: true,
			};
		},
		onLoad(options) {
			var that = this;
			this.$util.getNetworkType(
				function(res) {
					if (res.networkType === "none") {
						uni.showToast({
							title: that.$param.netMsg,
							icon: "none",
							duration: 2000,
						});
						that.netType = false;
					}
				},
				function() {
					uni.showToast({
						title: that.$param.netMsg,
						icon: "none",
						duration: 2000,
					});
					that.netType = false;
				}
			);
			if (!that.netType) {
				return;
			}
			this.$util.hideLoadingByTime();
			uni.showLoading({
				title: "加载中",
				mask: true,
			});
			// this.init(options.id);
			this.get_attribute();
			this.getRedisRegion();
			this.getRedisData(options.id);
			this.windows_height = uni.getSystemInfoSync().windowHeight;
			setTimeout(function() {
				uni.hideLoading();
			}, 500);
			that.$util.saveOperatorLog(that, "FUN", "景区");
		},
		methods: {
			write: function(e) {
				this.searchTitle = e.detail.value;
			},
			search: function() {
				this.init(null);
			},
			back: function(e) {
				uni.navigateBack({
					delta: 1,
				});
			},
			confirm: function(e) {
				this.searchTitle = e.detail.value;
				this.init(null);
			},
			getRedisData: function(id) {
				var data = {
					key: this.$param.userkey + "_scenic_list",
				};
				this.$Request.post(this.$config.getRedisData, data).then((res) => {
					if (res.status == 200 && res.data.error == 0) {
						var list = [];
						list = res.data.list;

						var index = 0;
						for (let i = 0; i < list.length; i++) {
							var paddingList = list[i].content;
							for (let j = 0; j < paddingList.length; j++) {
								paddingList[j].thumb = this.$config.ROOTPATH + paddingList[j].thumb;
							}
							list[i].logo = this.$config.ROOTPATH + list[i].logo;
							if (id != null && id != "") {
								if (list[i].id == id) {
									index = i;
									this.select_index = i;
								}
							}
						}
						this.catrgoryList = list;
						this.scenicList = list[index];

						this.$nextTick(() => {
							this.getHeightList();
						});
					} else {
						this.init(id);
					}
				});
			},
			init(id) {
				var type = this.selectedFIlterBak["attribute_stype"];
				var level = this.selectedFIlterBak["attribute_slevel"];
				var region = this.selectedParam.bm;
				//var res = {"data":{"error":0,"data":{"banner":[{"Imgid":10,"src":"http://dummyimage.com/530x180"},{"Imgid":11,"src":"http://dummyimage.com/530x180"}],"list":[{"id":0,"name":"选向教较","content":[{"cid":0,"cname":"日复己","thumb":"http://dummyimage.com/100x100"},{"cid":1,"cname":"更层","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"机团则","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]}]}},"statusCode":200,"header":{"content-type":"application/json; charset=utf-8"},"errMsg":"request:ok"};
				//var res = {"data":{"error":0,"data":{"banner":[{"Imgid":10,"src":"http://dummyimage.com/530x180"},{"Imgid":11,"src":"http://dummyimage.com/530x180"}],"list":[{"id":0,"name":"正定","content":[{"cid":0,"cname":"日复己","thumb":"http://dummyimage.com/250x100"},{"cid":1,"cname":"更层","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"鹿泉","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"平山","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"井陉","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]}]}},"statusCode":200,"header":{"content-type":"application/json; charset=utf-8"},"errMsg":"request:ok"};
				//var res = {"data":{"error":0,"data":{"banner":[{"Imgid":10,"src":"http://dummyimage.com/530x180"},{"Imgid":11,"src":"http://dummyimage.com/530x180"}],"list":[{"id":0,"name":"正定","logo":"http://dummyimage.com/530x180","content":[{"cid":0,"cname":"日复己","thumb":"http://dummyimage.com/250x100"},{"cid":1,"cname":"更层","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"鹿泉","logo":"http://dummyimage.com/530x180","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":2,"name":"平山","logo":"http://dummyimage.com/530x180","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":3,"name":"井陉","logo":"http://dummyimage.com/530x180","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]}]}},"statusCode":200,"header":{"content-type":"application/json; charset=utf-8"},"errMsg":"request:ok"};
				var data = {
					type: this.$param.mddType,
					userkey: this.$param.userkey,
					title: this.searchTitle,
					sort: this.selectedParam.sortId,
					areacode: region,
					slevel: null == level || 0 == level ? "" : level,
					stype: null == type || 0 == type ? "" : type,
					lng: this.$param.clng,
					lat: this.$param.clat,
				};
				this.$Request.post(this.$config.sceniclist, data).then((res) => {
					if (res.data.error === 0) {
						var list = res.data.list;
						var index = 0;
						for (let i = 0; i < list.length; i++) {
							var paddingList = list[i].content;
							for (let j = 0; j < paddingList.length; j++) {
								paddingList[j].thumb = this.$config.ROOTPATH + paddingList[j].thumb;
							}
							list[i].logo = this.$config.ROOTPATH + list[i].logo;
							if (id != null && id != "") {
								if (list[i].id == id) {
									index = i;
									this.select_index = i;
								}
							}
						}
						this.catrgoryList = list;
						this.scenicList = list[index];
						this.$nextTick(() => {
							this.getHeightList();
						});
					}
				});
			},
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.select(".left-content").boundingClientRect(function(rects) {
					_this.left_height = "30"; //rects.height;
				});
				selectorQuery
					.selectAll(".category-item")
					.boundingClientRect(function(rects) {
						_this.right_height = rects.map((item) => item.top);
					})
					.exec();
			},
			choose(index) {
				if (this.select_index === index) {
					return;
				}
				this.scenicList = this.catrgoryList[index];
				this.select_index = index;
				// 加入防抖
				if (this.timeout) {
					clearTimeout(this.timeout); //清除计时器
				}
				this.timeout = setTimeout(() => {
					this.right_scroll = this.right_height[index] - 110;
				}, 300);
			},
			myscroll(e) {
				//引入节流
				let right_content_height = e.detail.scrollHeight - this.windows_height;
				if (right_content_height == e.detail.scrollTop) {
					return;
				}
				let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
				//判断当前的scrollTop在哪个区间内;
				let now = +new Date();
				if (now - this.last > 100) {
					this.last = now;
					// let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top && scroll_top < arr[index + 1]);
					// this.select_index = active_index;
					// if (this.left_height - this.windows_height) {
					// 	//如果有超出部分
					// 	let diff = this.left_height - this.windows_height
					// 	this.left_scroll = Math.round((active_index * diff) / (this.catrgoryList.length - 1))
					// }
				}
			},
			gotoDetail(e) {
				console.log(e);

				uni.navigateTo({
					url: `/subPageA/scenic/scenicdetial/scenicdetial?guid=` + e,
				});
			},
			getRedisRegion: function() {
				var that = this;
				var data = {
					key: that.$param.userkey + "_mdd_list",
				};
				that.$Request.post(that.$config.getRedisData, data).then((res) => {
					if (res.status == 200) {
						that.regionList = res.data.mddList;
						var all = {
							bm: "",
							title: "全部",
						};
						that.regionList.unshift(all);
						for (var i = 0; i < that.regionList.length; i++) {
							if (that.regionList[i].bm == that.selectedParam.bm) {
								that.regionname = that.regionList[i].title;
							}
						}
					} else {
						that.getRegion();
					}
				});
			},

			resetFilter: function() {
				this.selectedFIlter = {
					//this.defaultFilter;
					attribute_stype: 0,
					attribute_slevel: 0,
				};
			},
			confirmClick: function() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				//设置选中的筛选项
				var selectedParam = this.selectedParam;
				(selectedParam.hiddenAttributePanel = true),
				(this.selectedFIlterBak = this.selectedFIlter);
				this.parentLevelItem = "attribute_stype";
				this.selectedParam = selectedParam;
				this.init(null);
				setTimeout(function() {
					uni.hideLoading();
				}, 500);
			},
			parentLevel: function(t) {
				var currentTarget = t.currentTarget.dataset;
				//console.log("aaaaaaaaaaaaaaaaa"+a.parentlevelitem);
				this.parentLevelItem = currentTarget.parentlevelitem;
			},
			childLevel: function(t) {
				var a = t.currentTarget.dataset,
					e = this.selectedFIlter;
				this.selectedFIlterBak = e;
				e[a.type] = a.id;
				this.selectedFIlter = e;
			},
			getRegion: function() {
				var that = this;
				var url = this.$config.getMessageInfoFormFilter;
				var data = {
					type: this.$param.mddType,
					userkey: this.$param.userkey,
					pageSize: 100,
					sort: "2",
				};
				this.$Request.post(url, data).then((res) => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						return;
					}
					this.regionList = res.data;
					for (var i = 0; i < this.regionList.length; i++) {
						if (this.regionList[i].bm == this.selectedParam.bm) {
							this.regionname = this.regionList[i].title;
						}
					}
					this.regionList.unshift({
						title: "全部",
						bm: "",
					});
				});
			},
			get_attribute: function() {
				var that = this;
				var url = this.$config.getCondition;
				var data = {
					type: "scenic",
					userkey: this.$param.userkey,
					condition: this.$param.scenicType,
					condition2: this.$param.scenicLevel,
				};
				this.$Request.post(url, data).then((res) => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						return;
					}
					this.filter = res.data;
				});
			},
			selected: function(event) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				var dataset = event.currentTarget.dataset;
				var param = this.selectedParam;

				param[dataset.type] = dataset.id;
				param.hiddenSortPanel = !0;
				//console.log(dataset.id);
				this.selectedParam = param;
				this.init(null);
				setTimeout(function() {
					uni.hideLoading();
				}, 500);
			},
			regionSelected: function(event) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				var dataset = event.currentTarget.dataset;
				var param = this.selectedParam;
				param[dataset.type] = dataset.id;
				param.hiddenRegionPanel = !0;
				//console.log(dataset.id);
				this.selectedParam = param;
				this.regionname = dataset.name;
				this.init(null);
				setTimeout(function() {
					uni.hideLoading();
				}, 500);
			},
			changePanel: function(event) {
				var dataSet = event.currentTarget.dataset,
					selectedParam = this.selectedParam;
				"hiddenSortPanel" == dataSet.type ?
					((selectedParam.hiddenAttributePanel = !0),
						(selectedParam.hiddenRegionPanel = !0)) :
					(selectedParam.hiddenSortPanel = !0),
					(selectedParam[dataSet.type] = !selectedParam[dataSet.type]),
					(this.selectedParam = selectedParam);
			},
			changeRegionPanel: function(event) {
				var dataSet = event.currentTarget.dataset,
					selectedParam = this.selectedParam;
				if ("hiddenRegionPanel" == dataSet.type) {
					selectedParam.hiddenAttributePanel = !0;
					selectedParam.hiddenSortPanel = !0;
				} else {
					selectedParam.hiddenRegionPanel = !0;
				}
				(selectedParam[dataSet.type] = !selectedParam[dataSet.type]),
				(this.selectedParam = selectedParam);
			},
		},
	};
</script>

<style lang="less">
	

	page {
		background: #fff;
	}
	.sort-page {
		top: 180rpx !important;
	}

	.filter-page {
		top: 180rpx !important;
	}
	.search-tip-item:after {
		display: inline-block;
		margin: -2rpx 0 0 6rpx;
		width: 0;
		height: 0;
		border-top: 8rpx solid #666;
		border-right: 8rpx solid transparent;
		border-left: 8rpx solid transparent;
		content: "";
		vertical-align: middle;
	}

	.search-tip-item.active:after {
		border-top: 0;
		border-right: 8rpx solid transparent;
		border-bottom: 8rpx solid #666;
		border-left: 8rpx solid transparent;
	}

	.scroll-view {
		position: absolute;
		top: 60rpx;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 4;
	}

	.list-container {
		width: 100%;
		background: #fff;
	}

	.list-wrap {
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
		border-top: 1px solid #e1e1e1;
	}

	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.list-item .item-pic {
		width: 200rpx;
		height: 200rpx;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.list-item .item-info {
		margin-left: 20rpx;
		flex: 1;
	}

	.list-item .item-info .title {
		display: -webkit-box;
		overflow: hidden;
		max-height: 76rpx;
		text-overflow: ellipsis;
		font-size: 32rpx;
		line-height: 38rpx;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-item .item-info .attr .tip {
		display: inline-block;
		margin-right: 12rpx;
		padding: 0 5rpx;
		height: 32rpx;
		border: 1rpx solid #ff7362;
		border-radius: 5rpx;
		color: #ff7362;
		font-size: 20rpx;
		line-height: 32rpx;
	}

	.list-item .item-info .data {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;
	}

	.list-item .item-info .data .myd,
	.list-item .item-info .data .sell {
		color: #05a9f0;
		font-size: 26rpx;
		line-height: 40rpx;
	}

	.list-item .item-info .data .myd1,
	.list-item .item-info .data .sell {
		color: #999;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.list-item .item-info .data .price {
		color: #999;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.list-item .item-info .data .price .num {
		color: #ff4f32;
		font-size: 32rpx;
		line-height: 40rpx;
	}


	.sort-group {
		background: #fff;
	}

	.sort-item {
		position: relative;
		padding: 0 30rpx;
		height: 78rpx;
		border-bottom: 2rpx solid #e5e5e5;
		color: #666;
		font-size: 28rpx;
		line-height: 78rpx;
	}

	.sort-item-active {
		color: #1677ff;
	}

	.sort-item-active:after {
		position: absolute;
		top: 50%;
		right: 20rpx;
		display: inline-block;
		margin-top: -14rpx;
		width: 22rpx;
		height: 18rpx;
		background: url("") center no-repeat;
		background-size: contain;
		content: "";
	}

	

	.filter-box {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 108rpx;
		left: 0;
		display: -webkit-box;
	}

	.filter-hd {
		width: 220rpx;
		height: 100%;
		background: #f2f6f9;
	}

	.filter-hd-item {
		position: relative;
		padding: 0 20rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.filter-bd-item-active,
	.filter-hd-item-active {
		background: #fff;
		color: #1677ff;
	}

	.filter-bd-item-active:after {
		position: absolute;
		top: 50%;
		right: 20rpx;
		display: inline-block;
		margin-top: -14rpx;
		width: 22rpx;
		height: 18rpx;
		background: url("") center no-repeat;
		background-size: contain;
		content: "";
	}

	.filter-bd {
		padding: 0 20rpx;
		height: 100%;
		-webkit-box-flex: 1;
	}

	.filter-bd-item {
		position: relative;
		padding: 0 20rpx;
		height: 78rpx;
		border-bottom: 2rpx solid #e5e5e5;
		font-size: 28rpx;
		line-height: 78rpx;
	}

	.control-bar-block {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		display: -webkit-box;
		padding: 14rpx 20rpx;
		height: 80rpx;
		background: #fafafa;
	}

	.control-back-btn {
		margin-right: 20rpx;
		width: 170rpx;
		height: 76rpx;
		border: 2rpx solid #b8b8b8;
		border-radius: 10rpx;
		color: #8a8a8a;
		text-align: center;
		font-size: 26rpx;
		line-height: 76rpx;
	}

	.control-confirm-btn {
		height: 80rpx;
		border-radius: 10rpx;
		background: #1677ff;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		line-height: 80rpx;
		-webkit-box-flex: 1;
	}

	.category {
		.category-wrapper {
			width: 100%;
			display: flex;
			flex-direction: row;
			position: absolute;
			top: 80rpx;
			bottom: 0;
			z-index: 4;
			margin-top: 50px;

			.left-wrapper {
				width: 180rpx;
				flex: 0 0 180rpx;
				background-color: #f6f6f6;

				.left-content {
					.title-content {
						width: 100%;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 25rpx;
						border-bottom: 1px solid #dedede;
						cursor: pointer;
						color: #666;

						&:last-child {
							border-bottom: 0;
						}

						&.onSelected {
							background-color: #fff;
							position: relative;
							color: #18c1b0;
							font-weight: 700;
							font-size: 28rpx;

							&::before {
								content: "";
								position: absolute;
								left: 0;
								top: 0;
								width: 10rpx;
								height: 100%;
								background: linear-gradient(124deg, #18c1b0 0%, #44c118 100%);
							}
						}
					}
				}
			}

			/* 景区列表 图片背景色块填充*/
			.category-content .product-item:nth-child(4n) .product-img {
				background-color: #f2dedc !important;
			}

			.category-content .product-item:nth-child(4n + 1) .product-img {
				background-color: #e6f2dc !important;
			}

			.category-content .product-item:nth-child(4n + 2) .product-img {
				background-color: #dcf0f2 !important;
			}

			.category-content .product-item:nth-child(4n + 3) .product-img {
				background-color: #e9dcf2 !important;
			}

			.right-wrapper {
				flex: 1;

				.right-content {
					width: 96%;
					margin: 0 2%;
					// border-left: 1rpx solid #efefef;
					box-sizing: border-box;

					.banner-wrapper {
						margin: 0 20rpx;
						padding: 0rpx 2%;
						padding-top: 30rpx;
						display: flex;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #dedede;
						position: relative;

						.category-title2 {
							width: 46%;

							.swiper-img {
								width: 100%;
								height: 200rpx;
								border-radius: 14rpx;
								// 图片背景色块填充
								background: #dcf0f2;
							}
						}

						.category-title3 {
							width: 49%;
							padding: 10rpx 20rpx;

							.category-title4 {
								font-size: 38rpx;
								font-weight: 700;
								padding-bottom: 10rpx;
								padding-top: 14rpx;
							}

							.category-title5 {
								font-size: 24rpx;
								color: #808080;
							}
						}

						.category-img {
							position: absolute;
							top: 50%;
							right: 0;
							width: 12rpx;
							height: 24rpx;
							margin-top: -24rpx;

							.swiper-img {
								width: 100%;
								height: 24rpx;
							}
						}

						.swiper-content {
							width: 100%;
							height: 180rpx;
							margin-bottom: 20rpx;

							.swiper-item {
								.swiper-img {
									width: 100%;
									height: 180rpx;
								}
							}
						}
					}

					.product-wrapper {
						.category-item {
							.category-title {
								height: 60rpx;
								font-size: 26rpx;
								line-height: 60rpx;
								font-weight: 500;
								padding-left: 20rpx;
								color: #000;
							}

							.category-content {
								display: flex;
								flex-direction: row;
								flex-flow: wrap;
								padding-top: 30rpx;
								margin: 0 20rpx;

								justify-content: space-between;

								.product-item {
									width: 100%;
									display: flex;
									justify-content: start;

									margin-bottom: 30rpx;

									.product-img {
										width: 200rpx;
										height: 200rpx;
										margin-bottom: 10rpx;
										border-radius: 14rpx;
									}

									.m-content {
										overflow: hidden;
										flex: 1;
										margin-left: 20rpx;
										border-bottom: 1rpx solid #EEEEEF;

										.product-title1 {
											font-size: 32rpx;
											font-weight: bold;

										}

										.product-tip {
											margin-top: 10rpx;
										}

										.product-tip .item {
											display: inline-block;
											padding: 0 8rpx;
											margin-right: 12rpx;
											border-radius: 4rpx;
											font-size: 24rpx;
											color: #0983FF;
											border: 1rpx solid rgba(9, 131, 255, .16);
										}

										.product-title {
											width: fit-content;
											font-size: 24rpx;
											padding: 3rpx 10rpx;
											margin-bottom: 20rpx;
										}

										.product-con {
											font-size: 28rpx;
											color: #666666;
											height: 40rpx;
											overflow: hidden;
											margin-top: 4rpx;

											text-overflow: ellipsis;
											white-space: nowrap;

											image {
												width: 24rpx;
												margin-right: 8rpx;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>